1、GELStyleguideVersion02|October2011,GEL Styleguide,Building a,Global Experience Languagefor the BBC,UX&D,GELStyleguideVersion02|October2011,00 Introduction01 Philosophy02 Foundations03 Building Blocks04 Patterns05 Thanks,UX&D,2,GELStyleguideVersion02|October2011,00 IntroductionWe are evolving a globa
2、l 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/GELThe design philosophy underpins everythingwe do as a user experience
3、 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 andrecommended templates.,UX&D,3,GELStyleguideVersion02|October2011,00 IntroductionThe building blocks help cre
4、ate 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.,UX&D,4,GELStyleguideVersion02|October2011,01 Philosophy10 PrinciplesCultural Map,UX&D,5
5、,GELStyleguideVersion02|October2011,01 Philosophy 10 Principles01 Modern BritishOur services are woven into the fabric ofeveryday life in the UK. They embrace a modernBritish design aesthetic that extends outsidenational boundaries. Our character is vibrant andsometimes quirky.02 CompellingOur voice
6、 ranges from serious and authoritativethrough to witty and entertaining. We soundauthentic and relevant, warm and human.We engage our audiences with compellingstorytelling.03 AuthenticWe value the familiarity and trust placed in us.We acknowledge the BBCs heritage of iconicdesign and broadcasting hi
7、story with subtlereferences.,UX&D,6,GELStyleguideVersion02|October2011,01 Philosophy 10 Principles04 PioneeringWe pioneer design innovations that surprise anddelight. We introduce the unexpected but alwaystake our audiences with us.05 CurrentWe curate a timeline of Britain; reflecting thepresent as
8、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.,UX&D,7,GELStyleguideVersion02|October2011,01 Philosophy 10 Pri
9、nciples07 Joined-upAll our services and platforms are one connectedwhole 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/GlobalWe need to sp
10、eak to everyone but we recognisethe individual. Our message is scalable andlocalisable.09 UniversalOur messages are clear and are communicatedthrough simple, useful and intuitive interfaces.Our services are inherently open and accessible.10 BestLast but not least, we put quality first,UX&D,8,GELStyl
11、eguideVersion02|October2011,01 Philosophy Cultural MapGEL is the glue that ties all BBC servicestogether. The BBC masterbrand will speakdirectly to the audience on the homepage.A rich brand experience will still be distinctlyBBC on Doctor Who.ProgrammesChannels,GenresSport, News, WeatherHomepage, Se
12、arch, HelpUX&D,Satellite brands,9,GELStyleguideVersion02|October2011,02 FoundationsUniversal GridColumnsGrid VariationsThe BaselineThe MastheadHorizontal NavigationThe Local MastheadBackgroundsThe Footer,UX&D,10,GELStyleguideVersion02|October2011,02 Foundations Universal GridYour starting point is a
13、 universal grid, dividedinto 61 x 16px vertical units. This has beencreated to align with existing EMP sizes, imageratios and advertising requirements.,UX&D,16px unit,976px page width,11,GELStyleguideVersion02|October2011,02 Foundations ColumnsThe grid allows for a standard split acrossthree columns
14、 with 16px gutters, creating afeature of the slightly wider column on the rightthat accommodates fixed panel adverts.,UX&D,304px,304px,336px,12,GELStyleguideVersion02|October2011,02 Foundations Grid VariationsColumns can be further divided. The grid allowsfor a huge range of experimental layouts and
15、templates.,UX&D,13,GELStyleguideVersion02|October2011,02 Foundations The BaselineWere 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.8px,UX&
16、D,14,GELStyleguideVersion02|October2011,at the,News | TVHome iPlayer |,the,02 Foundations The Masthead,The global masthead includes the globalnavigation links with additional links in a moredropdown panel. BBC iD is positioned to the rightof the BBC blocks with the Search entry field atthe extreme r
17、ight.,Note: The masthead is black at either 100%, 20% or60% opacity. On rollover the masthead lights up andbackground colour changes to white with dark greytext links.,8px,8px,16px,8px,201px8px,42px,Sign in,News,Sport,Weather,iPlayer,TV,Radio,More,Search,8pxSigned in state,42px,John Smith,News,Sport
18、,Weather,iPlayer,TV,Radio,More,Search,SettingsSign outPushdown open,42px,HollywhiteJohn Smith,| Mobile News,Sport | WeatherSport | Weather | iPlayer | TVRadio | More,Search BBC,MORE,CBBCCBeebiesComedy,FoodHealthHistory,LearningMusicScience,NatureLocalTravel News,Full A-Z,UX&D,15,GELStyleguideVersion
19、02|October2011,02 Foundations Horizontal NavigationWe are proposing up to two lines of horizontalnavigation with tabs and a crumbtrail solution fordeeper hierarchies. More details are available inthe design patterns library.Single tier menu,Lorem ipsum | Dolor sit amet | Consectetur adipiscing,Vesti
20、bulum faucibus,Enim at odio,| Fusce fermentum,| Neque sed gravida,Double tier menu,Lorem ipsum | Dolor sit amet | Consectetur adipiscing,Vestibulum faucibus,Enim at odio,| Fusce fermentum,| Neque sed gravida,Proin euismod | Condimentum tellus | Vulputate quam |,Bibendum | Nullam auctor,Euismod lobor
21、tis,Duis auctor | Neque malesuada,Deep hierachies,Lorem ipsum | Dolor sit amet | Consectetur adipiscing,Vestibulum faucibus,Enim at odio,| Fusce fermentum,| Neque sed gravida,UX&D,Euismod lobortis,Proin euismod | Condimentum tellus | Vulputate quam |,Bibendum | Nullam auctor | Duis auctor | Neque ma
22、lesuada,16,GELStyleguideVersion02|October2011,02 Foundations The Local MastheadThe new masthead approach providesthe flexibility to accommodate variousbrand elements.,UX&D,17,GELStyleguideVersion02|October2011,20px,20px,02 Foundations The Local MastheadThe local masthead will vary in height dependin
23、gon the type of service. The minimum depth willbe 64px for content heavy sites such as News.8px,Sign in,News,Sport,Weather,iPlayer,TV,Radio,More,Search,64px,16px16px,SECTION TITLE SUBTITLEPrimary Navigation 12pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03 |
24、 Primary navigation link 04Secondary Navigation 12pt | Secondary navigation link 01 | Secondary navigation link 02 | Secondary navigation link 03 | Secondary navigation link 04,UX&D,48px Gill Sans Regular,34px Gill Sans Regular,18,GELStyleguideVersion02|October2011,16px,32px,02 Foundations The Local
25、 MastheadOther brands such as Radio 1 or BBC One maybe deeper.8px,Sign in,News,Sport,Weather,iPlayer,TV,Radio,More,Search,MAJOR BRAND SUBTITLEVariable height,48px Gill Sans Regular,34px Gill Sans Regular,Primary Navigation 13pt | Primary navigation link 01 | Primary navigation link 02 | Primary navi
26、gation link 03 | Primary navigation link 04,UX&D,19,GELStyleguideVersion02|October2011,16px,40px,02 Foundations The Local MastheadRich programme experiences such as Doctor Whocould be deeper still up to 392px. The default fontfor the local masthead is Gill Sans regular (48px).Local branding should b
27、e left-aligned.8px,Sign in,News,Sport,Weather,iPlayer,TV,Radio,More,Search,MAJOR BRAND HOMEPAGE SUBTITLE,48px Gill Sans Regular,34px Gill Sans Regular,392pxPrimary Navigation 16pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03,UX&D,20,GELStyleguideVersion02|Oc
28、tober2011,02 Foundations BackgroundsThere 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-floating e
29、lements.,UX&D,CONTAINED BANNERPrimary Navigation 13pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03 | Primary navigation link 04,FULL BACKGROUND IMAGEPrimary Navigation 13pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 0
30、3 | Primary navigation link 04,21,GELStyleguideVersion02|October2011,02 Foundations BackgroundsAs well as the default full screen or repeatedbackground image, images can be fixed to thetop, bottom, left and/or right of the page contentor browser viewport.,UX&D,BACKGROUND TOP & BOTTOMPrimary Navigati
31、on 13pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03 | Primary navigation link 04,BACKGROUND LEFT & RIGHTPrimary Navigation 13pt | Primary navigation link 01 | Primary navigation link 02 | Primary navigation link 03 | Primary navigation link 04,22,GELStylegu
32、ideVersion02|October2011,02 Foundations The FooterThe GEL footer is a variant of the existingGVL 2.0 footer. Colour options are white, grey,black and semi-transparent over an image.,336px,16px,176px,16px,BBC HelpAccessibility Help,About the BBCContact Us,104px,BBC MMX The BBC is not responsible for
33、the content,Parental GuidanceJobs,Terms of UsePrivacy & Cookies,on external internet sites. Read more.16px,UX&D,23,GELStyleguideVersion02|October2011,03 Building BlocksTypographyIconographyLinking ConventionsImage Size Ratios,UX&D,24,GELStyleguideVersion02|October2011,03 Building Blocks TypographyGE
34、L uses bold typography to create strongerhierarchies and drama across the site. Were movingfrom Verdana to Arial as the BBCs default web font forboth headers and body copy.Arial RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh
35、ijklmnopqrstuvwxyz1234567890!$%&*()_+Gill Sans RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+,UX&D,25,GELStyleguideVersion02|October2011,48px Leading / -40 Tracking Dev Pixel Spec: -2px Letter,36px Leading -30 Tracking Dev Pixel Spec:,32px Leading / -30 Tracking Dev P
36、ixel,03 Building Blocks TypographyLarge bold type should be used to establisha clear information hierarchy. These are therecommended type sizes.Arial Bold 48pxspacingArial /Bold 36px -1px Letter spacingArial Bold 32pxSpec: -1px Letter spacingArial Bold 28px28px Leading / -36 Tracking Dev Pixel Spec:
37、 -1px Letter spacingArial Bold 24px24px Leading / -43 Tracking Dev Pixel Spec: -1px Letter spacingArial Bold 20px20px Leading / -47 Tracking Dev Pixel Spec: -1px Letter spacingArial Bold 16px18px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacingArial Bold 14px18px Leading / 0 Tracking Dev Pixe
38、l Spec: 0px Letter spacingArial Bold 13px16px Leading / 0 Tracking Dev Pixel Spec: 0px Letter spacingArial Bold 12pxARIAL BOLD CAPITALISED 11px,UX&D,26,GELStyleguideVersion02|October2011,8px,03 Building Blocks TypographyPutting it together with body copy,Super Header 36pxHeader 32pxSubheader 20pxTIM
39、E STAMPS 11PT CAPITALS,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. Duis libero diam, condimentum et,condimentum in, congue eu, tellus. Phasellus eu elit at n
40、isi ultricies lobortis.Suspendisse porta commodo leo. Sed tincidunt tincidunt massa. Crasscelerisque diam non arcu. Donec egestas. Integer a mi. Aenean tempus, mieu luctus imperdiet, erat ligula semper turpis, consectetur faucibus libero antenon sem. Aliquam quis diam. Pellentesque mollis nisi eget
41、purus. Aenean iaculis,metus vel sem. Integer at erat.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,
42、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
43、,condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.Suspendisse porta commodo leo. Sed tincidunt tincidunt massa.UX&D,Link Nam dictum nibh eu arcuLink Donec egestas integer a mi,27,GELStyleguideVersion02|October2011,8px,16px,16px,16px,16px,16px,03 Building Blocks Typogra
44、phyOur 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,UX&D,8pxTitle header 32pxCopy 13px Lorem ipsum dolor sit amet, consec-tetur adipiscing e
45、lit. Fusce sed leo. Maecenasultrices lorem sit amet diam. Aliquam sollicitudintristique nulla. Duis libero diam, condimentum,16pxTitle header 32pxCopy 13px Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Fusce sed leo. Maecenasultrices lorem sit amet diam. Aliquam sollicitudintristique nul
46、la. Duis libero diam, condimentum,28,GELStyleguideVersion02|October2011,8px,16px,16px,16px,16px,16px,03 Building Blocks Typographyor aligned to the grid when thereis no container.,UX&D,Title header 32pxBody copy 13px Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce sed leo. Mae-cenas ul
47、trices lorem sit amet diam. Aliquamsollicitudin tristique nulla. Duis libero diam, con-dimentum,Title header 32pxBody 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,
