IPTV GEL Style guide

IPTV GEL style guide | October 2011

Building an
IPTV Global Experience Language
for the BBC

UX&D 1
Contents

IPTV GEL style guide | October 2011

00 Introduction 3

01 Device considerations
Designing for TV 5
Screen safe areas 10
Background elements 13

02 Foundations
Universal grid 16
BBC brand block 18
Component states 19
Remote control usage 20
Progressive reveal 21

03 Building blocks
Colour guide 23
Typography 30
Iconography 35
Image sizes 36

04 TV patterns 37

UX&D 2
00 Introduction

IPTV GEL style guide | October 2011

Introduction
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.
Although your designs will be produced on a We recommend you familiarise yourself with
computer and then displayed on a TV screen, these guidelines before you begin your designs.
there are some key differences between a
computer monitor and a TV screen such as TV interfaces should be clear, simple and
screen size, pixel size, and colour display. The quickly understood. GEL provides interaction
Device considerations section explains these patterns and a bold visual language for TV
differences. that will help you achieve this.

UX&D 3
 IPTV GEL style guide | October 2011
01 Device considerations
Designing for TV
Screen safe areas
Device capabilities
Backgrounds and transparencies

UX&D 4
01 Device considerations Designing for TV

IPTV GEL style guide | October 2011

Hardware
Display
Unlike 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. Flicker
The lowest specification device we On an Interlaced TV display: SD and CRT
The image on a television screen is composed Design considerations
support is a Standard Definition CRT
of odd and even scan lines. The TV renders
(Cathode Ray Tube) TV. • Keep keylines to even numbers and at least
the scan lines in phases, alternating rapidly
2 pixels thick
between odd and even scan lines to create the
Make sure you test your work on impression of a full screen image. This is known • Ensure typefaces are not too delicate
a wide range of TV screens from as interlacing. e.g. Helvetica Light and Ultra Thin would
‘dissolve’ on screen.
Standard Definition CRT, to full HD A slower refresh rate on older TVs can cause
(High Definition) plasma and LCD any single pixel (or line of pixels) falling onto a
(Liquid Crystal Display) sets. 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.

UX&D 5
01 Device considerations Designing for TV

IPTV GEL style guide | October 2011

This image demonstrates
what happens when lines
deviate from a vertical or
horizontal position.

Bloom Colour display on television Moiré

Each scan line is made up of an analogue Television screens have a more limited overall This effect occurs when regular patterns such
signal, which controls changes in colour and gamut than computer monitors and a much as grids, lines or dots are rotated away from a
value across the screen. Bloom is caused when higher gamma value. This results in much vertical or horizontal position. The result is a
strong contrasts in hue or luminance along higher contrast and saturation levels during distorted pattern.
scan lines cause distortion, throwing the display display. To achieve a similar colour intensity
of vertical edges out of alignment. The effect on the TV screen, images should be toned Large, clearly defined regions of cool de-
produces bright fringes (or feathers) around down and de-saturated when taken from the saturated colours tend to work best on
objects. computer to the television screen. television screens.

Curves are less liable to distort than straight

Design considerations Design considerations lines and as a rule, movement diminishes the
impact of all television display problems.
• Avoid strong colour contrast along vertical • Images and flat colours may need to be
edges. toned down when taken from the computer
to the TV screen. Design considerations
• Text in strong colours near rectangular edges
can cause especially bad distortion. • ‘Hot’ reds and oranges are problematic and • Single pixels can cause flicker, therefore
can cause distortion. avoid applying dither to images.
• Pure white and black should always be • Avoid using intricate patterns on screen.
avoided. Use safe white (#EBEBEB) and safe
black (#101010).

UX&D 6
01 Device considerations Designing for TV

IPTV GEL style guide | October 2011

Pixel size
Digital images are made up of grids To allow for this, all images destined 1px 1.0667px
of coloured blocks or “pixels”. These for television but initially created on
units are the smallest individual a computer, should be created at
elements of an image. 1024px x 576px (for widescreen SD) Computer Television
or 768 x 576 (for 4:3 SD) and then 1px
Pixel Pixel
Computer monitors use pixels that reduced in width to 720px by 576px.
are square; on a television screen
they are slightly rectangular, roughly Once on a TV, the image is reduced
1.067 times as wide as they are tall. horizontally to 720px in width. When
broadcast on television, the wider
Consequently, images created pixels of the TV screen will ‘stretch’
on a computer monitor and then Computer pixel
the design back to the correct
displayed on a TV screen will appear proportions.
slightly stretched horizontally on
the TV screen. For example, a circle Television pixel
created on a computer would appear
on television as an ellipse.
Computers generate square pixels
so you need more in a TV line

UX&D 7
01 Device considerations Designing for TV

IPTV GEL style guide | October 2011

Producing graphics for wide screen
Although many people now own a widescreen 4:3 centre cut-out
1024px
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 576px

either be centre cut-out or letterboxed.

4:3 centre cut-out 16:9 shrunk to fit 4:3

768px centre cut-out
The left and right edges of the The entire application may be shrunk
widescreen image will not be visible 25% to fit within a letterbox format 16:9 shrunk to fit 4:3
on any set where the image is on a 4:3 set.
cropped to 4:3.
In this case, any text in the video
Wide screen image shrunk
Text, colour keys, navigation and all must be large enough to stay legible by 75% of total size
other essential graphical elements at a smaller size.
576px
must be kept in the 4:3 safe area.
The space outside the 4:3 area Therefore the font size used should
should only contain background be at least 24pt when designing for
information. wide screen video streams to allow
for this potential size reduction.
For more information on safe areas, 768px letterboxed
see “Overview of screen safe areas”
on page 10.

UX&D 8
01 Device considerations Designing for TV

IPTV GEL style guide | October 2011

Designing for TV
Checklist
• Will your graphics ever sit on top • Has safe white (#EBEBEB) and
of a broadcast caption/Aston and safe black (#101010) been used?
if so, do you know the position?
If this is the case, make sure your • Ensure the minimum font size is
graphics either avoid or completely at least 24px. 22px may be used
cover the entire broadcast caption sparingly in caps only. For more
to avoid a clash. information, see “Typography” on
page 30.
• 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?

UX&D 9
01 Device considerations Screen safe areas

IPTV GEL style guide | October 2011

Overview of screen safe areas
TVs 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 safe
Defines 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 Safe

Defines the boundaries of the area in which vital information such as
logos and text can be placed.

UX&D 10
01 Device considerations Screen safe areas

IPTV GEL style guide | October 2011

16:9 display
The 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.

UX&D 11
01 Device considerations Screen safe areas

IPTV GEL style guide | October 2011

4:3 display
All 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.

UX&D 12
01 Device considerations Background elements

IPTV GEL style guide | October 2011

High-end graphics
This 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 Variable level of Gradient shadow Gradient transparency
creating a sense of depth. transparency

Recommended Flat transparency Shadow/

Apply transparencies transparencies with
at 70% opacity, alpha channels
unless applying a Shadows are created
gradient effect as as transparencies
shown above (10% – with alpha channels.
50% has been used)

UX&D 13
01 Device considerations Background elements

IPTV GEL style guide | October 2011

Low-end graphics
This 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.

Single level of Shadow created using solid colour

transparency

Recommended Flat transparency Shadow/

Use alpha channels transparencies with
sparingly or revert alpha channels
to solid colours for Use gradient or soft-
optimal performance. edged shadows
sparingly or resort to
flat transparencies to
create the effect of a
shadow, for optimal
performance.

UX&D 14
 IPTV GEL style guide | October 2011
02 Foundations
Universal grid
BBC brand block
Remote control usage
Progressive reveal

UX&D 15
02 Foundations Universal grid

IPTV GEL style guide | October 2011

The grid 16px

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

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

UX&D 16
02 Foundations Universal grid

IPTV GEL style guide | October 2011

Baseline
We’re also employing a 16px 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

720px
grid applies to type, see “Putting it
together” on page 32.

UX&D 17
02 Foundations BBC brand block

IPTV GEL style guide | October 2011

BBC brand block
Ensure the BBC blocks are Exclusion Zone Service name
• Reproduced from original files
• Not changed or distorted in any
way
• Horizontal and not stacked or
turned sideways Exclusion
NEWS
zone
• Not embedded in text or The minimum exclusion zone around The Service name appears to the
sentences the logo in all directions must be right of the BBC block.
• Not used as a pattern or as a equal to one-half of the width of a
design feature single block of the logo.

The BBC blocks must be kept free

from graphics and text and separate
and distinct from other trade marks, Minimum size
etc.

85px

The minimum size for the BBC

blocks is 85px wide for TV.

UX&D 18
02 Foundations Component states

IPTV GEL style guide | October 2011

Component states
When designing interactive TV
interfaces, a menu component needs
to communicate that it is in one of
the following states.

UX&D 19
02 Foundations Remote control usage

IPTV GEL style guide | October 2011

Remote control usage
Using a remote control to navigate 5 way controller Transport controls
a TV interface is often slower than
using a mouse on a computer. Try PLAY
UP
to minimise the number of buttons
needed to navigate your interface. DOWN PAUSE

We recommend using five-point LEFT STOP

navigation (and the back button)
shown in the table here. If you need RIGHT REWIND
more keys, consider using 5 point
ENTER FAST FORWARD
navigation and the colour buttons.
SKIP TO NEXT
Avoid using other buttons on remote
controls such as the hidden power SKIP TO PREVIOUS
buttons.

Note: these icons are not intended Colour buttons

for use in your designs.

Back button
BACK

UX&D 20
02 Foundations Progressive reveal

IPTV GEL style guide | October 2011

Progressive reveal
Many BBC IPTV applications use First level interaction
a progressive reveal pattern. This Reveals the first interface element and takes
example shows the progressive up no more than a third of the screen. It’s
important to show a partial reveal on first press
reveal starting from the bottom of so users don’t lose their orientation on the
the TV screen. This may not be screen.
relevant or necessary for all BBC
applications.

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.

UX&D 21
 IPTV GEL style guide | October 2011
03 Building blocks
Colour guide
Typography
Iconography
Images

UX&D 22
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

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.

UX&D 23
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

Highlight/focus colour
Where relevant, use channel
branding colours or service branding
colours for the highlight/focus colour
in the user interface.

These examples show how the Example of focus

colours used for BBC News and state within BBC
News.
BBC Sport are applied to their
respective sections.

Example of focus
state within BBC
Sport.

UX&D 24
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

Transparency
Only apply transparent colour over Colour overlay example
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.

90%

90%

Examples of different
colour overlays at 90%
transparency

UX&D 25
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

Gradients and drop shadows
Gradients and drop shadows Creating black and white gradients
are not typically part of the GEL.
However, used sparingly, they
Light source
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.

UX&D 26
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

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.

UX&D 27
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

Gradients and drop shadows
Drop shadow example
Using drop shadows can help give a better sense of
hierarchy in the interface.

Gradient

Gradient

Gradient

Drop Drop
shadow shadow

UX&D 28
03 Building blocks Colour guide

IPTV GEL style guide | October 2011

Colour contrast
The use of colour in the interface Suitable contrast of text on background
must be suitable for people
who have some form of colour- Read more
blindness, vision impairment or
have difficulty in reading text.

Design interface elements such as

text on a button or a call to action Sports
with suitable contrast between News
the foreground and background to
ensure legibility

Unsuitable contrast of text on background

Read more

Sports
News

UX&D 29
03 Building blocks Typography

IPTV GEL style guide | October 2011

Typography
Fonts
GEL uses bold typography to Helvetica Neue Bold
create stronger hierarchies and Headings and introductory copy
drama across IPTV.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Where technically possible,
Helvetica Neue Regular and Bold abcdefghijklmnopqrstuvwxyz
should be used across the BBC’s
IPTV platforms.
1234567890!@£$%^&*()_+

Helvetica Neue Regular

Body copy
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+

UX&D 30
03 Building blocks Typography

IPTV GEL style guide | October 2011

Type sizes

Super Header 66px

The BBC typographic style is bold
and confident, ensure there is a
clear hierarchy in the application
of type sizes. 36px Leading / -30 Tracking

These are the recommended type

sizes. Header 60px
32px Leading / -20 Tracking

Helvetica Neue Bold 36px

36px Leading / -30 Tracking

Helvetica Neue Bold 32px

32px Leading / -20 Tracking

Helvetica Neue Bold 28px

28px Leading / -20 Tracking

Body copy

Helvetica Neue Bold 24px

24px Leading / -15 Tracking

Restricted size – only to be used as uppercase

HELVETICA NEUE BOLD 21PX

22px Leading / -15 Tracking

UX&D 31
03 Building blocks Typography

IPTV GEL style guide | October 2011

Putting it together
This is an example of how headers

Super Header 66px

and body text can be formatted
using the specified type sizes on
GEL on IPTV.

Header 60px
Subheader 36px
TIME STAMPS 21PX CAPITALS

Copy 24px Helvetia Neue Bold on 32px leading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec dictum est eget justo
ultrices tristique cras.

Copy 24px Helvetia Neue Bold on 32px leading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec dictum est eget justo
ultrices tristique cras.

UX&D 32
03 Building blocks Typography

IPTV GEL style guide | October 2011

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

32px 16px

32px
16px

16px
Title header 32px 16px
Title header 32px

16px 16px
Copy 24px Lorem ipsum Copy 24px Lorem ipsum
dolor sit amet, consectetur dolor sit amet, consectetur
adipiscing elit. Fusce sed adipiscing elit. Fusce sed
leo. Maecenas ultrices leo. Maecenas ultrices

UX&D 33
03 Building blocks Typography

IPTV GEL style guide | October 2011

Spacing continued...
...or aligned to the grid when there is no container.

16px
Title header 32px

16px
Copy 24px Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Fusce sed
leo. Maecenas ultrices

UX&D 34
03 Building blocks Iconography

IPTV GEL style guide | October 2011

Icons
A new icon set has been designed SIZE: 24 PIXEL Colour key: Colour key: Colour key: Colour key: Back to all
in harmony with the BBC’s visual Red Green Yellow Blue

language. The default icon size for

TV is 24px.

For the full range of icons, refer to

the BBC GEL Icons documents at SIZE: 24 PIXEL
ON BLACK

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

UX&D 35
03 Building blocks Image sizes

IPTV GEL style guide | October 2011

Image sizes
Where possible, use 16:9 images
that align with the grid. 16:9

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 Backgrounds,

images, use safe black (#101010) banners,
and safe white (#EBEBEB). promotions and
cut-outs can
be a variety of
shapes and sizes
as long as there
is alignment with
the universal
grid.

UX&D 36
 IPTV GEL style guide | October 2011
04 TV patterns
The TV design patterns library is a repository
of simple, re-skinnable screen components.
The patterns are available at bbc.co.uk/gel

UX&D 37
 IPTV GEL style guide | October 2011
UX&D
For more information visit bbc.co.uk/gel

38