gel iptv styleguide
DESCRIPTION
BBC styleguide for experience languageTRANSCRIPT
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
1UX&D
Building anIPTV Global Experience Languagefor the BBC
IPTV GEL Style guide
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
2UX&D
Contents
00 Introduction 3
01 Device considerations Designing for TV 5Screen safe areas 10Background elements 13
02 Foundations Universal grid 16BBC brand block 18Component states 19Remote control usage 20Progressive reveal 21
03 Building blocks Colour guide 23Typography 30Iconography 35Image sizes 36
04 TV patterns 37
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
3UX&D
These TV guidelines will help you understand how best to design graphics and interfaces for TV or how to adapt designs from other platforms so they work best on a TV screen.
We recommend you familiarise yourself with these guidelines before you begin your designs.
TV interfaces should be clear, simple and quickly understood. GEL provides interaction patterns and a bold visual language for TV that will help you achieve this.
Introduction
00 Introduction
Although your designs will be produced on a computer and then displayed on a TV screen, there are some key differences between a computer monitor and a TV screen such as screen size, pixel size, and colour display. The Device considerations section explains these differences.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
4UX&D
01 Device considerations Designing for TV Screen safe areas Device capabilities Backgrounds and transparencies
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
5UX&D
HardwareDisplayUnlike computer monitors, many TV’s still have problems displaying basic shapes and colours. This section explains some of these problems and how to overcome them.
On an Interlaced TV display: SD and CRT The image on a television screen is composed of odd and even scan lines. The TV renders the scan lines in phases, alternating rapidly between odd and even scan lines to create the impression of a full screen image. This is known as interlacing.
A slower refresh rate on older TVs can cause any single pixel (or line of pixels) falling onto a single scan line to flicker. A similar, distorted effect occurs when thin lines in text characters and single pixels in dithered photographs appear on screen.
On a Progressive Scan TV: SD and HD plasma or LCD Flicker is less likely to affect progressive scan displays in which the total number of lines are refreshed. Set top boxes can further exaggerate negative effects.
01 Device considerations Designing for TV
Design considerations
• Keep keylines to even numbers and at least 2 pixels thick
• Ensure typefaces are not too delicate e.g. Helvetica Light and Ultra Thin would ‘dissolve’ on screen.
Flicker
The lowest specification device we support is a Standard Definition CRT (Cathode Ray Tube) TV.
Make sure you test your work on a wide range of TV screens from Standard Definition CRT, to full HD (High Definition) plasma and LCD (Liquid Crystal Display) sets.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
6UX&D
Colour display on televisionTelevision screens have a more limited overall gamut than computer monitors and a much higher gamma value. This results in much higher contrast and saturation levels during display. To achieve a similar colour intensity on the TV screen, images should be toned down and de-saturated when taken from the computer to the television screen.
MoiréThis effect occurs when regular patterns such as grids, lines or dots are rotated away from a vertical or horizontal position. The result is a distorted pattern.
Large, clearly defined regions of cool de-saturated colours tend to work best on television screens.
Curves are less liable to distort than straight lines and as a rule, movement diminishes the impact of all television display problems.
Design considerations
• Single pixels can cause flicker, therefore avoid applying dither to images.
• Avoid using intricate patterns on screen.
This image demonstrates what happens when lines deviate from a vertical or horizontal position.
01 Device considerations Designing for TV
BloomEach scan line is made up of an analogue signal, which controls changes in colour and value across the screen. Bloom is caused when strong contrasts in hue or luminance along scan lines cause distortion, throwing the display of vertical edges out of alignment. The effect produces bright fringes (or feathers) around objects.
Design considerations
• Images and flat colours may need to be toned down when taken from the computer to the TV screen.
• ‘Hot’ reds and oranges are problematic and can cause distortion.
• Pure white and black should always be avoided. Use safe white (#EBEBEB) and safe black (#101010).
Design considerations
• Avoid strong colour contrast along vertical edges.
• Text in strong colours near rectangular edges can cause especially bad distortion.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
7UX&D
Digital images are made up of grids of coloured blocks or “pixels”. These units are the smallest individual elements of an image.
Computer monitors use pixels that are square; on a television screen they are slightly rectangular, roughly 1.067 times as wide as they are tall.
Consequently, images created on a computer monitor and then displayed on a TV screen will appear slightly stretched horizontally on the TV screen. For example, a circle created on a computer would appear on television as an ellipse.
To allow for this, all images destined for television but initially created on a computer, should be created at 1024px x 576px (for widescreen SD) or 768 x 576 (for 4:3 SD) and then reduced in width to 720px by 576px.
Once on a TV, the image is reduced horizontally to 720px in width. When broadcast on television, the wider pixels of the TV screen will ‘stretch’ the design back to the correct proportions.
Pixel size1px
1px
1.0667px
Computers generate square pixels so you need more in a TV line
Television pixel
Computer pixel
Computer Pixel
Television Pixel
01 Device considerations Designing for TV
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
8UX&D
Although many people now own a widescreen television, we still need to ensure widescreen graphics display correctly when viewed on a 4:3 television. In order to display a widescreen image on a 4:3 TV, the widescreen image may either be centre cut-out or letterboxed.
16:9 shrunk to fit 4:3
The entire application may be shrunk 25% to fit within a letterbox format on a 4:3 set.
In this case, any text in the video must be large enough to stay legible at a smaller size.
Therefore the font size used should be at least 24pt when designing for wide screen video streams to allow for this potential size reduction.
Producing graphics for wide screen
1024px
768px centre cut-out
768px letterboxed
16:9 shrunk to fit 4:3
Wide screen image shrunk by 75% of total size
576px
576px
01 Device considerations Designing for TV
4:3 centre cut-out
The left and right edges of the widescreen image will not be visible on any set where the image is cropped to 4:3.
Text, colour keys, navigation and all other essential graphical elements must be kept in the 4:3 safe area. The space outside the 4:3 area should only contain background information.
For more information on safe areas, see “Overview of screen safe areas” on page 10.
4:3 centre cut-out
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
9UX&D
Designing for TVChecklist
• Will your graphics ever sit on top of a broadcast caption/Aston and if so, do you know the position? If this is the case, make sure your graphics either avoid or completely cover the entire broadcast caption to avoid a clash.
• Do all actionable graphics sit within the actionable safe area and all text sit within the text safe area? For more information, see “Overview of screen safe areas” on page 10.
• Are all square and rectangular graphics full pixels ie. their width and height do not contain any decimals?
• Are all horizontal lines at least 2px thick? If thicker than 2px, are they divisible by 2?
• Has safe white (#EBEBEB) and safe black (#101010) been used?
• Ensure the minimum font size is at least 24px. 22px may be used sparingly in caps only. For more information, see “Typography” on page 30.
01 Device considerations Designing for TV
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
10UX&D
Overview of screen safe areasTVs have a central, visible screen area known as the safe area. Outside this safe area is an additional margin of screen space which varies across different TV sets. Not all TVs display the graphics and text placed in this ‘unsafe’ area.
To guarantee your content is visible on all TVs, place important text and graphics within the safe area of the TV screen. There are two universal safe margins Action safe and Text safe.
Action safeDefines the largest region of screen that viewers are likely to see. However, because screens vary considerably, background graphics that do not hold vital information may continue to the edge of the screen.
Text Safe or Title SafeDefines the boundaries of the area in which vital information such as logos and text can be placed.
01 Device considerations Screen safe areas
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
11UX&D
16:9 displayThe majority of first generation IPTV services can be designed at 1280x720px, with a minimal action safe area. Because TVs apply overscan, any images that fall outside the safe area will not be displayed. Always adhere to these safe areas in your designs.
01 Device considerations Screen safe areas
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
12UX&D
4:3 displayAll next generation IPTV devices have been designed to support 16:9 resolutions. However, it is important to be aware of legacy 4:3 displays and to account for them when designing for low end devices.
The margins shown here will help you adjust 16:9 1280x720 designs for 4:3 proportions.
01 Device considerations Screen safe areas
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
13UX&D
High-end graphicsThis is an example of how graphical elements can be used on modern or high-end devices without compromising performance and still adhering to GEL for IPTV.
Note: This example is not a guideline for layout or patterns.
To understand how colours are applied over an image, see “Colour guide” on page 23.
Gradients and drop shadows are not typically part of the GEL visual language. However, used sparingly they do help prioritise information by creating a sense of depth.
Recommended Flat transparencyApply transparencies at 70% opacity, unless applying a gradient effect as shown above (10% – 50% has been used)
Shadow/ transparencies with alpha channelsShadows are created as transparencies with alpha channels.
01 Device considerations Background elements
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
14UX&D
Low-end graphicsThis is an example of how compositing effects can be used on older or low-end devices without compromising performance and still adhering to GEL for IPTV.
This example is not a guideline for layout or patterns.
To understand how colours are applied over an image, see “Colour guide” on page 23.
Recommended Flat transparencyUse alpha channels sparingly or revert to solid colours for optimal performance.
Shadow/ transparencies with alpha channelsUse gradient or soft-edged shadows sparingly or resort to flat transparencies to create the effect of a shadow, for optimal performance.
01 Device considerations Background elements
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
15UX&D
02 Foundations Universal grid BBC brand block Remote control usage Progressive reveal
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
16UX&D
Your starting point is a universal grid, divided into equal parts. This applies to both high- and low-end devices.
The current recommendation is to target High Definition device resolution: 1280x720px. When designing to Standard Definition devices, artwork should be scaled down to 1024 x 576 pixels.
The grid is a design aid, it helps with general layout by:
• Keeping shapes as full pixels
• Helping to align objects
• Dividing the screen real-estate into equal parts.
Note: the grid shown here is unique to GEL for IPTV and is not the same grid used for web and mobile. It is, however, divisible by 8px which makes for easy scaling.
The grid
1280px
16px
02 Foundations Universal grid
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
17UX&D
We’re also employing a 16px baseline grid to help with vertical alignment of page components. Slavish adherence to the baseline isn’t necessary for all typography but does help to create vertical rhythm on the page..
To understand how the baseline grid applies to type, see “Putting it together” on page 32.
Baseline
720px
16px
02 Foundations Universal grid
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
18UX&D
Ensure the BBC blocks are
• Reproduced from original files
• Not changed or distorted in any way
• Horizontal and not stacked or turned sideways
• Not embedded in text or sentences
• Not used as a pattern or as a design feature
BBC brand block
Exclusion zone
Minimum size
85px
Exclusion Zone
The minimum exclusion zone around the logo in all directions must be equal to one-half of the width of a single block of the logo.
The BBC blocks must be kept free from graphics and text and separate and distinct from other trade marks, etc.
Service name
NEWSThe Service name appears to the right of the BBC block.
The minimum size for the BBC blocks is 85px wide for TV.
02 Foundations BBC brand block
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
19UX&D
02 Foundations Component states
When designing interactive TV interfaces, a menu component needs to communicate that it is in one of the following states.
Component states
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
20UX&D
02 Foundations Remote control usage
Using a remote control to navigate a TV interface is often slower than using a mouse on a computer. Try to minimise the number of buttons needed to navigate your interface.
We recommend using five-point navigation (and the back button) shown in the table here. If you need more keys, consider using 5 point navigation and the colour buttons.
Avoid using other buttons on remote controls such as the hidden power buttons.
Note: these icons are not intended for use in your designs.
Remote control usage
UP
DOWN
LEFT
RIGHT
ENTER
PLAY
PAUSE
STOP
REWIND
FAST FORWARD
SKIP TO NEXT
SKIP TO PREVIOUS
5 way controller Transport controls
Colour buttons
Back button
BACK
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
21UX&D
02 Foundations Progressive reveal
Many BBC IPTV applications use a progressive reveal pattern. This example shows the progressive reveal starting from the bottom of the TV screen. This may not be relevant or necessary for all BBC applications.
Progressive revealFirst level interaction
Reveals the first interface element and takes up no more than a third of the screen. It’s important to show a partial reveal on first press so users don’t lose their orientation on the screen.
Second level interaction
Reveals a second level of content and takes up no more than two thirds of the screen.
Third level interaction
Reveals the top level interface element. By this stage the user has committed to a task and the gradual departure from the programme being viewed will help keep them oriented. This may take up the entire screen or leave a small area exposed.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
22UX&D
03 Building blocks Colour guide Typography Iconography Images
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
23UX&D
03 Building blocks Colour guide
The BBC brand largely relies on consistent use of the logo, a strong application of the grid and typography.
Where appropriate, a brand colour can be used to denote particular types of content eg. BBC News and Sport.
These examples show some BBC channels and their assigned colours.
Colour guide
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
24UX&D
03 Building blocks Colour guide
Where relevant, use channel branding colours or service branding colours for the highlight/focus colour in the user interface.
These examples show how the colours used for BBC News and BBC Sport are applied to their respective sections.
Highlight/focus colour
Example of focus state within BBC News.
Example of focus state within BBC Sport.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
25UX&D
03 Building blocks Colour guide
Only apply transparent colour over video or images if needed and remember to use it sparingly as it can impact system performance.
Never apply colours at less that 90% transparency.
Transparency
Colour overlay example
Examples of different colour overlays at 90% transparency
90%
90%
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
26UX&D
03 Building blocks Colour guide
Gradients and drop shadows are not typically part of the GEL. However, used sparingly, they do help prioritise information by creating a sense of depth on TV.
These techniques should be used in a subtle way as the GEL look and feel is sharp and straight.
TIPS• Gradients should hardly be
noticeable when viewed on a TV
• Always double check gradients on a TV as they are usually visually reduced in contrast by approximately 10-15%
• Gradients are always applied vertically – light at the top and darker at the bottom of a graphic shape.
Gradients and drop shadows
Light source
Creating black and white gradients
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
27UX&D
03 Building blocks Colour guide
Gradients and drop shadows
Creating colour gradients Creating drop shadows
Drop shadows can help when you want to emphasize a hierarchy. See the next page for an example.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
28UX&D
Gradients and drop shadowsDrop shadow exampleUsing drop shadows can help give a better sense of hierarchy in the interface.
03 Building blocks Colour guide
Drop shadow
Drop shadow
Gradient
Gradient
Gradient
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
29UX&D
The use of colour in the interface must be suitable for people who have some form of colour-blindness, vision impairment or have difficulty in reading text.
Design interface elements such as text on a button or a call to action with suitable contrast between the foreground and background to ensure legibility
Colour contrast
03 Building blocks Colour guide
Sports News
Sports News
Read more
Read more
Suitable contrast of text on background
Unsuitable contrast of text on background
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
30UX&D
TypographyFonts
03 Building blocks Typography
Helvetica Neue Bold Headings and introductory copy
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+
Helvetica Neue Regular Body copy
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+
Georgia Italic Short quotation from BBC Blogs or third party websites
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+
GEL uses bold typography to create stronger hierarchies and drama across IPTV.
Where technically possible, Helvetica Neue Regular and Bold should be used across the BBC’s IPTV platforms.
Georgia Italic Bold should be used for short quotations from BBC Blogs or third party websites within a module.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
31UX&D
03 Building blocks Typography
Type sizes
03 Building blocks Typography
Header 60px 60px Leading / -20 Tracking
Helvetica Neue Bold 36px36px Leading / -30 Tracking
Helvetica Neue Bold 32px32px Leading / -20 Tracking
Helvetica Neue Bold 28px28px Leading / -20 Tracking
Short quotation from BBC Blogs or a third party website
Georgia Italic 25px29px Leading / 0 Tracking
Body copy
Helvetica Neue Regular 24px29px Leading / -15 Tracking
Restricted size – only to be used as uppercase
HELVETICA NEUE BOLD 21PX29px Leading / -15 Tracking
The BBC typographic style is bold and confident, ensure there is a clear hierarchy in the application of type sizes.
These are the recommended type sizes.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
32UX&D
03 Building blocks Typography
Putting it together
03 Building blocks Typography
This is an example of how headers and body text can be formatted using the specified type sizes on GEL on IPTV.
Header 60pxSubheader 36px TIME STAMPS 21PT CAPITALS
Copy 24px Helvetica Neue Regular on 29px leading
Lorem ipsum dolor sit amet, consectetur adipis
elit. Fusce sed leo. Maecenas ultrices lorem sit
amet diam. Aliquam sollicitudin tristique nulla.
Duis libero diam, condimentum et, condimentum.
Maecenas ultrices lorem sit amet diam.
in, congue eu, tellus. Phasellus eu elit at nisi
ultricies lobortis. Suspendisse porta commodo leo.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
33UX&D
SpacingOur typographic style relies on tight tracking, tight leading and large headers. There should be consistent spacing around headers and body copy. Either 16px or 32px above and to the left when content is inside a container...
03 Building blocks Typography
Title header 32px16px
16px
16px
16pxTitle header 32px
16px
32px
32px
16px
Copy 24px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices
Copy 24px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
34UX&D
Spacing continued......or aligned to the grid when there is no container.
03 Building blocks Typography
Title header 32px
16px
16pxTitle header 32px
16px
16px
Copy 24px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
35UX&D
IconsA new icon set has been designed in harmony with the BBC’s visual language. The default icon size for TV is 24px.
For the full range of icons, refer to the BBC GEL Icons documents at
• www.bbc.co.uk/gel/web/building-blocks/iconography/icons
Note: When displaying colour button icons (as shown here), always keep the buttons in the same order and in a consistent location on the different screens of your TV interface.
03 Building blocks Iconography
Colour key:Red
Colour key:Green
Colour key:Yellow
Colour key:Blue
Back to allSIZE: 24 PIXEL
SIZE: 24 PIXEL ON BLACK
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
36UX&D
Image sizesWhere possible, use 16:9 images that align with the grid.
This is particularly important where there is likely to be significant re-use across BBC Online.
Make sure your image sizes are large enough to be viewed clearly from a distance on a TV screen.
If you’re using black or white in your images, use safe black (#101010) and safe white (#EBEBEB).
03 Building blocks Image sizes
16:9
Backgrounds, banners, promotions and cut-outs can be a variety of shapes and sizes as long as there is alignment with the universal grid.
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
37UX&D
04 TV patternsThe TV design patterns library is a repository of simple, re-skinnable screen components.
The patterns are available at bbc.co.uk/gel
IPT
V G
EL
styl
e g
uid
e |
Mar
ch 2
012
38
For more information visit bbc.co.uk/gel
UX&D