BBC Web Styleguide

7/28/2019 BBC Web Styleguide

1/42

GELS

tyleguide

Version03

|March2012

Building a

Global Experience Languagefor the BBC

GEL Styleguide

UX&D

GELS

tyleguide

Version03

|March2012


2/42

UX&D 2

GELS

tyleguide

Version03

|March2012

00 Introduction01 Philosophy

02 Foundations03 Building Blocks04 Patterns05 Thanks


3/42

UX&D 3

GELStyleguide

Version03

|March201200 Introduction

We are evolving a global experience languagefor the BBCs digital services.

The GEL guidelines are a reference point for alldesigners creating BBC websites. For furtherinformation on applying GEL across Mobile, IPTVand Tablet devices go to www.bbc.co.uk/GEL

The design philosophyunderpins everything

we do as a user experience and design team.It informs the way our services look, the waythey behave and the way we operate as a team.

The foundations should be used by all. Theyinclude a vertical grid, baseline grid and

recommended templates.


4/42

UX&D 4

GELStyleguide

Version03

|March201200 Introduction

The building blocks help create consistentinteraction and visual design across the site;

from typography to iconography.

Our design pattern library will offer acomprehensive set of re-usable pagecomponents.

We welcome feedback and suggestions.


5/42

UX&D 5

GELStyleguide

Version03

|March2012

01 Philosophy

10 PrinciplesCultural Map


6/42

UX&D 6

GELStyleguide

Version03

|March201201 Philosophy10 Principles

01 Modern BritishOur services are woven into the fabric of

everyday life in the UK. They embrace a modernBritish design aesthetic that extends outsidenational boundaries. Our character is vibrant andsometimes quirky.

02 CompellingOur voice ranges from serious and authoritative

through to witty and entertaining. We soundauthentic and relevant, warm and human.We engage our audiences with compellingstorytelling.

03Authentic

We value the familiarity and trust placed in us.We acknowledge the BBCs heritage of iconicdesign and broadcasting history with subtlereferences.


7/42

UX&D 7

GELStyleguide

Version03


04 PioneeringWe pioneer design innovations that surprise and

delight. We introduce the unexpected but alwaystake our audiences with us.

05 CurrentWe curate a timeline of Britain; reecting thepresent as it happens and adding relevantcontextual links with the past.

06 DistinctiveWe stand out by looking to tomorrow instead ofsimply referencing the design trends of today. Westrike a balance between cookie-cutter designand beautiful anarchy.


8/42UX&D 8

GELStyleguide

Version03


07 Joined-upAll our services and platforms are one connected

whole which deliver experiences sensitiveto their context of use. We enable coherentjourneys both within and outside familiar paths.We connect our audiences where there areshared interests and experiences.

08 Local/Global

We need to speak to everyone but we recognisethe individual. Our message is scalable andlocalisable.

09 UniversalOur messages are clear and are communicated

through simple, useful and intuitive interfaces.Our services are inherently open and accessible.

10 BestLast but not least, we put quality rst


9/42UX&D 9

GELStyleguide

Version03

|March2012

GEL is the glue that ties all BBC servicestogether. The BBC masterbrand will speak

directly to the audience on the homepage.A rich brand experience will still be distinctlyBBC on Doctor Who.

01 PhilosophyCultural Map

Satellite brands

Programmes

Channels

Genres

Sport, News, Weather

Homepage, Search, Help


10/42UX&D 10

GELStyleguide

Version03

|March2012

02 Foundations

Universal GridColumnsGrid VariationsThe BaselineThe MastheadHorizontal NavigationThe Local MastheadBackgroundsThe Footer


11/42UX&D 11

GELStyleguide

Version03

|March2012

976px page width16px unit

Your starting point is a universal grid, dividedinto 61 x 16px vertical units. This has been

created to align with existing EMP sizes, imageratios and advertising requirements.

02 Foundations Universal Grid


12/42UX&D 12

GEL

Styleguide

Version03

|March2012

The grid allows for a standard split acrossthree columns with 16px gutters, creating a

feature of the slightly wider column on the rightthat accommodates xed panel adverts.

02 Foundations Columns

304px 304px 336px


13/42UX&D 13

GEL

Styleguide

Version03

|March2012

Columns can be further divided. The grid allowsfor a huge range of experimental layouts and

templates.

02 Foundations Grid Variations


14/42UX&D 14

GEL

Styleguide

Version03

|March2012

8px

Were also employing an 8px baseline grid tohelp with vertical alignment of page components.

Slavish adherence to the baseline isnt necessaryfor all typography but it does help to createvertical rhythm on the page.

02 Foundations The Baseline


15/42UX&D 15

GEL

Styleguide

Version03

|March2012

The global masthead includes the globalnavigation links with additional links in a more

dropdown panel. BBC iD is positioned to the rightof the BBC blocks with the Search entry eld atthe extreme right.

02 Foundations The Masthead

Note: A selection of masthead variations areavailable for use; white (as seen below), 20% black,

40% black, 70% black, grey, transparent white and

transparent black.

40px8px

7px

Pushdown open

12px8px 8px12px

Signed in state


17/42

UX&D 17

GEL

Styleguide

Version03

|March2012

The new masthead approach providesthe exibility to accommodate various

brand elements.

02 Foundations The Local Masthead


18/42

UX&D 18

GEL

Styleguide

Version03

|March2012

The local masthead will vary in height dependingon the type of service. The minimum depth will

be 64px for content heavy sites such as News.


Primary Navigation 12pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03 | Primary navigation link 04

Secondary Navigation 12pt | Secondary navigation link 01 | Secondary navigation link 02 | Secondary navigation link 03 | Secondary navigation link 04

64px

16px

20px

20px

SECTION TITLE SUBTITLE

48px Gill Sans Regular 34px Gill Sans Regular

8px


19/42

UX&D 19

GEL

Styleguide

Version03

|March2012

Other brands such as Radio 1 or BBC One maybe deeper.



Variable height

16px

MAJOR BRAND SUBTITLE48px Gill Sans Regular 34px Gill Sans Regular

8px

02 F d i Th L l M h d


20/42

UX&D 20

GEL

Styleguide

Version03

|March2012

Rich programme experiences such as Doctor Whocould be deeper still up to 392px. The default font

for the local masthead is Gill Sans regular (48px).Local branding should be left-aligned.


Primary Navigation 16pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03

16px

40px

MAJOR BRAND HOMEPAGE SUBTITLE34px Gill Sans Regular

8px

202 F d ti B k d


21/42

UX&D 21

GEL

Styleguide

Version03

|March2012

There is no longer a requirement for consistentplacement of page backgrounds or pageshoulders across the site. Backgrounds can bewhite, full colour, gradient or image backgroundsand may feature within the content area, withinindividual panels or as free-oating elements.

02 Foundations Backgrounds


CONTAINED BANNER


FULL BACKGROUND IMAGE

202 F d ti B k d


22/42

UX&D 22

GEL

Styleguide

Version03

|March2012

As well as the default full screen or repeatedbackground image, images can be xed to thetop, bottom, left and/or right of the page contentor browser viewport.

02 Foundations Backgrounds


BACKGROUND LEFT & RIGHT


BACKGROUND TOP & BOTTOM

202 Fo ndations The Footer


23/42

UX&D 23

GEL

Styleguide

Version03

|March2012

The GEL footer is a variant of the existingGVL 2.0 footer. Colour options are white, grey,black and semi-transparent over an image.

02 Foundations The Footer

16px 176px336px

16px

16px

104px

2


24/42

UX&D 24

GEL

Styleguide

Version03

|March2012

03 Building BlocksTypographyIconographyLinking ConventionsImage Size Ratios

203 Building Blocks Typography


25/42

UX&D 25

GEL

Styleguide

Version03

|March2012

Arial Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890!@$%^&*()_+Arial Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890!@$%^&*()_+

Gill Sans Regular



1234567890!@$%^&*()_+

GEL uses bold typographyto create strongerhierarchies and drama across the site. Were movingfrom Verdana to Arial as the BBCs default web font forboth headers and body copy.




26/42

UX&D 26

GEL

Styleguide

Version03

|March20103 Building Blocks Typography

Large bold type should be used to establisha clear information hierarchy. These are therecommended type sizes.

Arial Bold48px48px Leading / -40 Tracking Dev Pixel Spec: -2px Letter spacing

Arial Bold 36px36px Leading / -30 Tracking Dev Pixel Spec: -1px Letter spacing




Arial Bold20px20px Leading / -47 Tracking Dev Pixel Spec: -1px Letter spacing

Arial Bold16px18px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Arial Bold 14px18px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Arial Bold 13px16px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Arial Bold 12px

ARIAL BOLD CAPITALISED 11px



27/42

UX&D 27

GEL

Styleguide

Version03

|March201

Georgia Italic



1234567890!@$%^&*()_+

Georgia Italic should be used to denote a short quotationfrom the BBC Blogs or third party websites.

The recommended type size for quotations from BBCBlogs or third party websites is Georgia Italic 16px.

Georgia Italic16px19px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Georgia Italic14px16px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Georgia Italic13px

16px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing

Georgia Italic12px

15px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacing




28/42

UX&D 28

GEL

Styleguide

Version03

|March20103 Building Blocks Typography

Putting it together with body copyArial is recommended for headings and body copyon the page.

The use of Arial for short quotations is used to highlight article pullout quotesin a module. This treatment is consistent with the use of Arial to represent theeditorial voice in the main body copy.

Super Header 36px

Header 32pxSubheader 20pxTIME STAMPS11PT CAPITALS

Copy 13px Arial Bold on 16px leading Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et,condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.Suspendisse porta commodo leo.

Copy 13px Arial Roman on 16px leading Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et,condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.Suspendisse porta commodo leo. Sed tincidunt tincidunt massa.

8pxCopy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla. Libero diam, condimentum et,

condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.Suspendisse porta commodo. Sed tincidunt integertincidunt massa. Cras scelerisque diam arcu. Donecegestas. Integer a mi. Aenean tempus, mi luctusimperdiet, erat ligula semper turpis, consecteturfaucibus libero ante non sem. Aliquam quis diam.Pellentesque mollis nisi eget purus. Aenean iaculismetus vel sem. Integer at erat.

Maecenas ultrices lorem sit amet diam. Aliquamsollicitudin tristique nulla. Duis libero diam, condimentum et, condimentum in, congue eu, tellus.Phasellus eu elit at nisi ultricies lobortis. Suspen

disse porta commodo leo. Sed tincidunt tincidunt.

Link Nam dictum nibh eu arcuLink Donec egestas integer a mi

An editorialpullout quotetaken fromthe mainbody copy inArial Bold.

Editorial Voice

BBC



29/42

UX&D 29

GEL

Styleguide

Version03

|March20103

Using Georgia Italic should be limited to highlight a shortquotation within a module on the page.

Georgia Italic should not be used for full paragraphs or pages of body copy. Thereforethe BBC Blogs website and comments sections on pages should continue to use Arial.

A quote fromBBC Blogs or ashort comment

from a thirdparty site.Georgia Italicmakes this quotemodule standout from therest of the pagewhich uses Arial.

User's NameMarch 2012

Rory Cellan-Jones@BBCRoryCJLorem ipsum dolor sit amet, consectetur adipis

icing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.2 minutes ago Ignacio de los Reyes@BBC_de_los_Reyesbbc.co.uk/gelExcepteur sint occaecat cupidatatnon proident, sunt in culpa.3 minutes ago

Valeria Perasso@bbc_perassoSed ut perspiciatis unde omnis iste natus error sitvoluptatem accusantium doloremque laudantium,totam rem aperiam, eaque ipsa quae ab illo.4 minutes ago

Content from Twitter. Learn more

Building Blocks Typography

Twitter module example

12



30/42

UX&D 30

GEL

Styleguide

Version03

|March201

Title header 32px

8px

16px

8px

16px

Copy 13px Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Fusce sed leo. Maecenasultrices lorem sit amet diam. Aliquam sollicitudintristique nulla. Duis libero diam, condimentum

Title header 32px16px

16px

16px

16px

Copy 13px Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Fusce sed leo. Maecenasultrices lorem sit amet diam. Aliquam sollicitudintristique nulla. Duis libero diam, condimentum

Our typographic style relies on tight tracking,tight leading and large headers. There shouldbe consistent spacing around headers and bodycopy. Either 8px or 16px above and to the leftwhen content is contained


12



31/42

UX&D 31

GEL

Styleguide

Version03

|March20

Title header 32px

8px

16px

16px

Body copy 13px Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Mae-cenas ultrices lorem sit amet diam. Aliquamsollicitudin tristique nulla. Duis libero diam, con-dimentum

Title header 32px16px

16px

16px

Body copy 13px Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Mae-cenas ultrices lorem sit amet diam. Aliquamsollicitudin tristique nulla. Duis libero diam, con-dimentum

or aligned to the grid when thereis no container.


01203 Building Blocks Iconography


32/42

UX&D 32

GEL

Styleguide

Version03

|March20


We have designed a new set of icons to work inharmony with the new visual language. The defaultsize is 13px and icons can be used with or withouta at button container. These can be used in anycolour unless otherwise specied.

Previous Next Up Down To Top To Bottom

Close/Remove/No/Delete

Download Upload

SearchUnlock

Lock/Security

Yes Help Info/Caption Alert/WarningPrint Email

Vocab On/Off Refresh Alarm/Reminder Duration Countdown Expires SettingsDegradedContent

Grid View List View (text)

Zoom In Zoom Out

HomeList View(text and thumb) New/New items Quote External LinkLoadingChapters Trafc

Link to This

Embed

For more information or for the full set of icons, visit bbc.co.uk/gel/web/building-blocks/iconography/icons



33/42

UX&D 33

GEL

Styleguide

Version03

|March20

Header 36px

Subheader 20pxTIME STAMPS 11Px CAPITALS

Body Copy 13px Arial Bold on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla.

Body Copy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla.

Link to a full episode on iPlayer 13px

Link to a video clip 13px

Link to an audio clip 13px

COMMENTS 11PX CAPITAL

EMAIL 11PX CAPITAL

PRINT 11PX CAPITAL

For text links to audio and video content, icons shouldappear to the left of text.


8px



34/42

UX&D 34

GEL

Styleguide

Version03

|March20

When using icons with images, media icons onimage promos should sit in the the bottom leftof the image and have 100% opacity. Theyshould inherit the background colour to givethe impression of cutting into the image.

Programme information should sit underneaththe image (with the exception of images witha width below 144px where information should

sit to the right of the image).

g g p y

Recommended icon sizes

Programme title to theright of images with awidth below 144pxEpisode title

Programme title below imageEpisode title

01203 Building Blocks Linking Conventions


35/42

UX&D 35

GEL

Styleguide

Version03

|March20

Links should comply with existing standards andguidelines. They should be easily distinguishablefrom body copy using a combination of bold typeand colour, along with underline or underline onhover. On rollover links should change colour(and underline if under 24px).

g g

Header 36px

Subheader 20pxTIME STAMPS 11Px CAPITALS

Body Copy 13px Arial Bold on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla.

Body Copy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit ametdiam. Aliquam sollicitudin tristique nulla.

Link to a full episode on iPlayer 13px

Link to a video clip 13px

Link to an audio clip 13px

COMMENTS 11PX CAPITAL

EMAIL 11PX CAPITAL

PRINT 11PX CAPITAL

8px

01203 Building Blocks Image Size Ratios


36/42

UX&D 36

GEL

Styleguide

Version03

|March20

We recommend using 16:9 images at any size thataligns with the grid. This is particularly importantwhere there is likely to be signicant re-use acrossBBC Online.

g g

16:9

01203 Building Blocks Image Size Ratios


37/42

UX&D 37

GEL

Styleguide

Version03

|March20

Backgrounds, banners, promos and cut-outs couldbe a variety of shapes and sizes as long as there isalignment with the universal grid.

2012


38/42

UX&D 38

GEL

Styleguide

Version03

|March2

04 Patterns

201204 Patterns Design Specication


39/42

UX&D 39

GELStyleguide

Version03

|March2

CarouselAutosuggestImage galleryTooltipsLocal navigationContextual navigationLocalisationPaginationOverlay panelsIdentityInfographics

Local search

AccordionsForm elementsDrag and dropEditorSliderSortableTimelineMappingLegacy contentVote

The design patterns library will be a livingrepository for simple, re-skinnable pagecomponents. Several of these patternsare available at bbc.co.uk/gel

2012


40/42

UX&D 40

GELStyleguide

Version03

|March2

05 Thanks

201205 Thanks


41/42

UX&D 41

GELStyleguide

Version03

|March2

BBCMarcelo MarerBronwyn van der MerweLiz Citron

Jason FieldsAdam PowersDuncan SwainChris SizemoreBen GammonSteve GibbonsMichael TiffanyPaul SissonsYuri Kang

Mike AlbersJo PattersonChris HankinsFrances McNamaraYasser RashidAndy BraxtonSean McVeighDan OgunkoyaNeil BramahLyra Xharra-Loxha

Dan ShallcrossAdam HutchinsonAnnoushka Ferrari

Sarah ChallisOlivia RofailMike AthertonAudrey RapierLynsey SmythSylwia FrankowskaNourdine ArsalanePatrick WalshToby Mildon

Isabel NunesMat HampsonTom CartwrightRichard HodgsonAndrew GreenhamRowun GilesSimon RooneyKaren WongNatalie Smart

The GEL Steering Group, the Global Design Working Groupand all contributing designers

Research StudiosNeville BrodyNick HardJames Nelson

James Le BeauMorleyJeff KnowlesGeorge SheldrakePhil Rodgers

Fitzroy & FinnPaul Finn

2012


42/42

GELStyleguide

Version03

|March2

For more information visit bbc.co.uk/gel

Documents

BBC Web Styleguide