Digital designmanual / Tredjepartsløsninger (version 3) P2 Design Manual

Transkript

1 Digital designmanual / Tredjepartsløsninger (version 3) P2 Design Manual 1

2 INDHOLDSFORTEGNELSE / TREDEJEPARTS INTEGRERING TREDJEPARTSINTEGRERING Grundelementer Logo og navnetræk Farver Typografi Billedstill Designkoncept Social medier Elementer Eksempler Facebook Twitter Nyhedsbrev Mailchimp Applications Web - og Native Apps

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 Logo uden navnetræk Enkeltstående logo A 3

4 FARVER / GRUNDELEMENTER Farver Region Hovedstaden / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af primære farver og sekundære farver Ydermere kan de primære farver fra de 4 identiteter anvendes i kampagneelementer i de respektive kategorier. Primære og sekundære farver kan bruges i fire gradueringer; 100%, 50%, 25% og 10%. 0,37,85 # ,146,170 #8092AA 191,201,212 #BFC9D4 230,233,238 #E6E9EE 51,51,51 # ,75,75 #4B4B4B 100,100,100 # ,216,216 #d8d8d8 235,235,235 #EBEBEB 0,0,0 # ,250,250 #FAFAFA 255,255,255 #FFFFFF Region Hovedstaden/ sekundære farver 0,125,201 #007DC9 167,237,255 #80BEE4 211,246,255 #BFDEF1 237,251,255 #E5F2FA 85,15,90 #550F5A 170,135,170 #AA87AA 210,195,215 #D2C3D7 230,240,230 #F0E6F0 226,0,74 #E2004A 241,128,160 #F180A0 248,191,210 #F8BFD2 252,230,237 #FCE6ED 4

5 FARVER / GRUNDELEMENTER Hospital Hospital / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af primære farver og sekundære farver Ydermere kan de primære farver fra de 4 identiteter anvendes i kampagneelementer i de respektive kategorier. Primære og sekundære farver kan bruges i fire gradueringer; 100%, 50%, 25% og 10%. 0,156, ,205,243 #80CDF3 191,230,249 #BFE6F9 229,245,253 #E5F5FD Hospital / sekundære farver 133,204,201 #85CCC9 196,240,0 #C4F , 229, 228 #C2E5E4 226, 247, 128 #E2F , 242, 242 #E0F2F2 240, 251, 191 #F0FBBF 243, 250, 250 #F3FAFA 249, 253, 229 #F9FDE5 5

6 FARVER / GRUNDELEMENTER Psykiatrien Psykiatrien / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af primære farver og sekundære farver Ydermere kan de primære farver fra de 4 identiteter anvendes i kampagneelementer i de respektive kategorier. Primære og sekundære farver kan bruges i fire gradueringer; 100%, 50%, 25% og 10%. 102,191,15 #66BF0F 178, 223, 135 #B2DF87 217, 239, 195 #D9EFC3 240, 249, 231 #F0F9E7 Psykiatrien / sekundære farver 255,102,0 #FF ,31,66 #421F42 255, 178, 128 #FFB , 143, 161 #A18FA1 255, 217, 191 #FFD9BF 208, 199, 208 #D0C7D0 255, 240, 229 #FFF0E5 236, 233, 236 #ECE9EC 6

7 FARVER / GRUNDELEMENTER Virksomheder Virksomheder / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af primære farver og sekundære farver Ydermere kan de primære farver fra de 4 identiteter anvendes i kampagneelementer i de respektive kategorier. Primære og sekundære farver kan bruges i fire gradueringer; 100%, 50%, 25% og 10%. 128, 190, 179 #85CCC9 191, 222, 217 #BFDED9 223, 239, 236 #DFEFEC 242, 248, 247 #F2F8F Virksomheder / sekundære farver 255,0,43 FF002B 0,159,0 #009E00 255, 128, 149 #FF , 207, 128 #80CF80 255, 191, 202 #FFBFCA 191, 231, 191 #BFE7BF 255, 229, 234 #FFE5EA 229, 245, 229 #E5F5E5 7

8 TYPOGRAFI/ GRUNDELEMENTER Mari heavy Specialtegnet skrift til brug i navnetrækket. For at gøre designet mest muligt dynamisk bruges skriften dog kun i navnetrækket. Mari Bold Mari Reg ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Arial Standardskrift der bruges i hovedmenu, overskrifter, manchettekster og henvisninger. Arial Bold Arial Reg ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Verdana Standardskrift der bruges i undermenu, henvisninger og brødtekst. Verdana Bold Verdana Reg ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Georgia Standardskrift der bruges i overskrifter og i infografik. Georgia Bold Georgia Reg ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 8

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 DESIGNKONCEPT 10

11 SOCIALE MEDIER / DESIGNKONCEPT Sociale medier Designguiden for Region Hovedstadens tredejepartslø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 2 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. 11

12 ELEMENTER / DESIGNKONCEPT Elementer til brug ved tredjepartløsning Følgende er en look and feel-guide til de tredjepartsløsninger, vi ikke har mulighed for at customisere så meget. Derfor er der 5 punkter, der så vidt mulig skal følges Løsning skal indeholde følgende: 1. Grå header Grågradient RGB: 235,235,235 HEX: ebebeb 2. Venstrestillet logo i header (hvis muligt) 3. Bjælke med sekundære og primære farver 4. Content body, hvid 4 12

13 ELEMENTER / DESIGNKONCEPT Elementer til brug ved tredjepartløsning Følgende er alle elementer, der skal eller kan indgå i tredjepartløsninger. Det er vigtigt, at man forsøger at tilstræbe et homogent udtryk på samtlige platforme, der lægger sig op af hjemmesideuniverset. 1. Grå baggrund RGB: 245,245,245 HEX: f5f5f Venstrestillet logo i header (hvis muligt) 3. Bjælke med sekundære og primære farver 4 1) Farven til højre skal være en af følgende: - Logofarve - En af de primære gråtoner 2) Farven til venstre skal være en af følgende: - Logofarve - sekundær farve - Den dominerende farve fra Universet 4. Logolabels 5 8 Grågradient Border 1 px grå RGB: 235,235,235 HEX: ebebeb 5. Content body, hvid 6. 5.element 60 % opacity hvid 6 7. Footer, primær og sekundær farve Footer divideren på 6 px, skal have den samme farve som punkt 3. 1) Footer baggrundsfarve skal have den samme farve som punk 3. 2) 7 8. Dividers 13

14 FACEBOOK 14

15 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 Profilbillede (Logo eller afsender identitet) 2. Coverbillede Boks gradient Sekundær farve 3 4. Afsendernavn 5. 5.element/bjælke (transparent) Farven til højre skal være en af følgende: - En af de primære farver - En hvid 2) Farven til venstre skal være en af følgende: - Logofarve - sekundær farve - Den dominerende farve fra Universet Coverbillede 851 x 351 px Profilbillede 180 x 180 px Logo 100 x 100 px 15

16 FACEBOOK / EKSEMPLER Facebooksider Følgender er guide for hospital, psykiatri og virksomheder. 16

17 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 Afsenderlogo ( Venstrestillet hvis muligt) 2 2. Branding/kampagne billede Boks gradient Sekundær farve Farven til venstre skal være en af følgende: - Logofarve - sekundærfarve - Den dominerende farve fra Universet 4. Afsendernavn 5. 5.element/bjælke (transparent) Farven til højre skal være en af følgende: - En af de primære farver - En hvid Coverbillede 851 x 351 px 2) Farven til venstre skal være en af følgende: - Logofarve - sekundærfarve - Den dominerende farve fra Universet Profilbillede 180 x 180 px 5 17

18 TWITTER 18

19 TWITTER / EKSEMPLER Twitter Samme retningslinier gælder for Twitter 1280 x 800 boksen vil være synligt på 85 % 1920 x 1080 vil være synligt på alle standardskærme i 2012 BGG i 1280 x 800 boksen vil være synligt på 85 % 1920 x 1080 vil være synligt på alle standard skærme i 2012 Content 1280x x

20 TWITTER / EKSEMPLER Twitter Samme retningslinier gælder for Twitter 1. kampagnefelt, samme principper som på facebook 1 2. Baggrunde, samme som på hjemmesiderne 2 20

21 TWITTER / EKSEMPLER Twitter Samme retningslinier gælder for Twitter 1. Twitter cover, samme principper som på facebook 2. Baggrunde, samme som på hjemmesiderne 21

22 NYHEDSBREV 22

23 MAILCHIMP / NYHEDSBREVE 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ælende primære og sekundære farver. Header farve Grå gradient RGB:240,240,240 HEX: F0F0F0 RGB: 252,252,252 HEX:F8F8F px 600 px Variabel 10 px 1. Afsenderlogo 2. Bjælke med sekundær og primær farve 1) Farven til højre skal være en af følgende: - Logofarve - En af de primære gråtoner 3 2) Farven til venstre skal være en af følgende: - Logofarve - sekundærfarve - Den dominerende farve fra Universet 3. Content 4. Footer / Sekundær og primær farve Footer divideren på 6 px, skal have den samme farve som punkt 3. 1) Footer baggrundsfarve skal have den samme farve som punk 3. 2) 6 px 4 23

24 MAILCHIMP / NYHEDSBREVE Eksempler på nyhedsbrev Fullscreen 600 px wide Mobile 24

25 APPS 25

26 WEB OG NATIVE APPS / APPLICATIONS Web apps og Native apps Inden en decideret udvikling går igang, er det vigtigt at forholde sig til, hvilke app der er den bedste, hurtigste og eventuelle billigste løsning for det givende projekt. Her en hurtig forklaring på web - og native apps. Hvad er en native app? Native apps er bygget til en bestemt platform. De er fx beregnet til iphone og ipad, android og kan købes i Apple Store og Google play. Hvad er en web app? Web apps er standardbaserede løsninger bygget i fx HTML5 og passer derfor til stort set enhver platform, herunder mobile. App en åbnes via den mobile enheds browser (på iphone er Safari default) og behøver således ikke at blive downloaded og installeret først. Kontakt KKO Webenheden i Koncern Kommunikation har erfaring med udvikling af apps og kan give rådgivning, hvis din afdeling eller virksomhed ønsker at udvikle en app. Tag kontakt til Thilde Vesterby thilde.vesterby@regionh.dk. Koncern Kommunikation søger at have overblik over, hvilke apps, der udvikles i regionen, så vi vil meget gerne høre om din app med henblik på vidensdeling og kongruens mellem regionens forskellige mobil-tiltag. 26

27 UNIVERS / APPLICATIONS Apps Ved ios-baserede produkter bruges de gængse GUI-standarder. Det samme er gældende for androidplatforme. 27

28 UNIVERS / APPLICATIONS App-univers Eksempel på app 28

29 UNIVERS / APPLICATIONS App-univers Eksempel på kampagne-app, strukturen og de grå farver går igen, dog er det muligt at customize farver og elementer, så længe de minder om det grundlæggende design. 29

30 UNIVERS / APPLICATIONS App-univers på Tablet 30

31 NATIVE APP UNIVERS / APPLICATIONS App-univers på Tablet 31