Case study: BBC online visual language | Client: BBC | Studio: Research Studios

Despite recently announced cuts, a new ‘global visual language’ for the BBC’s online activities will be rolled out this year. We detail the project and gauge initial reaction to it

The project is an extensive undertaking that introduces new templates, grids and fonts in a bid to generate easier navigation and cleaner page layouts for the BBC’s online services. The work includes a more dynamic approach to incorporating type on top of imagery, the use of ‘carousels’ of content and standardised embedded media players.

Research Studios worked with the BBC’s head of user experience and design, Brownyn van der Merwe, and project lead, Ben Gammon, alongside its various internal teams on News and Sport, Homepage, Search and Search Products, Embedded Media Player, Global Navigation and Mobile. On the BBC Internet Blog, van der Merwe expanded on the changes being made. The overall aim, she says, has been to create “an underlying grid system that was flexible enough to enable many unique design variations, whilst still feeling coherent and considered.

“The new grid is based on 31, 16-pixel columns,” she continues, “with two left-hand columns that can be split into four, and one wider right-hand column, which will accommodate the advertising formats that appear on the international facing version of the site. We’re looking to create the effect of interwoven vertical and horizontal bands, making a feature of the right-hand column across the site. Along with the 16-pixel vertical grid we’ve also got an integrated eight-pixel baseline grid so that we can align elements on a page both vertically and horizontally.”

Van der Merwe also revealed that the new visual language involved a more dramatic use of typography. “As well as Gill Sans we’ve introduced big bold type in Helvetica or Arial, and restricted variations in size so that we have much greater consistency across the site,” she explained. “We also wanted to strip out any superfluous decoration and allow the content and imagery to shine through. To me this new visual language is exciting and refreshing. It also feels timeless, yet very of the moment.”

Research Studios also worked with the BBC on creating a highlight colour palette for its online activities. “Each colour has a tonal range to be used in contrast or in unison with the others,” says van der Merwe. “We’ve also got a neutral palette and a more restrained usage of gradients where the colours are next to each other on the colour wheel. Our recommendation is that pages have a predominantly neutral colour palette, with colour provided by large and dramatic imagery. The highlight colour is then used sparingly to create vibrancy and to draw the eye to key areas of the page.”

Research Studios’ creative director, Neville Brody, claims that this kind of approach is now more relevant than ever for most media publishers. “The new ways in which we will embrace and use information and entertainment in the future are being evolved and invented right now,” he says. “The core approach has been to find a simple, modern and compelling experience based around dramatic and scalable editorial concepts. 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.”

The BBC is currently seeking to implement new masthead and footer designs, while also looking at how best to treat the social networking elements of the site, including bookmarking, share functionality, comments, ratings and reviews. Research Studios will add more work to its blog, researchstudios. com, in the coming months as more elements of the project roll out.

THE RESPONSE:

Simon Piehl, creative director, Bureau for Visual Affairs

The visual language feels coherent and well considered and it does have a feel of appropriateness about it, all of which are important in my view. So in general I do quite like it. It’s not revolutionary, but it’s a solid piece of work – and, after all, we are talking BBC here, so the gravitas and solidity need to be part of the visual stance.

The overlays with the reversed type feel modern, though in some ways I wonder if this feels a little Channel 4 –they seem to own the overlaid type-on-bar corner of TV branding, though possibly I’m just imagining this. Most of the success will, however, lie in the usability and the way the user journey unfolds, something that is not apparent from the design at this stage. So, in many ways my feedback can only address little isolated bits, nitpicking, if you like. So, I picked three nits. Firstly, the news template reveals inset boxes in the text which, in my view, do little for readability, and seem very much print design orientated. The contrast on this particular element also appears very low – which, paired with the use of bold type and extremely narrow columns, makes it painful to read. Secondly, some of the icons too have a very “designed” feel and I’d question the use of such an extensive vocabulary of icons. I cannot imagine what most of them represent, though of course context will help the user. Finally, the vertical type in the ‘Now’ section is, in my opinion, all wrong. It reads bottom to top, but is right-aligned, distracting the eye and commanding too much attention. bureau-va.com

Malcolm Garrett, creative director, Applied Information Group

I like the whole process of simplifying the interface(s) overall and of introducing a better sense of consistency across the various BBC departments. They have been quite rigorous in that regard. As I haven’t been able to look in any real detail, my comments are general, but I just think the attitude is right, and have to admit to being an admirer of the BBC attention to detail. They’re kind of like the Apple of the broadcasting world. Admirable and slightly annoying at the same time. appliedinformationgroup.com

Fred Flade, freelance design director

Having only seen a very limited number of elements, it’s probably unfair to judge the work already – with a project as vast as this you really have to see this working across a number of very different BBC online entities. And this is the hardest bit with a project like this. How do you introduce a system that creates structure and unifies the visual hierarchy, without destroying diversity and limiting future design possibilities? Has the introduction of Apple’s iPad already opened up a few new interactive possibilities that the new design will have to stand up to when rolled out? It’s quite clear that Research Studios are doing a really thorough job in bringing great design craft to a very complex problem. It’s obvious this exercise will bring the different BBC sites closer together and instil order. If you ask me about my subjective initial reaction to what I’ve seen, I don’t think it’s the most innovative redesign and seems to lack unique interactive ideas. I wanted something a bit more radical. freeflade.com

What's the story?

The Storytelling issue, Oct/Nov 2017, is out now.
We invited writers to respond to our cover image
this month: read their stories inside.
PLUS: Tom Gauld, Oliver Jeffers, Giphy & S-Town

Buy the issue

The Annual 2018

The Creative Review Annual is one of the most
respected and trusted awards for the creative
industry. We celebrate the best creative work from
the past year, those who create it and commission it.

Enter now

DESIGNER

South East London - Competitive

MOTION GRAPHICS DESIGNER

London - £35,000 - £40,000

CREATIVE INTERIOR DESIGNER

Birmingham - Salary £30-£35k

CREATIVE RECRUITMENT CONSULTANT

Leeds, West Yorkshire - £20,000 - 30,000