Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Digital Branding

  1. 1. 18 Electronic Media T-Mobile Web Styleguide 2.0 The new International look & feel for our websites Last revised: October 19th, 2005 !T§==Mobile====
  2. 2. 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
  3. 3. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  4. 4. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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 Chapter Treatment / alteration Page 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  5. 5. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements History (2/4) Navigation principles Library << Page 05/230 >> Appendix Layout principles Chapter Treatment / alteration Page 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  6. 6. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements History (3/4) Navigation principles Library << Page 06/230 >> Appendix Layout principles Chapter Treatment / alteration Page 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 Chapter Treatment / alteration Page 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  7. 7. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements History (4/4) Navigation principles Library << Page 07/230 >> Appendix Appendix Chapter Treatment / alteration Page NEW Additional example layouts 212 NEW Example layouts with 800*600 pixel resolution 225 NEW Banner in right hand bracket 228 T-Mobile web styleguide | Last revised: October 19th, 2005
  8. 8. Introduction Layout principles Contents (1/3) Contents Templates & example layouts Strategic framework Design governance 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  9. 9. Introduction Layout principles Contents (2/3) Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  10. 10. Introduction Layout principles Contents (3/3) Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements Navigation principles Library << Page 10/230 >> 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  11. 11. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements Overview web design Navigation principles Library << Page 11/230 >> Appendix T-Mobile web styleguide | Last revised: October 19th, 2005
  12. 12. Introduction Layout principles Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements Overview web design Navigation principles Library << Page 12/230 >> Appendix T-Mobile web styleguide | Last revised: October 19th, 2005
  13. 13. Introduction Layout principles Strategic framework Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements Navigation principles Library << Page 13/230 >> Appendix T-Mobile web styleguide | Last revised: October 19th, 2005
  14. 14. Introduction Layout principles 1 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  15. 15. Introduction Layout principles 1 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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”) T-Mobile web styleguide | Last revised: October 19th, 2005
  16. 16. Introduction Layout principles 2 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  17. 17. Introduction Layout principles Design basics Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements Navigation principles Library << Page 17/230 >> Appendix T-Mobile web styleguide | Last revised: October 19th, 2005
  18. 18. Introduction Layout principles 1 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  19. 19. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  20. 20. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 20/230 >> 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 T-Mobile web styleguide | Last revised: October 19th, 2005
  21. 21. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 21/230 >> 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) T-Mobile web styleguide | Last revised: October 19th, 2005
  22. 22. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 22/230 >> 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]. T-Mobile web styleguide | Last revised: October 19th, 2005
  23. 23. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 23/230 >> 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]. T-Mobile web styleguide | Last revised: October 19th, 2005
  24. 24. Introduction Layout principles 2 Contents Templates & example layouts Colours Strategic framework Design basics Design governance Technical requirements Overview | When to use which colour | Magenta | Grey | White, Blue, Orange | Green & Pink Navigation principles Library << Page 24/230 >> 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]. T-Mobile web styleguide | Last revised: October 19th, 2005
  25. 25. Introduction Layout principles 3 Contents Templates & example layouts Images Strategic framework Design basics Design governance Technical requirements 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.
  26. 26. Introduction Layout principles 3 Contents Templates & example layouts Images Strategic framework Design basics Design governance Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  27. 27. Introduction Layout principles 4 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  28. 28. Introduction Layout principles 5 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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]. T-Mobile web styleguide | Last revised: October 19th, 2005
  29. 29. Introduction Layout principles 5 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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) T-Mobile web styleguide | Last revised: October 19th, 2005
  30. 30. Introduction Layout principles 6 Contents Templates & example layouts Strategic framework Design governance Design basics Technical requirements 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. T-Mobile web styleguide | Last revised: October 19th, 2005
  31. 31. Introduction Layout principles 7 Contents Templates & example layouts Creating tables and charts Strategic framework Design basics Design governance Technical requirements 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]. T-Mobile web styleguide | Last revised: October 19th, 2005

×