Online Brand Guide Version 1.0, November 2014
Contents Section I - Design Principles Core characteristics 12 column grid system General colour use Color palette General font use Fonts Use of logo
03 04 05 06 07 08 09
Section II - Specific Elements Highlight keyline Header bar & main navigation Sub navigation - Current design Sub navigation - Future design
11 12 13 14
Hero image - Narrow view Hero image - Wide view Hero image - Title & subtitle
15 16 17
Photography - Art direction Photography - Don’ts Photography - Example editing Photography - Use in website
18 19 20 21
Breadcrumbs Notification & error message In page header Article - Large article Article - Medium & small article Photoslider in body Icons
22 23 24 25 26 27 28
Buttons & incentives - overview Buttons & incentives - regular buttons Buttons & incentives - incentive buttons Buttons & incentives - events & training
29 31 32 33
Video Pop up Specials zone & footer
34 35 36
1
Section I Design principles
2
Core characteristics There are 3 core characteristics to consider in the design of the website: • The use of building blocks in a 12 column grid system • A clean, open and accessible look & feel • The use of photography to add variety and colour balance ______ To see specific applications of the core elements, please refer to Section 2.
SECTION 1 - DESIGN PRINCIPLES
3
12 column grid system Hierarchy can be achieved by using building blocks appropriately. 1 9-column left-aligned main content area 6 2 5-column left-aligned main content area 3 4-column left-aligned main content area 1
4 3-column right-aligned secondary content area
2
4 3
5 12-column blocks for elements like footer, specials zone, alerts, notifications and navigation. 6 Top slider is always browser wide, in order to give more importance to certain content. This slider therefore overrides the 12-column grid system. ______ To see specific applications of the core elements, please refer to Section 2.
5
SECTION 1 - DESIGN PRINCIPLES
4
General colour use The use of colour should be clean and minimal, mainly using shades of white and sparingly used light and dark grey. 1 The main background colour is off-white. 2 Secondary background colour in body is light grey. 3 Dark grey is used for copy and headers. Dark grey is also used in the footer, and for the current sub navigation background. 4 Medium grey is used as the background colour for notifications. 5 INREV blue is used for the background colours of modules or headers that are to be stressed, ie to draw attention, for highlighted information, articles and sections. INREV blue is also used for main title texts and in all icons.
1
5
2
6
6 INREV accent blue is used very sparingly: • used in the case of the specials zone • used for divider lines • used for hover states on text 7 Yellow is used only for the alert banner. ______
3
7
To see specific applications of the core elements, please refer to Section 2.
4
SECTION 1 - DESIGN PRINCIPLES
5
Colour palette INREV blue • Filter boxes • Strokeline • Button text • Header titles • Navigation titles • Logo
Main colours
INREV blue R000 G051 B159 #00339F
INREV accent blue • Button hover • Background of the special feature area • Text links • Divider line
INREV accent blue R089 G203 B232 #59CBE8
Special colour
Yellow • Background error messages Dark grey • Footer background
Yellow R255 G222 B000 #FFDE00
Medium grey • Body text • Background alert messages
Contrast palette
Light grey • Forms Off-white • Background colour
Dark grey R034 G036 B037 #222425
Medium grey R084 G088 B090 #54585A
SECTION 1 - DESIGN PRINCIPLES
Light grey R235 G235 B235 #EBEBEB
Off-white R249 G249 B249 #F9F9F9
6
General font use
Open Sans Bold Arial Regular
The use of fonts should consider optimal accessibility and to support the content hierarchy. The line height / leading of text is 120% the height of the font. E.g; in a section where the text is 12px in size, the line height/leading will be 14.4px. ALL CAPS is used in occasional instances for titles where the text length is very short. Sentence case is the most used throughout the website. Italics are used for notifications or alerts or messages that are not very frequent.
SECTION 1 - DESIGN PRINCIPLES
7
Fonts Large fontset
Medium fontset
Smallest fontset
Open Sans Bold 36px
Open Sans Bold 30px
Open Sans Bold 24px
Arial Regular 14px
Arial Regular 14px
Arial Regular 12px
Large fontset Use for 9-column header and body text. Medium fontset Use for 5-8 column header and body text. Smallest fontset Use for 3-4 column header and body text. Small fontset Use for incentive buttons header and body text.
Small fontset
Open Sans Bold 14px Open Sans Regular 14px Centre aligned
SECTION 1 - DESIGN PRINCIPLES
Arial Regular 12px Centre aligned
8
Use of logo 1. In INREV blue. 2. 2 columns wide, aligned to the left.
1
2
SECTION 1 - DESIGN PRINCIPLES
9
Section II Specific elements
10
Highlight keyline 1. Line is 60px wide in all cases except when used in the navigation menu, there it should be as wide as the word it underlines.
The highlight keyline is always in accent blue, always with a 3px weight line. 3 1
2
2. Used to divide header text from subtext. 3. Used vertically to divide information. 4. Centre aligned under page title.
4
5. Left aligned in all other cases.
5
SECTION 2 - SPECIFIC ELEMENTS
11
Header bar & main navigation 1. Distance between top & header 30px. 2. Log in / Register font • Open Sans • 12px • Bold • INREV blue
Full 12 columns width
1
6
2
5
3 4
3. Search font • Arial • 12px • Regular • Grey 4. Distance between header bar & navigation 30px 5. Navigation font • Open Sans • 14px • CAPS • Centre aligned • Regular • INREV Blue 6. Selected item • Bold • Accent blue underlined
SECTION 2 - SPECIFIC ELEMENTS
12
Sub navigation Current design
1. Background of sub navigation • Medium grey • 2 columns wide 2. Sub navigation text padding left 5px
5
2
4
3. Space between titles approx. 15px
1
4. Subtitles font • Open Sans • Regular • 12px • White
3
5. Highlighted sub title • Background colour dark grey • Vertical highlight keyline to the left • Bold font 6. Tertiary menu never to be used as it adds complexity and doesn’t work on touch devices.
6
SECTION 2 - SPECIFIC ELEMENTS
13
Sub navigation Future design
1. Distance between main navigation and the sub navigation box 20 px. 2. Sub navigation background • Full width • Colour light grey 3. Distance between sub items approx. 15px
1 2
4 5
3
4. Subtitles font • Open Sans • 12px • Regular • Blue 5. Selected item Bold font • 15px padding • White background • Highlight keyline to the left
SECTION 2 - SPECIFIC ELEMENTS
14
Hero image Narrow view
SECTION 2 - SPECIFIC ELEMENTS
When the browser window is smaller than the website’s full-size dimensions, only one hero image will be shown.
15
Hero image Wide view
SECTION 2 - SPECIFIC ELEMENTS
When the browser window is wider than the website’s full-size dimensions, part of the second hero image will also be shown.
16
Hero image Title & subtitle
1. Approx. distance from highlight keyline to text 20 px 2. Sub text font • Open Sans • 16px • Regular • White
6 3
3. Header font • Open Sans • 24px • Bold • White
4
4. Length of header text approx. 75 characters 5. Arrow slider bar • 60% opacity • 100% opacity on hover
5 1
6. Image auto scrolling approx. 8 seconds per slide. 7. Length of subtext approx. 75 characters
2 7
SECTION 2 - SPECIFIC ELEMENTS
17
Photography Art direction 1 General photos
There are two types of photos:
2 Event photos
1. General photos Taken from a further distance. 2. Event photos Specific to certain locations and taken from a closer distance to make them more identifiable. General direction Show a strong skyline. Have modern look, even if content of image is older buildings. Use day time shots with clear bright skies. Face buildings at eye-line.
SECTION 2 - SPECIFIC ELEMENTS
18
Photography Don’ts
1. Do not use night time images.
1
2
4
2. Do not use images with high dark and light contrast. 3. Do not use images that are highly photoshopped.
1
1
SECTION 2 - SPECIFIC ELEMENTS
3
4
4. Do not use images looking up or down. 5. Do not use close-up view of buildings.
5
19
Photography Example editing
1. The example photo, left, is duller, darker, and less vibrant.
In this example, the photo provided is correct in content but needs adjustment to match the INREV photo style. 1
SECTION 2 - SPECIFIC ELEMENTS
2
2. This would be adjusted by slightly increasing the brightness, contrast, blue content and levels.
20
Photography Use in website
1. When cropping needs to occur, make sure to include as much of the buildings as possible.
1
2
2. A dark gradient from left to right should be added to guarantee the legibility of the white text on top of the images. The gradient going from the left side 60% opacity to 0% opacity to the right side.
2
SECTION 2 - SPECIFIC ELEMENTS
21
Breadcrumbs 1. Current page • Arial • 12px • Regular • Grey
Full 12 columns width
3
2
1
2. Previous crumb • Arial • 12px • Bold • Accent blue • Underlined 3. Home • Arial • 12px • Bold • Accent blue
SECTION 2 - SPECIFIC ELEMENTS
22
Notification & error message 1. Notification font • Open Sans • 18px • Regular italic • White • Centre aligned
Notification
Full 12 Columns Width
1
2. Notification background colour Dark grey
2
3. Error Message font • Open Sans • 18px • Regular italic • Dark grey • Centre aligned
Error Full 12 Columns Width
3
4
5
4. Error message background colour Alert yellow 5. Height of boxes Approx. 70 px
SECTION 2 - SPECIFIC ELEMENTS
23
In page header 1. Distance between breadcrumbs and title 20px
8 Columns width, centred.
1
2. Title • Open Sans • 42px • Bold • INREV blue • All caps
2 4
3 5
3. Sub text • Open Sans • Regular • 20px • Dark grey 4. Distance between text and the keyline 20px 5. Distance between last line of text and the first item on the page 50px
SECTION 2 - SPECIFIC ELEMENTS
24
Article Large article
1. Starred ribbon icon top right to indicate the most recent news articles.
9 Columns width 2
1
3
2. Header • Open Sans • 36px • Bold • INREV blue 3. Date • Open Sans • 14px • Regular • Italic • INREV blue
4
5
SECTION 2 - SPECIFIC ELEMENTS
4. Copy • Arial • 14px • Regular • Grey 5. Bullet points • Indent before bullet point 1 column wide • Circle bullet point
25
Article Medium & small article
1. Medium article Header • Open Sans • 30px • Bold • INREV blue
Small article
Medium article
2. Copy • Arial • 14px • Regular • Grey
4 Columns width
8 Columns width
1
3
2 4
3. Small article Header • Open Sans • 24px • Bold • INREV blue 4. Copy • Arial • 12px • Regular • Grey
SECTION 2 - SPECIFIC ELEMENTS
26
Photoslider in body 1. Text box • INREV blue • 3 columns wide
9 Columns width
1 2
2. Title text • Open Sans • 20px • Bold • White
5
3. Highlight keyline • 3px weight • Accent blue colour
3 4
4. Subtext • Open Sans • 14px • Regular • White 5. Image size 6 columns wide 6. Image auto scroll • Scrolls upwards • 8 seconds per slide
6 7
SECTION 2 - SPECIFIC ELEMENTS
7. Click through images/articles via right navigation.
27
Icons As simple as possible. Main stroke line of 3px.
Home
Publications
Guidelines
Industry data
Staff profile
View points
Events
2px stroke for smaller details, for example the graph line in the publications icon. The padding between the circle and the icon is approximately 5px for every icon.
Public affairs
Contact us
Committees
View from N-A
SECTION 2 - SPECIFIC ELEMENTS
News
View from Asia
Research
Training
Management board
Members
For use on webpages and e-shots the icon size is 100px by 100px.
Young professionals
28
Buttons & incentives Overview Stick to these rules when creating buttons for a unified overall look and feel of the website and to avoid confusion for the user.
Normal State
1
SECTION 2 - SPECIFIC ELEMENTS
Hover State
2
1. Button in normal state • White button background colour • Blue text • Blue icons where applicable • 1px blue stroke line 2. Button in hover state • A button in hover state is the inverse of its normal state • Blue button background colour • White text • White icons where applicable
29
Buttons & incentives Overview
1. If the link element is text and not a button, the hover state of the text and related iconography turns to accent blue.
Hover State
Normal State 1
1
2. If the button is on top of a colour the hover state is always the inverted colours. 3. If the button is on a photo the hover state is the inverted colours.
2
2
3
SECTION 2 - SPECIFIC ELEMENTS
3
30
Buttons & incentives Regular buttons 1. Normal state
Normal State
1
Download button
Large button 3 column width
Hover State Download button
2
Background colour • White • 1px INREV blue strokeline Font • Centre aligned • INREV blue • Open Sans • Bold
Large button 3 column width
2. Hover state Background colour INREV blue
Small button 2 column width
Small button 2 column width
Font • White • Open Sans • Bold Download button font 18px
Social media icons
Social media icons
Large button font 18px Small button font 16px Social media buttons as per button rules
SECTION 2 - SPECIFIC ELEMENTS
31
Buttons & incentives Incentive buttons
1. Date font • Opens Sans • Bold • 18px
Normal State
Hover State
3 column width
3 column width
1
4
2. Title font • Open Sans • Regular • 14px 3. 3px between information element and button element.
4
2 3
1
5
6
4 column width
4 column width
5
2
1
3
SECTION 2 - SPECIFIC ELEMENTS
4. Information element • Background color INREV blue • Text colour white • Divider line in Accent blue
6
5. Button Element normal state • Text colour INREV blue • 1px stroke • INREV blue 6. Button Element hover state • Background colour INREV blue • Text colour white
32
Buttons & incentives Events & training
1. Current tab • INREV blue background colour • White text
Hover State
Normal State
2. Other tab option • White background colour • INREV blue text
2 3
3. Title • Open Sans • 16px • Bold • White • All caps
1
4
4. Date • Open Sans • 13px • Bold • White • All caps 5. General text • Arial • 12px • Regular • White
5
7
SECTION 2 - SPECIFIC ELEMENTS
6
6. Hover state for text links Accent blue 7. Button text • Open Sans • 18px • Bold • Centre aligned
33
Video 1. Video snapshots These are incentives to watch the videos. They usually go on the right side of the page.
INREV has two types of videos: Adobe Connect videos (e.g; webinars), and regular videos using the standard video players (e.g; vimeo)
3
1
2. Pop up video Videos can be played in a pop up (when regular video player). 3. Embedded videos Videos can be embedded on the page (9 column width).
2
SECTION 2 - SPECIFIC ELEMENTS
34
Pop up 1. White pop up box 8 columns wide
8 Columns Width
2. Header text • Open Sans • 26px • Bold 3. Keyline • 3px weight • Accent blue
1
3
4
SECTION 2 - SPECIFIC ELEMENTS
2
5
4. Sub text • Open Sans • 18px • Regular • Dark grey 5. Cross close icon • 1px weight • Light grey
35
Specials zone & footer 1. Specials zone and footer height approx. 250px
Specials zone 2
2. Distance from previous item to specials zone 30px
4 1
5
3
4. Specials zone header font • Open Sans • 24px • Bold • White
Footer
1
6
Specials zone is followed immediately by the footer box with no gap in between
SECTION 2 - SPECIFIC ELEMENTS
3. Distance from specials zone to next item 30px
5. Specials zone regular font • Open Sans • 16px • Bold & regular • White & INREV blue hover state • All text left aligned 6. Footer font • Open Sans • 14 px • Regular • White
36
Amsterdam Office
Brussels Office
WTC Amsterdam Tower B, 6th floor Strawinskylaan 631 1077 XX Amsterdam The Netherlands + 31 (0)20 799 3960
Square de Mee没s 23 1000 Brussels Belgium + 32 (0)22 138 160
The purpose of this online brand guide is to maintain a consistent identity throughout the INREV website and other online brand touch points. If you have any questions regarding any of the documented elements, or the absence of certain elements, please let us know. 漏2014 INREV