Digital Standards. Heathrowairport.com

Transcription

1 Digital Standards Heathrowairport.com

2 Index Introduction 3 Design principles 4 Usability checklist 5 Grids 7 Colours 12 Page templates 26 Global components column components 57 8-column components 75 4-column components 80 Typography 15 Interactive components 18 Iconography 21 Heathrow Digital Standards 2

3 Introduction To ensure continued success, we must be diligent in our efforts to remain true to our brand, the people, products and the services that it represents. Best-in-class Our communication must be a direct reflection of the quality and value we deliver to our travellers and the people. Well-crafted and effective communication takes a great deal of thought and planning. It s not just deciding what we say, but also how we say it - through design, tone of voice, imagery, layout, colour and typography. Building a strong foundation These guidelines explain our communication vision. They establish the basic elements to make sure that, all our communication have a consistent look & feel and aligned with our positioning. Heathrow Digital Standards 3

4 Design principles Intuitive Consistent Relevant Simple Elegant Continuity Heathrow Digital Standards 4

5 Usability checklist Ease of use Navigation Does the web application offer assistance during complex functions like tooltips, meaningful error messages, etc? Does each page have a call to action option, to indicate where to begin? Can the critical tasks be completed easily and effectively? Are there any confirmation messages for certain actions like saving and deleting? Where overlapping windows are used, are there any chances to switch between multiple windows, also, rearrange and resize the windows? Are there any visible reset function options, which clear the filters that has been applied to a search criteria? Are there any progress indicators, to indicate that the application is processing? Does the web application avoid any horizontal scrolling? Are there any progress indicators wherever applicable, to indicate that the application is processing? Does the web application use a clear and concise navigation structure? Are the URL s meaningful and user friendly? Does the web application use standard breadcrumb navigation? Identity Does the web application use standard components from the asset library like pop ups, buttons, tooltips? Does the web application use standard font types, sizes and colours for headings, paragraphas, and links? Does the web application use the standard global header and application identifier? Heathrow Digital Standards 5

6 Usability checklist Accessibility Content Is the page load time reasonable (approximately 2-3 seconds)? Do the critical images, video and audio components have text alternatives? Is there any adequate text-to-background contrast for critical elements? Is there any chance to resize text? Is all critical content above the fold (area before scrolling)? Does the web application include clear and descriptive titles, labels, headings, buttons, etc? Are all acronyms defined before use or include tooltips with definition? Does the web application include clear feedback & error messages with no technical jargon? Does the web application include a clear and visible link to Help/FAQ content? Heathrow Digital Standards 6

7 01 Grids Heathrow Digital Standards 7

8 Responsive design The most popular pattern is a multi-column layout that introduces larger margins on big screens. It also relies on fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest incarnations (illustrated below). Heathrow Digital Standards 8

9 01. Grids Break points 0 px 660 px px Heathrow Digital Standards 9

10 01. Grids 16-column grid structure Heathrow Digital Standards 10

11 01. Grids Responsive grid structure Heathrow Digital Standards 11

12 02 Colours Heathrow Digital Standards 12

13 02. Colours Swatches # # 7E5DA # 7E5DA # f2f2fe # # # 9B9B9B # e8f1ff # f0f7ff # A0157C Heathrow Digital Standards 13

14 02. Colours Gradients # 46296F # 5C # DBE6F # F5F8FC # F0EFF # F8F8FC Heathrow Digital Standards 14

15 03 Typography Heathrow Digital Standards 15

16 03. Typography Type Faces Frutiger 45 pt Light abcdefghijklmnopqrstwxyz ABCDEFGHIJKLMNOPQRSTWXYZ Arial Regular abcdefghijklmnopqrstwxyz ABCDEFGHIJKLMNOPQRSTWXYZ Arial Bold abcdefghijklmnopqrstwxyz ABCDEFGHIJKLMNOPQRSTWXYZ Why Frutiger? Frutiger font is available in many variants and weights. Its excellent legibility makes Frutiger a versatile font. This font gives distinct, clean and modern look. Heathrow Digital Standards 16

17 03. Typography Headings Heading 1 Frutiger 45 Light, 32 Heading 2 Frutiger 45 Light, 25 Heading 3 Frutiger 45 Light, 18 Heading 4 Arial Bold, 14 Body Copy Arial Regular, 14 Heathrow Digital Standards 17

18 04 Interactive components Heathrow Digital Standards 18

19 04. Interactive components Buttons Drop downs Heathrow Digital Standards 19

20 04. Interactive components Heathrow Digital Standards 20

21 05 Iconography Heathrow Digital Standards 21

22 05. Iconography Primary navigation icons Hover State Arrivals Departures Flight connections Transport & directions Shops & restaurants Plan & book your travel Heathrow Airport guide More... Normal State Heathrow Digital Standards 22

23 05. Iconography Icons Icons: 122 X 122px Icons: 67 X 67px Icons: 56 X 56px Heathrow Digital Standards 23

24 05. Iconography Icons Icons: 46 X 46px Icons: 34 X 34px Icons: 32 X 32px Icons: 20 X 20px Heathrow Digital Standards 24

25 05. Iconography Icons Weather icons Heathrow Digital Standards 25

26 06 Page templates Heathrow Digital Standards 26

27 06. Page templates Home 25 px 940 px 50 px Main Navigation Header Contextual text Home page is a 3-column template. This page provides information about arriving, departure and connecting flights in list and carousal views. By default, Arriving flights is active. 60 px Quick Links Container area From Home page, you can navigate to its key components such as Flight Information, Airport Parking, Airport Guide, Book Flights and Hotels, Heathrow Boutique and Heathrow Express. 60 px You can book Flights & hotels, Airport parking, Heathrow Express and also shop at Heathrow Boutique from the same page. Footer area You can also navigate to quick links such as Free Wi-Fi, Competitions, Lounges, Lost property, Checking in and Heathrow Jobs. 5 px Heathrow Digital Standards 27

28 06. Page templates Home 50 px 40 px 25 px 8 px 8 px 22 px 940 px 28 px 60 px 60 px 145 px 45 px 5 px 5 px 50 px Heathrow Digital Standards 28

29 25 px 60 px 940 px 7 50 px 06. Page templates Live flight arrivals board 40 px 40 px 40 px 85 px 90 px 70 px 600 px Live flight arrivals board page is a 1-column template. It is an ideal template to show moderate amount of data in the list view. By default, latest arriving flight information is displayed in the table. Click on the Show flights option and select to see flights for Yesterday, Today and Tomorrow. Also, you can click on the Sort By option, to sort the arrivals flight information by scheduled time, origin, status and terminal. Below the large content area, there are empty placeholders which is used for advertisements. 40 px Heathrow Digital Standards 29

30 25 px 60 px px 50 px 06. Page templates Flight details Flight details page is a 2-column template. In this template, the main container area is divided into horizontal sections to assist in partitioning content. In the first section, you can see flight details and contextual information. It also gives more information about, - View connecting flights - Get flights status updated by SMS - Flight Map : Live fight status on map - Share flights details by - Publish flight details to social networking site. In the next sections, you find Immigration & passports, Baggage collection and Custom checking with additional links. The right column consists of - Heathrow Express - Airport hotels - First time in London - Free Wi-fi Heathrow Digital Standards 30

31 25 px 60 px 940 px 50 px 06. Page templates Flight alerts by SMS Flight alerts by SMS is a 2-column template. It is an ideal template for content pages and those pages that need to show moderate amount of body text. In this page, you see more information on how to use the Flight alerts service. Types of SMS services 1. Flying messenger plus- Track flight by multiple SMS 2. Flying messenger - Get flight update by single SMS. The right column consists of Mobile app and advertisement portlets. Heathrow Digital Standards 31

32 06. Page templates First time in Britain 25 px 940 px 50 px First time in Britain is a 2-column template. This template has a expand and collapse functionality for each title, so that the content is well organised and easily accessible. 60 px This page provides information for all the first time visitors to Britain on various aspects such as Language, Weather, Culture, Travel, Time zone etc. The right column consists of advertisement portlets. Heathrow Digital Standards 32

33 06. Page templates Security and baggage 25 px 940 px 50 px Security and baggage is a 3-column template. This template is divided into four sections to assist in partitioning graphical content and sub heading text. 60 px Security and baggage page provides information to the travellers, about the checkpoint security procedures before travel. It also provides information about security related items like liquids, sharp tools, and other forbidden items in the main container area. 60 px Below the content are there are three portlets such as, - What can I take through security? - Additional security checks. - Family travel guide. Heathrow Digital Standards 33

34 06. Page templates Personal connection planner 25 px 50 px 940 px 25 px Personal connection planner is a 1-column template. This template is used for the pages where, either there is too much information for a 2-column template or the page does not need a dedicated column for related resources. Personal connection planner is a functional portlet page. 60 px 35 px 300 px 10px 145 px 145 px To get information about plan connection 1. Select a date from Arrival date and Departure date drop down lists. 2. Enter the flight number or the place from where the flight is arriving and departing in the input box 3. Click on the plan connection option. ( Plan Connection information is displayed below) 10px 10px 70 px Heathrow Digital Standards 34

35 25 px 60 px 940 px 50 px 300 px 06. Page templates Individual connection planner Individual connection planner is a 3-column template. This page provides step by step connection plan details for the planned journey. The Individual Connection planner page provides information with related links for - Detailed Information for Arrivals and Departures - Connection time/ Schedule - Arrival and Departure terminal details - Options to view steps on map - Sectional Contextual links - Things to do / Ebiz offers - Map view - Help and FAQ The right column consists of Connections video, Heathrow hotels and Heathrow Boutique portlets. Heathrow Digital Standards 35

36 06. Page templates Transport and directions landing 25 px 940 px 50 px Transport and directions landing is a 3-column template. Main container area is divided into horizontal sections to accommodate various icons and transport category. Transport and directions page provides information related to various transport options within Britain. 60 px This page consists of functional portlets such as, - Airport parking - Heathrow Express - Travel between airports - Travel between terminals - Getting to London - Cycling to Heathrow Heathrow Digital Standards 36

37 06. Page templates Heathrow parking 25 px 940 px 50 px Heathrow parking is a-2 column template. The main container area consists of two separate sections, where one section has functional portlets and another has content with relative links. 60 px 60 px To book or check the availability of parking, 1. Select the terminal number from the Terminal drop down list. 2. Enter the flight number in the input box. 3. Select the appropriate date from the Entry date drop down list and select the appropriate Entry time. 4. Select the appropriate date from the Exit date drop down list and select the appropriate Exit time. 5. Click on the Get my quote option. The parking details displays in a separate window. Below the main container area, you find various parking options such as, - Heathrow Long stay parking - Heathrow Short stay parking - Heathrow Business parking - Heathrow Meet & Greet parking - Heathrow Valet parking - Hotel and parking packages Heathrow Digital Standards 37

38 06. Page templates Heathrow business parking 25 px 6 50 px Heathrow Business parking is a 2-column template. You can book Heathrow Business parking in the right column. 60 px Heathrow Business Car Parks are suitable for all travellers parking for a number of days. This parking is closer to the airport terminals with an even more frequent and fast transfer service. Click on Book Business parking plus to navigate to Book business parking plus service. User can also find and explore business parking map across all the terminals. Heathrow Digital Standards 38

39 06. Page templates Journey planner 25 px 620px 50 px 300px Journey planner is a 2-column template. This page allows you to plan journey To Heathrow or From Heathrow from anywhere in Britain through various means of transport. The right column consists of Heathrow Express and advertisements portlets. 60 px Heathrow Digital Standards 39

40 06. Page templates Plan and book your travel 50 px 25 px 60 px Plan and book travel your travel is a 3-column template. The main container area has a large image with various booking options. Below the image, you find Book online, Find hotels near Heathrow, Destination guide, Tips and advice Worldwide weather and Best places to ski portlets. Heathrow Digital Standards 40

41 06. Page templates Heathrow flight timetable 50 px 25 px 60 px Heathrow flight timetable is a 2-column template. To search flights, 1. Select the radio button One way or Round trip based on your travel. 2. Select the appropriate radio button under Travel starts from. 3. Enter the flight number or arriving from in the input box. 4. Select the appropriate Depart on and Return on dates from the drop down list. 5. Check the Only direct/non-stop flights box if applicable and click on Search. (The search results are displayed below.) Heathrow Digital Standards 41

42 06. Page templates Latest destinations to fly 50 px 25 px 60 px Latest destinations to fly is a 3-column template. This page provides comprehensive information about the latest destinations and their travel tips. 500 px Heathrow Digital Standards 42

43 06. Page templates Country and city guide 50 px 25 px 60 px Country and city guide is a 2-column template. This page provides information about travel tips and destinations guide. The right column consists of Airport guide, Travel money, Latest destination and Heathrow rewards portlets. Heathrow Digital Standards 43

44 06. Page templates Competitions 50 px 25 px 60 px Competitions is a 2-column template. This page provides information about the ongoing competition at Heathrow. The right column consists of Heathrow rewards and Latest destinations guide portlets Heathrow Digital Standards 44

45 50 px 25 px 60 px 200 px 06. Page templates Win tickets Win Tickets is a 2-column template. Fill details in the competitions form, participate in various competitions and earn tickets for different events. The right column consists of Your journey at your fingertips (mobile app), Featured destination and Heathrow rewards portlets. Heathrow Digital Standards 45

46 06. Page templates Heathrow business services 25 px 60 px Heathrow business services is a 3-column template. The main container area consists of a banner image and below the image you can see different business services. The empty placeholders below the image are used for advertisements. 70 px Heathrow Digital Standards 46

47 06. Page templates Search results 50 px 25 px 60 px Search results is a 3-column template. Enter an appropriate keyword in the input box to get desired search results. Heathrow Digital Standards 47

48 25 px 60 px 06. Page templates Site map Site map is a 3-column template. Each column has sub-sections with links below each sub-section. Heathrow Digital Standards 48

49 06. Page templates Frequently asked questions 60 px 15px Frequently asked questions (FAQ s) is a 3-column template with four segmented options such as Flight Information, general information, Heathrow jobs and about the company. These segmented options has a expand and collapse functionality, so that the content is well organised and easily accessible. Heathrow Digital Standards 49

50 06. Page templates About Heathrow 60 px 15px About Heathrow is a 3-column template. This page helps you to navigate to sub-sections such as Heathrow Investor centre, Heathrow Jobs and Media centre. Also, you can find more information about facts and figures, company information and initiatives taken by Heathrow to help the surrounding communities in minimising the environmental impact. In this page, you can also find the below portlets, - Investor information - Heathrow jobs - Partners and suppliers - Bothered with noise - Heathrow sustainability - Media centre Heathrow Digital Standards 50

51 06. Page templates Vouchers at Heathrow 50 px 25 px 60 px Vouchers at Heathrow is a 3-column template. This page helps you to search vouchers for shops and restaurants in different terminals. To find vouchers for shops in different terminals, 1. Select the terminal number from All Terminal drop down list. 2. Select an appropriate option from Passenger only area drop down list. 3. Select the Shops radio button. The search results are displayed below. (Follow the same steps to search vouchers for restaurants in different terminals.) The search results are displayed in two views, list view and grid view. Heathrow Digital Standards 51

52 06. Page templates Voucher popup Frutiger,Light 20 pt #ffffff Frutiger,Light 25 pt #6d6d6d Arial, Bold #6d6d6d Heathrow Digital Standards 52

53 06. Page templates Valet Parking 50 px 25 px 940 px 60 px 50 px 60 px Maximum 3 Column recommended for Mobile screens. Heathrow Digital Standards 53

54 07 Global components Heathrow Digital Standards 54

55 Components Header 40 px 12 pt # px 40 px 8 px 5 px 8 px Heathrow Digital Standards 55

56 Components Footer 12 pt #b1b1b1 16 pt #7c7c7c 12 pt #b1b1b1 Helvetica 55Roman 12 pt #b1b1b1 Helvetica 55Roman 12 pt #7c7c7c Heathrow Digital Standards 56

57 Components Navigation Primary Navigation Secondary Navigation Tertiary navigation 4th level navigation 5 px 5 px 50 px 60 px Frutiger LT std, 45light 16 pt #46216f Frutiger LT std, 45light 16 pt #ffffff #46216f 26 px 50 px 12 pt #ffffff Heathrow Digital Standards 57

58 08 12-column components Heathrow Digital Standards 58

59 Components 12-column components Heathrow Flight Connections form 5 px 280 px 60 px 35 px Frutiger LT std, 45light 20 pt #46216f #6d6d6d Arial, Italic # px 35 px 180 px Arial, Italic #46216f Arial, Italic #ffffff Heathrow Digital Standards 59

60 Components 12-column components Flight details carousal view üü 40 px üü 18 pt #ffffff Frutiger LT std, 45light 18 pt #46216f 12 pt # pt # üü üü Frutiger LT std, 45light 22 pt 25 px Frutiger LT std, 45light 18 pt #7e5da4 #7e5da4 Heathrow Digital Standards 60

61 Components 12-column components Boarding pass 12pt 12pt # Frutiger LT std, 45light 25 pt #522d7a 12pt #7e5da4 Frutiger LT std, 45light 30pt 12pt Arial Regular 11 pt #ffacb2 Frutiger LT std, 45light 30 pt #ffffff 32 px 50 px 100 px 5 px 12pt # px Heathrow Digital Standards 61

62 Components 12-column components Boarding pass stages General flight arrival / departure Cancelled flight arrival / departure 4 Code share master flight arrival / departure Code share flight arrival / departure Heathrow Digital Standards 62

63 Components 12-column components Flight details grid view 13 pt # px 12 pt 12 pt # #7e5da4 # pt # pt # #7e5da4 #7e5da4 Heathrow Digital Standards 63

64 Components 12-column components Plan and book your travel 40 px 25 px 25 px 25 px 25 px Frutiger LTStd 45light 20pt 14pt #46216f Heathrow Digital Standards 64

65 Components 12-column components Search fights Frutiger LTStd 45light 18pt #46216f Arial, Bold 14pt Arial, Bold 14pt #46216f Arial, Bold 14pt #ffffff Heathrow Digital Standards 65

66 Components 12-column components Flight timetable px Arial, Bold 14pt # px Frutiger LTStd 45light 12pt # Frutiger LTStd 45light 14pt # pt #FFFFFF Heathrow Digital Standards 66

67 Components 12-column components Latest destinations to fly Frutiger LTStd 45light 18pt 270 px 500 px 123 px Frutiger LTStd 45light 20pt #ffffff 12pt #aaaaaa 10px Heathrow Digital Standards 67

68 Components 12-column components Heathrow airport terminal maps Frutiger LT std, 45light 18 pt # Frutiger LT std, 45light 18 pt 185 px 14pt #7e5da4 280px Heathrow Digital Standards 68

69 Components 12-column components Heathrow Business service Frutiger,Light 20 pt #46216f Frutiger,Light 16 pt #6d6d6d #7e5da4 Heathrow Digital Standards 69

70 Components 12-column components Find shops, restaurants and services Frutiger,Light 20 pt # px 40 px Arial, Bold #6d6d6d #7e5da4 12 pt Heathrow Digital Standards 70

71 Components 12-column components Find shops at Heathrow Frutiger,Light 20 pt # Frutiger, Light 20 pt Frutiger, Light 16 pt Frutiger, Light 16 pt #7e5da4 Heathrow Digital Standards 71

72 Components 12-column components Featured shops and restaurants at Heathrow 10px 10px 10px 10px 10px üü Frutiger,Light 18pt 10px 10px Heathrow Digital Standards 72

73 Components 12-column components Heathrow shops and restaurants service quick search Frutiger,Light 20 pt # Frutiger,Light 18 pt #46216f Arial,Regular 13 pt Arial, Italic 13 pt #6d6d6d Heathrow Digital Standards 73

74 Components 12-column components Carousal hover stages Note : Carousal should not be on auto rotation Default view Hover on the carousal area Hover on next/previous arrow Hover on offer content/image Heathrow Digital Standards 74

75 Components 12-column components 10px 20px 10px 20px 10px 20px 10px 20px 40px Frutiger,Light 18pt 30px 10px 202px Frutiger,Light 32pt #9f147b Frutiger,Light 24pt #46216f 30px 20px 20px 14pt #6d6d6d 12pt 14pt #7e5da4 Heathrow Digital Standards 75

76 09 8-column components Heathrow Digital Standards 76

77 Components 8-column components Heathrow maps Frutiger LT std, 45light 18 pt 185px 14pt #7e5da4 100 px 361px Heathrow Digital Standards 77

78 Components 8-column components Heathrow Flight Connections video Frutiger LT std, 45light 18 pt #46216f Frutiger LT std, 45light 18 pt #46216f Heathrow Digital Standards 78

79 Components 8-column components Competitions Frutiger Light 18 pt #46216f #6d6d6d Heathrow Digital Standards 79

80 Components 8-column components Competitions form 25 px 35 px Frutiger LTStd 45light 25pt 14pt #6d6d6d Frutiger LTStd 45light 18pt 14pt #6d6d6d Arial, Bold 14pt Arial, Regualr 13pt Arial, Regualr 13pt #6d6d6d 40 px Arial, Bold 14pt #6d6d6d Arial, Bold 14pt #7e5da4 25 px Arial, Regualr 14pt #ffffff Arial, Regualr 14pt #46216f Heathrow Digital Standards 80

81 10 4-column components Heathrow Digital Standards 81

82 Components 4-column components Heathrow rewards Heathrow mobile app Frutiger LT std, 45light 18pt Frutiger LT std, 45light 18 pt #46216f #7e5da4 12 pt #6d6d6d #7e5da4 Heathrow Express First time in London Frutiger LT std, 45light 18 pt #46216f Frutiger LT std, 45light 18 pt #46216f # #ffffff # #7e5da4 Heathrow Digital Standards 82

83 Components 4-column components Heathrow terminals maps Share via s üü üü üü 187px Frutiger LT std, 45light 18 pt 14pt #7e5da4 Frutiger LT std, 45light 18 pt #46216f 12 pt #6d6d6d Frutiger 45 Light 18 pt Frutiger LT st 18 pt #46216f 108 px 260px 13 pt # #ffffff # #7e5da4 #46216f Heathrow Express Airport parking Frutiger LT std, 45light 18 pt #46216f #fffff # #7e5da4 Frutiger LT std, 45light 18 pt #46216f #fffff # #7e5da4 Frutiger LT std, 45light 18 pt #46216f # # pt #4a pt #7e5da4 #4a pt #7e5da4 13 pt #ffffff Heathrow Digital Standards 83

84 Components 4-column components Heathrow opinion polls 20px 20px 20px Frutiger,Light 25 pt #46216f Frutiger,Light 25 pt #46216f Frutiger,Light 25 pt #46216f 20px 20px 20px #6d6d6d 20px #6d6d6d #6d6d6d 20px 20px 10px 20px Frutiger,Light 18 pt #46216f 160px 15px 10px 10px 20px 20px 12 pt #ffffff 10px 12 pt 20px #ffffff 15px #ffffff #6d6d6d 20px 20px 20px 15px #6d6d6d 20px #6d6d6d #ffffff Heathrow Digital Standards 84

85 Components 4-column components Fly with Worldwide weather 5 px Frutiger LTStd 45light 18pt #46216f 14pt #6d6d6d 14pt 40 px Frutiger LTStd 45light 18pt #46216f Arial, Bold 14pt 14pt #6d6d6d Arial, Bold 14pt 14pt #ffffff Heathrow rewards Travel money 205 px Frutiger LTStd 45light 18pt #46216f 14pt Frutiger LTStd 45light 20pt 12pt 14pt #7e5da4 14pt #7e5da4 Heathrow Digital Standards 85