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
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
Article Teaser
Color Palette
BBC Colour Palette
hex code
#bb1919
hex code
#000000
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.
Typography
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
Simon 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