CR Blog
New visual language for BBC online
Posted by Mark Sinclair, 18 February 2010, 15:33 Permalink Comments (28)
Dynamic content module with text links
A new 'global visual language' for the BBC's online activities by Research Studios is set to be rolled out over the next few months. We have a selection of images from their ongoing work for the network...
The project, won by the studio in August last year, apparently stems from an intention to unify cross-platform concepts – over both bbc.co.uk and bbc.com – and consolidate all design elements, such as typography, colour palette and iconography, into a style guide for the organisation.
News page (left) and embedded player (top right) on baseline grid
From the examples of work that the studio released today, it seems an extensive undertaking, with new grids, templates and fonts emerging, making for much cleaner page layouts. It also suggests a more dynamic approach to incorporating type ontop of imagery and a desire to use 'carousels' of scrollable content and some neat-looking embedded media players.
Grid structure
Research Studios worked with the BBC's various internal teams (including head of user experience and design, Brownyn van der Merwe, and project lead, Ben Gammon) on News and Sport, Homepage, Search and Search Products, Embedded Media Player (EMP), Global Navigation and Mobile.
News page template
"To have been so intrinsically involved in changing and growing the design and philosophy of the BBC's digital offering has been amazing", says RS creative director, Neville Brody. "This point in time is a major juncture not only for the BBC but also for all media publishers, and the new ways in which we will embrace and use information and entertainment in the future are being evolved and invented right now."
'Drawers' device with various typographical styling
"The core approach has been to find a simple, modern and compelling experience based around dramatic and scalable editorial concepts," continues Brody. "Today, BBC online is an extraordinarily expansive offering with over 400 top-level sites, and this is a clearly a work in progress. I envisage more and more inventions and nuanced ideas coming into play as the project evolves and the design starts to reach into the distant corners of the map."
Concepts for using type on imagery
"Together with the BBC we have to-date established the central philosophy and core building blocks or DNA, and, we hope, to continue to work closely with the organization in depth across differing and different BBC sites in order to expand the language and establish its scalability."
As part of the style guide created for the BBC online, Research Studios came up with the following colour wheel and neutral wheel (whites, greys and blacks), gradient usage and colour usage guidlines:
And here's the series of icons created for use on all the BBC's online channels:
The studio will add more work as it's completed to researchstudios.com over the next few months.
28 Comments
How very...dull
2010-02-18 18:23:05
And what if one’s Headline is longer than one word (say 15), and one’s Sub(-)Headline longer than two (say 30)?
What if either of them includes a long word, like deinstitutionalization?
2010-02-18 19:43:41
This is super stuff! I love it! I can't wait to see this on the BBC website and I love the process of creating the visual design. You had me at 'grid'! The opaque overlay on the images is a complete winner too.
Very great, love it already. Hope BBC can continue to use images with this properly, but I'm sure they're aware of it.
T
2010-02-18 22:49:17
What exactly is the 'ADHD' icon for?
2010-02-19 00:07:50
This is really nice, clear and simple. BBC has been pretty good at web content thus far long may it continue. It is very Windows Phone 7 Series
2010-02-19 01:19:41
The over use of Arial/Helvetica makes it look dated already.
2010-02-19 09:35:48
ADHD is for Attention-deficit hyperactivity disorder
http://en.wikipedia.org/wiki/Attention-deficit_hyperactivity_disorder
2010-02-19 10:17:13
Couldn't see it in the article. Here's the link to the original blog post and discussion on the Beeb:
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html
2010-02-19 11:03:18
Does it make me a complete geek if I think the is the most exciting thing ever?
Ofcourse its not meant to be exciting, its meant to be easy to use (both for the end-user and the BBC admin staff). The BBC's content is exciting enough so the UI doesnt need to be "interesting".
2010-02-19 12:56:28
I love the larger images and Helvetica. I don't find it at all dull - functional certainly. Joe makes a good point about the length of headline and sub-headline but I'm pretty sure they would have thought of that? Look forward to seeing more, and particularly excited to see how iPlayer develops.
2010-02-19 13:01:36
ADHD: isn't it High Definition and Audio Description in this context?
2010-02-19 13:09:49
this is super dull
2010-02-19 13:14:15
ADHD is for viewing an advert in high definition, they're changing the unique way the BBC is funded by selling ad space and stopping us having to buy a TV license. Maybe? No, I didn't think so.
2010-02-19 13:22:17
What relief to see that a job of such importance and magnitude as this has been done properly. This is graphic design in its purest form: making the rules which make sense of information and deliver it in an understandable way. Well done to Jeff Knowles and the team at Research Studios and well done to the client for approving these ideas.
2010-02-19 13:48:22
Anyone else recognise the use of the TimeMachine icons there :p Apple lawsuit waiting to happen ...
@dani + Michael: I'm guessing neither of you are designers.
2010-02-19 13:51:33
Dull? C'mon, it's anything but dull! Like the BBC, this branding appeals to the broadest audience. It needs to be simple, functional, but nice. If you're looking for something overdesigned, um, go buy an Ed Hardy tshirt?
2010-02-19 14:07:53
These layouts are sadly guilty of my number one typographic bugbear:
– the mixing of bordered boxed content with unboxed content –
Problem is either the box lines up or the content lines up. You'll never get it to hang together properly, it's an insoluble.
Note the boxed area "Lisbon Treaty" sticking out like a sore thumb. Also note the strange little cramped underscores.
I'm myself not sure that the baseline grid is the best way to go online either, it's not really how HTML works. Much better to have blocks. Even better make them elastic.
Also, big missed opportunity: Use Gill Sans! Sure helvetica/arial is terminally boring. Gill is actually in the BBC's identity from years back. It's pretty much 100% websafe apart from mobile phones. It's aesthetically perfect for the BBC, based on Johnson Underground. Omnibus.
_________________________________
But still, this seems to be good solid typographic engineering, the icons are clear & simple, although I'm not 100% on how well they'll shrink down.
This is certainly an upgrade, and while one can find faults, it's solid work done thinking the right way about the project: standards, manners, clarity.
2010-02-19 14:28:40
@ da bishop: don't worry, GIll is in there. Check the post on our site and you'll see it features in the type specimens for the guidelines and dotted around some other places. You'll see it a bit more as the designs start to roll out.
2010-02-19 14:58:57
Pretty sweet project - cant wait to see it rolled out.
2010-02-19 18:30:30
James Nelson: There's no reason with current web technologies, to have to resort to Arial & Helvetica. You could do everything in Gill if you wanted. Sure loads of people probably won't be able to see it but one day they will. It's only by speccing for the future that we can move graphic design online forward.
2010-02-20 05:17:15
Good to see the beeb employing some pure typographic rigour! Good work research. Looking forward to seeing how this rolls out. The challenge will be if the html can live up to the psd...
2010-02-20 14:17:16
Using Helvetica you can't be wrong... I love this concepts where you use "Headline" consisting one word... Looks good until the first real headline..:)
2010-02-20 20:35:48
I agree with Andy West.
A very rigorous approach, which should stand the BBC in good stead for the future-especially when the guidelines and visual elements get handed over to other agencies to work with.
Hopefully, from an aesthetic point of view, this will help the BBC catch up with more graphically progressive channels.
2010-02-21 21:49:04
Hi Michael [linefeed] - I hear you, re: the future, but it wouldn't be much good if loads of people who rely on the BBC site can't see it properly! Thanks to all here for all the comments by the way.
2010-02-22 11:05:30
I like it, and its definitely not dull. Please do something about the BBC News and Sports sites, theyve been looking outdated for ages.
2010-02-23 02:03:41
Not amazing, but I love the use of the old BBC clock!
2010-02-24 14:08:57
The 'New Visual Language' seems to be coming to life iteratively with the Doctor Who pages coming first... my first thoughts seem to be that it looked better 'on paper'. http://www.bbc.co.uk/doctorwho/dw
2010-05-26 14:49:45
Well. I noticed the updated BBC News site went live this week.
WHAT AN ABSOLUTE HASH UP!
It's so unnecessarily busy with illogical columns with a typographic hierarchy spacing that just baffles me.
Not to mention the absolutely wonderful cross-platform compatibility..... 10 out of 10.
2010-07-15 13:55:41
Get the RSS Feed
Most recently commented
| Say hello to Eurostar (33) |
| CR August issue: Dress Up Designer (8) |
| Beer + taxidermy = packaging innovation (10) |
| Stamps of Approval (45) |
| CR's incredible dissolving bag (97) |
Most read
| Carnovsky's RGB wallpaper |
| Nice Record Sleeves |
| Carmichael's tummy text |
| Mexican skaters burn for Burn's new campaign |
| Beer + taxidermy = packaging innovation |
Subjects
| Advertising | (705) | |
| Art | (221) | |
| Books | (145) | |
| Digital | (232) | |
| Graphic Design | (634) | |
| Illustration | (319) | |
| Magazine / Newspaper | (109) | |
| Music Video / Film | (525) | |
| Photography | (213) | |
| Type / Typography | (144) |
