JOTUN digital guidelines Digital standards for JOTUN s Corporate Identity
Introduction WHAT IS OUR TARGET? Update JOTUN s corporate identity to include guidelines for digital use, corporate brand. Ensure simple and intuitive framework for JOTUN s users. 2
Target Group INTERNAL All employees involved in creating marketing material or such related material involving corporate identity EXTERNAL Advertising agencies Design agencies Video Production agencies Media agencies Digital Production agencies 3
Digital content BASICS 6 Logo / Digital file format 7 Logo / Clearspace 8 Logo/ Minimum size 10 Digital colours / Primary 11 Digital colours / Secondary 12 Digital Typeface / Corporate 13 Digital Typeface / System font 14 Digital Typeface / Guidelines for coded text 15 Corporate iconography PRACTICAL USE 18 Digital advertising / Standard banner ad sizes 19 Landscape banner ads 25 Portrait banner ads 31 Netboard - rectangle banner ads 37 Call to action (CTA) buttons 39 Social media / Corporate profile image 42 Facebook 51 YouTube 56 LinkedIn 62 Twitter 67 Instagram 69 App identity 73 Video 78 Info Screens 4
Part 1: Basics 5
Logo / Digital file formats The Jotun logo - optimized for web and digital use The Jotun logo is the key component of our identity, and it is present on all our materials and communications. Jotun's digital communication is not an exception. Use the links below to download the Jotun logo optimized for web and digital use. The logo must be used as provided and cannot be altered in any way. Format File size Dimensions Colour mode SVG 4 KB 300x150 px RGB PNG 58 KB 300x150 px RGB PNG 150 KB 600x250 px RGB PNG 450 KB 1200x400 px RGB EPS 300 KB 1200x400 px RGB PDF 300 KB 1200x400 px RGB 6
Logo / Clearspace Ensure logo visibility and impact The Clearspace around the Jotun logo has been established to ensure its visibility and impact on both big and small digital devices. x x The Clearspace should be considered as the minimum safe distance, and more room should be considered if necessary. x x x x x x x x x x x x x PRO TIP We can use this method to define the minimum CSS padding properties for the Jotun logo on a webpage. Clearspace 1 Where to use it On small formats such as SoMe thumbnails, app icons, mobile digital ads, etc. How to calculate it The Clearspace is equal to half the height of the letter N (marked as x), and is thus used as a principle for the minimum distance of the blue area around the logo. 7 Clearspace 2 Where to use it On bigger formats such as desktop digital ads, SoMe cover images, video, etc. How to calculate it The Clearspace is equal to the width of the letter N (marked as x), and is thus used as a principle for the minimum distance of the blue area around the logo.
Logo / Minimum Size Ensure logo legibility and impact Establishing a minimum size ensures that the Jotun Logo is reproduced correctly on all digital devices, without compromising its legibility and impact. To ensure that the Jotun Logo is always clearly legible, it should never be reproduced smaller than 70px in width in any digital communication. For logo with payoff the minimum width size should be no smaller than 200 px. Applications, thumbnails etc On applications, thumbnails etc the logo size will be generated smaller than 70 px based on predefined settings. This happens automatically, but for all logo sizes we can control, the minimum size in width must be no smaller than: 70 px for Jotun logo without payoff 200 px for Jotun logo with payoff 70 px 200 px 8
Jotun digital colours 9
Digital colours / Primary Our Corporate colours: a distinct and crucial part of our identity Our primary colours for web and digital use are listed by their RGB values and their hexadecimal equivalents (HEX codes). This to assure seamless colour transitions between coded elements and graphic elements. No colours other than the ones specified below may be used. RGB: Digital elements HEX: Coded elements Jotun Blue HEX code RGB values Jotun Yellow HEX code #FCAF17 RGB values 252 175 23 Jotun Red HEX code #D52B1E RGB values 213 43 30 10
Digital colours / Secondary Colours that interact harmoniously with our primary corporate colours Our secondary colours are meant to be used primarily as background colours on web and digital material. They can also be used on menu bars, sub menu fields, fact boxes, forms, image captions, etc. These colours are listed by their RGB values and their hexadecimal equivalents (HEX codes). This to assure seamless colour transitions between coded elements and graphic elements. No colours other than the ones specified below may be used as secondary colours. Cool Gray / Dark HEX code #A5ACAF Cool Gray HEX code #D2D5D7 RGB values 165 172 175 RGB values 210 213 215 Cool Gray / Light HEX code #E8EAEB RGB values 232 234 235 White HEX code #FFFFFF RGB values 255 255 255 11
Digital Typeface / Profile typeface Our Corporate typeface as a fundamental part of our visual style Jotun s corporate typeface Frutiger must be used whenever possible to ensure a consistent look across our print and digital communications. Frutiger is intended to be clear and highly legible both on printed and digital material. Frutiger Jotun's Corporate typeface must be used on digital comunications, ads, app identity, videos, info screens etc. Frutiger is a licensed font sold by i.e. MyFonts: http://www.myfonts.com/ Jotun use the following weights: Frutiger 45 Light Frutiger 46 Light Italic Frutiger 55 Roman Frutiger 56 Italic Frutiger 65 Bold Frutiger 66 Bold Italic Frutiger 75 Black Frutiger 76 Black Italic abcdefghijklmnopqrstuvwxyzåæø1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆØ Light Light Italic Roman Roman Italic! Frutiger is not used on Jotun.com and Join. The default standard system font Verdana is used instead. See more on page 13. Bold Black Bold Italic Black Italic 12
Digital Typeface / System font Web safe font available for everybody and cross-platform friendly When our Corporate typeface is not suitable or available, Verdana has been selected as the default standard system font. Use Verdana on: Jotun.com Join PowerPoint presentations Office software Email / email signatures Coded text such as HTML text in websites and intranet etc. NB! Some platforms such as various social media etc have their own system fonts. In this case it s not possible to use either Frutiger or Verdana. Verdana abcdefghijklmnopqrstuvwxyzåæø1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆØ Regular Regular Italic! Are you developing a mobile app? Read about typefaces for mobile operating systems on page 71 Bold Bold Italic 13
Digital Typeface / Guidelines for coded text Colour and font weight as important tools to enhance typographic hierarchy Typographic hierarchy helps the user to scan text easily and find key information. Colours and weights in text create contrast between elements, so our message is displayed with the most impact. Body text: In black and regular. Enhanced text in bold and black. Text over background: In blue and regular. Enhanced text in bold and blue. Hyperlinked text: In blue and bold. Hyperlinked text on mouseover: Light blue, bold and underlined. The Jotun Group is a matrix organisation divided into seven regions responsible for the sale of Decorative Paints and Performance Coatings (Marine, Protective and Powder Coatings). Our four values Loyalty, Care, Respect and Boldness are the solid building blocks of our Penguin Spirit. The Jotun Group is a matrix organisation divided into seven regions responsible for the sale of Decorative Paints and Performance Coatings (Marine, Protective and Powder Coatings). The Jotun Group is a matrix organisation divided into seven regions responsible for the sale of Decorative Paints and Performance Coatings (Marine, Protective and Powder Coatings). Black text Blue text Link Link - Mouseover HEX code #000000 HEX code #053076 HEX code #04388C HEX code #4B77C0 RGB values 0 0 0 RGB values 5 48 118 RGB values 4 56 140 RGB values 75 119 192 14
Corporate Iconography Visual tool to draw users into the content These icons are meant to help the user navigate through the content in a more intuitive way. This icon set must be used as starting point when designing more icons for digital use. This icon set is available for download here: Social media platforms have their own guidelines for their logo usage and they update them often. Always check that you are using the latest version.! Can t find the icon you need? Please contact us at corporate.identity@jotun.com for further information. Follow Jotun on 15
Part 2: Practical use 16
Digital advertising 17
Digital advertising / Standard banner ad sizes Standard Web Banners This table is an overview and starting point for creating Jotun banner ads with correct branding and design. The banners that are mentioned here are international examples of Google Ads standard formats. On the following pages you will see examples of the different formats with correct Jotun branding. Name Dimentions Desktop Mobile Leaderboard 728 x 90 px Billboard 970 x 250 px Skyscraper Half Page Medium rectangle Netboard banner 160 x 600 px 300 x 600 px 300 x 250 px 580 x 400 px 18
Digital advertising / Landscape banner ads Landscape banner ad with Jotun blue background and image Maximum logo width - 1/4 of the full width of the banner Logo width: The Jotun logo (including clearspace) must not be wider than one-fourth of the banner's full width, and not narrower than one-sixth of the full width of the banner. Image width: The image must not be wider than 40% of the banner's full width, and not narrower than 20% of the full width of the banner. Leaderboard 728 x 90 px Minimum image width - 20% of the banner's full width When to use this layout: When the image to use shows several elements or has bright colors that can collide with Jotun s corporate color/elements. When the image to use affects the readability of the message or CTA button. Billboard 970 x 250 px Minimum logo width - 1/6 of the full width of the banner Important! Use the specified clearspace for banner ads (see page 7). Never place a CTA button under the Jotun logo in a landscape banner. The CTA-button must never be higher than the yellow field of the Jotun logo. Read more about CTA-buttons on page 34. Maximum image width - 40% of the banner's full width 19
Digital advertising / Landscape banner ads Examples Landscape banner ad with Jotun blue background and image Leaderboard 728 x 90 px Paint for iconic buildings and beautiful homes READ MORE Billboard 970 x 250 px Paint for iconic buildings and beautiful homes READ MORE! Keep the text simple! The average time a user looks at a banner ad is 2-3 seconds! 20
Digital advertising / Landscape banner ads Landscape banner ad with full width image Maximum logo width - 1/4 of the full width of the banner Logo width: The Jotun logo (including clearspace) must not be wider than one-fourth of the banner's full width, and not narrower than one-sixth of the full width of the banner. Leaderboard 728 x 90 px When to use this layout: When the image has few elements and has colours that harmonize with Jotun s corporate color/elements. When the image does not affect the legibility of the main message or CTA button. Minimum logo width - 1/6 of the full width of the banner Important! Use the specified clearspace for banner ads (see page 7). Never place a CTA button under the Jotun logo in a landscape banner. The CTA-button must never be higher than the yellow field of the Jotun logo. Read more about CTA-buttons on page 34. Billboard 970 x 250 px 21
Digital advertising / Landscape banner ads Examples Landscape banner ad with full width image Leaderboard 728 x 90 px Lorem ipsum dolor sit amet consectetur READ MORE Billboard 970 x 250 px Lorem ipsum dolor sit amet consectetur READ MORE 22
Digital advertising / Landscape banner ads Landscape banner ad without image Logo width: The Jotun logo (including clearspace) must not be wider than one-fourth of the banner's full width, and not narrower than one-sixth of the banner's full width. When to use this layout: When there is not a relevant image to accompany the main message. Leaderboard 728 x 90 px Maximum logo width - 1/4 of the banner's full width Important! Use the specified clearspace for banner ads (see page 7). Never place a CTA button under the Jotun logo in a wide banner. The CTA-button must never be higher than the yellow field of the Jotun logo. Read more about CTA-buttons on page 34. Billboard 970 x 250 px Minimum logo width - 1/6 of the banner's full width 23
Digital advertising / Landscape banner ads Examples Landscape banner ad without image Leaderboard 728 x 90 px Spray Painter/ Lab Technician READ MORE Billboard 970 x 250 px Spray Painter/ Lab Technician READ MORE Workplace Sandefjord Application deadline 22.09.2016 24
Digital advertising / Portrait banner ads Portrait banner ad with Jotun blue background and image Logo width: In a Skyscraper banner ad the width of the Jotun logo (including clearspace) should be the same as the full width of the banner. This applies for other portrait banners with up to 200px in width. Layout 1 Skyscraper 160 x 600 px Defined logo width (including clearspace): Full banner width Halfpage 300 x 600 px Minimum logo width (including clearspace): 1/2 of the full banner width Layout 2 Skyscraper 160 x 600 px Halfpage 300 x 600 px In a halfpage banner ad the width of the Jotun logo (including clearspace) should never be smaller than 50% of the full width of the banner. This applies for other portrait banners with 300 px in width and up. Centered logo: The logo s placement on banner ads is in the center when the logo+clearspace doesn t fill the entire format. The CTA-button should be placed to the right, following the reading direction and create a good balance in the setup. Image height: The image should not be higher than 40% of the banner's full height, and not shorter than 20% of the banner's full height. Layouts: 1. Logo on top, image comes right under the logo s clearspace. 2. Image on top, logo (including clearspace) comes right under. When to use these layouts: When the image to use shows several elements or has bright colors that can collide with Jotun s corporate color/elements. When the image to use affects the readability of the message or CTA button. Minimum image height 20% of the full banner height Maximum image height 40% of the full banner height Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must always be placed at the bottom. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. 25
Digital advertising / Portrait banner ads Examples Portrait banner ad with Jotun blue background and image Layout 1 Layout 2 Skyscraper 160 x 600 px Halfpage 300 x 600 px Skyscraper 160 x 600 px Halfpage 300 x 600 px Paint for iconic buildings and beautiful homes Paint for iconic buildings and beautiful homes Paint for iconic buildings and beautiful homes Paint for iconic buildings and beautiful homes READ MORE READ MORE READ MORE READ MORE 26
Digital advertising / Portrait banner ads Portrait banner ad with full width image Logo width: In a Skyscraper banner ad the width of the Jotun logo (including clearspace) should be the same as the full width of the banner. Skyscraper 160 x 600 px Logo width Full banner width Halfpage 300 x 600 px Maximum logo width Full banner width Halfpage 300 x 600 px Minimum logo width 1/2 of the full banner width In a halfpage banner ad the width of the Jotun logo (including clearspace) can be the same as the full width of the banner but never smaller than 50% of the banner-width. When to use this layout: When the image has few elements and has colours that harmonize with Jotun s corporate color/elements. When the image does not affect the legibility of the main message or CTA button. Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must be always placed as lower as posible. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. 27
Digital advertising / Portrait banner ads Examples Portrait banner ad with full width image Skyscraper 160 x 600 px Halfpage 300 x 600 px Halfpage 300 x 600 px Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur READ MORE READ MORE READ MORE 28
Digital advertising / Portrait banner ads Portrait banner ad without image Logo width: In a Skyscraper banner ad the width of the Jotun logo (including clearspace) should be the same as the full width of the banner. Skyscraper 160 x 600 px Logo width Full banner width Halfpage 300 x 600 px Maximum logo width Full banner width Halfpage 300 x 600 px Minimum logo width 1/2 of the full banner width In a halfpage banner ad the width of the Jotun logo (including clearspace) can be the same as the full width of the banner but never smaller than 50% of the banner-width. When to use this layout: When there is not a relevant image to accompany the main message. Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must be always placed as lower as posible. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. 29
Digital advertising / Portrait banner ads Examples Portrait banner ad without image Skyscraper 160 x 600 px Halfpage 300 x 600 px Spray Painter/ Lab Technician Spray Painter/ Lab Technician READ MORE READ MORE Workplace Sandefjord Application deadline 22.09.2016 Workplace Sandefjord Application deadline 22.09.2016 30
Digital advertising / Netboard - rectangle banner ads Netboard / Medium rectangle banner ad with Jotun blue background and image Logo width - 1/2 of the full width of the banner Minimum logo width - 1/3 of the full width of the banner Logo width: In a Medium rectangle banner the width of the Jotun logo (including clearspace) should be half the full banner width. In a Netboard banner the width of the Jotun logo (including clearspace) should not be narrower than one-third of the full banner width, and it should not be wider than the half of the full banner width. Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Image width: For both formats the image should be 45% of the banner's full width Maximum image width 45% of the banner's full width When to use this layout: When the image to use shows several elements or has bright colors that can collide with Jotun s corporate color/elements. When the image to use affects the readability of the message or CTA button. Maximum logo width - 1/2 of the full width of the banner Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must always be placed at the bottom. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. Maximum image width 45% of the banner's full width 31
Digital advertising / Netboard - rectangle banner ads Example Netboard / Medium rectangle banner ad with Jotun blue background and image Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Paint for iconic buildings and beautiful homes READ MORE Paint for iconic buildings and beautiful homes READ MORE 32
Digital advertising / Netboard - rectangle banner ads Netboard / Medium rectangle banner ad with full width image Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Logo width: In a Medium rectangle banner the width of the Jotun logo (including clearspace) should not be narrower than half the width of the banner, and should not be wider than twothirds of the width of the banner Minimun logo width 1/2 of the full width of the banner Minimum logo width - 1/3 of the full width of the banner In a Netboard banner the width of the Jotun logo (including clearspace) should not be narrower than onethird of the width of the banner, and should not be wider than half the width of the banner. When to use this layout: When the image has few elements and has colours that harmonize with Jotun s corporate color/elements. When the image does not affect the legibility of the main message or CTA button. Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must always be placed at the bottom. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. Maximun logo width 2/3 of the full width of the banner Maximum logo width - 1/2 of the full width of the banner 33
Digital advertising / Netboard - rectangle banner ads Examples Netboard / Medium rectangle banner ad with full width image Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Lorem ipsum dolor sit amet consectetur READ MORE Lorem ipsum dolor sit amet consectetur READ MORE 34
Digital advertising / Netboard - rectangle banner ads Netboard/rectangle banner ad without image Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Logo width: In a Medium rectangle banner the width of the Jotun logo (including clearspace) should not be narrower than half the width of the banner, and should not be wider than twothirds of the width of the banner Minimun logo width 1/2 of the full width of the banner Minimum logo width - 1/3 of the full width of the banner In a Netboard banner the width of the Jotun logo (including clearspace) should not be narrower than onethird of the width of the banner, and should not be wider than half the width of the banner. When to use this layout: When there is not a relevant image to accompany the main message. Important! Use the specified clearspace for banner ads (see page 7). The CTA-button must always be placed at the bottom. The CTA-button must never be higher than the yellow area of the Jotun logo. Read more about CTA-buttons on page 34. Maximun logo width 2/3 of the full width of the banner Maximum logo width - 1/2 of the full width of the banner 35
Digital advertising / Netboard - rectangle banner ads Examples Netboard / Rectangle banner ad without image Medium rectangle 300 x 250 px Netboard banner 580 x 400 px Spray Painter/ Lab Technician READ MORE Spray Painter/ Lab Technician READ MORE 36 Colourchange by click / tap
Call to action (CTA) buttons Quick visual method to draw users into the content In order to measure the ad s effect, we always need a clear CTA button that redirects the user to the next step, or informs about what to do next. CTA buttons should always begin with a verb and should have no less than two words and up to 5 words. The CTA-button must never be higher than the yellow field of the Jotun logo. This ensures optimal size contrast between the Jotun logo and the buttons. It is not allowed to have two text lines on a CTA button. Short and clear text gives better effect. These CTA buttons have different functions for different purposes. See illustration. Design: Font: Frutiger Bold, All Caps White text placed on Jotun-blue background Symbols: White colour on Jotun-blue background White border stroke around the entire frame Mouseover: White fill inside frame and Jotun-blue on text-/symbol CTA from a digital ad to a landing page READ MORE HERE CTA for links inside Jotun website ANTICORROSIVE COATING CTA to links outside Jotun website, i.e. Issuu.com 2017 TRENDS COLLECTION CTA - Download link COLOUR COLLECTION BROCHURE 37
Social Media 38
Social Media Corporate profile image One profile image only two shapes Jotun s corporate profile image on social media contains the logo without payoff centered on blue background. Logo size follows the requirements for small size clearspace (see page 7). Principle The profile image can be round or square depending on the media guidelines. It is downloadable and to be used for all Jotun corporate, brand/segments and sub-brands. Rounded profile image Facebook, YouTube, Instagram, Twitter Squared profile image LinkedIn 39
Social Media Corporate profile image Not allowed usage Do not use the Jotun logo with payoff in profile image Do not add extra text along with the logo Do not use any photo, product, graphics or pattern as background! Do not use any other background colours than Jotun blue! Jotun Protects Property Jotun Protects Property Marine Coatings Marine Coatings 40
Social Media Facebook 41
Facebook: Various Jotun profiles 42
Facebook: Various Jotun profiles mobile 43
Facebook: Jotun Group status Profile image Safe area: This area is visible on all devices (555x312 px) 170x170 px desktop 128x128 px smartphone 32x32 px in feed 44
Facebook: New design principle Desktop Mobile 1 1 Top Banner: 820x312 px Safe area: This area is visible on all devices (555x312 px) 1) It is optional to use Jotun logo in top banner, but when used, it must be placed on the upper right Use logo without payoff Se page 21 for correct logo usage on full images.! Rule for all SoMe: Never write Jotun in capital letters! 45
Facebook: Jotun Group new design principle Desktop Top Banner: 820x312 px Safe area: This area is visible on all devices (555x312 px) 46
Facebook: Campaign image with text Desktop För berömda byggnader. Och ditt hem. För berömda byggnader. Och ditt hem. Logo + text 47
Facebook: Profile image change Same profile photo for all Jotun corporate profiles. The Profile Name tells the difference between them. Existing 48 New
Facebook: Mobile newsfeed Existing New 49
Social Media YouTube 50
YouTube: Jotun Norge status Banner: 2560x423 px 51
YouTube: New design principle Menu colour: Jotun blue JOTUN Group HOME VIDEOS Jotun Group Jotun Group Banner: 2560x423 px Safe area: This area is visible on all devices (1546x423 px) Round profile image on YouTube 52 PLAYLISTS CHANNELS
YouTube: Jotun Group new design principle Menu colour: Jotun blue JOTUN Group HOME VIDEOS Jotun Group Jotun Group FEATURED CHANNELS New Global Colour Card Jotun Decorative Paints New Global Colour Card It et omnis aspis abori quia net laborio. Andenim essit ommolor sed et la ipsanis a quae. Modi as dolentius. Jotun Protective Coatings Jotun Marine Jotun Powder Coatings Jotun Lady Round profile image on YouTube 53 PLAYLISTS CHANNELS
YouTube: Jotun Norge new design principle JOTUN Norge Slik maler og beiser du ute HOME VIDEOS PLAYLISTS Slik maler og beiser du ute Nye vakre farger Jotun Norge Jotun Norge Top Banner: 2560x423 px Safe area: This area is visible on all devices (1546x423 px) 54 CHANNELS Change menu colour to Jotun blue Limit text in Top Banner
Social Media LinkedIn 55
LinkedIn Company page A Company Page helps LinkedIn members learn about Jotun s business, brand, and job opportunities. Any LinkedIn member can follow Jotun s Company Pages. Company page 56
LinkedIn company: Protective Coatings status Company profile Banner full image size: 1536x768 57
LinkedIn company: New design principle Jotun Group Undertitle http://www.jotun.com Jotun Group Undertitle Jotun Group Undertitle The banner view on desktop and mobile is quite different Company profile Banner full image size: 1536x768 58
LinkedIn company: Jotun Group new design principle Jotun Group Undertitle http://www.jotun.com Jotun Group Undertitle Jotun Group Undertitle Company profile Banner full image size: 1536x768 59
LinkedIn company: Protective Coatings new design principle Only one change Profile photo: Jotun logo without payoff Company profile 60
Social Media Twitter 61
Twitter: Jotun Indonesia status Top Banner: 1500x500 px 62
Twitter: New design principle Jotun Group @JotunID Jotun Group @JotunID 2h Us, eriam es sante officiis et eniasim iundandam que peratis quunt facea que doluptur? Aperion sequodi aut Jotun Group @JotunID 63 Cover photo without Jotun logo and text
Twitter: Jotun Group new design principle Jotun Group @JotunID Jotun Group @JotunID 2h Us, eriam es sante officiis et eniasim iundandam que peratis quunt facea que doluptur? Aperion sequodi aut Jotun Group @JotunID 64 Cover photo without Jotun logo and text
Twitter: Jotun Indonesia new design principle Cover photo without Jotun logo and text 65
Social Media Instagram 66
Instagram: Design principle jotungroup Jotun Group lorem ipsum sinctiunt magnimu sdaeculpa quae. Et offic totam, utatibea nuscit, quae idestium velita inctur? Incid qui volorest que laborecte cum aut quo int eos et entemperum Jotun Group Paint The official Instagram of Jotun Group Facebook: Jotun Group Twitter: @JotunID YouTube Channel: www.jotun.com Jotun Group 67
App Identity 68
App identity A template has been created for all Jotun s corporate app icons. The template will ensure one holistic design of all Jotun s applications. Our app icons will appear with a clear design and make a distinct brand in the different application stores. The design is divided into two: Header with Jotun s logo on blue background Area in Jotun blue for white symbol or text The design is fixed and the proportions of the logo, header and freespace cannot be changed. Always use the downloadable template for app icon design. Logo header area Free space Principle Template 69
App icon existing designs Jotun s existing App Icons Jotun Books Yachting idesign Fuel Calculator Snap Shop Facilitator ResistList YesilAdımlar 70
App typefaces Using the right typeface on mobile applications Mobile devices - by default, do not have the same typefaces that are installed on a desktop system such as Windows or Mac OS. While it is fully possible to install additional typefaces onto a device, we recommend to use the default system font for each mobile operating system. These typefaces are responsive and fluid, being able to resize fonts to match any screen, ensuring legibility and good typography performance on most devices. Default system font for Android OS Roboto ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆØ abcdefghijklmnopqrstuvwxyzåæø1234567890 Developed by Google Default system font for ios San Francisco ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆØ abcdefghijklmnopqrstuvwxyzåæø1234567890 Developed by Apple Inc. 71
Video 72
Video external and internal Templates for corporate brand, sub-brands and endorsed brands Screen format 16:9, 1920 x 1080 px Video branding elements for corporate and sub-brands are: Jotun logo top right corner Frutiger and Verdana typeface on name and job-title strap* Yellow name underline Frutiger typeface on subtitle Animated outro: Jotun logo with URL on blue background Video branding elements for endorsed brands are: Jotun logo top right corner Frutiger and Verdana typeface on subtitle* Animated outro: Jotun logo on blue background * Remember that Frutiger is Jotun s main corporate typeface and it must be used whenever possible. Only use Verdana when Frutiger is not suitable or available. Graphic safe area Logo 190px width, at top right corner of the screen. Lower third (supring): Use endorsed brands s own typeface FIRST NAME LAST NAME TITLE Text safe area First Name Last Name Title Subtitle: Frutiger Book centered text and center vertical justification Corporate brand and sub-brands: Title safe areas and grid Same Subtitle: Frutiger Book/Verdana White text on dark transparent bakground 80% black 73 Subtitle: Frutiger Book centered text and center vertical justification Endorsed brands: Title safe areas and grid
Video external and internal Examples Corporate brand and sub-brands Use the grid to ensure accuracy and consistency First Name Last Name Title jotun.com Subtitle: Frutiger Book centered text and center vertical justification Name and job-title strap (Corporate brand) (Lower third) Subtitle (Corporate brand) 74
Video external and internal Examples endorsed brands Use the grid to ensure accuracy and consistency FIRST NAME LAST NAME TITLE Optinal logo at top right corner Subtitle: Frutiger Book centered text and center vertical justification Name and job-title strap (Endorsed brand) Subtitle (Endorsed brand) 75
Video external and internal Outro: logo size and proportions principle jotun.com jotun.com Outro screen with URL Outro logo proportions 2/4 (50%) Centered position 76
Info screens 77
Info screens Templates for info screens 16:9 1080 x 1920 px First page: Logo on blue background Subsequent pages: Black text on white backgrounds or white text on blue background. Use Frutiger typeface when possible, Verdana can be used if Frutiger is not suitable or available. Logo at the top right of info screens. 16:9 Info screen template Front page Last page: Logo with payoff Powerpoint presentations on screens: On internal info screens it is okey to use Jotun powerpoint presentations Subsequent pages white Subsequent pages blue Last page Title text Title text Template presentation 16:9 Slide white Lasting 10 seconds Transition 1 second Template presentation 16:9 Slide blue Lasting 10 seconds Transition 1 second 78
Info screens Templates for info screens 16:9 standing 1920 x 1080 px Same principle as for landscape screen format 16:9 Info screen template Front page Subsequent pages white Subsequent pages white Last page Title text Template presentation 16:9 Slide white Lasting 10 seconds Transition 1 second Title text Template presentation 16:9 Slide blue Lasting 10 seconds Transition 1 second 79
JOTUN digital guidelines / October 30th, 2018