Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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
F I S H E R M A N ’ S WA L K
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
T H E N O R T HC O L O N N A D E
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
C A N A D A S Q U A R E
A D M I R A L S WAY
S W I N GB R I D G E
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
30The NorthColonnade
18CanadaPlace
BillingsgateFish Market
IdeaStore
1ChurchillPlace
Jack DashHouse
HiltonHotel
50BankStreet 40
BankStreet
10UpperBankStreet
PoplarPoplar
WestIndia QuayWestIndia Quay
CanaryWharfCanaryWharf
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
30The SouthColonnade
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
Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian
Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian
Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian Road and Barnsbury,
Hackney Wick, Homerton, Hackney Central, Dalston Kingsland, Highbury & Islington, Caledonian Road and Barnsbury,
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 Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr Hackney Wick, Homerton, Hackney Centr
Hackney Wick, Homerton, Hackney Centr
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
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
Calling at: Green Park, Bond Street, Baker Street Calling at: Waterloo, Southwark, London Bridge
Calling at: Green Park, Bond Street, Baker Street Calling at: Waterloo, Southwark, London Bridge
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
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
F I S H E R M A N ’ S WA L K
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
T H E N O R T HC O L O N N A D E
R E U T E R SP L A Z A
C A N A D A S Q U A R E
C A N A D A S Q U A R E
A D M I R A L S WAY
S W I N GB R I D G E
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
M A R S H W A L L
PR
ES
TO
N’
S
RO
AD
A S P E N W A YA S P E N W A Y
Footbridge
Statue
MarriottHotel
Playon Indoor Sports
10The South
Colonnade
5The NorthColonnade
30The SouthColonnade
25BankStreet
25The NorthColonnade
OneCanadaSquare
33CanadaSquare
5CanadaSquare
25CanadaSquare
8CanadaSquare
Waitrose
20CanadaSquare
30The NorthColonnade
18CanadaPlace
BillingsgateFish Market
IdeaStore
1ChurchillPlace
Jack DashHouse
HiltonHotel
50BankStreet 40
BankStreet
10UpperBankStreet
PoplarPoplar
WestIndia QuayWestIndia Quay
CanaryWharfCanaryWharf
CanaryWharfCanaryWharf
HeronQuaysHeronQuays
South QuaySouth Quay
South QuayutooSouthSoSoutQuay
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
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
F I S H E R M A N ’ S WA L K
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
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
T H E N O R T HC O L O N N A D E
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
C A N A D A S Q U A R E
A D M I R A L S WAY
S W I N GB R I D G E
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
PR
ES
TO
N’
S
RO
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
30The NorthColonnade
18CanadaPlace
BillingsgateFish Market
IdeaStore
1ChurchillPlace
HiltonHotel
50BankStreet 40
BankStreet
10UpperBankStreet
PoplarPoplar
WestIndia QuayWestIndia Quay
CanaryWharfCanaryWharf
CanaryWharfCanaryWharf
HeronQuaysHeronQuays
ooplarPPness Paarkess PauBusin
A C KC KC KCB L A C K WA L LLB L KKLL K WWKK WKK
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
West India andMillwall Docks
WoodWharf
NorthQuay
Jubilee Park
The ParkPavilion
BO
AR
DW
AL
K 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
C A N A D A S Q U A R E
C A N A D A S Q U A R E
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
C A R T I E RC I R C L E
PR
SE
TO
N’
S
RO
AD
A S P E N W A YA S P E N W A Y
Footbridge
Statue
Playon Indoor Sports
33CanadaSquar
5CanadaSquare
25CanadaSquare
8CanadaSquare
Waitrose
20CanadaSquare
30The NorthColonnade
18CanadaPlace
BillingsgateFish Market
IdeaStore
1ChurchillPlace
Jack DashHouse
HiltonHote
50BankStreet10
UpperBankStreet
PoplarPoplar
CanaryWharfCanaryWharf
South QuayutooSouthSoSoutQuay
A C KC KC KCB L A C K WA L LLB L KKLL K WWKK WKK
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
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
F I S H E R M A N ’ S WA L K
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
T H E N O R T HC O L O N N A D E
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
C A N A D A S Q U A R E
A D M I R A L S WAY
S W I N GB R I D G E
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 L
PR
ES
TO
N’
S
RO
AD
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
30The NorthColonnade
18CanadaPlace
BillingsgateFish Market
IdeaStore
1ChurchillPlace
Jack DashHouse
HiltonHotel
50BankStreet 40
BankStreet
10UpperBankStreet
PoplarPoplar
WestIndia QuayWestIndia Quay
CanaryWharfCanaryWharf
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 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
30The SouthColonnade
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