CONRAD 1/3/5 D I S P L A Y G U I D E L I N E S confidental - for internal use only APR 2016
DIGITAL / CONRAD 1/3/5 DISPLAY / CTA BUTTON 1/3/5 EXPERIENCES - INACTIVE EXAMPLE C T A B U T T O N The 1/3/5 experiences specific to each property are displayed on the property s website, in addition to StayInspired.com. Presented here is an example of the 1/3/5 display with a callto-action button. Whenever the artwork is displayed in the same (or similar) form as the example, use the StayInspired.com website as the main design reference. Each section is activated by a mouseover. Use the main property color as the background overlay. The transparency is set to 80%. Use Aureate CTA button on color background. Avoid using long headlines to describe experiences. See more detailed examples of how to structure this 1/3/5 display on the following pages. 1/3/5 EXPERIENCES - MOUSEOVER EXAMPLE The number representing the hour should take up around 65% of the total space available. The size of elements may vary depending on the dimensions of the execution. The number should never obscure the CTA button.
DIGITAL / CONRAD 1/3/5 DISPLAY / CTA BUTTON / SPECCED 1/3/5 DISPLAY - INACTIVE C T A B U T T O N Presented here are guidelines to help you build the 1/3/5 display with the call-to-action button. The user will see the Inactive Display when the mouse is not hovering over the display. IMAGE The background image should reflect the experience and / or display the Conrad 1/3/5 photography. Conrad 1/3/5 may be displayed in various sizes and dimensions. There are no prescriptive recommendations about which dimensions can be used. You may use your discretion about the specific dimensions of each execution. The following are design guidelines only, and should not be construed as directly instructive in terms of dimensions. COLOR OVERLAY The property color overlay should take up around 35% of the area. The transparency should be set to 80%. CLEAR SPACE The amount of clear space depends on the layout. Leave equal spacing between the elements and the edges of the artwork. CTA The CTA button should be in proportion with the design. Keep the CTA button consistent with the smallest CTA button in the same layout (e.g. website or email). HEADLINE (5 HOURS) Type: Brandon Grotesque Bold Italic, all caps Size: 22 pt (size may vary depending on the layout) SUBHEADLINE Type: Avenir Next Bold, all caps Size: 19.5 pt (size may vary depending on the layout)
DIGITAL / CONRAD 1/3/5 DISPLAY / CTA BUTTON / SPECCED 1/3/5 DISPLAY - MOUSEOVER C T A B U T T O N These guidelines should be applied when building the 1/3/5 display with a call-to-action button. COLOR OVERLAY The property color overlay transparency should be set to 80%. THE NUMBER The number representing the hour should take up around 65% of the total space available. The number should never obscure the CTA button or cross the clear space. CENTER A Gradient Overlay effect is applied to the number. The transparency is set to 50%. The base color is Snow. Type: Brandon Grotesque Black Italic CLEAR SPACE The amount of clear space depends on the layout. Leave equal spacing between the elements and the edges of the artwork. CTA The CTA button should be in proportion with the design. Keep the CTA button consistent with the smallest CTA button in the same layout (e.g. website or email). HEADLINE (5 HOURS) Type: Brandon Grotesque Bold Italic, all caps Size: 22 pt (size may vary depending on the layout) SUBHEADLINE Type: Avenir Next Bold, all caps Size: 19.5 pt (size may vary depending on the layout)
DIGITAL / CONRAD 1/3/5 DISPLAY / CTA BUTTON / INCORRECT 1/3/5 DISPLAY INCORRECT 1/3/5 DISPLAY - INACTIVE I N C O R R E C T Presented here are incorrect examples of the 1/3/5 display with a CTA button. For any questions regarding the Conrad 1/3/5 display, do not hesitate to contact our Marketing Department: Conrad.marketing@hilton.com The number should not appear on inactive frame. The property color overlay is missing. The CTA button is misplaced. Wrong colors are used. INCORRECT 1/3/5 DISPLAY - MOUSEOVER Elements in the artwork are misplaced. The number is enlarged. The hour number is centered or covered by CTA button. Elements in the artwork are misplaced. The CTA button is obscured by the background. Elements in the artwork are misplaced.
DIGITAL / CONRAD 1/3/5 DISPLAY / ARROW 1/3/5 EXPERIENCES - INACTIVE EXAMPLE A R R O W This is an example of the 1/3/5 display with an arrow as a callto-action element. This version is the most consistent with the Stayinspired.com website. See more detailed examples of how to structure this 1/3/5 display on the following pages. 1/3/5 EXPERIENCES - MOUSEOVER EXAMPLE The number representing the hour should take up around 65% of the total space available. The size of elements may vary depending on the dimensions of the execution. The number should never obscure the CTA button.
DIGITAL / CONRAD 1/3/5 DISPLAY / ARROW / SPECCED 1/3/5 DISPLAY - INACTIVE A R R O W These guidelines should be used to build the 1/3/5 display with the arrow as call-to-action button. IMAGE The background image should reflect the experience and / or display the Conrad 1/3/5 photography. COLOR OVERLAY The size of the color overlay is equal to the size of two arrow elements combined. 1 3/4 ARROW CLEAR SPACE The amount of clear space depends on the layout. Leave equal spacing between the elements and the edges of the artwork. ARROW AS CTA To keep consistency with the elements on StayInspired.com website, the arrow is used as a CTA button to lead the viewer to the website. The copy and arrow are centered horizontally. HEADLINE (5 HOURS) Type: Brandon Grotesque Bold Italic, all caps Size: 22 pt (size may vary depending on the layout) SUBHEADLINE Type: Avenir Next Bold, all caps Size: 19.5 pt (size may vary depending on the layout) Avoid using long subheadlines to describe experiences.
DIGITAL / CONRAD 1/3/5 DISPLAY / ARROW / SPECCED 1/3/5 DISPLAY - MOUSEOVER A R R O W These guidelines should be applied when building the 1/3/5 display with the arrow as call-to-action button. COLOR OVERLAY The property color overlay transparency should be set to 80%. THE NUMBER The number representing the hour should take up around 65% of the total space available. The number should never obscure the CTA button or cross the clear space. CENTER A Gradient Overlay effect is applied to the number. The transparency is set to 50%. The base color is Snow. Type: Brandon Grotesque Black Italic CLEAR SPACE The amount of clear space depends on the layout. Leave equal spacing between the elements and the edges of the artwork. ARROW AS CTA To keep consistency with the elements on StayInspired.com website, the arrow is used as a CTA button to lead the viewer to the website. The copy and arrow are centered horizontally. HEADLINE (5 HOURS) Type: Brandon Grotesque Bold Italic, all caps Size: 22 pt (size may vary depending on the layout) SUBHEADLINE Type: Avenir Next Bold, all caps Size: 19.5 pt (size may vary depending on the layout) Avoid using long subheadlines to describe experiences.
DIGITAL / CONRAD 1/3/5 DISPLAY / ARROW/ INCORRECT 1/3/5 DISPLAY INCORRECT 1/3/5 DISPLAY - INACTIVE I N C O R R E C T Presented here are incorrect examples of the 1/3/5 Display with an arrow. For any questions regarding the Conrad 1/3/5 display, do not hesitate to contact our Marketing Department: Conrad.marketing@hilton.com Wrong colors are used.. Elements in the artwork are misplaced and enlarged. Elements in the artwork are misplaced and wrong colors are used. INCORRECT 1/3/5 DISPLAY - MOUSEOVER Elements in the artwork are misplaced. The clear space rule is ignored, The gradient overlay effect isn t applied to the number. Wrong colors are used.
THANK YOU