Digital display standardscontent.tfl.gov.uk/tfl-digital-display-standards.pdf · The only font to...

Digital display standardsIssue 2

Content

Basic elements

1 3Transitions and animations

4Information on mulitple screens

5Mock-ups of digital displays

District line

Circle line

Central line

Basic rules of layout

2

3

2

2

2

3

Platform

1

Circle LineBakerloo

Central

Circle

District

Hammersmith and City

Metropolitan

North

Victoria

Waterloo and City

Docklands Light Railway

London Overground

Jubilee Severe delays

Severe delaysSevere delaysTFL Rail

Other travel information

Step free access (pontoon dock)

No step access for trains towards Canning Town

No step access for trains towards West Ham

No step access for trains towards Hammersmith and City platforms

Good serviceoperates on all other lines

MPs are debating in the house

Severe dela

Introduction

Digital display standards have been produced to ensure consistency across all of TfL’s digital displays.

They are designed to ensure consistency of spacing, size of font, use of colour etc.

The standards also help to ensure that information is displayed in a modular nature.

The standards do not specify the type of hardware or software to be used.

‘Digital displays’ are defined in this document as electronic screens that convey across TfL-controlled information to customers via live feeds.

Such displays may be in stations, on vehicle or on street.

These standards do not apply to websites or dot matrix indicators.

For guidance around the process for developing a digital customer information solution, including information hierarchy and ensuring alignment with the principles of the Customer Information Strategy, please contact the Real-Time Information & Innovation Working Group: [email protected]

For guidance on implementing the rules within these standards please email [email protected]

1.0 Basic elements

This section provides guidance on the basic elements that make up the TfL digital display standards.

Further information on TfL graphic standards canbefoundatt .gov.u corporatedesign.

District line

Circle line

Central line

1.1 Grid

All TfL digital displays must work to a grid, as shown.

A grid is used to ensure that a transferable unit of measurement is available for all screen sizes and aspect ratios. A grid should adapt to any screen size or aspect ratio.

1.2 Screen aspect ratios

4:3

16:9

21:9

16:6

Shown here are examples of common screen aspect ratios.

Note that aspect ratios (as well as screen dimensions) will vary in size.

1.3 Units

1 unitEach grid is composed of a number of units.

A 16:9 screen is 16 units wide by nine units deep and a 21:9 screen is 21 units wide by nine units deep.

Regardless of the screen size the number of units used is to be determined by the aspect ratio.

Example of a 16:9 grid

1.4 Squares

8 squares

8 squares

Each unit is divided into 8 x 8 squares to enable font sizes to be set at a reasonable height in relation to the overall screen display area.

The square is the base unit of measurement for TfL digital displays.

1.5

widget isde nedasaself containedpieceof customer information. The information may relate to train arrival times, bus departures, cycle docking station availability etc.

All information contained within a widget mustbeclearandidenti able.

Widgets may vary in size.

MonMile End, Bow Road, Bromley by Bo

Platform

1

5 min

Monument, Tower Hill, Aldgate East, Whit

District line

East Ham

1.5 Widgets

1.6 Widget mock-ups

Further mock-ups of widgets at different sizes containing customer information are shown here.

11x8 widget

16x1 widget

16x9 widget6x16 widget

South QuayEast Wood

Wharf

BlackwallBasin

PoplarDock

ThamesQuay

West India andMillwall Docks

WoodWharf

NorthQuay

Jubilee Park

The ParkPavilion

BO

AR

DW

AL

K P

LA

CE

M A C K E N Z I EWA L K

F I S H E R M A N ’ S WA L K

FR

OB

I SH

ER

PAS

SA

GE

CH

AN

CE

LLO

RPA

SS

AG

E


AD

AM

S P

LA

CE

CA

NA

DA

SQ

UA

RE

T H E S O U T H C O L O N N A D E

T H E N O R T H C O L O N N A D E

C H U R C H I L L P L A C E

MA

NC

HE

ST

ER

L O V E G R O V E WA L K

S W I N GB R I D G E

TRAFA

LGA

R WAY

T R A FA L G A R WAY

T H E N O R T HC O L O N N A D E

T H E S O U T H


R E U T E R SP L A Z A

C A S T O R L A N E

C A N A D A S Q U A R E


A D M I R A L S WAY


B A N K S T R E E T

MO

NT

GO

ME

RY

ST

RE

ET

H E R O N

UP

PE

R B

AN

K

ST

RE

ET

M O N T G O M E R YS Q U A R E J U B I L E E

P L A Z A

B L U EB R I D G E

C A R T I E RC I R C L E

L I M E H O U S E L I N K

M A R S H W A L LP

RE

ST

ON

’S

R

OA

D

A S P E N W A YA S P E N W A Y

Subway

Footbridge

Footbridge

Statue

MarriottHotel

Playon Indoor Sports

10The South

Colonnade

5The NorthColonnade

30The SouthColonnade

25BankStreet

25The NorthColonnade

OneCanadaSquare

33CanadaSquare

5CanadaSquare

25CanadaSquare

8CanadaSquare

Waitrose

20CanadaSquare


18CanadaPlace

BillingsgateFish Market

IdeaStore

1ChurchillPlace

Jack DashHouse

HiltonHotel

50BankStreet 40

BankStreet

10UpperBankStreet

PoplarPoplar

WestIndia QuayWestIndia Quay

CanaryWharfCanaryWharf


HeronQuaysHeronQuays

South QuaySouth Quay

ooplarPPness Paarkess PauBusin

South QuayutooSouthSoSoutQuay

AC KC KC KCB L AC KWA L LLB L KKLL KWWKKWKK

P L A RAA RPPO P LP L A RRPO L AA RA RA RPPPPPPPPP OPOPOPOPOPOPOPOPOPOPP RRA

NNNNNNN

Jubilee ubilee ubilee ubilee ubilee PaPark

UP

PE

R B

AN

K

ST

RE

ET

Y

BStreet

r

Street

WharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWhar

10UppeBankStreet

ppeank

Street

Footbridge

25

HeroHeroHeroHeroHeroHeronHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeronnnnnnnnnnnnnnnnnnQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayssss

CH

AN

CE

LLO

RC

HA

NC

EL

LOR

CH

AN

CE

LLO

RPA

SS

AG

EPA

SS

AG

EPA

SS

AG

EPA

SS

AG

EPA

SS

AG

E

T H

R E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SP L A Z AP L A Z AP L A Z AP L A Z AP L A Z AP L A Z A

H E R O N

J U B I L E EJ U B I L E EJ U B I L E EJ U B I L E EP L A Z AP L A Z AP L A Z A


South Quay

MO

NT

GO

ME

RY

ST

Y S

TY

ST

Y S

TY

ST

RE

ER

EE

RE

ER

EE

RE

ER

EE

RE

ER

EE

RE

ER

EE

T

M O N T G O M E RM O N T G O M E RM O N T G O M E RM O N T G O M E RM O N T G O M E RS Q U A R ES Q U A R ES Q U A R ES Q U A R E

M O N T G O M E R

Docking station name

0 Bikes 0 Spaces

Click on a docking station to see how many bikes and spaces are available

0 0

cle carefully through the park....Pl

2

3

4

1

Local buses

A

B

F

C

C12

7

Chadwell Heath

Shenfield, Brentwood, Harold Wood, Gidea Park, Romford, Chadwell Heath, Goodmayes

Shenfield, Brentwood, Harold Wood, Gidea Park, Romford, Chadwell Heath, Goodmayes

Liverpool Street Station, Maryland, Forest Gate, Manor Park, Ilford, Seven Kings, Goomay

Breaking news MPs are debating in the house of commons and will

1.7 Typography

123456AbcdeNew Johnston Medium

New Johnston Light

The only font to be used on digital display screens is the New Johnston typeface.

There are two weights of the New Johnston font that may be used:

• New Johnston Medium for headings • New Johnston Light for body copy

All text is to be ranged left (except numerals, which are to be ranged right where appropriate).

All text is to be displayed in mixed upper and lower case (never all upper case).

Always ensure good colour contrast between text and background colour. The relationship between the text and background colour is more important than the colour of the text itself.

1.8 Font sizes

There are three font sizes that are to be used on TfL digital displays:

Four squares high This size text is to be used for main headings.

Three squares high This size text is to be used for primary information where space allows.

Two squares high This size text is used for all other information.

FourThree

4

3

2

1.9 Viewing distances

Grid sizes should be determined by viewing distances.

Text should always be shown at the correct height for the viewing distance (eg a viewing distance of six metres should display the smallest text size, within the display screen, at a cap height of 20mm).

In such an instance, as above, with the smallest font size being two squares high, each square on the grid would need to represent 10mm when displayed (2 x 10mm = 20mm).

An appropriate display screen size should be used to reproduce text at the correct size.

Contents1.3 Makingtextlegibleoncampaignpostersandleaflets

The information here and on the following pages contain the elements that are to be considered when applying text to any TfL creativeposter.Theseelementsareusedtoenable the text on our posters to be easily legible for all our customers.

TypefaceNew Johnston is TfL’s typeface and should be used in nearly all instances. New Johnston Medium is used for headings.

New Johnston Light is used for body copy and calls to action.

Ifusingacreativetypefaceforaheadline,avoidhighlystylizedtypefacessuchasornamental,decorativeorhandwritingstyles.Stylizedtypefacesshouldneverbeusedforbody copy and calls to action.

Type sizePoint sizes on a poster are determined by the minimum distance from which a poster is to beread.Thechart(1)showsthedistanceatwhich certain sizes of lettering can be read by apersonofaverageeyesight.

Cap

heig

ht in

mill

imet

res

Poster distance in metres

0

6 8

10

20

30

40

50

60

70

80

90

100

110

120

130

140

150

160

170

180

190

200

210

1

12 16 24.5 32.5 49 60.8

co i ed o e p e

1.10 Abbreviations

This list shows acceptable contractions of names for use on digital screens.

If a situation arises where there is a need to contract a name not coveredhere,pleasesee adviceinthe rstinstance from TfL Corporate Design.

In order to maintain consistency across all TfL information, changes to any names or contractions of names are subject to approval by TfL Corporate Design.

1.11

Primary

Corporate BlueR53 G58 B140

Text Grey R45 G48 B57

Background Grey R238 G238 B238

Evacuation Red R220 G36 B31

Base Blue R28 G48 B57

Base Light Blue R49 G107 B152

Disruption Yellow R252 G198 B79

Legible London Blue R3 G16 B65

Background WhiteR0 G0 B0

TfL's primary pallet consists of a number of colours which are used across all digital display screens.

Inaddition,therearemodespeci candndergroundlinespeci ccolours.

No other colours are to be used without prior consent from TfL Corporate Design.

1.11 Colours

1.12

Mode specific Underground colours

Dial-a-Ride R183 G39 B191

DLR R0 G175 B173

Overground R239 G123 B16

Buses R220 G36 B31

TramsR63 G171 B53

Cycles R220 G36 B31

Elizabeth line R147 G100 B204

Underground R53 G58 B140

Taxi/Private Hire R132 G128 B215

TfL Rail R53 G58 B140

Coaches R241 G171 B0

RiverR0 G160 B226

Cable Car R217 G0 B42

Central R228 G35 B19

CircleR255 G211B41

Waterloo & City R147 G206 B186

Northern R0 G0 B0

Piccadilly R0 G25 B168

VictoriaR0 G152 B216

JubileeR161 G165 B167

Bakerloo R178 G99 B0

Metropolitan R155 G0 B88

H’smith & City R244 G169 B190

District R0 G125 B50

1.12 Colours (continued)

1.13

Information on the display screen should be branded by one of the logos or pictograms shown here.

All logos and pictograms are available from TfL Corporate Design.

1.13 Branding

District line

TfL Rail

Jubilee line

Elizabeth line

DLR

Victoria Coach Station

Circle line

London Buses

Central line

Santander Cycles

London Overground

Hammersmith & City line

Northern line

London Dial-a-Ride

London River Services

Metropolitan line

London Trams

London Underground

Piccadilly line

Bakerloo line

Victoria line

Transport for London

London Taxi and Private Hire

Emirates Air Line

Waterloo & City line

National Rail

Modes Underground

Modal and line banners are to be used to help identify the mode of transport or Underground line that the information being displayed relates to.

All banners are available from TfL Corporate Design.

1.14 Modal and line banners

Platform

Platform

Platform

Platform

Platform

Platform Platform

Platform Platform

10

13

11

14

12

15 16

8

9

Additional graphical elements are to be used where appropriate.

Please note that graphical elements shown here are examples only.

Please contact TfL Corporate Design for any graphical element required.

A CB

BFDBFCBFBBFA

D

1.15 Additional graphical elements

0.25X

X

0.25X

There are two types of line that are displayed on a digital screen.

Solid line The height of a solid line is 0.25 x 1 square high.

Dotted line A dotted line consists of a row of circles with a diameter of 0.25 x 1 square. Space between each circle is 0.25 x 1 square.

Lines are always to be anchored vertically to the centre of a grid line.

1.16 Lines and rules

2.0 Basic rules of layout

This section explains the basic rules of layout for a digital display.

The examples shown will be for a 16:9 display screen. The content will be representative.

Please note that these are mock-ups onlyandthat naldetailsforeachdisplayscreenwillbedeterminedbythespeci crequirements of individual briefs and research undertaken with customers.

2.1 Margins

1

3

2

This 16:9 example consists of two 8:8 widgets and a16:1 widget.

Both 8:8 widgets have left and right-hand margins of two squares each. The 16:1 widget, which will contain newsfeed information, has a left and right-hand margin of two squares each.

2.2 Logo and headings

The logo is always to be displayed at nine squares wide. The main heading is always to be displayed at four squares high.

The logo must be centered on the title copy as shown in the example opposite.

2

34

9 2

2.3 Modal and line banners

District line3

2 2Modal and line banners are to be displayed at three squares high beneath the branding and main heading.

2.4 Platform information

9 22

23

412

platformidenti eristobeplacedtwos uaresbelowthemodal linebanner. It is to be set at nine squares wide.

Te twithintheplatformidenti eris preset and provided as a graphic element. Do not attempt to type in text within the platformidenti er.

Text identifying the platform direction is set at four squares high. The secondary platform directional text is set at two squares high.

A rule is placed two squares below the platformidenti erandisthesamewidth asthemodal linebanner.

2.5 Service information

333

2

2

Service information should be displayed in a manner that allows customers to easily follow the information presented in a hierarchical manner.

Text size used should take into account viewing distances and hierarchy of information. However, only the three text sizes shown earlier in the document (see section 1.7.1) should ever be used.

The example shown here illustrates the order of train arrival, the end destination of the train and the wait time before the train arrives.

Supplementary information such as the 'calling at' locations may also be shown below the main information.

East Ham

2

2.6 Clock

35

3

A clock is to be displayed on all screens to indicate to customers that the information displayed is live.

The clock should always be placed on the right-hand side of the screen.

The default position on a landscape screen is in the top right-hand corner against the right-hand margin and horizontally centred withthelogo.Thiswillplace ves uaresabove the clock. The clock itself will be three squares high.

Please note that there is no branding or headline in the second widget, as this area is occupied by the clock.

The clock must be digital and in the format shown (hh:mm:ss).

District line

East Ham Richmond

Earl's Court

2.6.1 Clock continued

There will be instances where the clock cannot be displayed in the top right-hand corner. It should therefore be displayed in the bottom right-hand corner as shown.

B

CE

F

A

20812

1

2

3

D

F

C

B

A

2.6.2 Clock (continued)

Where a screen is in portrait mode the clock is positioned above the branding and main heading as shown.

Next bus

2.7

District line

East Ham Richmond

Earl's Court

2.7 Footer widget

8128

3

Footer widgets are to be displayed on all screens to provide live data to customers on any subject required (eg news). Footer widgets may be comprised of a number of elements.

Organisation logo The organisation logo will be provided as a graphic by TfL Corporate Design. Text and imagery within this graphic is preset and provided as a single element.

Scrolling text Text within the footer is set at three squares high. The background colour may be determined by the organisation's brand colour. However, the brand colour used should not clash with any operational mode or line colour used unless agreed by TfL Corporate Design.

The weather graphic The weather graphic is always set against a blue background. Text within the graphic is three squares high. The weather symbol will be provided by TfL Corporate Design. Imagery within this graphic is preset and provided as a single element.

Overall, the footer widget should be no more than one unit high. It may, however, vary in width (depending on screen size).

3

2.8 Service disruption

When there is a disruption to the service the footer widget is replaced by a service disruption message as shown.

All service disruption information should be displayed on a yellow background

The weather graphic is removed from the screen altogether.

District line

East Ham Richmond

Severe delays are occurring on the District, Metropolitan and Victoria lines...Severe delay are occurring on the Dis...

2.9 Station evacuation

When a station needs to be evacuated the screen background colour is to be turned red and the text used is to be white.

Please evacuate the station... Please evacuate th

2.10 Multiple Underground lines

Where more than one Underground line is represented on a widget the banners should be displayed as shown.

Where two lines are displayed, the banner is split into two equal halves, with each half representing one of the two lines.

Where three lines are displayed, the banner is divided into thirds, with each third representing one of the three lines.

Each line is to be displayed in correct alphabetical order. (Four Underground never use the same stretch of track).

District line Circle line District line

Towards Upminster

Towards Liverpool Street

Towards Barking

2.11 Multiple train modes

Where more than one train mode is represented on a widget the banners should be displayed as shown.

Where National Rail services are shown alongside TfL services the National Rail logo is to be displayed as shown.

Both logos should be displayed at eight squares wide.

Both logos and headline text are horizontally centred.

TfL services are to be seen as transport modes.

Train Operating Companies (TOCs) come under the National Rail mode. Therefore the TOC logo or a TOC banner is never to be displayed on a display screen. Only the National Rail logo and banner are used to represent TOCs.

Where more than one TfL mode is displayed the all-blue TfL roundel is to be used.

Only one TfL roundel is to be used to brand a piece.

TfL Rail TfL Rail

3.0 Transitions and animations

DueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDue

East Ham 1 min

3.1 Transitions and animations

Richmond

Earl's Court

Due

DueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDueDue

East Ham 1 min

East Ham 1 min

...and then move up

There is only one style of transition and one style of animation that may be used to bring life to TfL's digital displays.

1 The wipe

The wipe is used to remove information from the screen without removing the entire widget. It travels from one side of an area to the other.

Once information has been wiped clear, the second piece of information is displayed.

2 The animated carousel

This is used to animate moving text where the text required is longer than the area allocated for display.

Text should always move from right to left.

orfurtherinformationandclari cationoftransitions and animations please contact TfL Corporate Design.

'Calling at' remains edand the station names rotate behindthe edcalling at.

Wipe left...

The wipe

The carousel

4.0 Mulitple screens

The following pages show how mulitple screens can be used to display digital information.

4.1 Mock-up 1

9

9

Arrival Platform

5 mins

8

2

08:18 7

10

07:45 6

Service

The mock-up here shows a single widget detailing train wait times over two screens.

Two rail modes display service times, service destinations, wait times and platform information.

A news feed widget is displayed in the footer at the bottom screen.

Richmond

Richmond

Richmond

West Croydon

Clapham Junction

Clapham Junction

Hampstead Heath

Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian




Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian Road and Barnsbury,



4.2 Mock-up 2

The mock-up here shows two widgets detailing platform information over two screens.

Two rail modes display service times, service destinations and platform information.

A news feed widget is displayed in the footer at the bottom screen.

Departures continued

6

14

Hackney Wick, Homerton, Hackney Centr Hackney Wick, Homerton, Hackney Centr


Hackney Wick, Homerton, Hackney Centr









4.3 Mock-up 3

The mock-up here shows four widgets detailing train departures over two screens.

The screen on top displays London Underground District line eastbound and westbound order of arrival, service destination and wait times.

The screen at the bottom displays TfL Rail eastbound and westbound order of arrival, service destination and wait times.

News feed and social media widgets are displayed at the foot of both screens.

4.4 Mock-up 4

Example 1 4 screens x 4 grids

Example 2 4 screens x1 grid

The mock-ups here show how four screens can be used to show four different grids (Example 1) or a single grid over four screens (Example 2).

Example 2 may be used where, due to viewing distances, the information needs to be displayed at a larger size for legibility.

Four live ticker widgets are displayed at the foot of each screen in Example 1.

In Example 2 a single newsfeed widget is shown.

District line

Platform

1

5 min

WestboundPlatform

2

Due

5 min5 min

District line

Platform

3

Next trains

WestboundPlatform

4

Due

5 min

District line

Platform

1

5 min

Next trains

WestboundPlatform

2

Docklands Light Railway Docklands Light Railway

Due

5 min3 min

2

3

4

1

Local buses

A

B

F

C

C12

7

District line

Platform

1

5 min

Next trainsCircle Line Circle LineDistrict line District lineH’msmith & City line H’msmith & City line

WestboundPlatform

2

Due

5 min5 min

Towards Woolwich Arsenal

Towards South KensingtonUpminster

Stratford

Upminster

East Ham

Edgware Road

Edgware Road

Bank

Stratford Bank

Stratford, Stratford High Street, Abbey R Stratford, Stratford High Street, Abbey R

Stratford, Stratford High Street, Abbey Roa

Temple, Blackfriars, Mansion House, Cann

Temple, Blackfriars, Mansion House, Cann

Westminster, St James's Park, Victoria, Slo

Stratford, Stratford High Street, Abbey Roa

Leyton Stratford West Ham Stratford

Leyton Leyton Stratford Stratford

Towards Epping Towards West Rislip Towards Stanmore Towards Stratford

Leyton, Leytonstone, Snaresbrook, South Mile End, Bethnal Green, Liverpool Street Canning Town, North Greenwich, Canary Stratford

StratfordCanning Town, North Greenwich, CanaryMile End, Bethnal Green, Liverpool StreetLeyton, Leytonstone, Snaresbrook, South

5 min

D

F

CB

A

4.5 Mock-up 5

The mock-up here shows fours widgets detailing train departures over two screens (side by side).

Two news feed widgets are displayed at the foot of each screen.

District line

5 min

District line

Platform

1

5 min

Next trains

WestboundPlatform

2

Circle LineDistrict line District lineCircle Line

Due

5 min

Breaking news MPs are debating in the House of Commons and will vote on whether

Upminster

Barking

Richmond

Circle linevia High St Kensington

Calling at: Westminster, Embankment, Temple

Calling at: Westminster, Embankment, Temple Calling at: Victoria, Sloane Square, South Kens

Calling at: Victoria, Sloane Square, South Kens

Westbound

Jubilee Jubilee

Due

5 min

Towards StratfordTowards Stanmore

Stanmore Stratford

StratfordStanmore

Calling at: Green Park, Bond Street, Baker Street Calling at: Waterloo, Southwark, London Bridge


Platform

43Platform

Britain should leave the European Union... MPs are debating in the

5.0 Mock-ups of digital displays

This section shows mock-ups of digital displays in potential live situations.

5.1 Two screens landscape entrance

The mock-up here shows the principles of this document applied to two London Underground departure boards.

District line

5 min

District line

Platform

1

5 min

Next trains

WestboundPlatform

2

Circle LineDistrict line District lineCircle Line

Due

5 min

Upminster

Barking

Richmond

Circle linevia High St Kensington

Calling at: Westminster, Embankment, Temple

Calling at: Westminster, Embankment, Temple Calling at: Victoria, Sloane Square, South Kens

Calling at: Victoria, Sloane Square, South Kens

Westbound

Jubilee Jubilee

Due

5 min

Towards StratfordTowards Stanmore

Stanmore Stratford

StratfordStanmore



Platform

43Platform

Breaking news MPs are debating in the House of Commons and will vote on whether Britain should leave the European Union... MPs are debating in the

5.2 Two screen landscape exit

The mock-up here shows the principles in this document applied to a landmark nderandabusarrivalboard. South Quay

East WoodWharf

BlackwallBasin

PoplarDock

ThamesQuay


WoodWharf

NorthQuay

Jubilee Park

The ParkPavilion

BO

AR

DW

AL

K P

LA

CE



FR

OB

I SH

ER

PAS

SA

GE

CH

AN

CE

LLO

RPA

SS

AG

E


AD

AM

S P

LA

CE

CA

NA

DA

SQ

UA

RE




MA

NC

HE

ST

ER



TRAFA

LGA

R WAY



T H E S O U T H





A D M I R A L S WAY


B A N K S T R E E T

MO

NT

GO

ME

RY

ST

RE

ET

H E R O N

UP

PE

R B

AN

K

ST

RE

ET


P L A Z A

B L U EB R I D G E


M A R S H W A L L

PR

ES

TO

N’

S

RO

AD


Footbridge

Statue

MarriottHotel


10The South

Colonnade

5The NorthColonnade


25BankStreet


OneCanadaSquare

33CanadaSquare

5CanadaSquare

25CanadaSquare

8CanadaSquare

Waitrose

20CanadaSquare


18CanadaPlace


IdeaStore

1ChurchillPlace

Jack DashHouse

HiltonHotel

50BankStreet 40

BankStreet

10UpperBankStreet

PoplarPoplar







A C KC KC KCB L A C K WA L LLB L KKLL K WWKK WKK

NNNNNNN

B

CE

F

ASouth Quay

East WoodWharf

BlackwallBasin

PoplarDock

Millwall Docks

WoodWharf

NorthQuay

Jubilee Park

The ParkPavilion

BO

AR

DW

AL

K P

LA

CE



FR

OB

I SH

ER

PAS

SA

GE

CH

AN

CE

LLO

RPA

SS

AG

E


AD

AM

S P

LA

CE

CA

NA

DA

SQ

UA

RE






TRAFA

LGA

R WAY



T H E S O U T H



C A S T O R L A N E



A D M I R A L S WAY


B A N K S T R E E T

MO

NT

GO

ME

RY

ST

RE

ET

H E R O N

UP

PE

R B

AN

K

ST

RE

ET


P L A Z A

B L U EB R I D G E



PR

ES

TO

N’

S

RO


Subway

Footbridge

Footbridge

Statue

MarriottHotel


10The South

Colonnade

5The NorthColonnade


25BankStreet


OneCanadaSquare

33CanadaSquare

5CanadaSquare

25CanadaSquare

8CanadaSquare

Waitrose

20CanadaSquare


18CanadaPlace


IdeaStore

1ChurchillPlace

HiltonHotel

50BankStreet 40

BankStreet

10UpperBankStreet

PoplarPoplar







P L A RAA RPP O P LP L A RRP O L AA RA RA RPPPPPPPPP OP OP OP OP OP OP OP OP OP OPP RRA

NNNNNNN

1

A B C D E F

2

3

4

5

6

The Pavillion Park 3C

20 Canada Square

4D

Marriot Hotel

3D

6A

6F

2C

Heron Quays DLR station

Canary Wharf DLR station

Billinsgate Fish Market 2

3

4

1

South QuayEast Wood

Wharf

BlackwallBasin

PoplarDock

ThamesQuay


WoodWharf

NorthQuay

Jubilee Park

The ParkPavilion

BO

AR

DW

AL

K P

LA

CE

CA

NA

DA

SQ

UA

RE




MA

NC

HE

ST

ER



TRAFA

LGA

R WAY


T



B A N K S T R E E T

MO

NT

GO

ME

RY

ST

RE

ET

UP

PE

R B

AN

K

ST

RE

ET

M O N T G O M E R YS Q U A R E

B L U EB R I D G E


PR

SE

TO

N’

S

RO

AD


Footbridge

Statue


33CanadaSquar

5CanadaSquare

25CanadaSquare

8CanadaSquare

Waitrose

20CanadaSquare


18CanadaPlace


IdeaStore

1ChurchillPlace

Jack DashHouse

HiltonHote

50BankStreet10

UpperBankStreet

PoplarPoplar




NNNNNNN

B

CE

F

A

Local buses

A

B

F

C

C12

7

Breaking news MPs are debating in the House of Commons and will... Breaking news MPs are debating in the House of Com...

5.3 Electronic status update board (ESUB)

The mock-up here shows the principles in this document applied to an Electronic Station Update Board.

Jubilee

London Overground

TfL Rail

DLR

15:45:59

Services from Stratford

Other TfL services

Northern line Minor delays

Minor delays

Piccadilly line Severe delays

All other lines Good service

Good service

Good service

Good service

Good service

• No reported station closures across the network• No step-free access at Green Park

Other travel information

• Take bus 12 from stop F towards Ilford • Take bus 4..

• Between Arnos Grove and Cockfosters • Use Bus ro...

Severe delaysCentral line

Greater Anglia

Breaking news MP’s are debating in

5.4 Cycle hire docking station

The mock-up here shows the principles in this document applied to an electronic cycle hire update board.

South QuayEast Wood

Wharf

BlackwallBasin

PoplarDock

ThamesQuay


WoodWharf

NorthQuay

Jubilee Park

The ParkPavilion

BO

AR

DW

AL

K P

LA

CE



FR

OB

I SH

ER

PAS

SA

GE

CH

AN

CE

LLO

RPA

SS

AG

E


AD

AM

S P

LA

CE

CA

NA

DA

SQ

UA

RE




MA

NC

HE

ST

ER



TRAFA

LGA

R WAY



T H E S O U T H



C A S T O R L A N E



A D M I R A L S WAY


B A N K S T R E E T

MO

NT

GO

ME

RY

ST

RE

ET

H E R O N

UP

PE

R B

AN

K

ST

RE

ET


P L A Z A

B L U EB R I D G E



M A R S H W A L L

PR

ES

TO

N’

S

RO

AD


Subway

Footbridge

Footbridge

Statue

MarriottHotel


10The South

Colonnade

5The NorthColonnade


25BankStreet


OneCanadaSquare

33CanadaSquare

5CanadaSquare

25CanadaSquare

8CanadaSquare

Waitrose

20CanadaSquare


18CanadaPlace


IdeaStore

1ChurchillPlace

Jack DashHouse

HiltonHotel

50BankStreet 40

BankStreet

10UpperBankStreet

PoplarPoplar








AC KC KC KCB L AC KWA L LLB L KKLL KWWKKWKK

P L A RAA RPPO P LP L A RRPO L AA RA RA RPPPPPPPPP OPOPOPOPOPOPOPOPOPOPP RRA

NNNNNNN

Jubilee ubilee ubilee ubilee ubilee PaPaPaPark

UP

PE

R B

AN

K

ST

RE

ET

Y

BStreet

r

Street

WharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWharWhar

10UppeBankStreet

ppeank

Street

Footbridge

25

HeroHeroHeroHeroHeroHeronHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeroHeronnnnnnnnnnnnnnnnnQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayQuayssss

CH

AN

CE

LLO

RC

HA

NC

EL

LOR

PAS

SA

GE

PAS

SA

GE

PAS

SA

GE

PAS

SA

GE

PAS

SA

GE

T H

R E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SR E U T E R SP L A Z AP L A Z AP L A Z AP L A Z AP L A Z A

H E R O N

J U B I L E EJ U B I L E EJ U B I L E EJ U B I L E EP L A Z AP L A Z AP L A Z A


South Quay

MO

NT

GO

ME

RY

ST

Y S

TY

ST

Y S

TY

ST

RE

ER

EE

RE

ER

EE

RE

ER

EE

RE

ER

EE

RE

ER

EE

T

M O N T G O M E RM O N T G O M E RM O N T G O M E RM O N T G O M E RS Q U A R ES Q U A R ES Q U A R ES Q U A R E

M O N T G O M E R

Docking station name

0 Bikes 0 Spaces

Click on a docking station to see how many bikes and spaces are available

0 0

cle carefully through the park....Pl

5.5 In-train display

The mock-up here shows the principles in this document applied to an in-train display board.

Bakerloo DistrictGood Service Good ServiceCentral H’smith & CityGood Service Good ServiceCircle JubileeGood Service Good Service

Breaking news MPs are debating in the House of Commons and will vote on whether Britian should...

For further information

These standards intend to outline basic principles and therefore cannot cover every application or eventuality.

Incaseofdif cultyordoubtasto the correctness in the application of these standards please contact TfL Corporate Design.

For guidance around the process for developing a digital customer information solution, including information hierarchy and ensuring alignment with the principles of the Customer Information Strategy, please contact the Real-Time Information & Innovation Working Group: ar etingServiceStrategy lanning t .gov.u

For guidance on implementing the rules within these standards please email corporatedesign t .gov.u

All TfL Corporate Design standards are availablefromtheTf website t .gov.ucorporatedesign

Issue 2, July 2016 © Transport for London

Digital display standardscontent.tfl.gov.uk/tfl-digital-display-standards.pdf · The only font to...

Documents

Transcript of Digital display standardscontent.tfl.gov.uk/tfl-digital-display-standards.pdf · The only font to...