Digital Branding

18
Electronic Media

T-Mobile Web Styleguide 2.0
The new International
look & feel for our websites

Last revised: October 19th, 2005

!T§==Mobile====

Introduction Layout principles
Contents Templates & example layouts
Strategic framework Design governance
Design basics Technical requirements
Introducing the new web style guide (1/2) Navigation principles Library << Page 02/230 >>
Appendix

Purpose
= The web style guide provides an overview of the web design, and explains the rational behind
it.
= It provides guidance and tools for the implementation and maintenance of the new web
design.
= Hence, it ensures that T-Mobile websites are brand compliant and reflect the agreed
e-strategy. Consequently it supports a positive brand reception and contributes significantly
to the brand values of T-Mobile.

Contents
= The web style guide provides rules and examples for the graphic design of the user interface,
as well as guidelines for the tonality, navigation principles and recommendations regarding
the content structure.
= Along with the web style guide you will be provided with:
– Assets for the interaction elements
– JPG generator script
– HTML templates

T-Mobile web styleguide | Last revised: October 19th, 2005

Introducing the new web style guide (2/2) Navigation principles Library << Page 03/230 >>
Appendix

Use
= The web style guide should be used any time any website is touched in terms of look and feel,
content and functionality additions, new sections or new user processes.

Audience
= Web Managers, Developers and Designers (from T-Mobile as well as agencies or other
3rd parties) who are involved in creating, implementing and maintaining T-Mobile web sites.


History (1/4) Navigation principles Library << Page 04/230 >>
Appendix

Design basics
Chapter Treatment / alteration Page

2. Colours NEW Overview: New secondary colours defined, orange for special tool modules, green for 19 et sqq
future uses (My T-Mobile related items), pink for visited basic links
2. Colours CHANGE Grey: New definition of the different grey tones 22
6. Icons NEW New icons for forwards and backwards function 30
7. Creating tables and charts CHANGE Tables: Changed colours for tables, changed highlight in tables 31

Navigation principles

2. Global navigation CHANGE Overview: New first item added – “Overview” 37

2. Global navigation CHANGE Horizontal: System font instead of images 39
2. Global navigation CHANGE Vertical: Alignment with content 40
3. Auxiliary navigation NEW New navigation element: Option to choose font size 42
3. Auxiliary navigation CHANGE Header navigation: New order 43
4. Content navigation CHANGE Inline navigation: New design 46


Appendix

Layout principles

2. User interaction elements NEW Links & buttons: Definition of colour for visited links 54

2. User interaction elements NEW Links & buttons: Back links and Leaf-through links 57
2. User interaction elements CHANGE Links & buttons - Promotion links: New definition of typography 58
2. User interaction elements CHANGE Links & buttons – Button typology: changed style of buttons 59
2. User interaction elements NEW Scolling: Scolling within module 67
3. Content area modules CHANGE Headings: System fonts for sub chapters (and in most of the modules) 69
3. Content area modules CHANGE Table: Changed colours for tables, changed highlight in tables 74-75
3. Content area modules CHANGE Price box large: Changed typefont 78
3. Content area modules CHANGE List modules: Special offers in list 83
3. Content area modules CHANGE Banners: Animated banners 91
3. Content area modules CHANGE Teaser types – Homepage teaser: Alternative image format (not cropped) 93-94
3. Content area modules NEW Teaser types – product teaser: New teaser TINA-3 97
3. Content area modules CHANGE Teaser types – ad-like teaser: New design variations 98
3. Content area modules NEW Teaser types – user task teaser: New option of teaser TINA-7 100
3. Content area modules NEW Callouts: New teaser STAN-3 and STAN-4 - Price aggressive callout 105
3. Content area modules CHANGE Account readout & user task options: New design of ANNA-1 and ANNA-2 106
3. Content area modules CHANGE Other Modules: Changes in OTTO-1, ‘Sign up now’ as process link 109

Appendix

Layout principles

3. Content area modules NEW Other modules: New variation of OTTO-4 – Multimedia flash movie 113

3. Content area modules NEW Other modules: new module OTTO-8 - alternative 117
3. Content area modules NEW Confirmation, notice and error modules: new modules 118 et sqq
• COLIN-2 - Error Message
• COLIN-3 - Notice
• COLIN-4 - Call for attention

3. Content area modules CHANGE Purchase step confirmation: ‘Proceed to checkout’ as button / New variation of this 119
module
4. Right hand column modules CHANGE Shopping cart: New order of the steps, new display of total cost 125-126
4. Right hand column modules CHANGE Special tools: New colour 129
4. Right hand column modules CHANGE Content teasers: Variation with images 131

Templates & example layouts

1. Sitemap CHANGE • New structure within “Phones & Accessories” and “Tariff & Options” 134
• “Promotions” renamed to “Special Offers” and moved into My T-Mobile, Phones &
Accessories and Tariffs and Options


Appendix

Appendix

NEW Additional example layouts 212

NEW Example layouts with 800*600 pixel resolution 225
NEW Banner in right hand bracket 228



Contents (1/3)
Simply click on a topic to access the Design basics Technical requirements
<< Page 08/230 >>
Navigation principles Library
information you need. Appendix

Strategic framework
1 T-Mobile
Brand 2 eStrategy
“Tiger”

p. 14 to 15 p. 16

Design basics
1 Typography
2 Colours
3 Images
4 Tone of Voice
5 Digit concept
6 Icons
7 Creating tables &
charts

p.18 p. 19 to 24 p. 25 to 26 p. 27 p. 28 to 29 p. 30 p. 31 to 33

Navigation principles
1 User guidance
& navigation 2 Global
navigation 3 Auxiliary
navigation 4 Content
navigation 5 Bread crump
navigation

p. 35 p. 36 to 40 p. 41 to 44 p. 45 to 46 p. 47

Layout principles
1 Overview &
basic elements 2 User interaction
elements 3 Content area
modules 4 Right hand
column modules

p. 49 to 52 p. 53 to 67 p. 68 to 122 p. 123 to 132



Contents (2/3)
Navigation principles Library << Page 09/230 >>
Appendix

Templates & example layouts
1 Sitemap
2 Basic grid
3 Template
types 4 Template
descriptions 5 Measurements for
example layouts

p. 134 p. 135 to 136 p. 137 to 141 p. 142 to 160 p. 161 to 181

Design governance
1 Overview
2 Mandatory
elements 3 Governance
process

p. 183 p. 184 p. 185

Technical requirements
1 General technical
framework 2 DDA
compliancy 3 JPG
generator 4 Script for
navigation
dropdown
5 HTML
templates

p. 187 p. 188 to 196 p. 197 p. 198 p. 199

Library
Brand Construction Colours Group T-Mobile Depiction Claim CI program CI-hotline & Publishing
positioning & alignment typefaces imagery concepts of devices of Deutsche CI-net details
of the logo “Your ally” Telekom

p. 201 p. 202 p. 203 p. 204 p. 205 p. 206 p. 207 p. 208 p. 209 p. 210



Contents (3/3)
Appendix

Appendix
Additional example Example layouts Banner right
layouts with 800*600 pixel hand bracket

p. 212 to 224 p. 225 to 227 p. 228


Overview web design Navigation principles Library << Page 11/230 >>
Appendix


Overview web design Navigation principles Library << Page 12/230 >>
Appendix



Strategic framework
Appendix



1
T-Mobile Brand Navigation principles Library << Page 14/230 >>
Appendix

T-Mobile websites hold a huge potential

= Our web sites are a crucial way of communicating with our customers, and enable us to
leverage the potential to contribute to the T-Mobile brand expierience, and achieve our
commercial targets. It‘s a potential which is not yet fully used.
= We already have more or less sophisticated websites in place in all NatCo‘s which are based on
a common style guide developed 3 years ago. However, we need a new style guide because the
strategic framework has changed significantly since then which needs to be reflected.
= The new web design needs to…
– be aligned with the new e-strategy “Tiger”
– reflect our brand idea of Smart Simplicity
– to be consistent across all NatCo‘s in order to build ONE International brand.



1
T-Mobile Brand Navigation principles Library << Page 15/230 >>
Appendix

Reflection of the brand idea “Smart Simplicity”

= Whatever we say, whatever we do across all customer touch points, it has to be in line with the
brand in order to contribute to the brand equity. Therefore, all web activities have to deliver
according to our brand idea of “Smart Simplicity”.
= The new web design is brand compliant as it …
– delivers against our brand attributes reliability, simplicity, inspiration
– has a light look & feel and is reflecting our offline communication
– has a clear structure and is focusing on the customer relevant core elements
– strikes the balance between functional and emotional requirements (changing weighting
depending on the area within the web site)
– is self-explanatory and easy to understand and to navigate

= Aim is to build ONE international brand and therefore we have to establish consistency
across all NatCos
– Consistency in look & feel
– Consistency in the strategic approach
– Consistency in the basic user experience whilst ensuring flexibility for National adaptations
based on market needs within the framework (see also chapter “Governance Rules”)



2
eStrategy “Tiger” Navigation principles Library << Page 16/230 >>
Appendix

Alignment with the new -strategy “Tiger”

= The development of the new web design is part of a wider e-business project which is set up
cross-functional and cross-national in order to optimize our web activities in ALL it‘s facets.
= Basis is the new e-strategy “Tiger” which aims for a shift from an information to a transaction
driven web site with a strong focus on sales and service and a clear reflection of our customer
service models and the customer life-cycle.

= In addition to the new web style guide, which focuses on the graphical design aspects of the
web site, there is a web user experience (WUX) framework document which provides the
framework for the implementation of the “Tiger” strategy with regards to the overall user
experience. It will be based on key elements of the strategic approach and be supported by use
cases/personas, wireframes and visualisations of key use cases; it will give the guidance
needed to effectively transform our websites in line with the “Tiger” strategy.

= User experience and web design are closely interlinked and a successful and effective
implementation of the “Tiger” strategy requires adherence of both.



Design basics
Appendix



1
Typography Navigation principles Library << Page 18/230 >>
Appendix

TeleAntiqua T-Mobile fonts:
The T-Mobile corporate fonts are
used in graphical elements to ensu-
ABCDEFGHIJKLMNOPQRSTUVWXYZ re brand recognition throughout
the site.
abcdefghijklmnopqrstuvwxyz
TeleAntiqua is used for headlines
1234567890 [p. 68] and subheadlines only.

System font: Arial
All navigation elements use the
Tele Grotesk
Arial font. The system generated
copy uses Arial. Also areahead-
ABCDEFGHIJKLMNOPQRSTUVWXYZ lines in the content area appear in
Arial.
abcdefghijklmnopqrstuvwxyz Regular size for body copy: 11 pt
Colour: Grey-2 (#66 66 66)
1234567890 Magenta (#E2 00 74) for highlighting
and white if the font appears on a
magenta background.

Colours:
Arial (for system generated copy)
Font colours: grey-2 (#66 66 66)
and magenta (#E2 00 74) are used
ABCDEFGHIJKLMNOPQRSTUVWXYZ for most fonts. Secondary colours
abcdefghijklmnopqrstuvwxyz blue and orange are only to be
1234567890 used in connection with shopping
cart and special tools within strict
limitations.

For the detailed use of fonts, font
sizes and colours please refer to the
specific module descriptions.


2
Colours Strategic framework
Design basics
Design governance
Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 19/230 >>
Appendix

Primary
colours
Magenta White

#E2 00 74 #FF FF FF

Grey 2 Grey 1

#66 66 66 #99 99 99 #DC DC DC #E4 E4 E4 #EE EE EE

Secondary
colours
Blue Orange Green Pink

#5B A4 DB # F5 A3 00 #78 AA 51



2
Design basics
Design governance
Appendix

When to use which colour:

Colour Value When to use which colour
Magenta # E2 00 74
=used for highlighting purposes
=used to convey and underline a strong brand perception
=used for promotions or special offers
=used in teasers or brand images, used in T-Mobile fonts
(TeleAntiqua, TeleGrotesk) and sparely for system font Arial
Grey # EE EE EE
# E4 E4 E4 =used as structuring element
# DC DC DC =used for highlighting purposes
# 99 99 99 =used on backgrounds and fonts
# 66 66 66 =used as border- and seperator lines
White # FF FF FF
=used as background colour
Blue # 5B A4 DB
=used only in connection with the purchase process
=used on buttons (process buttons and add-to-cart button) and on small
background areas
Orange #F5 A3 00
=used only exceptionally in connection with special tool module in the
=used to establish aand in the right functionalitiescolumn and function
connection for that appear both
main content area hand service
together
=used on buttons (process buttons) and on small background areas
Pink # E3 A9 C6
=used exclusively for visited basic links
Green #78 AA 51
=reserved for future use in connectionregistration processes and modules
with My T-Mobile processes and modules
=reserved for future use for buttons (process buttons) and on small background areas
login and
=reserved for future use on


2
Design basics
Design governance
Appendix

Magenta:
The magenta is defined by the value
#E2 00 74

Magenta is the main brand colour
of T-Mobile and is thus used as the
principal highlighting colour.

Magenta is used for promotion,
special offers, highlighting.
Magenta is used in headlines and
here always in combination with the
T-Mobile fonts (TeleAntiqua, TeleGro-
tesk).
Magenta is often used as a back-
ground colour for zoomed T-Mobile
Digits.

On magenta backgrounds, every font
appears in white: #FF FF FF

Do not overuse magenta.
The selective, purposeful use of
magenta is more effective than the
colouring of large spaces or whole
text blocks.

Magenta should never be used in a
semi-translucent or translucent way.
Do not use magenta for T-Mobile Digit
rows. (Cp. T-Mobile Digit concept)



2
Design basics
Design governance
Appendix

Grey: When to use grey:
Different shades of grey are used on
the T-Mobile sites.
Value When to use which grey Grey is one of the defining colours of
the T-Mobile brand. It is used as struc-
# EE EE EE =bracket background turing element, to keep the design
=3rd level navigation background grounded.
=and table backgrounds
When used for backgrounds, the grey
# E4 E4 E4 =section and sorting modules background attributes different weights to different
=background of account management modules (ANNA) modules and areas.
Grey is the main font colour of the
=headings of product views in list (LISA-1, LISA-3) site. It is used for continuous copy text
as well as for sub-headlines and area
# DC DC DC =used as structuring element headlines.
=used as border- and seperator lines
It is also used for all forms of naviga-
# 99 99 99 =global navigation highlight tion.
=in-line navigation highlight
=outlines and segmentation lines in all navigation forms In tables, different shades of grey
provide for a better readability of the
=headings of right-hand-column tool and teaser modules contents.
=font colour
For details on the different shades of
# 66 66 66 =general font colour (sub-headlines, copy text and links on white grey used in tables, please refer to
background) Module INGRID-3 in “Content area
modules” [p. 74].

For details on the different shades of
grey used in navigation, please refer
to chapter „Navigation principles“
[p. 34-47].


2
Design basics
Design governance
Appendix

White: Blue: Orange:
The white is defined by the value The blue is defined by the value The orange is defined by the value Don‘ts:
#FF FF FF #5B A4 DB #F5 A3 00 Do not use orange on large (back-
It is used as a background colour for ground) areas.
all areas – unless otherwise noted. It is used as a second highlighting It is used as a third highlighting
colour. colour. Do not use orange as a font colour for
80% white may be used on image the T-Mobile fonts (TeleAntiqua and
teasers or banners. Blue is used only for purchase pro- It is used only in the special case whe- TeleGrotesk).
cess related elements and modules, re a service tool is offered in the right
White may be a font colour on as well as for process buttons. hand column that is in close relation Do not use orange as a background
magenta, grey or blue or green to modules or content in the main colour for T-Mobile digit rows.
backgrounds. Blue is used only for Blue is used only on buttons or icons, content area. It serves to establish the
purchase process related elements and on very small background areas connection between the two. Do not use orange as a background
and modules, as well as for process (for example headers). colour for zoomed digits.
buttons, green only for the special The use of orange is an exception!
tool module. Don‘ts: Do not use it outside of the special Refer to Special tool module also
Do not use blue on large (back- case mentioned above. [p. 129].
ground) areas.
Do not use blue as a font colour for Even in the case described above,
the T-Mobile fonts (TeleAntiqua and use the orange only for highlighting
TeleGrotesk). and short copy elements (buttons,
Do not use blue as a background Headlines).
colour for T-Mobile digit rows.
Do not use blue as a background
colour for zoomed digits.

Refer to Shopping Cart module also
[p. 126].



2
Design basics
Design governance
Appendix

Green: Pink:
The green is defined by the value #78 Don‘ts: Pink is defined by the value
AA 51 Do not use green on large (back- #E3 A9 C6
ground) areas.
It will be used as a fourth highlighting It is used exclusively as a colour for
colour on T-Mobile sites with a focus Do not use green as a font colour for vistited basic links.
on personalisation. the T-Mobile fonts (TeleAntiqua and
TeleGrotesk). The use of pink is an exception!
Green will be used in the future for My Do not use it outside of the special
T-Mobile, login and registration pro- Do not use green as a background case mentioned above.
cess related elements and modules. colour for T-Mobile digit rows.
Refer to visited basic links also [p. 54]
Green will be used only on buttons or Do not use green as a background
icons, and on very small background colour for zoomed digits.
areas (for example headers).

The use of green will be an exception!
Do not use it outside of the My T-
Mobile cases.

An example layout will be given
in the appendix [p. 225].



3
Images Strategic framework
Design basics
Design governance
Mood & People | Products Navigation principles Library << Page 25/230 >>
Appendix

Examples: The imagery concept: “Your Ally” More chracteristics:
The imagery style of the T-Mobile =
The background does not
1 2
imagery concept “Your Ally” has been distract from the people in the
fully inherited. picture.
=
The colours in the images are
real and natural, the images are
T-Mobile images show people and
bright and friendly
their relationships – relationships
based on trust and confidence. The =
Magenta is used as an accent
to highlight certain details of the
situations shown are both surprising
image such as clothing,
and familiar, and have a natural and
accessories etc.
casual look and feel. The images are
not merely illustrative but reinforce =
T-Mobile images come to life
through the use of interesting
the desired message. They are snap-
details, cropping and camera
shots featuring brief moments of life
angles
– nothing more and nothing less.
=
Focusing on a particular detail
creates livelyness and dynamics
There are two possible variations.
Images show: =
People shown include all ages,
1 two people relating to one
cultures and genders.
another
The T-Mobile imagery is used for both
2 an individual making eye contact
consumer and business
The Images shown here are merely offered as examples. You are free to use other images that comply with the with the user.
publications.
imagery concept.
There is a pool of exclusive brand compliant pictures available, for some of which the rights buyout have already Each image captures a special
For more detailed information,
been purchased on an International level. Please contact the CI Hotline for details on how to access these pictures. moment in which people make a
please refer to the T-Mobile
personal connection – with one
guidelines for using imagery.
another or with the user through
= shared emotions or expectations
= a commmon passion
= a conversation etc.

The situations we show should
evoke a feeling of intimacy and
closeness: People need people.
T-Mobile is the user’s ally who helps
T-Mobile web styleguide | Last revised: October 19th, 2005 them to connect with others.


3
Images Strategic framework
Design basics
Design governance
Mood & People | Products Navigation principles Library << Page 26/230 >>
Appendix

Product Images - Examples: Product images:
There are two ways of depicting
1 2 3
products:
1 2-D representation without the

use of shadows
2 3-D representation incorporating

the use of shadows
- within teasers when used as
graphical objects and
- if placed on product stage.

Background colour:
Products are always shown on white
background.

3 Only the interactive product

stage features a grey floor on which
the product is presented with a
shadow.

Screen display on devices:
If the display screen of the device
is visible, a brand-compliant image,
wallpaper or the t-zones icon should
appear.
For more detailed information,
please refer to the T-Mobile
guidelines for using imagery.
For assistance in preparing a
t-zones dummy screen, please
contact the CI-Hotline.



4
Tone of voice Navigation principles Library << Page 27/230 >>
Appendix

Expressing our personality with words

=Tone of voice is an important part of our brand personality. Like imagery, verbal
communication is essential to a strong brand. Our tone of voice should be as distinctive as our
visual identity.

=Our brand personality determines the way we communicate.
They must be applied to every message we send, in every medium we use.

=Straight forward
=Confident
=Fair
=Playful
=Enthusiastic
=For further details there is a comprehensive document available on the distinctive
tone of voice of T-Mobile. Please contact lorna.farrar@t-mobile.net.



5
Digit Concept Navigation principles Library << Page 28/230 >>
Appendix

Basic Digit
Digits are used in banners and
teasers generally complying with the
guidelines for using Digits in print
publications.
x
x

=The DigitDigit grid divide
Grid
2x

To define a the
x

format width by 21 or a larger
2x

multiple of 3 (21, 24, 27 etc.). The
x

quotient x defines the length of the
Digit’s equilateral sides. This value
2x

is also used to define the vertical
x

positioning of the Digits within the
2x

grid.
x

=Zoomed Digits an individual
x

x x 2x x 2x x 2x x x

We can “zoom” on
Digit within the grid. The length
of each side of the enlarged Digit
corresponds to an uneven number
(no fewer than three) of Grid digits,
of course aligned to the grid. The
zoomed Digit is usually the second
Digit from the left. It is vertically
centered on the horizontal axis of the
row of normal size Digits. Whereas
in printed publications only two
zoomed digits are possible we allow
three zoomed-in Digits for promo-
tional landing pages [p. 166].



5
Digit Concept Navigation principles Library << Page 29/230 >>
Appendix

Use of digits

=Single Digits in colour. They
Always magenta
may overlap banners to the top or
bottom. Also used as “call outs”
called “stopper Digits” containing
text (TeleAntiqua or TeleGrotesk,
white) and links. The whole Digit is
clickable as a link.

=is also possible to play with blurred
It
Pictures and Digits

and sharp images in and out of
digits. For digit rows it is obligatory
that the picture is continued in the
next Digit according to the Digits’
spacing. The Image never repeats.

=Pictures and Digits
Are used to promote multimedia
content in flashed teasers [p. 112].

Colors:
Digit Rows: Grey on white back-
ground or white-translucent (55%)
on imagery

Zoomed Digits: Magenta or sharp
unblurred imagery

Font (TeleAntiqua): white (on ma-
genta) / magenta (on images)



6
Icons Navigation principles Library << Page 30/230 >>
Appendix

Icons: Developing new icons: Cotent/Functionality:
Icons are used sparingly where they
Magenta add real value to visualize content or
an action at first glance. The icons are
based on established and already
learned symbols.

Use: Use:
1 On buttons for process
1 orientated functions (i.e. “Continue
The Tele Grotesk font proportions
shopping”).
are the basis for the icons. This 2 On functionality links (“Print”,
way they are consistent with the
“Delete”).
2
overall typeface. 3 As link and label for the

shopping cart.
Further icons may be developed
according to the icon style but
Size:
can be used for action or process
3 Max. 15 px in height
orientated functions only, they may
not be used for teasers, promo-
Colour:
tions, call outs etc.
=White (#FF FF FF) on secondary
3 colour blue (#5B A4 DB) or
orange (#F5 A3 00) on process
orientated buttons and the
shopping cart label.
=Grey-2 (#66 66 66) on white
background in navigation and
in single-action buttons.



7
Creating tables and charts Strategic framework
Design basics
Design governance
Tables | Enumerations | Charts Navigation principles Library << Page 31/230 >>
Appendix

Tables are often used as a way of
expressing complicated content in
a way that can be easily grasped.
Various shades of grey are used
to differentiate thee horizontal or
vertical lines and areas of tables.
Do not use Magenta for shading
large areas. Also refer to „Colour
coding & highlighting“.

For details on tables please refer to
chapter „Content area modules“ in
„Layout principles“ [p. 74-75].


Digital Branding

Recommended

Recommended

More Related Content

Similar to Digital Branding

Similar to Digital Branding (20)

More from Marc-Oliver Gern

More from Marc-Oliver Gern (18)

Digital Branding