Designing new icons for the BBC's Global Experience Language

Thursday 22 August 2013, 13:51

Simon Rooney Simon Rooney Creative Director

Tagged with:

I'm Simon Rooney, Creative Director for the BBC Global Experience Language (GEL) and part of the User Experience and Design team for BBC Future Media.

In a previous post, my colleague Andrew Greenham gave an overview of the (then) recently launched BBC design guidelines and patterns for Mobile, IPTV and Tablet devices. This included an insight into the development of a distinctive new suite of icons for GEL.

Since then, the GEL Team have been busy working on a number of new design initiatives for Responsive, Navigation, Infographics and Games, to name just a few. These will be discussed at a later date.

In this post I’d like to focus on the recent completion of 119 additional GEL icons, designed to compliment our services based on specific requirements from BBC product areas like Travel, Sport & Childrens.

All the new icon sets were designed over the last three months, in collaboration with the agency Planning Unit.

As done previously, these icons were designed to enable a consistent visual language across all BBC digital platforms - web, mobile and television. In this respect, the icons are utilised in various capacities such as action and status as well as identity. They needed to be simple, unambiguous and where possible, unique to the BBC.

The icon style therefore, continues to embrace a contemporary British design aesthetic, presenting the personality and quirks of the BBC whilst being respectful of our broadcasting heritage.

This is demonstrated in the recent design of a microphone icon that is featured in the new Controls & Devices icon set. While other microphone icon examples take a modern representation, we thought that a nod towards an iconic, classic design felt more appropriate for the BBC.

Representing-the-BBC-personality.jpg Representing BBC personality in icon visual language

Travel Icons

This approach continued during the conceptual design phase of the new Travel icon set. We already had a ‘car’ icon to represent ‘traffic’ in our previous core icon set. This was created in association with R/GA  during the last icon design phase. However, as part of this new commission, it was now necessary to represent a number of additional modes of transport such as train, tube (underground), tram/metro, bus, ferry and commercial aircraft.

travel_development.jpg Original Travel Icon design explorations

Using the car icon as a stylistic starting point, we soon realised that taking a similar front-on view in each case, made it difficult to differentiate certain items such as the train, tube and tram/metro, especially at the required smaller sizes. Taking the iconic side profile view of the Inter-City train design, whilst incorporating the characteristic shapes of the windows & head-lights of the underground train, helped with the differentiation. They are both quintessentially British and yet universally recognised.

travel-set.jpg Examples from the new GEL Travel Icon set at 200% & 100% (32x32 pixels)

As mentioned previously, it was important that each icon was crafted at the required smaller sizes to maintain clarity and minimise unnecessary blurring. This was achieved by using 32x32 and 13x13 pixel grids in each case, restricting angles to fifteen degree increments (15, 20, 45 etc.) wherever possible, along with only using complete pixel stroke weights.

travel_detail.jpg Detailed examples of the 32x32 pixel and 13x13 pixel train icon with grid (at 600% & 100%) travel_icons_in_situ.jpg Travel Product page examples (Beta versions) incorporating new icons in situ

Sport Icons

The requirement for a brand new GEL set of Sport icons was a particular challenge in this design delivery. These were commissioned as a result of the successful usage of the Official Olympic icons last year in BBC Sport applications & services. Consequently, the GEL Icon design style needed to evolve slightly to allow for a more pictorial, dynamic approach, especially when representing the human figure.

For the most part, Sport categories could be represented using distinctive game accessories and equipment.

sport_accessories.jpg Sport category examples using game accessories (32x32 pixel versions at 200% & 100%)

However, certain Sport types such as athletics, gymnastics, judo and horse racing, needed to incorporate a human figure somehow. Up to that point, the use of people in the GEL Icon suite had been limited to very simple, generic forms.

sport_iconsketches.jpg Early Sport sketches using the human figure

It was obvious from the start that such a generic approach wouldn’t work for the Sport sub-set. So once again as a starting point, we took an unused horse-racing icon developed during the last design phase by R/GA. From this, we experimented with different styles, for example utilizing head-gear to communicate facial direction. We also looked at cropping the human torso to emphasize core action and concentrate on key sporting moments.

gel_generic_human.jpg Original GEL Icon examples that use generic human forms followed by early Sport examples

After consultation with representatives in the Sport design and editorial teams, we realized that trying to impose existing GEL styleguide rulings and techniques rendered the icons a bit too sterile and lifeless. Also, an over-reliance of the headgear device gave us problems for sports that didn’t really require them. Headbands and swimming caps looked particularly odd! In summary, these early examples lacked the personality, energy and excitement required.

So a less constrained approach was taken, using the full body shape and more anatomically correct proportions. Although we continued to utilize angles in multiples of 15 degrees as much as possible, there was less of an angle restriction when creating the human characters, to give us the required flexibility to reflect dynamic movement.

sport_volleyball_detail.jpg Detail of 32x32px and 16x16px Volleyball icon illustrating human treatment at 600% & 100%

To provide some synergy with the other GEL icon sets, line breaks were used to represent trailing/back limbs which taper at the hand/foot end to give the character some depth. Finally, the human face is defined by removing a flat section from the circular head to help give the character definition and direction.

sport_humanfinal.jpg Sport category examples using human forms (32x32 pixel versions at 200% and 100%)

The icons for Sport and Travel are already being incorporated into their respective Product areas and are being user-tested in prototypes as we speak. So, we look forward to hearing any feedback from you.

sporticons_insitu.jpg Sport icons in situ

The full GEL icon suite assets with all the new additions are now available to download from the iconography section of the GEL website along with an updated icon styleguide (PDF) .

Simon Rooney is Creative Director, GEL, BBC Future Media

Tagged with:

Comments

Jump to comments pagination
 
 
 

This entry is now closed for comments

Share this page

More Posts

Previous
Bitesize Study Guides

Tuesday 20 August 2013, 08:13

Next
What's on BBC Red Button 24 - 31 August

Friday 23 August 2013, 15:05

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts