GEL Iptv Styleguide

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.


• 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.


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.


• 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).


• 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


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


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.


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.


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.


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


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


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


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


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.


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


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


Georgia Italic Short quotation from BBC Blogs or third party websites


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


Type sizes


Header 60px 60px Leading / -20 Tracking

Helvetica Neue Bold 36px36px Leading / -30 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


Putting it together


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...


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


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.


Title header 32px

16px

16pxTitle header 32px

16px

16px


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

GEL Iptv Styleguide

Documents

Transcript of GEL Iptv Styleguide