A visual guide to the web design process

Style tiles are a design tool to display fonts, colours and web elements that communicate the essence of a visual brand for a website to a client.  A style tile allows one to deconstruct a website into its main visual elements similar to the paint chips and fabric swatches of an interior designer.

I have used the style tile to set out this post and provide a visual analysis of the BBC Website.

BBC News Website

BBC website as it appears on a desktop

The BBC news website is updated every 3 to 4 years. In 2015 the BBC news website was redesigned with mobile users in mind. This was a result of research that indicated 50 to 60% of all visitors to the website came from smart phone users, while in some countries the figure is as high as 90%.The website was designed by the in-house team and uses and a logarithm to combine top stories and most read stories with the targeted content, chosen from a range of more than 50,000 subjects.

Smart Phone Layout

BBC Website as it appears on a smartphone

Article Teaser

Color Palette

BBC Colour Palette

hex code


hex code


The navigation on the desktop version of the website has a hover state that displays a border which is a different colour for each menu item.The ‘news tab’ is a dark red, the ‘sports tab’ a yellow line, the weather tab is blue, the ‘shop tab’ is a royal blue and the ‘earth tab’ is black. These micro tabs help orientate and remind visitors that they are indeed on a link.


Teaser Heading

The BBC typeface for both the headings and the body copy is Helvetica.  Peer closely at the letters: if they are easy to read and without unnecessary flourishes, you may well be looking at an example of Helvetica typeface. Helvetica is one of those typefaces that everyone who owns a computer or has read a newspaper is familiar with.  It is a great choice for the BBC website as it communicates efficiently and quickly without imposing itself.

Font: Helvetica

Body Copy

Font: Helvetica

Paragraph Rules

Paragraph rules are used to organise content on the main page. The page is visually organised into different sections; such as Must See, The best reads of 2017. A paragraph rule or line is used to distinguish the visual hierarchy of each page.  They are a great choice for differentiating blocks of information.

Saving Space

Screen shot of content container on the BBC website
Screen shot of content container on the BBC website



teamSimon is a Sydney based digital designer. He is the Director of a boutique digital design studio, Bailey Street Design located in the vibrant inner west suburb of Newtown. Simon studied graphic design at Shillington College and specialises in web design for small and medium size businesses. Simon and his team (Toby the studio dog) are passionate about visual communication in the digital environment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.