B4Restore designguide

Transkript

1 B4Restore designguide Copyright 2019 B4RESTORE

2 Indholdsfortegnelse Forord... 3 Logo... 4 Logovarianter...5 Margin omkring B4Restore logo... 6 B4Restore logoplacering...7 Forkert brug af B4Restore logo... 8 ISO og ISAE Sådan skrives Typografi Standart typografi Typografi til trykte medier Typografi til web Typografi guidelines...12 Guidelines til standart typografi (Calibri) Guidelines til trykte medier (AntennaCond) Guidelines til web (Raleway)...14 Farver...15 Primære farver Sekundære farver Graduering...16 Billedstil Inspiration til billedstil...18 Ikoner...19 Brevskabelon...20 Konvolutter...21 Visitkort signatur PowerPoint Desktop baggrund Stationary

3 Forord På de følgende sider finder du B4Restore s designguide. B4Restore s visuelle identitet understøtter vores sjæl og historie - og skal samtidig udtrykke en troværdighed og professionalisme. Det samlede udtryk skal være vedkommende og meningsfyldt. Formålet med designguiden er at ensrette al kommunikation via den gennemgående røde tråd, der sikrer, vi bliver forstået og genkendt. Her kan du slå op og finde ingredienserne til at skabe en konsistent brugeroplevelse på tværs af B4Restore s medier og materialer. 3

4 Logo 4

5 Logovarianter Logoet må kun anvendes som på de viste varianter. Der er 3 forskellige farve varianter, med eller uden payoff. Primær logo Som udgangspunkt er det altid det primære logo der skal anvendes. Farver: B4Restore Orange + B4Restore Grå (Se farvespecifikationer på side 14) Sekundær logo Det sekundære logo anvendes kun på mørk baggrund, hvor det primære logo ikke kan ses tydeligt. Farver: B4Restore Orange + Hvid (Se farvespecifikationer på side 14) Tertiær logo Det tertiære logo anvendes kun i tilfælde, hvor det primære eller sekundære logo ikke fremstår tydeligt. Det negative logo anvendes på orange baggrund eller ved sort/hvid tryk på mørk baggrund. Farve: Hvid Logo uden payoff Logo uden payoff bruges kun i få tilfælde. Kontakt B4Restore Marketing ift. brugen af denne udgave. 5

6 Margin omkring B4Restore logo For at give logoet optimal synlighed og øge læsevenligheden, er det vigtigt at vejledningen om margin følges. Der er defineret en minimumsmargin til logoet, som sikrer, at det altid fremstår tydeligt og i passende afstand til andre grafiske elementer. 6

7 B4Restore logoplacering Logoet placeres aldrig tættere på kanten end logoets minimumsmargin. Er logoet placeret i øverste venstre hjørne anbefales samme top- og venstremargin. Samme princip er gældende, hvis logoet holder bund eller højre kant. 7

8 Forkert brug af B4Restore logo Logoet må ikke anvendes ved skalering proportionalt, forkert farvebrug eller ukorrekt rotering. Skalering af logo Det er vigtigt, at logoet skaleres proportionalt, så det altid er tydeligt genkendeligt. Logoet vil absolut ikke tage sig godt ud, hvis det ikke bliver skaleret proportionalt. Derfor er dette strengt forbudt. Figur 1 og 2: X Forkert benyttet Harmonier & Kontraster Der må ikke bruges farver, hvor logoet vil falde sammen med baggrunden. Farverne må ikke ligge lige op ad hinanden eller være i forskellige nuancer af samme farve. Figur 3 og 4: X Forkert benyttet Rotering af logo Logoet må kun anvendes horisontalt og vertikalt. Figur 5: X Forkert benyttet 8

9 ISO Når vi viser vores ISO certificering, bruger vi DNV-GL s orginale ISO logo og/eller vores egen udgave afhængig af om det er til print, web osv. Orriginal ISO logo Kontakt B4Restore Marketing ift. brugen af denne udgave. Printvariant (B4Restore udgave) Vi har lavet en printudgave, hvor ISO fremgår tydeligt. Det anvendes på alt B4Restore printmateriale. Webvariant (B4Restore udgave) Denne udgave anvendes på B4Restore website. ISAE 3000 DK Når vi taler om vores ISAE 3000 revisionserklæring, bruger vi vores egen designet udgave: Webvariant (B4Restore udgave) Denne udgave anvendes på B4Restore website. 9

10 Sådan skrives... B4Restore B4Restore skrives altid med et stort B og R (kapitæler). Backup-as-a-Service Backup-as-a-Service skrives altid med bindestreger og med stort B og S (kapitæler). Kan også forkortes til BaaS - men det må ikke stå alene. Storage-as-a-Service Storage-as-a-Service skrives altid med bindestreger og med stort S på første og sidste ord (kapitæler). Kan også forkortes til STaaS - men det må ikke stå alene. 10

11 Typografi Som udgangspunkt skal alle typografier altid være grå (primær farve, se farvepaletten på side 13). Standart typografi Calibri Font-weight: all A abcdefghijklmnopqrstuvwxyzæøå Typografi til trykte medier AntennaCond Font-weight: all A abcdefghijklmnopqrstuvwxyzæøå Calibri Bruges kun ved special ikoner som f.eks og Throw My Hands Up in the Air Font-weight: all A abcdefghijklmnopqrstuvwxyzæøå Typografi til web Raleway (Google Fonts) Font-weight: all A abcdefghijklmnopqrstuvwxyzæøå Throw My Hands Up in the Air Font-weight: all A abcdefghijklmnopqrstuvwxyzæøå 11

12 Typografi guidelines Guidelines til standart typografi (Calibri) Heading Light 48 pt Heading 2 Light 22 pt Heading 3 Regular 18 pt Lorem ipsum Lorem ipsum Lorem ipsum Heading 4 Bold 13 pt Body Regular 11 pt Lorem ipsum Tale solum utroque ius ut. Fugit dolorum et duo, usu no magna quando prodesset, mel vitae elaboraret no. Dicit omnes consetetur vix no, sed ex malorum mediocrem democritum. Ei sed esse minimum luptatum, vero vivendo adversarium vis et. Per ei doctus offendit consequat, mel ex detracto definitionem. Utinam delicata scribentur et per, sea malis equidem menandri no. Per id paulo laboramus repudiandae. Cum in malis iudico noster, ut timeam civibus eum, nominavi euripidis scriptorem et cum. His cibo dissentiunt in, at quis choro eos, eos maiorum qualisque eu. In eos iriure appareat. Novum praesent posidonium eos ne, odio consequuntur et eam. 12

13 Guidelines til trykte medier (AntennaCond) Headline H1 Regular 41 pt Lorem ipsum Headline H2 Regular 26 pt Introdution Regular 12 pt Line height 16 pt Lorem ipsum Ei eos dico oportere, mea an deseruisse eloquentiam repudiandae. Sapientem definitiones et ius, ei quo homero quodsi, feugiat laoreet periculis ius ad. Eam ei latine laoreet impedit. Body Regular 10 pt Line height 14 pt Tale solum utroque ius ut. Fugit dolorum et duo, usu no magna quando prodesset, mel vitae elaboraret no. Dicit omnes consetetur vix no, sed ex malorum mediocrem democritum. Ei sed esse minimum luptatum, vero vivendo adversarium vis et. Per ei doctus offendit consequat, mel ex detracto definitionem. Utinam delicata scribentur et per, sea malis equidem menandri no. Per id paulo laboramus repudiandae. Cum in malis iudico noster, ut timeam civibus eum, nominavi euripidis scriptorem et cum. His cibo dissentiunt in, at quis choro eos, eos maiorum qualisque eu. In eos iriure appareat. Novum praesent posidonium eos ne, odio consequuntur et eam. Headline H3 Regular 16 pt Deseruisse eloquentiam Dicit omnes consetetur vix no, sed ex malorum mediocrem democritum. Ei sed esse minimum luptatum, vero vivendo adversarium vis et. Headline H4 Bold 11 pt Deseruisse eloquentiam Per id paulo laboramus repudiandae. Cum in malis iudico noster, ut timeam civibus eum, nominavi euripidis scriptorem et cum. 13

14 Guidelines til web (Raleway) Headline H1 Font-weight em Line height 46 px Margin-bottom 25 px Headline H2 Font-weight em Margin-bottom 20 px Headline H3 Font-weight em Margin-bottom 18 px Headline H4 Font-weight em Line height 25 px Margin-bottom 12 px Headline H5 Font-weight 600 Uppercase em Margin-bottom 18 px Headline H6 Font-weight 600 Uppercase em Margin-bottom 16 px Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum LOREM IPSUM LOREM IPSUM Body Font-weight em Line height 20 pt Tale solum utroque ius ut. Fugit dolorum et duo, usu no magna quando prodesset, mel vitae elaboraret no. Dicit omnes consetetur vix no, sed ex malorum mediocrem democritum. Ei sed esse minimum luptatum, vero vivendo adversarium vis et. Per ei doctus offendit consequa. 14

15 Farver B4Restores farvepalet giver mulighed for at systematisere og variere vores visuelle udtryk. Den er opdelt i primære og sekundære farver. Både de primære og de sekundære farver kan gradueres. Farverne er defineret som Pantone, CMYK, RGB og HEX. Primære farver CMYK Pantone C Black 7 Pantone C 144 C RGB Pantone U Black 2 Pantone U 144 U HEX f1f1f1 CMYK CMYK RGB RGB HEX HEX ff8700 Sekundære farver CMYK RGB HEX b4b4b5 CMYK RGB HEX d8d7d6 CMYK RGB HEX f5764 CMYK RGB HEX a6d1d3 CMYK RGB HEX e95a1 15

16 Graduering Den primære farvepalet består af tre farver, der kan gradueres imellem 100% og 25% i skridt af 25% procent. Gradueringerne er forbeholdt infobokse og farveflader i f.eks. skemaer. B4Restore Lysegrå 100% B4Restore Grå 100% B4Restore Orange 100% 75% 75% 75% 50% 50% 50% 25% 25% 25% 16

17 Billedstil Vores billedstil er en vigtig del i kommunikationen. De er med til at understøtte vores identitet. Billederne skal udtrykke åbenhed, troværdighed og personlighed. For at gøre billederne så tidløse som muligt og sikre deres anvendelighed på kryds og tværs af B4Restore s mange grafiske flader, skal der tages højde for følgende punkter: Som udgangspunkt skal billedet være enkelt. Med enkelt menes, at billedet ofte skal benyttes sammen med tekst, hvilket kræver at teksten skal fremstå tydeligt på en rolig og dæmpet baggrund. Billederne skal være levende, og gerne hvor man kan se dialog mellem mennesker eller bevægelse i billedet, således at billederne ikke bliver for opstillet. Naturbilleder med dybde mv., se eksempler på næste side. Der må ikke optræde genstande med konkurrerende logoer eller trykte budskaber på. Elementer skal generelt være enkle. Billederne skal være i en høj kvalitet, således der er mulighed for at kunne beskære billedet både horisontalt og vertikalt. 17

18 Inspiration til billedstil Vi har herunder samlet en række billeder, vi mener, er i stil med det udtryk og budskab vi gerne vil sende. Billederne er ment som inspiration til kommende billedemateriale og kampagner. Kontakt B4Restore Marketing for brug af billeder. 18

19 Ikoner Fælles for vores ikoner er at de ikke må stå alene. De skal altid kombineres med en kort tekst og der skal være en rød tråd fra ikon til tekst. Der udvikles løbende nye ikoner, og de viste ikoner er derfor ikke en komplet oversigt over alle ikoner. Ikonerne skal holdes i samme stil og med samme stregtykkelse. 19

20 Brevskabelon Nedenfor vises eksempler på brevskabeloner udskrevet fra Microsoft Word, hvor der er taget hensyn til printermargen. Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com

21 Konvolutter Alternative formater produceres med udgangspunkt i de bestående kuverter og må ikke afvige designmæssigt fra de 2 standardformater. Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com C4kuvert: 229 x 324 mm. Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com M5kuvert: 155 x 220 mm. 21

22 Visitkort Navn Titel +45 XX XX XX XX +45 XX XX XX XX Aahave Parkvej 31, DK-8260 Viby J 22

23 signatur signatur er en særlig opsat afsender signatur som alle medarbejdere i B4Restore skal benytte ved anvendelse af som kommunikationsform. Signaturen er skrevet med 10 pt Calibri Tekst i mailen skrives med 11 pt Calibri B4Restore Banner (Bruges til markedsføring af bl.a. kampagner, seminar, konference m.m.) 23

24 PowerPoint PowerPoint retningslinjer, er de 2 logo farver der er gennemgående i designet (B4Restore Grå + B4Restore Orange). Alle siderne skal have et logo placeret i bunden af højre side. 24

25 Desktop baggrund Ansatte hos B4Restore har samme wallpaper på deres desktop baggrund, således at der er et ensartet udtryk. Baggrundsbilledet findes i følgende størrelser (pixels): 1200x1920, 1366x768, 1600x900, 1600x1200, 1920x1080, 1920x1200, 3440x

26 Stationary Trykning Trykkes altid i CMYK-farver. Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com Navn Titel +45 XX XX XX XX +45 XX XX XX XX xxx@b4restore.com Aahave Parkvej 31, DK-8260 Viby J Aahave Parkvej 31 DK-8260 Viby J Teglholmsgade 1 DK-2450 KBH SV info@b4restore.com