Online marketing usage guide - IHG New Agency Portal

Transcription

Online marketing usage guide
October 5, 2011 Version 1.0
Version log
Name
Ashley O’Neal
Version
Date
1.0
10/05/2011
Page #
Changes
Document up to date
Document key
Designer check point
55
DO NOT
99
ÊÊ
File available
Note:
Document will be updated quarterly. Please make sure that you have the most recetn version.
Contact User Experience Group (UXG) with questions:
[email protected]
IHG Online marketing usage guide |
2
Contents
I. Online Identity
Logo
Voice
Color Palette
Typography
Photography
II. Our Website
Home Page
III:Usage Guidelines
Home Page
Marketing Areas
Navigation
Hero Area
Marketing Modules
Explore Hotels
Featured Content
Secondary Content
Explore Hotels
Reservation Flow
Explore Hotels
Content Pages
Landing Page
Theme and City pages
Page Elements
Header Images
Thumbnails
Graphic Banners
Interactive
Content
Reservation Flow
Make a Reservation
Rooms & Rates
Hotel Details
Guest Information
Content Pages
Common Areas
Main Navigation List Page
Sub Navigation List Page
Details Page
Content Inventory
File Naming Conventions
Copy Maps
Glossary
Note:
For the complete IHG Brand Identity please refer to:
ÊÊ Brand Guidelines_IHG_final.pdf
3
Online Identity
Online Identity
IHG Primary Logo
When applying any of the IHG logo options, these guidelines must be followed.
Descriptor
The logo should always appear with its accompanying descriptor ‘InterContinental
Hotels Group’.
Background color
It is recommended that the logo always appears on a white background. This will maintain its impact
and legibility.
IHG Brand Bar
The IHG family of brands is represented in the IHG brand bar.
Notes:
Please refer to the IHG Brand Full Guidelines for detailed instructions on logo application.
ÊÊ IHG_Full_Guidelines.pdf
Common usages:
Global header, Graphic banners
5
Online Identity
Don’ts
Here are examples of common misuses of the IHG logo under no circumstances should the logo be represented in these ways.
Don’t use IHG white logo for online marketing
Don’t place the logo on a gradient.
Don’t place the logo on an illustration.
Don’t Alter the logo.
Don’t place the logo on IHG an image.
Don’t animate the logo.
6
Online Identity
Voice
IHG’s brand is warm, engaging and confident for all the right reasons. To match it, the language we
use should be clear, engaging and natural.
We are simple and clear, but never patronising
We use engaging and direct language, avoiding jargon and clichés
All our copy should be as easy to read on a website as it is in print
Use ‘you’ and ‘we’
Refer to your reader as ‘you’ and IHG as ‘we’. It is open, friendly and builds up a relationship.
Cut out jargon
Jargon – of all kinds – can make you look pompous or evasive.
Cut out exaggeration
Hyperbole – exaggerating, overstating, or using too many adjectives – suggests a lack of confidence or
even that you have something to hide. Have confidence in what you have to say and write clearly.
Avoid marketing speak
Marketing-speak alienates your reader and obscures what it is that you really have to offer. Heavy
capitalization and lots of trademark symbols make copy awkward to read and suggest an inwardfacing, defensive attitude.
Write in the active voice
It’s specific, direct and authoritative – it shows that you’re doing things and taking responsibility
Ask questions
It’s a good way of showing that you are interested in what other people have to say..
Don’t use clichés
Use of clichés suggests you don’t have anything to say and makes it hard to differentiate you from
your competitors.
Use short sentences
Short sentences are easy to follow and get your point across. Make it easy for your reader to understand what you’re talking about.
Demonstrate through example
Don’t be vague – write precisely and back up your statements with evidence.
Be consistent
Consistency gives confidence. Your statements, spelling and formatting should all be consistent.
Use everyday words
Keep language simple – start thinking of writing as a conversation and write as you speak. Simple language doesn’t dumb down or sell short, it’s just the most effective and engaging way of communicating.
Get rid of extraneous words and phrases
Don’t pad out your sentences with rhetorical flourishes and long winded expressions. They’re pompous, get in the way of your meaning and suggest that you’re not sure what you’re talking about. If you
can cut something out, do so.
Avoid conjunctions at the beginning of a sentence
Don’t start a sentence with ‘and’ or ‘but’ – this interrupts the flow of text and can lead to short, jerky
sentences.
7
Online Identity
Color Palette
When identifying colors from the palette, use the correct color model for screen (HEX) communications
to ensure color quality. Only use colors found in these palettes.
Cherry
HEX # d71920
Mango
HEX #d96932
The online color palette had been modified to enhance color contrast ratios for maximum readability
and to adhere to accessibility standards set by the Web Content Accessibility Guidelines (WCAG).
Raspberry
HEX #
Plum
HEX #752864
Light Gray
HEX #666666
8
Online Identity
Typography
FS Clerkenwell
Georgia
Arial
Use for static text that is embedded in images.
Use for HTML online live text.
Use for HTML online live text.
Light
Regular
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
1234567890
Regular
1234567890
1234567890
Italic
1234567890
Bold
Italic
1234567890
1234567890
Regular
1234567890
9
Online Identity
Photography
The IHG style of photography is all about capturing moments of professionalism and experience in
warm, informal and engaging ways.
Experience Photography
Experience photography is about capturing the moment. The style is reportage.
Incorporating elements of branding in the shot can help to enhance the setting when
55
required, e.g. a sign seen behind the reception desk, a name badge on a member of
staff.
People should appear unaware of the photographer’s presence.
55
Shots should generally feel vibrant, dynamic and warm in color and tone.
55
The shot should not look posed.
99
People should not need to look to camera
99
10
Online Identity
Photography
Detail photography
Examples
Branded detail photography
Iconic cut out photography
11
Our Website
Our Website
Home Page
Above the fold
13
Our Website
Home Page
Below the fold
14
Our Website
Home Page
Below the fold
15
Our Website
Explore Hotels
Landing page
City page
In Progress
16
Our Website
Reservation Flow
Make a reservation
Rooms & rates
In Progress
17
Our Website
Reservation Flow
Hotel details
Guest information
In Progress
18
Our Website
Content Pages
Main navigation list page
Sub navigation list page
In Progress
19
Our Website
Content Pages
Detail pages
20
Our Website
Page Elements
Header Image
Thumbnail
CTA
21
Our Website
Page Elements
Graphic Banner
22
Our Website
Page Elements
Header images
Asset
hro_filename.jpg
ÊÊ IHG_hro_header_image.psd
• Choose relevant images to the page content
• Text is dynamic and overlaid on the image in the HTML
972 x 185 px
55
Optimized JPG should not exceed 100kb
55
Affiliate Header Image
Headline
30 characters with spaces
55
Georgia Regular 30 px #752864
55
Centered vertical and horizontal
55
Upper case
55
Up to 3 lines of text (4 lines for translations)
55
Do not embed the text in the image asset
99
Don’t use all caps
99
185
White space built into image
Asset Example
23
Our Website
Page Elements
Thumbnails
Asset
thb_file_name.jpg
ÊÊ IHG_thb_thumbnail_107x107.psd
107 x 107 pixels
55
55
1 px gray border around inside edge, IHG global color #bbbbbb
55
Images should be clear and descriptive
55
Thumbnails are clickable and require alternate text
55
Graphic icons
Border can be omitted if using graphic logos
55
Align graphic to top of image area
55
Graphic icons with border
Do not use an image that doesn’t match the linked page header image.
99
Do not mix thumbnails that have borders with thumbnails that are without borders.
99
Common usages:
List Page Templates
Note
If linking to external site, link should open in a new window;
approval by the Global Brand team is required
Graphic icons without border
24
Our Website
Page Elements
Graphic banners
Text centered aligned vertical and horizontal
55
Upper case, no punctuation
55
Curve device between image and text
55
Headline
Typeface:
Weight:
Size:
Color
Body copy
Typeface:
Weight:
Color
Size:
Leading:
FS Clerkenwell
Regular
12px - 18px
#752864
Arial
Regular
#666666
12px - 14px
14px - 16px
Never simulate buttons with banners
99
Simulating text links within banners is discouraged
99
If simulated text link is necessary, it should display in context of the body copy
99
Horizontal banner images should not exceed over 50% of the banner width.
99
25
Our Website
Interactive
Buttons
Buttons, tabs, controls and icons
See complete specifications in the PSD template
ÊÊ IHG_buttons_EN.psd
Text is capitalized
55
3 button heights
55
1 Main navigation landing page size
55
Tabs
Do not change font sizes, color or case
99
Never use the term ‘CLICK HERE’
99
Do not change background color
99
Never change the template dimensions
99
Pagination controls
Never stretch the button
99
Do not change the height of the button
99
Icons
Headline links
New window
E-mail
Printer Friendly
Help
Close
26
Usage Guidelines
Home Page
Marketing Areas
Navigation
Hero Area
Marketing Modules
1
2
3
2
3
Explore Hotels
Featured Content
1
Secondary Content
28
Home Page
Navigation
Hotel Deals
Text only, bold, #d96932
55
Character Count: 22 with spaces
55
External links are notated by this symbol
55
Brand approval is required
Explore IHG
Targeter Name: Nav2 (targeting currently unavailable)
and open in a new browser window; Global
Displays the Hotel Offers, Hotel Packages, and Discounts landing pages
55
Text only, bold, #
55
55
Text should closely match targeted page name
55
Should link to page within current site
55
External links are notated by this symbol
and open in a new browser window; Global
55
Brand approval is required
Hotel Deals
Hotel Offers
Hotel Packages
Discounts
Sign up for e-mail offers
Cannot designate order of appearance in list
55
Up to 7 items can display in the list
55
In Progress
Explore IHG
Sleep Advantage
Partnerships
Note:
Targeting rules are not provided in this document.
29
Home Page
Hero Area
Static image
Asset
img_alt_flash.jpg
ÊÊ IHG_img_hero_area.psd
560 x 266 px
55
100 kb max file size
55
Also used as alternative image
55
Headline
55
2 lines of text max
55
Sentence case with period
55
Text color #FFFFFF
55
FS Clerkenwell Regular
55
Image is not clickable
99
30
Home Page
Hero Area
Interactive Flash
Asset
fl_home.swf
ÊÊ ???.fla
560 x 266 px
55
500 kb max file size
55
7 frames max
55
4.5 seconds per frame
55
Frame rate set to 30
55
Requires an alternative image
55
q
Interactive elements
Slide pagination controls q
55
Must meet WCAG AA accessibility guidelines
55
Headline
??? Characters with spaces
55
Up to two lines of text
55
Sentence case with period
55
Arial Regular ??? px #666666
55
Does not include: Logo, Navigation, Reservation Module, Marketing modules
99
NOTE:
All interactive design requires global brand approval.
Flash files must meet accessibility requirements, contact the UXG for assistance.
[email protected]
31
Home Page
Marketing Modules
Graphic banners
Body copy two lines of text
Asset
mm_filename.gif
ÊÊ IHG_mm_home_marketing_module.psd
300 x 100 px
55
Optimized image should not exceed 5kb
55
Padding ???
55
Text placed ???px to the right of the image area
55
Double chevrons placed 5 px to the right of the headline
55
Text color #37404a
55
Body copy three lines of text
Headline
FS Clerkenwell Regular 16 px #d71920
55
??? Characters with spaces
55
Upper case, no punctuation
55
Only one line of text if possible.
55
Clear zones
Body copy
Arial
55
Leading 18 px
55
55
Up to 3 lines of text (4 lines for translations)
55
Headline
Image
Body copy
No images just square icon
99
Avoid two lines of text in the headline
99
Never use the term ‘CLICK HERE’
99
Never simulate links in the copy
99
Do not use button graphics
99
Do not change background color
99
Never change the template dimensions
99
Note:
• Translation vendor should fit text within these rules.
• Based on word lengths, designer may suggest text edits based on available space
• If a module links to an external site, it must open in a new window - approval by
Global Brand required to link to other brand sites.
32
Home Page
Explore Hotels
Intro Copy q
140 characters with spaces, body style
55
q
City copy w
55
Find <city> hotels, link style
55
r
Additional Links e
12 - 16 links can display at one time, link style
55
#Mango
55
Images r
img_dest_cityname.jpg
ÊÊ IHG_img_explore_hotels_destination.psd
w
140 x 213 px
55
?? 14 px
55
Text color #
55
Border 1px #
55
Image links to city page
55
e
33
Home Page
Featured Content
Subhead
30 characters with spaces, subhead style
55
Body Copy
55
One paragraph
55
Avoid breaking up text block
55
Image
img_description.jpg
ÊÊ IHG_bg_custom_module.psd
185 x 223 pixels
55
May use full photos or objects isolated on white
55
Image must be photographic
55
No illustrations or logos (seek Global Brand approval to use logos)
99
34
Home Page
Secondary Content Areas
Content Areas 1 & 2
Content Area 1
Content Area 2
q
Subhead
30 characters with spaces, subhead style
55
OR
Image
Can also be used instead of subhead if needed,
Example: Priority Club logo
q
200 x 23 pixels is the maximum image size
55
Body Copy
55
35
Explore Hotels
Explore Hotels
Landing Page
Main Image q
550 x 290 pixels
55
Links to Interactive map page
55
Contact UXG to request changes: [email protected]
Body Copy w
1,030 characters with spaces, body style
55
q
Popular Destinations e
City Name: Arial Bold, all Upper Case
55
Number of Hotels: body style
55
City Copy: 90 characters with spaces
55
Arial Regular, 0.917ems / 1.5 ems in black
55
City Link: Find <City Name> Hotels
55
e
r
w
City Thumbnail r
thb_filename.jpg
120 x 70 pixels
55
Focus on iconic landmarks
55
Avoid skylines
99
37
Explore Hotels
Theme & City Pages
Body Copy
Text here
1,000 - 1,200 characters with spaces, body style
55
Only the first 550 characters display by default; uses view more/less functionality
55
Static Image
img_filename.jpg
220 x 180 pixels
55
1px border #b1a0a5
55
Use realistic imagery
55
Focus on iconic landmarks instead of generic skylines
55
No abstract representations or filtered images
99
Avoid showing people
99
Available after launch
38
Marketing Areas
Marketing Areas
Make a Reservation
Graphic banners
Find and Book 2
q
img_page_name.jpg
ÊÊ IHG_img_graphic_banner_365x245.psd
ÊÊ
q
q
IHG_img_graphic_banner_365x85.psd
2 graphic banner size options available
55
w
w
365 x 245 px
OR
365 x 85 px
55
Headline
55
Body
55
For Reference Only
For Reference Only
Static Box 3 w
img_page_name.jpg
Small banner size only
55
365 x 85 px
55
55
Headline
55
Body
30 – 70 characters with spaces
55
Note:
40
Marketing Areas
Hotel Details
Graphic banner
Asset
img_page_name.jpg
245 x 185 pixels, optimized JPG should not exceed 35kb
55
Text centered vertically and horizontally
55
Headline
55
Text size 12 - 14 px
55
FS Clerkenwell Regular #
55
Body
30 – 70 characters with spaces
55
55
Arial Regular #666666
55
Note:
41
Marketing Areas
Rooms & Rates Packages
Single Graphic Banner
Rooms & rates packages 1A
img_page_name.jpg
950 x 90 px
55
Optimized .jpg should not exceed 50kb
55
Headline
55
FS Clerkenwell Regular #
55
55
Body
90 -175 characters with spaces
55
Arial Regular #666666
55
55
1/3 image
1/2 image
42
Marketing Areas
Rooms & Rates Packages
Parallel Graphic Banners
Rooms & rates packages 1A & 1B
img_page_name.jpg
460 x 90 pixels
55
55
Two unique banners must always display when using this option
55
Headline
55
55
Body
55
55
Note:
43
Marketing Areas
Guest Information
Content
• Character Count: 100 with spaces
• Text is 1em in primary brand color
This is not a link; informational only
99
Text here
Wrapper
Text only, images are not supported
99
Progress bar
Guest Information
Reservation
&
Guest information
Payment
Information
Details
Wrapper
44
Content Pages
Content Pages
Main Navigation Page
See Global Content Page Document for all content page type layouts
ÊÊ .psd
•
•
•
•
•
•
Text here
Page Name should consider SEO factors
Header Image should be unique and relevant
Content must be unique per URL
Page should summarize several concepts
If linking to sub navigation list page use the double chevron icon
Duplicate content within the same URL requires brand approval and robot.txt
Character Count Per Section: 330 - 450 with spaces
55
In line text links should use #151c23
55
Headlines are links with underline on hover
55
Common uses:
Planning & Reservations, Hotel Deals, Meetings & Events, Crowne Plaza Experience, Priority Club
Rewards
Note:
If linking to external site, use the new window icon and link should open in a new window; approval by
the Global Brand team is required
In Progress
46
Content Pages
Sub Navigation Page
ÊÊ IHG_list_page.psd
•
•
•
•
•
•
•
•
•
Text here
Information should summarize several concepts
Links should appear in the body copy
Links direct to detail pages
If linking to sub navigation list page use the double chevron icon
55
Thumbnails should use the global template
55
Common uses:
Hotel Offers, Discount Programs, How to Book
Note:
If linking to external site, link should open in a new window; approval by the Global Brand team is
required
47
Content Pages
Details Page
ÊÊ IHG_detail_page.psd
Text here
55
Information should summarize several concepts
55
Links should appear in the body copy
55
Links direct to detail pages
55
55
55
55
55
55
Thumbnails should use the global template
55
Common uses:
Hotel Offers, Discount Programs, How to Book
Note:
If linking to external site, link should open in a new window; approval by the Global Brand team is
required
48
Content
What is a content inventory?
The Content Inventory is an Excel document that will act as the ‘master’ document for all aspects of a
web page including:
•
•
•
•
•
•
Meta Data
Navigation / Sub Navigation Placement
Page Content (copy, image assets)
Accessibility Requirements (alternate text, etc.)
Translations
Marketing Assets (modules, graphic banners, etc.)
Using the Document
Each page layout has a corresponding Content Inventory template, which has instructions and page
layout samples within the first worksheet tab of the Excel document. Use the template to insert your
text based content for submission into the design phase.
Once the designer completes the layout, they will enter the file names for the required assets (images,
icons, buttons, etc). The final Content Inventory is then submitted for development as well as sent off
for translation into the specified languages.
Using the Copy Map
The copy map is most important once translations are received and the page must be rebuilt in a
language that the developers cannot read or understand. If there are sections of the Copy Map and
Content Inventory that are not required for a specific page, simply leave those areas blank. The numbering of the Copy Map and Inventory will remain the same for consistency.
49
Content
Sample Inventory
50
Content
Use file naming conventions below for all assets.
Asset type
Prefix
Example
Icon
ic_
ic_star.gif
Buttons
btn_
btn_learn_more.gif
Exceptions
btn_book_room_active.gif
btn_book_room_inactive.gif
Tabs
tab_
tab_hotel_details_active.gif
tab_hotel_details_in_active.gif
Thumbnail
thb_
thb_advance_purchase.jpg
Header Image
hro_
hro_hotel_deals.jpg
Images
img_
img_logo.gif
img_
img_name.jpg
Background Image
bg_
bg_gradient.gif
Icons
icn_
icn_favorites.gif
Sprite
spt_
spt_ihg.gif
Marketing Module
mm_
mm_summer_savings.jpg
mm_summer_savings.gif
Flash
fl_
Hotel Indigo
fl_home.swf
51
Content
Copy map
Usage Guidelines
•
•
•
•
Text here
Number corresponds to Content Inventory
Copy Mapping is crucial for language translation
Each section of copy and image must be mapped
If not using an existing template, a map must be created once the page
design is finalized
52
Glossary
Alternate Text
Invisible information that is attached to any visual element (image, button, link, icon, or flash) that
appears on a web page. The Alt Text is only visible when a user hovers over that element, or if that
visual element is unable to display properly. Alt Text is a very important aspect of Accessibility as it
allows users with disabilities to experience a web page utilizing screen readers.
Body Copy
The core message or content of a web page or visual element.
Breadcrumb
Navigational text links that appear above the page name which display the path a user has taken to
arrive at the current page being viewed. These links allow the user to quickly return to any part of
that path in one click.
ontent Inventory
C
An excel document that contains all the information required to build a specific web page, including
any marketing slots being utilized for promotion of the page. The Content Inventory is also used for
capturing and organizing translated content via the Copy Map.
Copy Map
A sample page layout that assigns a number to each element on the web page which corresponds to
a line in the Content Inventory. The Copy Map is crucial for successfully capturing translated content
and rebuilding that page in a language foreign to the developer.
Custom Module
A unique module that is built for a specific Offer or Package that requires enhanced functionality.
These modules require additional time and a scheduled development build; therefore it must be approved by the development team prior to being submitted.
EM
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element
is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can
adapt automatically to the font that the reader uses.
Endeavor
The web server platform on which the HGP code base operates.
Header Image
The main graphic that stretches across the top of a web page, and appears directly below the Page
Name.
HGP
The shared code base used by all consumer facing websites; except for intercontinental.com.
Marketing Areas
Sometimes called “P-Slots” these are areas of the website that can be utilized for promotion.
Marketing Module
Marketing slots that are designed specifically for the Home Page, and are uniquely designed per
brand.
Meta Data Browser Title
The page name that displays inside a users browser window that is also an used by search engines
(SEO).
Meta Data Description
A description of a web page’s content, which search engines use when adding pages to their search
index (SEO).
Meta Data Keywords
Used to describe the content of a web page, which search engines use when adding pages to their
search index (SEO).
Module
An area of a webpage that contains several elements functioning together to produce a desired result.
Example: Reservation Module
Navigation / Drop-down
Seen inside the Content Inventory; this information designates under which section of the global
navigation the page should appear, and then what the actual page name will be inside that navigation
drop-down menu.
Page Name
The descriptive name of a page which appears directly below the breadcrumb. The page name should be the
same or very similar to the name that appears in the Browser Title and in the Navigation / Drop-down menu.
53
Glossary continued
Reservation Module
A brand specific module that appears on the Home Page and on appropriate pages within the website.
When these modules appear on an Offer or Package page, it can be coded to pass specific rate types
which must be reviewed by IHG development team.
Subhead
A short description, introductory message, or title of a subsection of content.
Targeter Name
The name development uses to identify a targeted marketing slot, these names can be helpful when a
page contains more than one marketing slot and they also carry different targeting criteria.
Thumbnail
A small image that appears within the body of a web page.
Title Text
Not necessarily required for accessibility, but by definition can be used to provide advisory information. It should not be the same information that appears in the Alt Text or contain crucial information.
Wrapper
The brand specific area that includes the logo, main navigation and footer of a web page.
54

Online marketing usage guide - IHG New Agency Portal

Transcription

Similar documents

Holiday Inn Express Fact Sheet - Q3 2014

The IHG Employee Survey - IHG Owners Association

Presentation (PDF Format)

Meeting Package - InterContinental Montréal

intercontinental hotels group

The way we work at IHG wherever we are in the world.

PDF · 5 mb - Cosmos Creative Studio

Contact us ihg.com/development Welcome Your options Why

Thrislington Cubicles - design management europe award

Derek Perkins Design Resume plus full teaser