Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden

Transkript

1 Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden

2 INDHOLDSFORTEGNELSE / TREDJEPARTS INTEGRERING DIGITALE DESIGNELEMENTER Grundelementer Logo og navnetræk Farver Typografi Billedestill Basiselementer Designkoncept Sociale medier Eksempler Facebook Twitter Linkedin Youtube Nyhedsbrev Mailchimp Applications Web- og Native apps x

3 LOGO OG NAVNETRÆK / GRUNDELEMENTER Logo og navnetræk Region Hovedstadens identitet er forankret i et logo og navnetræk. Det karakteriske H er ligeledes grundelementet for regionens ligeværdige underidentiteter. Region Hovedstaden er den overordnede administrative instans, som har 2 virksomhedsområder: Hospitaler (herunder Region Hovedstadens Psykiatri) Tværgående virksomheder Alle virksomheder og hospitaler har slægtskab gennem mærket, men er også kendetegnet ved egen identitetsfarve og eget navnetræk. De 4 logoer er organisatorisk på samme niveau, så de vil aldrig optræde sammen. Logoer Region Hovedstaden Hospitaler Psykiatri Virksomheder 3

4 FARVER / GRUNDELEMENTER Farver Region Hovedstaden / primær farve RGB HEX Farvepaletten for Region Hovedstaden består af en primær farve og en række sekundære farver. Den primære farve er identitetsfarven. De sekundære farver bruges til elementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. 0,37,85 # Identitetsbåndet med en gradient (nederst på siden) forstærker den visuelle identitet i hovedelementer. Region Hovedstaden / sekundære farver RGB HEX RGB HEX 0,125,187 #007DBB 128,146,170 #8092AA 240,251,191 #F0FBBF 51,51,51 # ,255,255 #FFFFFF 100,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 240,240,240 #F0F0F0 Region Hovedstaden / gradient RGB HEX RGB HEX 0,37,85 # ,85,125 #29557D 4

5 FARVER / GRUNDELEMENTER Farver Hospital / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primær farver og en række sekundære farver. Hvor den ene primære farve (hospitalernes identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#007DBB) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Hospital / sekundære farver 0,156,232 #009CE8 0,125,187 #007DBB RGB HEX RGB HEX De sekundære farver bruges til elementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. Identitetsbåndet med en gradient (nederst på siden) forstærker den visuelle identitet i hovedelementer. 56,130,127 #38827F 129,204,241 #81CCF1 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Hospital / gradient RGB HEX RGB HEX 0,156,232 #009CE8 118,198,235 #76C6EB 5

6 FARVER / GRUNDELEMENTER Farver Psykiatri / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primær farver og en række sekundære farver. Hvor den ene primære farve (RHP s identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#4F8325) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Psykiatri / sekundære farver 102,191,15 #66BF0F 79,131,37 #4F8325 RGB HEX RGB HEX De sekundære farver bruges til elementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. Identitetsbåndet med en gradient (nederst på siden) forstærker den visuelle identitet i hovedelementer. 220,32,43 #DC202B 178,223,135 #B2DF87 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Psykiatri / gradient RGB HEX RGB HEX 102,191,15 #66BF0F 155,206,125 #9BCE7D 6

7 FARVER / GRUNDELEMENTER Farver Virksomheder / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primære farver og en række sekundære farver. Hvor den ene primære farve (virksomhedernes identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#497D83) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Virksomheder / sekundære farver 128,190,179 #85CCC9 73,125,131 #497D83 RGB HEX RGB HEX De sekundære farver bruges til elementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. Identitetsbåndet med en gradient (nederst på siden) forstærker den visuelle identitet i hovedelementer. 220,32,43 #DC202B 127,186,193 #7FBAC1 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Virksomheder / gradient RGB HEX RGB HEX 128,190,179 #85CCC9 171,213,218 #ABD5DA 7

8 TYPOGRAFI / GRUNDELEMENTER Mari Specialtegnet skrift til brug i navnetrækket og på websitet. Den bruges både i rubrikker, brødtekst og i navigationen. Mari Light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Book ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Heavy ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Poster ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå

9 BILLEDSTIL / GRUNDELEMENTER Billedstil Billeder giver liv, og konsekvent billedstil giver genkendelighed. Overordnet skal fotos afspejle tre værdier: Imødekommenhed, troværdighed og tryghed. Det er de tre værdier, der indrammer vores billedunivers. Billederne skal altid tages i øjenhøjde, så iagtageren er en del af situationen og ikke bliver en afstandstagende tilskuer. Billederne skal ydermere kommunikere indholdet til brugeren. Emotionel, stemning, breather Closeups, focus er centreret De gode historier Imødekommenhed Det er vigtigt for vores patienter og de pårørende at føle, de bliver taget hånd om af venligt personale i en situation, hvor de ellers kan føle sig utrygge. Brug billeder, der viser omsorg, handlekraft og venligt personale. Sørg for at gøre situationerne personlige og undgå hvide kitler, der ikke er sat i sammenhæng med behandlingen af patienter. Faglighed, rent udtryk Closeups, focus, dept of field Travlhed Troværdighed Vi kan ikke narre patienterne og de pårørende til at tro, at virkeligheden er en anden, end den de oplever. Derfor skal vi i billederne være troværdige og turde vise vores hverdag, som den er - uden hverken at gøre den smukkere eller mere grim og rodet, end den er. Undgå romantiserende løfter om helbredelse. Closeups, focus er centreret Faglighed, rent Emotionel, stemning, breather Tryghed Vi skal signalere professionalisme og kyndighed både lægefaglig og sundhedsfagligt - alt sammen for at give følelse af tryghed. Closeups, focus er centreret Forskning, rent udtryk Hverdag 9

10 BASISELEMENTER / GRUNDELEMENTER Basiselementer Følgende elementer bør som minimum bruges til digitale tredjepartsløsninger, så man fra starten oplever en visuel sammenhæng til Region Hovedstadens fælles design Venstrestillet logo i header 2. Identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. Bruges til eksempelvis trompet Typografi der bruges altid Mari i rubrikker, brødtekst og i navigationen. 4. Baggrund er altid hvid eller lys grå alt afhængig af medie. 3 Sant aribus, nit id molor sit officiunt, vitae pe omnihitassin comni occume mi, quas consequ aerovitat debis quam eicteculpa aut ab ilis min rest, sant audae num fugitibus utemquiant, cus invenimusda autatius sed elest esciam sitatur acero etur, sit, voluptae pa si ut endignatiae sit odissitatur? 5. Knap er altid lys grå med sort tekst. Det er tilladt at variere skriftsnittet. Sundhed Forskning Handicap Social med videre Footer/afsender er altid grå med hvid tekst. 4 5 Start Start 6 Kontakt os her: Center for Forskning og Innovation Region Hovedstaden Ole Maaløes Vej København N Frameld dig nyhedsbrev Tilmeld dig nyhedsbrev Videresend mailen 10

11 DESIGNKONCEPT 11

12 SOCIALE MEDIER / DESIGNKONCEPT Sociale medier Designguiden for Region Hovedstadens tredjepartsløsninger tager sit udgangspunkt i webdesignløsningen og dens univers. Der skal være en klar gennemgående genkendelighed mellem alle sociale medieløsninger og apps. Målet med guiden er at skabe overskuelighed og brande Region Hovedstaden på en strategisk forsvarlig måde. Følgende 3 eksempler skal ses som en guide for sociale platforme. Dette område er evigt ekspanderende. Derfor er det nødvendigt at følge denne guide, så afsenderen altid er klar og tydelig. 12

13 FACEBOOK 13

14 FACEBOOK / EKSEMPLER Facebook Designguiden for Region Hovedstadens tredjepartsløsninger tager sit udgangspunkt i webdesignløsningen og dens univers. Der skal være en klar gennemgående genkendelighed mellem alle sociale medieløsninger og apps. Målet med guiden er at skabe overskuelighed og brande Region Hovedstaden på en strategisk forsvarlig måde. Afsenderfokus er på content, så det er derfor vigtigt at skabe rene rammer for fomidlingen. 1. Profilbillede (Logo eller afsender identitet) Region Hovedstaden Politisk organisation 2. Coverbillede 3. Afsendernavn Coverbillede 851 x 315 px Profilbillede 160 x 160 px Logo 100 x 100 px Region Hovedstaden Politisk organisation 14

15 FACEBOOK / EKSEMPLER Facebooksider Følgende er eksempler for hospital, psykiatri og virksomheder Region Hovedstaden Politisk organisation Rigshospitalet Offentlig service Geelsgårdskolen Offentlig service Psykiatri Offentlig service 15

16 FACEBOOK / EKSEMPLER Facebook Afdeling/kampagnesite Designguiden for Region Hovedstadens tredjepartsløsninger tager sit udgangspunkt i webdesignløsningen og dens univers. Der skal være en klar gennemgående genkendelighed mellem alle sociale medieløsninger og apps. Målet med guiden er at skabe overskuelighed og brande Region Hovedstaden på en strategisk forsvarligmåde. Afsenderfokus er på content baseret, så det er derfor vigtigt at skabe rene rammer for fomidlingen. 1 3 Region Hovedstaden Politisk organisation 2 1. Afsenderlogo ( Venstrestillet hvis muligt) 2. Branding/kampagne billede 3. Afsendernavn Coverbillede 851 x 315 px Profilbillede 160 x 160 px Region Hovedstaden Politisk organisation

17 FACEBOOK / EKSEMPLER Facebook nye byggerier Designguiden for Region Hovedstadens tredjepartsløsninger tager sit udgangspunkt i webdesignløsningen og dens univers. Der skal være en klar gennemgående genkendelighed mellem alle sociale medieløsninger og apps. Målet med guiden er at skabe overskuelighed og brande Region Hovedstaden på en strategisk forsvarlig måde. Afsenderfokus er på content, så det er derfor vigtigt at skabe rene rammer for fomidlingen Nyt Hospital Herlev Health/Medical/Pharmaceuticals 4 1. Profilbillede, grøn ramme omkring billede (Logo eller afsender identitet) 2. Coverbillede, grøn bjælke er en del af billedet. 3. Afsendernavn 4. Region hovedstaden logo Coverbillede 851 x 315 px Profilbillede 160 x 160 px Logo 100 x 100 px Nyt Hospital Herlev Health/Medical/Pharmaceuticals 17

18 FACEBOOK / EKSEMPLER Facebook nye byggerier Nyt Hospital Nordsjælland Hospital Nyt Hospital og Ny Psykiatri Bispebjerg Hospital 18

19 TWITTER 19

20 TWITTER / EKSEMPLER Twitter Samme retningslinier gælder for Twitter 1. Profilbillede (Logo eller afsender identitet) 2. Coverbillede 2 1 Coverbillede 1500 x 500 px Profilbillede 400 x 400 px 20

21 TWITTER / EKSEMPLER Twitter Følgende er eksempler for hospital, psykiatri og virksomheder. Rigshospitalet Geelsgårdsskolen Psykiatri 21

22 TWITTER / EKSEMPLER Twitter Samme retningslinier gælder for Twitter 1. Profilbillede (Logo eller afsender identitet) 2. Coverbillede, grøn bjælke er en del af billedet. 2 1 Coverbillede 1500 x 500 px Profilbillede 400 x 400 px 22

23 LINKEDIN 23

24 LINKEDIN / EKSEMPLER Linkedin Samme retningslinier gælder for Linkedin 1 1. Profilbillede (Logo eller afsender identitet) 2. Coverbillede 2 Profilbillede 100 x 60 px Coverbillede 974 x 300 px 24

25 LINKEDIN / EKSEMPLER Linkedin Følgende er eksempler for hospital, psykiatri og virksomheder. Rigshospitalet Geelsgårdsskolen Psykiatri 25

26 LINKEDIN / EKSEMPLER Linkedin Samme retningslinier gælder for Linkedin 1 1. Profilbillede (Logo eller afsender identitet) 2. Coverbillede, grøn bjælke er en del af billedet. 2 Profilbillede 100 x 60 px Coverbillede 974 x 300 px 2 26

27 YOUTUBE 27

28 YOUTUBE / EKSEMPLER Youtube Designguiden for Region Hovedstadens tredjepartsløsninger tager sit udgangspunkt i webdesignløsningen og dens univers. Der skal være en klar gennemgående genkendelighed mellem alle sociale medieløsninger og apps. Målet med guiden er at skabe overskuelighed og brande Region Hovedstaden på en strategisk forsvarlig måde. Afsenderfokus er på content, så det er derfor vigtigt at skabe rene rammer for fomidlingen Profilbillede (Logo eller afsender identitet) 2. Coverbillede 3. Afsendernavn

29 NYHEDSBREV 29

30 NYHEDSBREV / EKSEMPLER Nyhedsbrev Nyhedsbrevet for Region Hovedstaden følger designet for de sociale medier samt for hjemmeside-designet. Nyhedsbrevet består af følgende og bruger altid de gældende primære og sekundære farver. Logo H: 30 px Topbillede 240 x 30 px Logo det er muligt at bruge logo med navnetræk eller blot H et. Overskrift linje 1 evt. 2 linjer. 2. Topbillede Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. 3. Afsenderboksen er altid grå Ducienis doleni rerempo reicipsa dolorunt esciam est, ulluptate maio moluptior andaes et volupta ium asperrum asima volores trumend aernati onsequam sae ne officia as re cum et re dersperitiae cuptam ut que ne consenet molenda errum, consequae nectior aliquatus dis miliqua spient ulparciment. Skillelinje er altid grå som afsenderboks Overskrift linje 1 evt. 2 linjer. Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. Overskrift linje 1 evt. 2 linjer. Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. 3 Kontakt os her: Center for Forskning og Innovation Region Hovedstaden Ole Maaløes Vej København N Frameld dig nyhedsbrev Tilmeld dig nyhedsbrev Videresend mailen 30

31 NYHEDSBREV / EKSEMPLER Nyt fra kommunikation Nyhedsbrev Et eksempel på nyhedsbrev, hvor profilbillede indgår. Nyt fra kommunikation Nyhedsbrev for kommunikatører i Region Hovedstaden Overskrift linje 1 evt. 2 linjer. Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. Ducienis doleni rerempo reicipsa dolorunt esciam est, ulluptate maio moluptior andaes et volupta ium asperrum asima volores trumend aernati onsequam sae ne officia as re cum et re dersperitiae cuptam ut que ne consenet molenda errum, consequae nectior aliquatus dis miliqua spient ulparciment. Profilbillede 30x45 px placeres under hovedhistorie Linda Bang Jessen Konstitueret direktør Center for Kommunikation Overskrift linje 1 evt. 2 linjer. Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. Overskrift linje 1 evt. 2 linjer. Dio. Endiciam que optium autem faceat. Unt paribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur. 31

32 NYHEDSBREV / EKSEMPLER Nyhedsbrev Eksempler på top-bar til nyhedsbreve. NYT Psykiatri Nyt NYHEDSBREV Nyt fra kommunikation Nyt fra kommunikation Nyhedsbrev for kommunikatører i Region Hovedstaden På vej 32

33 APPS 33

34 APPS / EKSEMPLER App-ikoner Eksempler på ikoner til Apps 1. Region Hovedstaden, hospitaler, Psykiatri og virksomheder. 2. Projekter under Region Hovedstaden. Den grå boks til venstre med H, holdes primært i lys grå sekundær farve, den afviger kun hvis ikonet er i samme nuance

35 APPS / EKSEMPLER App 1. Når appen aktiveres, ses velkomstbillede med logo og navnetræk i et sekund, før man kommer ind på den endelige app. Designet af appen følger Region Hovedstadens designmanual. Dvs. fonte, farver, ikoner mv. skal være i overensstemmelse med designmanualen. 1 Region Hovedstaden 35