running words around
design education and visual communication
authored by chris m hughes

Retracing the BBC's Global Visual Language

Wednesday, 5 October 2011

The BBC is currently testing the beta version of its continuing Global Visual Language 2.0 project, which began back in 2008 when the corporation reviewed its sprawling online offering, and decided to try and unify its visual and interaction design.

What followed mirrored the general trend in web design in the last few years - wider, centered page layouts, an underlying grid system, and a magazine-style presentation full of larger headline fonts, colour-coded sections, better use of whitespace, and comprehensive accessibility features - and all controlled with css.

The BBC commissioned Neville Brody's Research Studios to create 'a modern British aesthetic', with innovative navigation and structure, a robust content management system, and a more satisfying user experience.

The result was the current module-based layout, launched late in 2009, which will soon be superceded once the beta site is finalised. The new offering will feature an improved content grid, set into a sliding jquery, and even more whitespace. You can read all about the project, and see some good examples of the colour scheme, navigation bars and grid layouts, in a great post on the BBC blog, which I've linked to at the bottom of this article. And here's a screenshot of the beta -

BBC Beta

What makes this continuing design evolution really interesting is that the BBC site contains links to old reportage in the layout and format of the relevant times - and this provides us with an arcane peek into the distant past of web design. Bear in mind that the BBC has always had development money, and each iteration was amongst the best of its time, at least in terms of presenting daily updated information to a broad audience.

To demonstrate this remarkable visual development, we can use a nice story from earlier this week, when the BBC reported on the joint winners of the Nobel prize for Physics. To see this in action, follow the links below in order, clicking back to this page to access each link -

Here is the current page featuring the article. At the foot of the page, there is a short list of related links.

Click on this one first:
Mysterious force's long presence - this is the BBC site in 2006. It has three columns, laid out using tables, and is set to 800px wide. Above the footer are three rudimentary module boxes in a centered position, and blockquotes and floated images feature in the central column. The site also has externally linked css files.

Now go back and choose this one:
Distant supernova shows Universe defies gravity - this is the BBC site in 2001, three columns, laid out in tables and set to 600px wide. Note the column-filling image and right-aligned section menus. All the styles are inline, and Verdana is the dominant font.

And finally go back and click on this one:
Universe's expansion speeds up - this is the BBC site in 1998, a by today's standards, its a real shocker. Three columns, laid out in tables and 600px wide. All the content feature inline styles and clunky table borders. Underlines are the only text decoration on the hyperlinks. This website is looking back almost as far in time as the cosmologists in the article were.

Modern cutting edge web design is moving towards responsive layouts, where media queries are being used to re-orient websites to narrower layouts for the various devices we now access the web on. The effect is not unlike browsing through these BBC versions, although the user experience is almost unrecognisable.

BBC Online @ wiki
BBC's Global Visual Language 2.0