Your SlideShare is downloading. ×
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Sta Travel Rebrand Style Guide
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sta Travel Rebrand Style Guide

4,216

Published on

Style guide for the new brand campaign for STA Travel. http://www.statravel.com

Style guide for the new brand campaign for STA Travel. http://www.statravel.com

Published in: Design, Business, Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,216
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
348
Comments
1
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Digital Brand and Style Guidelines Prepared by
  • 2. Introduction Guidelines are created to promote consistency across communications and protect brand equity by illustrating how the values of the brand can be communicated through every aspect of its visual language. Brand Guidelines unify philosophy and ideology of the brand to promote internal understanding and motivation to communicate the brand meaning in the appropriate manner. Style Guidelines then go on to provide visual and organizational implementation guides for communicating the brand meaning in the most efficient way. Consumers measure the credibility and commitment of a brand through how consistently it communicates its values. This document acts as the single authoritative point of reference to develop specific digital communications in line with the values of STA Travel. Digital style guide Commercial in Confidence
  • 3. Contents 1.0 STA Digital Proposition 2.0 Digital Users 3.0 Visual Language 4.0 Logo 5.0 Branded Touchpoints 6.0 Modules 7.0 Teaser Blocks 8.0 HTML Styling 9.0 3rd Party Template 10.0 Background Image 11.0 Typography 12.0 Colours 13.0 Country Navigation Digital style guide Commercial in Confidence
  • 4. 1.0 STA Digital Proposition Vision The STA Travel Digital Proposition is purposefully designed as a platform on which to develop meaningful user relationships, digital brand communications To shape the STA Travel brand into a single, integrated organization able to and online sales. profitably dominate the world student and young adult travel market and become the leading brand of global travel to this audience. Key areas of focus are: • Develop deeper levels of personalization. Mission Statement • Encourage credible user contributions. • Maintain relevance and purpose throughout the user journey on STA Travel creates opportunities for students and young adults and enables and offline. them to make the most of their time and experience the world face-to-face, in • Channel meaningful traffic. any way they choose. • Meet emerging user expectations, both technologically and emotionally. • Communicate and confirm values beyond price. Brand Values • Contextualize the brand’s purpose. • Consolidate STA Travel content into a single voice. Ultimately, STA Travel offers Global Citizens (and Free Spirits and Inertia Breakers • Extend the brand visual identity across digital functionality. who would classify themselves as such) encouragement and confidence to experience the world face-to-face, over and over again. Values Digital translation New experiences Encourage aspirations, inspire and enable access Collaborations Familiar and intelligent connectivity Individuality User opted personalisation Expertise Shared technology, knowledge and accessibility Responsibility Open commitment Digital style guide Commercial in Confidence
  • 5. 2.0 Digital Users STA Travel’s target market breaks down into three key groups: Key Brand Pillars Global - images from anywhere on the planet • Free Spirits who experience something different all the time In the know - insiders viewpoint, authentic rather than tourist • Global Citizen’s who absorb other cultures and are open to influence Face-to-face - 1st person viewpoint • Inertia Breakers who do something different and look for reinvigoration It’s all about you - experience rather than documentation These groups share certain commonalities that focus digital attention: Personality Upbeat and radiating energy • Aspiring - an experience greater than the physical act of travelling itself Quirky and confident • Expressive - willingly interact and openly share experiences With a point of view and sense of purpose • Inclusive - want to get involved, contribute and take on responsibilities Welcoming and interested in others • Unfamiliar - look for reassurance and confirmation • Driven - both by emotion and a sense of purpose • Digital - technology is integrated in their lives, second nature Tone of voice Familiar – warm and human – not sales talk Responsible – informative and advisory – not flippant Open – honest and transparent – not hidden agenda Simple – direct and explanatory – not lingo Inclusive – collaborative dialogue – not forced Digital style guide Commercial in Confidence
  • 6. 3.0 Visual Language The STA Travel visual language stems from and revolves around the brand’s values: New experiences, Collaborations, Individuality, Expertise and Responsibility The overall approach for brand communications in the digital space is a balance of user expectations, inspiring functionality and a visual experience. These elements reinforce the brand’s position as a positive and worthy enabler with values tightly interwoven with those of its target users. Impacting first impressions primarily differentiates the brand from price driven web destinations and instantaneously communicates the values of the brand and its emotional connectivity. The 1st person viewpoint inspires, encourages and challenges the user to think bigger, investigate further and get more involved. Driving these emotions will increase the amount of time users spend on the site and therefore help the brand to build deeper and stronger relationships with users. Digital style guide Commercial in Confidence
  • 7. 4.0 Logo It’s important to keep the logo clear of any other graphic elements. To ensure this we’ve established an exclusion zone around our logotype. See below for an example treatment of the logo on the website. Digital style guide Commercial in Confidence
  • 8. 5.0 Branded Touchpoints Primary navigation as brand assets created out of the sites functionality communicates a unique user journey that reflects the brand’s commitment to functionality and usability. Owning functionality in this way becomes a direct expression of the brand’s commitment towards enabling users to make the most of their time whilst understanding their mind states. Three key user mind states: 1. Search and book – focused approach with a clear idea of where, when and with who. As the primary activity module this communicates a streamlined path to getting what the user wants, meeting their expectations and the brand delivering on its promises. 2. Be inspired – open-minded approach that is focused on research and free-wheeling through experiences and possibilities rather than clicking through options and alternatives. 3. Explore the world – investigative approach to accessing information via specific key criteria. 4. Share your adventure – Module that allows visitors to view user generated content. Digital style guide Commercial in Confidence
  • 9. Branded touchpoints cont’d Digital style guide Commercial in Confidence
  • 10. 6.0 Modules Activity modules compartmentalize user mind states in much the same way as travel is planned and carried out by the brand’s user groups. This promotes and delivers increased usability through simplified choices and distinctive activities communicated through Share your adventure accentuated visual clarity. Key modules module allows the allows local users to view the countries to input Semi-transparent activity modules help to illustrate latest traveller’s blogs, own content reviews and videos the brand’s seamless integration with actual travel experiences, helping to confirm trust and accountability. Practically, the tinted effect provides texture and movement to the activity modules without over complicating, distracting from or Footer and language diluting information. selector to appear across all pages Digital style guide Commercial in Confidence
  • 11. 6.1 Opacity 90% opacity 90% opacity 70% opacity Cachet Std 21pt Bold 100% Panel: 301x408pix 90% opacity 100% opacity Arial 12pt /# ffcc00 # 545454 100% opacity Icon: 37x37px 2px gap 5px gap Cachet Std 38pt Bold Cachet Std 18pt Bold Cachet Std 16pt Bold Panel: 301x151px Arial 12pt Bold Digital style guide Commercial in Confidence
  • 12. 6.2 Font sizes Cachet Std 12pt Bold Cachet Std 55pt Bold Cachet Std 29pt Bold Cachet Std 63pt Bold Cachet Std 22pt Bold # 0065bd Arial 12pt Bold #ffcc00 Cachet Std 16pt Bold Arial 12pt Bold Cachet Std 16pt Bold Cachet Std 13pt Bold Cachet Std 16 Bold Arial 12pt Bold Arial 12pt Bold #0066cc Arial 12pt Bold Digital style guide Commercial in Confidence
  • 13. 2px gap 2px gap 2px gap Commercial in Confidence 15px gap 5px gap 14px gap 15px gap 15px gap 5px gap 5px gap 2px gap 8px gap 14px gap Image 300x139px 5px gap 12px gap 5px gap 12px gap Image 300x250px 17px 12px gap 17px 6px gap 40px 10px gap 10px gap 22px gap 22px gap 6.3 Gaps Digital style guide
  • 14. Commercial in Confidence 180x180px 192x110px 38x 38px 180x120px Image 300x139px 301x131px 90x90px Image 300x250px 180x120px 194x124px 6.4 Image size Digital style guide
  • 15. 7.0 Teaser Blocks TEA 01 Promotional elements TEA 03 TEA 04 TEA 06 Digital style guide Commercial in Confidence
  • 16. 8.0 HTML Styling Breadcrumb 11pt 15px gap Main header Arial 30pt Secondary nav Arial 12/15pt Bold 15px gap All prices 20pt Bold Header 17pt Body copy Arial 12pt/15pt 10px gap 5px gap Column width 300px width Column width 645px width Arial 11/13pt Digital style guide Commercial in Confidence
  • 17. Overview of templates Commercial in Confidence Digital style guide
  • 18. Overview of templates Commercial in Confidence Digital style guide
  • 19. Overview of templates Commercial in Confidence Digital style guide
  • 20. Overview of templates Commercial in Confidence Digital style guide
  • 21. Overview of templates Commercial in Confidence Digital style guide
  • 22. Overview of templates Commercial in Confidence Digital style guide
  • 23. 9.0 3rd Party Template Mandatory Mandatory header block header block 3rd party area 3rd party area Base CSS Base CSS styling styling Mandatory footer block Mandatory footer block Digital style guide Commercial in Confidence
  • 24. Commercial in Confidence Mandatory header block 3rd party area Base CSS styling Mandatory footer block 9.0 3rd Party Template Digital style guide
  • 25. Commercial in Confidence Mandatory header block Arial 33pt Bold 70% Opacity Arial 13pt Regular 5px gap Arial 13pt Bold #ffcc00 90% Opacity Image: 300x113px Arial 13pt Bold Image: 210x120px Arial 17pt Mandatory footer block 9.0 3rd Party Template Digital style guide
  • 26. Commercial in Confidence Mandatory header block 3rd party area Base CSS styling Mandatory footer block 9.0 3rd Party Template Digital style guide
  • 27. Commercial in Confidence Mandatory header block 70% Opacity Arial 31px Bold Arial 13px Bold 7px 90% Opacity Cachet Std 25pt Bold Arial 13pt Bold Arial 12pt Mandatory footer block 9.0 3rd Party Template Digital style guide
  • 28. 10.0 Background Image Individual and powerful visual content puts the brand immediately into an emotional context whilst providing an exhilarating platform to support user functionality of the site. Choice of content should follow 4 simple guidelines: • Inspiring and provocative – but also achievable and realistic • 1st person experience – but also engaging to a broad audience • Challenging – but also accessible • Positive and safe – but also authentic and real Images need to be chosen carefully in order to work as a background image for the site. Each image Avoid overly busy images. must be no larger than 80k (recommended). The resolution should be no less than 1600px wide. Digital style guide Commercial in Confidence
  • 29. A central focal point works best in order to draw the eye to the promotion whilst keeping the image on the left and right edge simple. (Image size 1584x924) Digital style guide Commercial in Confidence
  • 30. The promotional text is white (Cachet Std font) and need to read well over the background image – avoid white text over white areas of the image Digital style guide Commercial in Confidence
  • 31. 11.0 Typography Brand messaging Body copy Cachet italic is the STA Travel typeface. Any weight of this typeface can be used. Arial is the chosen system font for online activity. See HTML styling page for more detail. The type should always appear in UPPERCASE ITALICS, except within the body copy where lowercase/sentence case italics should be used for readability. Cachet bold italics Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789 0123456789 Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Cachet book italics ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Digital style guide Commercial in Confidence
  • 32. 12.0 Colours This is the STA Travel colour palette. No other colours should be used apart from these. Tints of colours can be used. Choose the right colour reference for your design need. RGB and Hex colour values are supplied below. Colour palette R0 R 240 R0 R 66 G 173 G 77 G 101 G 20 B 208 B 152 B 189 B 95 Hex # 00ADD0 Hex #F04D98 Hex # 0065BD Hex # 42145F R 251 R 182 R 174 R 242 G 79 G 18 G 164 G 175 B 20 B 52 B 68 B0 Hex # FB4F14 Hex # B71234 Hex # AEA444 Hex #F2AF00 R 190 R 146 R 130 R 161 G 214 G 139 G 75 G 222 B0 B 129 B 176 B 233 Hex # BED600 Hex # 928B81 Hex # 824BB0 Hex # A1DEE9 Digital style guide Commercial in Confidence
  • 33. 13.0 Country Navigation variations UK Germany Australia USA Digital style guide Commercial in Confidence

×