BBC栅格设计视觉规范.ppt_三一办公31ppt.com

资源描述

《BBC栅格设计视觉规范.ppt》由会员分享，可在线阅读，更多相关《BBC栅格设计视觉规范.ppt（39页珍藏版）》请在三一办公上搜索。

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 a

3、nd 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 create c

4、onsistentinteraction 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,GELS

5、tyleguideVersion02|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 ranges

6、 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 history wit

7、h 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 it happens

8、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 Principles07 Jo

9、ined-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 speak to everyo

10、ne 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,GELStyleguideVersion02|

11、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,Search,HelpUX&D,Satell

12、ite 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 universal grid,divid

13、edinto 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 with 16px gutters,creat

14、ing 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 andtemplates.,UX&D,13,GELStyl

15、eguideVersion02|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&D,14,GELStyleguideVersion0

16、2|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 right.,Note:The masthead is bla

17、ck 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,Weather,iPlayer,TV,Radio,More,Sear

19、ationWe 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,Vestibulum faucibus,Enim at odio,|Fusce fermentum,|Neque

22、w 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 dependingon the type of service.The minimum depth willbe 64px for content heavy sites such as

23、 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|Primary navigation link 04Secondary Navigation 12pt|Secondary navigation link 01|Secondary na

24、vigation 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 MastheadOther brands such as Radio 1 or BBC One maybe deeper.8px,Sign in,News,Sport,Weather,iPlayer,T

25、V,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 navigation link 03|Primary navigation link 04,UX&D,19,GELStyleguideVersion02|October2011,16px,40px,02 Foundation

26、s 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 be left-aligned.8px,Sign in,News,Sport,Weather,iPlayer,TV,Radio,More,Search,MAJOR BRAND HOMEPAGE SUBTITLE,48px Gi

27、ll 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|October2011,02 Foundations BackgroundsThere is no longer a requirement for consistentplacement of page backgrounds or pa

28、geshoulders across the site.Backgrounds can bewhite,full colour,gradient or image backgroundsand may feature within the content area,withinindividual panels or as free-floating elements.,UX&D,CONTAINED BANNERPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary naviga

29、tion link 03|Primary navigation link 04,FULL BACKGROUND IMAGEPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04,21,GELStyleguideVersion02|October2011,02 Foundations BackgroundsAs well as the default full screen or repea

30、tedbackground image,images can be fixed to thetop,bottom,left and/or right of the page contentor browser viewport.,UX&D,BACKGROUND TOP&BOTTOMPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04,BACKGROUND LEFT&RIGHTPrimar

31、y Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04,22,GELStyleguideVersion02|October2011,02 Foundations The FooterThe GEL footer is a variant of the existingGVL 2.0 footer.Colour options are white,grey,black and semi-transpar

32、ent over an image.,336px,16px,176px,16px,BBC HelpAccessibility Help,About the BBCContact Us,104px,BBC MMX The BBC is not responsible for the content,Parental GuidanceJobs,Terms of UsePrivacy&Cookies,on external internet sites.Read more.16px,UX&D,23,GELStyleguideVersion02|October2011,03 Building Bloc

33、ksTypographyIconographyLinking ConventionsImage Size Ratios,UX&D,24,GELStyleguideVersion02|October2011,03 Building Blocks TypographyGEL 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

34、copy.Arial RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+Gill Sans RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+,UX&D,25,GELStyleguideVersion02|October201

35、1,48px Leading/-40 Tracking Dev Pixel Spec:-2px Letter,36px Leading-30 Tracking Dev Pixel Spec:,32px Leading/-30 Tracking Dev Pixel,03 Building Blocks TypographyLarge bold type should be used to establisha clear information hierarchy.These are therecommended type sizes.Arial Bold 48pxspacingArial/Bo

36、ld 36px-1px Letter spacingArial Bold 32pxSpec:-1px Letter spacingArial Bold 28px28px Leading/-36 Tracking Dev Pixel Spec:-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

37、 16px18px Leading/0 Tracking Dev Pixel Spec:0px Letter spacingArial Bold 14px18px Leading/0 Tracking Dev Pixel 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 B

38、uilding Blocks TypographyPutting it together with body copy,Super Header 36pxHeader 32pxSubheader 20pxTIME 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 trist

39、ique 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.Crasscelerisque diam non arcu.Donec egestas.Integer a mi.Aenean tempus,mieu luctus imperdiet,erat ligula semper turpis,c

40、onsectetur faucibus libero antenon sem.Aliquam quis diam.Pellentesque mollis nisi eget 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 sollicitu

41、din 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 ametdi

42、am.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.UX&D,Link Nam dictum nibh eu arcuLink Donec egestas integer a mi,27,GELStyleguideVersion02|

43、October2011,8px,16px,16px,16px,16px,16px,03 Building Blocks TypographyOur 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 32

44、pxCopy 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,16pxTitle header 32pxCopy 13px Lorem ipsum dolor sit amet,consec-tetur adipiscing elit.Fusce sed leo.Maecenasultrice

45、s lorem sit amet diam.Aliquam sollicitudintristique nulla.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,con

46、sectetur adipiscing elit.Fusce sed leo.Mae-cenas ultrices 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.Aliquamsollicitu

47、din tristique nulla.Duis libero diam,con-dimentum,29,GELStyleguideVersion02|October2011,03 Building Blocks IconographyWe 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 flat button container.These can be u

48、sed in anycolour unless otherwise specified.For more information or for the full set of icons,visit bbc.co.uk/gel/iconography.shtml,PreviousUnlockVocab On/OffGrid View,NextSearchRefreshList View(text),UpClose/Remove/No/DeleteAlarm/ReminderList View(text and thumb),DownEmbedDurationHome,To TopYesCoun

49、tdownNew/New items,To BottomPrintExpiresQuote,Link to ThisEmailSettingsChapters,DownloadHelpDegradedContentLoading,UploadInfo/CaptionZoom InExternal Link,Lock/SecurityAlert/WarningZoom OutTraffic,UX&D,30,GELStyleguideVersion02|October2011,8px,03 Building Blocks IconographyIcons should appear to the

50、left of text orin the top left corner of thumbnails.Header 36pxSubheader 20pxTIME STAMPS 11Px CAPITALSCopy 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.Copy 13px Arial R

展开阅读全文