1、1,Visual language 2.0,BBC design guidelines for the web,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,3,4,5,7,8,10,11,15,43,19,45,25,48,2,Index,1. Introduction2. Who approves this?3. The Template,7. Conten
2、t7.1. The fold7.2. Text/object indentation,323334,3.1. Page Layout3.2. Design Grid3.3. Flexible Layouts4. Global Masthead4.1. Masthead modes4.2. The Menu - Explore the BBC4.3. Masthead Variations5. Local Masthead5.1. Make better use of the space5.2. If there is no alternative but to use an empty str
3、ipe5.3. Freeform Local Masthead6. Footer,623242731,7.3. Fonts7.4. Images7.5. Interim Embedded Media Player sizes8. Local Navigation8.1. Horizontal Local Navigation8.2. Vertical Local Navigation8.3. Two Basic Patterns For the local navigation: A & B8.4. Breadcrumb trails9. Advertising10. Putting it t
4、ogetherAppendix,3536384041464749,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,3,1. Introduction,visual guide when designing for the web,This is a visual guide document to be used by all the,designers when
5、 designing for BBC sites.,This way we will improve the sites overall user experience,through consistency in design and interaction.,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,4,2. Who approves this?,The
6、se guidelines have been defined in collaboration with,user experience teams across the BBC.,Approval for this proposal (and any subsequent alterationsand/or additions) sits with the User Experience Cluster andthe Head of User Experience & Design.,Any feedback or suggestions should be raised with you
7、rrepresentative in this Cluster and also Lyra Xharra Loxhaand Steve Gibbons.,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,5,3. The templatea visual frameworkThe centred page template and its associated gu
8、idelinescreate a visual framework that make the BBC siteconsistent.The following pages outline the structure, includinga design grid that affords flexible layout options andupdated global elements.There are also guidelines for sizes and placement of,GRIDEXAMPLEGRID APPLIED TOTHE BBC HOMEPAGE,images,
9、 the embedded media player and advertising.NOTES1. More info on the functionality of the templating system(Barlesque) can be found on www.bbc.co.uk/includes/blq/GRID APPLIED TOBBC NEWSGlobal Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4
10、:41 PM, 17 December 2008,6,3.1. PAGE LAYOUT the stuff that surrounds us,All the BBC pages are based around a design grid with astandardised surrounding border.,White padding 10px each side (994px)Content padding 14px each side (974px),Content/grid area 946pxThe design grid constrains your content ar
11、ea. No contentshould be placed outside of the design grid.The first border to the design grid is 14 pixels either sideand should be the page background colour. This givesa total of 974 pixels in which the page sits. There is afurther 10 pixel white margin either side of this to framethe page, and th
12、en an outer border covering the rest ofthe page.You MUST design your page to be fixed width (NOTstretchy) and centred within the browser.PLEASE NOTE:The 10 pixel margin will always be set to white, unless anexemption has been made.The outer borders will always be set to #EAEAEA.Global Visual Languag
13、e 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,7,3.2. DESIGN GRID,The design grid consists of 12 columns, each 66 pixels inwidth with a 14 pixel gutter spacing between them. Thisgives a total content area of 946 pixels.,66pxcol
14、umn,14pxgutter,12/24 columns - 946px26pxsub-column,An underlying 24 sub columns of 26 px can also beemployed to aid in your design in more complex layouts.The number of columns chosen enable the use of avariety of super column structures to allow for differentpage types (see next page).The grid sets
15、 the bounds for content only. The structureof the areas outside the content are illustrated on thefollowing pages.All designers should adhere tothe grid rules. Flash sites are notexempt from the grid rulesGlobal Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbon
16、s. Last modified at 4:41 PM, 17 December 2008,8,3.3. FLEXIBLE LAYOUTS something for everyoneThe grid is flexible enough to accommodate a variety ofsuper column layouts and enables ad placement in theright hand column for international visitors.Common layouts include 2 and 3 super columns withleft ha
17、nd navigation.When using a super column for left hand local navigationyou MUST always use 2 columns. This creates aconsistent 146px for all left hand local navigation.A combination of super columns could be used to createmore complex structures. See bottom right for just onepossible example of this.
18、,2 SUPER COLUMN LAYOUT WITH LEFT HAND NAVIGATION (STORY PAGE)3 SUPER COLUMN LAYOUT,3 SUPER COLUMN LAYOUT WITH LEFT HAND NAVIGATIONMULTI SUPER COLUMN LAYOUT,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,9,U
19、sing the grid with flashThe content that sits on flash sites needs to adhere to the grid.This means that flash sites are NOT exempt from using the grid,CORRECT TREATMENT,INCORRECT TREATMENTGlobal Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified
20、 at 4:41 PM, 17 December 2008,10,4. Global masthead,This is the global masthead for the whole of the BBCsite.As an overview the masthead includes the BBCmasterbrand, Text only & Help links, Search and anExplore the BBC button which has a menu containing17 static (including Home) and 3 temporal links
21、.The menu colour (button and links) can be changedby using the provided palette of colours ONLY. Pleasemake sure you explicitly specify the menu colour to your,NOTES1. The design assets that accompany this document containAdobe Illustrator and Photoshop files of the current Global VisualLanguage to
22、form the basis of your design. All assets including thepage structure, the grid, global masthead and footer are provided.You MUST not recreate the files.2. Current guidelines state that pages must be readable when thefont size is increased by two steps in our supported browsers.(http:/www.bbc.co.uk/
23、guidelines/newmedia/technical/xhtml_integrity.shtml#css),3. The measurements of 118px and 140px are based on defaulttext size and +2 text resizing in Firefox (IE resizes in smallerincrements) respectively and will ensure there the menu is not cutoff within all our supported browsers.,development tea
24、m.Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,11,4.1. MASTHEAD MODES solid or semi-transparent,The default mode of the masthead is solid. However, ifappropriate, you can switch to a semi-transparent mode
25、as shown below.,SOLID MODE,SEMI-TRANSPARENT MODE,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,12,4.1.1 Masthead in the default solid mode,The solid mode is the default state of the masthead.,In its solid
26、state there should always be a 1px keyline(hex value #cccccc) that divides it from the localmasthead,SOLID MODE,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,13,4.1.2 Masthead in the semi-transparent mode,
27、The semi-transparent mode allows the subtle extensionof the local branding/background underneath the global,The 1px keyline is not mandatory in this mode, but it canbe applied if necessary.,masthead.This creates a softer separation between the global andthe local masthead.SEMI-TRANSPARENT MODEGlobal
28、 Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,14,Design considerations when using the semi-transparent mode,The BBC blocks and the accessibility links SHOULD beclear and legible at all times.You MUST check for a
29、ny colour contrast issues whichcould affect the legibility and clarity.,The extended background sitting underneath the GlobalMasthead MUST NOT contain detailed/busy graphics asthis can potentially affect the clarity of the blocks and thelegibility of the text links,The BBC blocks MUSTbe clear at all
30、 times.,The accessibility linksMUST be legible at alltimes,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,15,4.2. THE MENU explore the BBC,The Explore the BBC menu gives quick access togreat content on the
31、BBC site. There are 17 staticlinks (including Home) and 3 temporal links used forpromoting content and events.,The A whole lot more link to the bottom right of themenu will take the user to a page that gives access toan extended collection of BBC sites that are not in themenu.,NOTES1. The 17 static
32、links were agreed in consultation with seniorbusiness stakeholders.,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,16,4.2.1. Colour variations a bespoke fit,Colours used in the menu can be changed (choosing
33、from a fixed palette) to suit the current site. The buttonNEEDS to be noticeable whilst matching it with yourcolour scheme. One way of achieving this is to use a,complementary colour to your main one rather thanmatching directly. The artwork for the nav will be placedin the Assets folder which will
34、be accompanying thisdocumentHEX VALUE: #2E52D1HEX VALUE: #1864A4HEX VALUE: #297E9BHEX VALUE: #8DB500HEX VALUE: #308700HEX VALUE: #0F463B,NOTES1. If your developers DO NOT explicitly set the colour inBarlesque, the button/menu will use the default blue (as shown,top left).HEX VALUE: #D60065HEX VALUE:
35、 #9A005DHEX VALUE: #68007FHEX VALUE: #D7000CHEX VALUE: #ED510AHEX VALUE: #777247,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,17,Colour variations example usage,Global Visual Language 2.0 - BBC design gui
36、delines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,18,4.2.2. Safe zone a flash warningThe current version of Adobes Flash player creates atechnical issue where Flash content will overlay HTMLcontent including drop down menus and lightboxes. Themenu has
37、been designed to appear as high up the screenas possible to help avoid this.You MUST NOT place any Flash content above 118px.This will ensure the menu is not overlaid by it Flash.,The menu expands vertically on text resize. Site designsMUST proportionally expand (vertically) to ensure thatFlash cont
38、ent does not display above 140px.NOTES1. Current guidelines state that pages must be readable when thefont size is increased by two steps in our supported browsers.(http:/www.bbc.co.uk/guidelines/newmedia/technical/xhtml_integrity.shtml#css),THE MENU OVERLAYED BY FLASH CONTENTILLUSTRATION REPRESENTI
39、NG THE HEIGHT INCREASE WHEN RESIZING TEXT,Default height 118px+2 text resizing 140px,2. The measurements of 118px and 140px are based on defaulttext size and +2 text resizing in Firefox (IE resizes in smallerincrements) respectively and will ensure there the menu is not cutoff within all our support
40、ed browsers.Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,19,4.3. MASTHEAD VARIATIONS site/user specific changes,The global nature of the masthead means we should notmake radical changes for local requirem
41、ents. However, incertain circumstances a variation to the links in the menuneeds to be addressed.,This is apparent on both international facing sites (Englishand other languages) and Childrens sites where specific userrequirements may need to be met.,Global Visual Language 2.0 - BBC design guideline
42、s for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,20,4.3.1 International facing sites,Sites in other languages and sites with internationalversions can use a variation of the masthead.Through discussion with BBC World Service, a specific,Additional links tha
43、t have a unique internationalperspective should also be included. These are currentlythe Languages portal, World Service Learning English &World Service Trust.,set of links for the menu has been proposed.Finally, links that are targeted towards a UK specific,Where an international version of a UK me
44、nu item isapplicable that link should be enforced as a default unlessthe user has a cookie set specifically to the UK version.This would include, but may not be exclusive to News,Sport, Weather, TV & Radio.,audience (e.g. Gardening, Food, Health) should beremoved from the menu and access to these wi
45、ll be onthe More BBC sites / A whole lot more page.,Text Only and Help should be in the local languageSite Links appear in this order,Descriptor text: BBC Sites in EnglishExplore the BBC should read BBC Sitesin the local language,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra X
46、harra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,21,4.3.2 Non-english language sites,Additionally the label used on the search button shouldreflect the language of the site the user is on and be scopedto search for results in that language where possible.,Note - current BBC sea
47、rch is only optimised for somelanguages not the full 33,Global Visual Language 2.0 - BBC design guidelines for the web. Lyra Xharra Loxha, Steve Gibbons. Last modified at 4:41 PM, 17 December 2008,22,4.3.3 Advertising on the masthead of international and language sites,International facing sites will also carry advertising to non-ukusers.,
