NNIT DESIGN GUIDE. Online

Transcription

1 NNIT DESIGN GUIDE Online JANUARY 2017

2 CONTENTS GOVERNANCE 3 LOGO 4 COLOURS 6 TYPOGRAPHY 8 HEADER IMAGES 12 IMAGES, ICONS & SYMBOLS 13 FRONTPAGE BANNERS 14 CONTENT PAGE BANNERS 17 COOKIE DISCLAIMER 18 ADVERTISING BANNERS 19 SOCIAL MEDIA 21 NEWSLETTERS 22 NNIT Online Design Guide 2

3 GOVERNANCE NNIT s visual identity is described in the NNIT Design Guide (CVI). This online guide is an extension to the overall design guide and focus on NNIT s online presence websites, social media and advertising. Both the NNIT Design Guide (CVI) and this NNIT Online Design Guide are managed by NNIT Communications. Contact: APB@nnit.com All material designed for external use must be approved by NNIT Communications. Marketing material must be approved by Marketing. This guide covers all online activities. Where nnit.com is specifically mentioned, the same rules apply to nnit.dk, nnit.ch and any sub domains. NNIT Online Design Guide 3

4 LOGO Logo 1 Negative The preferred version. Used on all coloured backgrounds and image backgrounds where the red logo would be obscured or would not match the colour (ie. blue or green). Logo 2 Positive This is used on clear white or very light (25%) backgrounds as well as on very light image backgrounds. Free space Always maintain a free space around the logo. The size of the n is the normal minimum requirement. On smaller web banners, the free space may be reduced if necessary. Placement On websites, the logo is placed in the top left corner, functioning as a Home button. On banners, the logo is placed in the bottom right hand corner. Website logo top left Banner logo bottom right NNIT Online Design Guide 4

5 LOGO NNIT.COM White logo on gradient red background Please note: gradients are used sparingly only on the nnit.com front page banners. All other use of gradients must be approved by NNIT Communications. NNIT Online Design Guide 5

6 COLOURS PRIMARY COLOUR CAN ONLY BE USED IN 100 % TINT SECONDARY COLOURS CAN BE USED IN TINTS OF: 100 %, 80 %, 60 %, 40 %, 20 % TERTIARY COLOURS CAN BE USED IN TINTS OF: 100 %, 80 %, 60 %, 40 %, 20 % # RGB PRIMARY COLOUR NNIT RED # 7DAFAF RGB SECONDARY COLOUR NNIT CLOUD BLUE # 32414C RGB # 0A5550 RGB BACKGROUND COLOUR CAN ONLY BE USED IN 100 % TINT # F6F4EF OFF-WHITE ONLINE ONLY, BACKGROUND COLOUR FOR WEBPARTS ETC. # 505A55 RGB SECONDARY COLOUR NNIT SEA GREY # 414B23 RGB # 787D23 RGB # AA960F RGB # RGB NEUTRAL GREYS ARE ALSO USED FOR NAVIGATION FONT COLOURS, DIVIDERS ETC. NNIT Online Design Guide 6

7 COLOURS NNIT.COM Gradient background The header on nnit.com and related websites has a discrete gradient background with a colour range from #f8f6f1 to #ffffff (white). NNIT Online Design Guide 7

8 TYPOGRAPHY NNIT s typography is designed to be user friendly and modern. Gotham the preferred font both online and offline is used for all graphic elements such as banners. For web banners, all normal versions of Gotham are allowed, but we recommend using Gotham ScreenSmart, as this is optimized for screen use and will often have better readability in small sizes. Verdana may still be used on websites when needed due to technical limitations. FONTS USED FOR GRAPHIC BANNERS ETC. Gotham SSm medium (used for emphasis in body copy, quotes etc. May also be used overall to enhance readability, ie. in banners with a background colour) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Gotham SSm Bold (used for headlines) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Gotham SSm Book Regular (used for regular body copy) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Gotham SSm Book Italic (used only for notes in body copy and graphic figures) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå FONTS USED FOR CSS/HTML Verdana Bold (used for headlines and emphasis) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Verdana Regular (the default font, used for body copy) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Verdana Italic (used only for notes) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå NNIT Online Design Guide 8

9 TYPOGRAPHY NNIT.COM MAIN CONTENT Notation: Font size (px) / leading (px) ie. 15 / 19 Header: Verdana bold 32 / 40 Headline lorem ipsum Body subhead or emphasis: Verdana bold 15 /19 Subhead and emphasis Body: Verdana bold 15 /19 Body copy ut dolobore mincipisl nisciduisat, conse modio commodit velit alit volobore vel ute facilla feuipit adionum nit augiam. Note: Verdana regular Italic 13 / 17 Note lorem ipsum dolor sit amet Bullet list: Verdana regular 15 / 19 Bullet list Level 2 NNIT Online Design Guide 9

10 TYPOGRAPHY NNIT.COM WEBPARTS Notation: Font size (px) / leading (px) ie. 15 / 19 Header: Verdana bold 21 / 24 Headline lorem ipsum Body subhead or emphasis: Verdana bold 14 /18 Subhead and emphasis Body: Verdana bold 15 /19 Body copy ut dolobore mincipisl nisciduisat, conse modio commodit velit alit volobore vel ute facilla feuipit adionum nit augiam. Note: Verdana regular Italic 13 / 17 Note lorem ipsum dolor sit amet Bullet list: Verdana regular 14 / 18 Bullet list Level 2 NNIT Online Design Guide 10

11 TYPOGRAPHY NNIT.COM NAVIGATION Notation: Font size (px) / leading (px) ie. 15 / 19 Primary Level 1: Verdana allcaps bold 16 / 20 Primary Level 2: Verdana bold 14 /18 Secondary top: Verdana bold 14 /18 Language: Verdana 14 /18 Locations and disclaimer: Verdana 13 /17 NNIT Online Design Guide 11

12 HEADER IMAGES NNIT.COM Content pages may include a header image to support either the overall user navigation within a section or the message of the individual page. These images must follow the guidelines in the NNIT Design Guide (page 12) The use of a header image must always be approved by NNIT Communications. NNIT Online Design Guide 12

13 IMAGES, ICONS AND SYMBOLS These all follow the general NNIT Design Guide (CVI). REVENUE BY CUSTOMER GROUP % INTERNATIONALIZATION RATIO Enterprise Public Finance Life sciences (incl. Novo Nordisk Group) NNIT Online Design Guide 13

14 FRONTPAGE BANNERS NNIT.COM Banner sizes Logo tile 282x194 px L1 and L2 577x246 px S1, S2, S3, S4 282x246 px X1 and X2 577x246 px If more banners are needed, another row of L or S can be implemented above the X banners. Note: X1 and X2 have fixed content and are not available for advertising px NNIT Online Design Guide 14

15 FRONTPAGE BANNERS NNIT.COM Margins L Banners internal margins Top 29 px Left 25 px Right 13 px minimum Bottom 18 px S Banners internal margins Top 21 px Left 25 px Right 13 px minimum Bottom 28 px NNIT Online Design Guide 15

16 FRONTPAGE BANNERS NNIT.COM Banner content L1. A brief introduction to NNIT, for new visitors to quickly determine our value proposition. L2. Graphic banner or promotion/information video. When a video is implemented, the banner is split to also accommodate a smaller graphic banner that describes the content (might also link to more information). S1, S2, S3. These advertise current events and publications. They should always contain these elements: Headline. Preferrably phrased as a question or the possibility of an action. Description. More details to help the reader decide. (Description is optional if a longer headline can fully describe the topic). Call-to-action. Should communicate the actual value or action that will follow. Ie. Click to sign up rather than the generic Click here. If a specific browser action follows, it must be described clearly, ie. Click to read PDF S4. Reserved for NNIT employer branding X1. Links directly to the dedicated sign-up site for the NNIT newsletter. X2. Links directly to all of NNIT s social media platforms. Currently, all banners are graphics (PNG, GIF or JPG) with a mouseover state. If you need to develop banners, please contact NNIT Communications for available Photoshop templates. NNIT Online Design Guide 16

17 CONTENT PAGE BANNERS NNIT.COM Graphic banners can be used to advertise related information on a content page. A content page should always contain one or two graphic banners and one or two web-parts to present related content. Specifications Static png, jpg or gif Width: 282 px Height: variable Max file size: 200 kb (less than 80 kb is generally recommended but image quality should not be compromised) Flash is not allowed. GIF animations are not recommended. If you need an exception for a specific purpose, you must contact NNIT Communications for approval. A mouseover state is allowed but always make sure the primary message is included in the default state (as touch browsers do not show the mouseover state). Internal margins Text margins may vary depending on the combination of images and typography, but left text margin must always be 25 px to ensure proper alignment with other page elements. Top 26 px Left 25 px Right 13 px minimum Bottom 13 px minimum If you need to develop banners, please contact NNIT Communications for available Photoshop templates. NNIT Online Design Guide 17

18 COOKIE DISCLAIMER NNIT.COM NNIT presents a standard cookie disclaimer at the bottom of the page, linking to the full legal information page. Cookie message NNIT Online Design Guide 18

19 ADVERTISING BANNERS Advertising banners always apply one CVI colour and/ or one image or graphic symbol. All CVI colours are allowed, though primary and secondary colours are preferred. The look should be as minimal as possible. Where more content is needed, consider using animated GIF or a mouseover state. Do remember that mouseover states are not available on touch-enabled devices. The usual NNIT typography is applied. ALL CAPS and bold may be used more frequently. Italics may be used for call-to-action. The regular versions of Gotham are allowed, but we recommend Gotham ScreenSmart, as this is optimized for screen use and can enhance readability in small text sizes. Simple iconic symbols, negative/white, can be used to enhance awareness of specific campaigns. Full image backgrounds are also allowed see samples on next page. Logo version C (no tagline) is the default for all web banners, placed in bottom right corner. If the context already provides sufficient NNIT identification, the logo may be left out (ie. a banner on nnit.com or an NNIT SoMe page) Logo version B (Life Sciences tagline) may be applied for international campaigns if the banner size accommodates a readable logo size. NNIT Online Design Guide 19

20 ADVERTISING BANNERS Samples including images NNIT Online Design Guide 20

21 SOCIAL MEDIA NNIT s social media platforms are all available from the front page of nnit.com. Facebook On content pages, articles may be shared on various social media platforms. LinkedIn Contact webparts link to the individual LinkedIn page of the employee. NNIT Online Design Guide 21

22 NEWSLETTERS Samples NNIT Online Design Guide 22