Building an
IPTV Global Experience Language
for the BBC
UX&D
Contents
00 Introduction
01 Device considerations
Designing for TV
Screen safe areas
Background elements
5
10
13
02 Foundations
Universal grid
BBC brand block
Component states
Remote control usage
Progressive reveal
16
18
19
20
21
03 Building blocks
Colour guide
Typography
Iconography
Image sizes
23
30
35
36
04 TV patterns
37
UX&D
00 Introduction
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
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.
UX&D
01 Device considerations
Designing for TV
Screen safe areas
Device capabilities
Backgrounds and transparencies
UX&D
Hardware
Display
Unlike computer monitors, many
TVs still have problems displaying
basic shapes and colours. This
section explains some of these
problems and how to overcome
them.
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.
Flicker
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.
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.
UX&D
Bloom
Moir
Design considerations
Design considerations
UX&D
Large, clearly defined regions of cool desaturated 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
Pixel size
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.
1px
1.0667px
Computer
Pixel
Television
Pixel
1px
Computer pixel
Television pixel
UX&D
UX&D
576px
Designing for TV
Checklist
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.
UX&D
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.
UX&D
10
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
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
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
creating a sense of depth.
Recommended
UX&D
Flat transparency
Apply transparencies
at 70% opacity,
unless applying a
gradient effect as
shown above (10%
50% has been used)
Shadow/
transparencies with
alpha channels
Shadows are created
as transparencies
with alpha channels.
13
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.
Recommended
UX&D
Flat transparency
Use alpha channels
sparingly or revert
to solid colours for
optimal performance.
Shadow/
transparencies with
alpha channels
Use gradient or softedged shadows
sparingly or resort to
flat transparencies to
create the effect of a
shadow, for optimal
performance.
14
02 Foundations
Universal grid
BBC brand block
Remote control usage
Progressive reveal
UX&D
15
The grid
16px
UX&D
1280px
16
Baseline
Were also employing a 16px
baseline grid to help with vertical
alignment of page components.
Slavish adherence to the baseline
isnt 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.
UX&D
16px
720px
17
Exclusion Zone
Service name
NEWS
Exclusion
zone
Minimum size
85px
UX&D
18
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
5 way controller
Transport controls
UP
PLAY
DOWN
PAUSE
LEFT
STOP
RIGHT
REWIND
ENTER
FAST FORWARD
SKIP TO NEXT
SKIP TO PREVIOUS
Colour buttons
Back button
BACK
UX&D
20
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.
UX&D
21
03 Building blocks
Colour guide
Typography
Iconography
Images
UX&D
22
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
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
colours used for BBC News and
BBC Sport are applied to their
respective sections.
Example of focus
state within BBC
News.
Example of focus
state within BBC
Sport.
UX&D
24
Transparency
Only apply transparent colour over
video or images if needed and
remember to use it sparingly as it
can impact system performance.
Examples of different
colour overlays at 90%
transparency
UX&D
25
UX&D
26
UX&D
27
Gradient
Gradient
Gradient
Drop
shadow
UX&D
Drop
shadow
28
Colour contrast
The use of colour in the interface
must be suitable for people
who have some form of colourblindness, 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
Sports
News
Sports
News
UX&D
29
Typography
Fonts
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 BBCs
IPTV platforms.
Georgia Italic Bold should be
used for short quotations from
BBC Blogs or third party websites
within a module.
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!@$%^&*()_+
UX&D
30
Type sizes
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.
Header 60px
60px Leading / -20 Tracking
UX&D
31
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 60px
Subheader 36px
TIME STAMPS 21PT CAPITALS
UX&D
32
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
32px
16px
16px
UX&D
16px
16px
16px
16px
33
Spacing continued...
...or aligned to the grid when there is no container.
16px
16px
UX&D
34
Icons
A new icon set has been designed
in harmony with the BBCs visual
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
Colour key:
Red
Colour key:
Green
Colour key:
Yellow
Colour key:
Blue
Back to all
SIZE: 24 PIXEL
ON BLACK
www.bbc.co.uk/gel/web/buildingblocks/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
Image sizes
Where possible, use 16:9 images
that align with the grid.
16:9
UX&D
Backgrounds,
banners,
promotions and
cut-outs can
be a variety of
shapes and sizes
as long as there
is alignment with
the universal
grid.
36
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
UX&D
For more information visit bbc.co.uk/gel
38