BBC styleguide

On the BBC Internet Blog, Bronwyn van der Merwe (Head of Design and User Experience, Central UX&D) has written a really nice post about the BBC’s new styleguide for its web and mobile content.

There are a lot of good points to consider in “A new global visual language for the BBC’s digital services“, not least the drive to provide a unified and cohesive, yet flexible design across all of the electronic content. The BBC website is really big (there’s lots more than just News!), so it is interesting to have an insight into how they set about redesigning something so vast and disparate.

Tools of the trade

The Beeb have done a great job of incorporating lots of tools of the design trade. things like:

  • much improved use of typography and stricter rules on typefaces and sizes
  • layout grids, both vertical and baseline
  • a really coherent colour palette to go with the more neutral text content, and so on.

They are also beginning to drop left-hand vertical navigation menus in favour of horizontal menus, giving them a lot more screen ‘real estate’ to play with, and allowing for much more flow of the content. There are some beta pages for the Sports section of the site. They look pretty nice, but I wondered how they will display all that content… The BBC website rarely (never?) features any drop-down menus, but it looks like they would really make sense in this case.

Describing the experience

In the UX design world, it is normal to approach a project with the whole experience of the user in mind, not just “is the functionality there”. Don Norman describes this as the design ecosystem.

I am keen to approach projects I am involved in here in a similar way, and it has worked for me in the past. One method is to look at nouns, verbs and adjectives to describe this experience. That is, to literally break things down into “what things are involved in this interaction, or appear on this page” (e.g. search box, download button, video player, log in box, etc). “What things can happen here?” (e.g. download, search, filter, watch, log in, etc). “How do we describe this experience”… this sounds a bit fluffy, perhaps, but it is very important in allowing designers and developers to keep a common theme in mind.

The BBC seem to have done something this, having chosen the a number adjectives to describe what they want to achieve. The list includes:

  • current
  • authentic
  • joined-up
  • pioneering


I really like this aspirational and ambitious mindset, and it is presumably something that they plan to have permeate the design styleguide that they have produced. It will be interesting to see the changes as this filters across the BBC website.


5 thoughts on “BBC styleguide

  1. Sarah says:

    Hi Francis,

    I really really like this article. I’d be interested to hear what others thought about it, particularly with regards to the EBI’s websites and how their interfaces integrate together (The BBC’s services and EBI have quite a few parallels but the BBC does a much better job of bringing everything together in a consistent way).

    Also interesting:


  2. Yeah, the BBC are doing a good job, but they have a lot of people dedicated to working on that integration and consistency of websites, so…
    I think it is something we can certainly aspire to – we have a lot of talented people here, so I see no reason why it can’t happen.

    The Guardian article is a good one; thanks for the link.
    The Guardian website itself should also be considered, too, in terms of how they have applied a clever styleguide, site-wide. Good stuff.

  3. Sarah says:

    Yeah, I know they’ve got a *few* more people at their disposal 😉

    But like you said, I think we should aspire to approach the EBI’s look and feel in a similar way. I really think the time is ripe to start discussions about what the EBI needs to do in this regard, even if the EBI templates themselves won’t be revised for some time.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s