Anda di halaman 1dari 38

IPTV GEL style guide | March 2012

IPTV GEL Style guide

Building an
IPTV Global Experience Language
for the BBC

UX&D

IPTV GEL style guide | March 2012

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

IPTV GEL style guide | March 2012

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

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.

IPTV GEL style guide | March 2012

01 Device considerations

Designing for TV
Screen safe areas
Device capabilities
Backgrounds and transparencies

UX&D

IPTV GEL style guide | March 2012

01 Device considerations Designing for TV

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.

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.

UX&D

IPTV GEL style guide | March 2012

01 Device considerations Designing for TV

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


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.

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

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.

Design considerations

Design considerations

Avoid strong colour contrast along vertical


edges.

Images and flat colours may need to be


toned down when taken from the computer
to the TV screen.

Text in strong colours near rectangular edges


can cause especially bad distortion.

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

Hot reds and oranges are problematic and


can cause distortion.

Single pixels can cause flicker, therefore


avoid applying dither to images.

Pure white and black should always be


avoided. Use safe white (#EBEBEB) and safe
black (#101010).

Avoid using intricate patterns on screen.

IPTV GEL style guide | March 2012

01 Device considerations Designing for TV

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.

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.

1px

1.0667px

Computer
Pixel

Television
Pixel

1px

Computer pixel

Television pixel

Computers generate square pixels


so you need more in a TV line

UX&D

IPTV GEL style guide | March 2012

01 Device considerations Designing for TV

Producing graphics for wide screen


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.
4:3 centre cut-out

16:9 shrunk to fit 4:3

The left and right edges of the


widescreen image will not be visible
on any set where the image is
cropped to 4:3.

The entire application may be shrunk


25% to fit within a letterbox format
on a 4:3 set.

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.

UX&D

In this case, any text in the video


must be large enough to stay legible
at a smaller size.

4:3 centre cut-out


1024px

576px

768px centre cut-out


16:9 shrunk to fit 4:3

Wide screen image shrunk


by 75% of total size
576px

Therefore the font size used should


be at least 24pt when designing for
wide screen video streams to allow
for this potential size reduction.
768px letterboxed

IPTV GEL style guide | March 2012

01 Device considerations Designing for TV

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.

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.

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

IPTV GEL style guide | March 2012

01 Device considerations Screen safe areas

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

IPTV GEL style guide | March 2012

01 Device considerations Screen safe areas

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

IPTV GEL style guide | March 2012

01 Device considerations Screen safe areas

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

IPTV GEL style guide | March 2012

01 Device considerations Background elements

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

IPTV GEL style guide | March 2012

01 Device considerations Background elements

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

IPTV GEL style guide | March 2012

02 Foundations

Universal grid
BBC brand block
Remote control usage
Progressive reveal

UX&D

15

IPTV GEL style guide | March 2012

02 Foundations Universal grid

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

1280px

16

IPTV GEL style guide | March 2012

02 Foundations Universal grid

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

IPTV GEL style guide | March 2012

02 Foundations BBC brand block

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
Not embedded in text or
sentences
Not used as a pattern or as a
design feature

NEWS

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.

The Service name appears to the


right of the BBC block.

Minimum size

85px

The minimum size for the BBC


blocks is 85px wide for TV.

UX&D

18

IPTV GEL style guide | March 2012

02 Foundations Component states

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

IPTV GEL style guide | March 2012

02 Foundations Remote control usage

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.

5 way controller

Transport controls

UP

PLAY

DOWN

PAUSE

LEFT

STOP

RIGHT

REWIND

ENTER

FAST FORWARD
SKIP TO NEXT

Avoid using other buttons on remote


controls such as the hidden power
buttons.
Note: these icons are not intended
for use in your designs.

SKIP TO PREVIOUS

Colour buttons

Back button
BACK

UX&D

20

IPTV GEL style guide | March 2012

02 Foundations Progressive reveal

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.

First level interaction


Reveals the first interface element and takes
up no more than a third of the screen. Its
important to show a partial reveal on first press
so users dont 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.

UX&D

21

IPTV GEL style guide | March 2012

03 Building blocks

Colour guide
Typography
Iconography
Images

UX&D

22

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

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

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

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

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

Transparency
Only apply transparent colour over
video or images if needed and
remember to use it sparingly as it
can impact system performance.

Colour overlay example

Never apply colours at less that


90% transparency.
90%
90%

Examples of different
colour overlays at 90%
transparency

UX&D

25

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

Gradients and drop shadows


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.

Creating black and white gradients


Light source

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

IPTV GEL style guide | March 2012

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.

UX&D

27

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

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
shadow

UX&D

Drop
shadow

28

IPTV GEL style guide | March 2012

03 Building blocks Colour guide

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

Suitable contrast of text on background


Read more

Sports
News

Unsuitable contrast of text on background


Read more

Sports
News

UX&D

29

IPTV GEL style guide | March 2012

03 Building blocks Typography

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.

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!@$%^&*()_+
UX&D

30

IPTV GEL style guide | March 2012

03 Building blocks Typography

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

Helvetica Neue Bold 36px

36px Leading / -30 Tracking

Helvetica Neue Bold 32px


32px Leading / -20 Tracking

Helvetica Neue Bold 28px


28px Leading / -20 Tracking

Short quotation from BBC Blogs or a third party website

Georgia Italic 25px


29px Leading / 0 Tracking
Body copy

Helvetica Neue Regular 24px


29px Leading / -15 Tracking

Restricted size only to be used as uppercase

HELVETICA NEUE BOLD 21PX


29px Leading / -15 Tracking

UX&D

31

IPTV GEL style guide | March 2012

03 Building blocks Typography

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

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.

UX&D

32

IPTV GEL style guide | March 2012

03 Building blocks Typography

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

Title header 32px

16px

16px

Copy 24px Lorem ipsum


dolor sit amet, consectetur
adipiscing elit. Fusce sed
leo. Maecenas ultrices

UX&D

16px
16px
16px

16px

Title header 32px

Copy 24px Lorem ipsum


dolor sit amet, consectetur
adipiscing elit. Fusce sed
leo. Maecenas ultrices

33

IPTV GEL style guide | March 2012

03 Building blocks Typography

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

16px

16px

Title header 32px

Copy 24px Lorem ipsum


dolor sit amet, consectetur
adipiscing elit. Fusce sed
leo. Maecenas ultrices

UX&D

34

IPTV GEL style guide | March 2012

03 Building blocks Iconography

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

IPTV GEL style guide | March 2012

03 Building blocks Image sizes

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 youre using black or white in your
images, use safe black (#101010)
and safe white (#EBEBEB).

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

IPTV GEL style guide | March 2012

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 | March 2012

UX&D
For more information visit bbc.co.uk/gel

38

Anda mungkin juga menyukai