Digital designmanual / tredjepartsløsninger/version 1.0

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

2Digital designmanual / Tredjepartsløsninger

GrundelementerLogo og navnetræk Farver Typografi BilledestillBasiselementer

DesignkonceptSociale medier

Eksempler FacebookTwitterLinkedinYoutube

Nyhedsbrev Mailchimp

Applications Web- og Native apps

3

4

8

9

10

x

11

12

16

19

22

25

29

INDHOLDSFORTEGNELSE / TREDJEPARTS INTEGRERING

DIGITALE DESIGNELEMENTER


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 under-identiteter.

Region Hovedstaden er den overordnede adminis-trative 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


FARVER / GRUNDELEMENTER

Farver

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.

Identitetsbåndet med en gradient (nederst på siden) forstærker den visuelle identitet i hovedele-menter.

Region Hovedstaden / primær farve

Region Hovedstaden / sekundære farver

100,108,111 #646C6f

101,101,101 #656565

184,184,184 #B8B8B8

213,213,213 #D5D5D5

240,240,240 #F0F0F0

0,37,85 #002555

0,37,85 #002555

41,85,125 #29557D

Region Hovedstaden / gradient

RGB HEX

RGB HEX

RGB HEX RGB HEX

RGB HEX

0,125,187 #007DBB

128,146,170 #8092AA

240,251,191 #F0FBBF

51,51,51 #333333

255,255,255 #FFFFFF



Farver

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 iden-titetsfarve) 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.

De sekundære farver bruges til elementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.


Hospital / primære farver

Hospital / sekundære farver

100,108,111 #646C6f

101,101,101 #656565

184,184,184 #B8B8B8

213,213,213 #D5D5D5

240,240,240 #F0F0F0

Hospital / gradient

RGB HEX

RGB HEX

RGB HEX RGB HEX

RGB HEX

RGB HEX

56,130,127 #38827F

129,204,241 #81CCF1

240,251,191 #F0FBBF

51,51,51 #333333

255,255,255 #FFFFFF

0,156,232 #009CE8

118,198,235 #76C6EB

RGB HEX RGB HEX

0,156,232 #009CE8

0,125,187 #007DBB



Farver

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 identitets-farve) 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 / primære farver

Psykiatri / sekundære farver

100,108,111 #646C6f

101,101,101 #656565

184,184,184 #B8B8B8

213,213,213 #D5D5D5

240,240,240 #F0F0F0

Psykiatri / gradient

RGB HEX

RGB HEX

RGB HEX RGB HEX

RGB HEX

RGB HEX

220,32,43 #DC202B

178,223,135 #B2DF87

240,251,191 #F0FBBF

51,51,51 #333333

255,255,255 #FFFFFF

102,191,15 #66BF0F

155,206,125 #9BCE7D

RGB HEX RGB HEX

102,191,15 #66BF0F

79,131,37 #4F8325



Farver

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 / primære farver

Virksomheder / sekundære farver

100,108,111 #646C6f

101,101,101 #656565

184,184,184 #B8B8B8

213,213,213 #D5D5D5

240,240,240 #F0F0F0

Virksomheder / gradient

RGB HEX

RGB HEX

RGB HEX RGB HEX

RGB HEX

RGB HEX

220,32,43 #DC202B

127,186,193 #7FBAC1

240,251,191 #F0FBBF

51,51,51 #333333

255,255,255 #FFFFFF

128,190,179 #85CCC9

171,213,218 #ABD5DA

RGB HEX RGB HEX

128,190,179 #85CCC9

73,125,131 #497D83


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

Mari Book

Mari Regular

Mari Bold

Mari Heavy

Mari Poster

ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890







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.

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 sammen-hæng med behandlingen af patienter.

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ærdigeog 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.

Tryghed

Vi skal signalere professionalisme og kyndighed både lægefaglig og sundhedsfagligt - alt sammen for at give følelse af tryghed.

Emotionel, stemning, breather Closeups, focus er centreret

Closeups, focus, dept of field

Closeups, focus er centreret

Closeups, focus er centreret

Faglighed, rent udtryk

Faglighed, rent

Forskning, rent udtryk Hverdag

De gode historier

Travlhed

Emotionel, stemning, breather


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 Hoved-stadens fælles design.

1. Venstrestillet logo i header

2. Identitetsbånd med en gradient, som tager udgangspunkt i den primære farve.

Bruges til eksempelvis trompet.

3. Typografi – der bruges altid Mari i rubrikker, brød-tekst og i navigationen.

4. Baggrund er altid hvid eller lys grå alt afhængig af medie.

5. Knap er altid lys grå med sort tekst. Det er tilladt at variere skriftsnittet.

6. Footer/afsender er altid grå med hvid tekst.

2

3

1

4

5

6

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?

Sundhed Forskning Handicap Social med videre...

Kontakt os her:

Center for Forskning og InnovationRegion HovedstadenOle Maaløes Vej 32200 København N

Videresend mailen

Frameld dig nyhedsbrev | Tilmeld dig nyhedsbrev

Start Start


DESIGNKONCEPT


SOCIALE MEDIER / DESIGNKONCEPT

Sociale medier

Designguiden for Region Hovedstadens tredje- partsløsninger tager sit udgangspunkt i webdesign-lø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 Hoved-staden 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.


FACEBOOK


FACEBOOK / EKSEMPLER

Facebook

Designguiden for Region Hovedstadens tred-jepartsløsninger tager sit udgangspunkt i web-designlø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 RegionHovedstaden på en strategisk forsvarlig måde.Afsenderfokus er på content, så det er derfor vig-tigt at skabe rene rammer for fomidlingen.

1. Profilbillede (Logo eller afsender identitet)

2. Coverbillede

3. Afsendernavn

Region HovedstadenPolitisk organisation


1

2

3

Coverbillede851 x 315 px

Profilbillede160 x 160 px

Logo100 x 100 px



Facebooksider

Følgende er eksempler for hospital, psykiatri og virksomheder


RigshospitaletOffentlig service

PsykiatriOffentlig service

GeelsgårdskolenOffentlig service


Facebook Afdeling/kampagnesite

Designguiden for Region Hovedstadens tredje-partsløsninger tager sit udgangspunkt i web-designlø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 RegionHovedstaden på en strategisk forsvarligmåde.Afsenderfokus er på content baseret, så det erderfor vigtigt at skabe rene rammer for fomidlingen.

1. Afsenderlogo ( Venstrestillet hvis muligt)

2. Branding/kampagne billede

3. Afsendernavn





1

2

3




TWITTER


TWITTER / EKSEMPLER

Twitter

Samme retningslinier gælder for Twitter


2. Coverbillede

1

2




TWITTER / EKSEMPLER

Twitter

Følgende er eksempler for hospital, psykiatri og virksomheder.

Psykiatri

Geelsgårdsskolen

Rigshospitalet


LINKEDIN


LINKEDIN / EKSEMPLER

Linkedin

Samme retningslinier gælder for Linkedin


2. Coverbillede 2

1




LINKEDIN / EKSEMPLER

Linkedin

Følgende er eksempler for hospital, psykiatri og virksomheder.

Rigshospitalet

Geelsgårdsskolen

Psykiatri


YOUTUBE

YOUTUBE / EKSEMPLER

Youtube

Designguiden for Region Hovedstadens tredje-partsløsninger tager sit udgangspunkt i webdesign-lø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 RegionHovedstaden på en strategisk forsvarlig måde.Afsenderfokus er på content, så det er derfor vigtigt at skabe rene rammer for fomidlingen.


2. Coverbillede

3. Afsendernavn

1 2

3


NYHEDSBREV


NYHEDSBREV / EKSEMPLER

Nyhedsbrev

Nyhedsbrevet for Region Hovedstaden følger designet for de sociale medier samt for hjemme-side-designet. Nyhedsbrevet består af følgende og bruger altid de gældende primære og sekundære farver.

1. Logo – det er muligt at bruge logo med navne-træk eller blot H’et.

2. Topbillede

3. Afsenderboksen er altid grå

LogoH: 30 px

Topbillede240 x 30 px

Skillelinje – er altid grå som afsenderboks

Overskrift linje 1evt. 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.

Dio. Endiciam que optium autem faceat. Unt pa-ribus andamusania inum aut re preperuntur, sa di aut et rem fuga. Us volorehendit aut dolluptatia porrorepro consequibus eatur.


21

3Kontakt os her:

Center for Forskning og InnovationRegion HovedstadenOle Maaløes Vej 32200 København N

Videresend mailen

Frameld dig nyhedsbrev | Tilmeld dig nyhedsbrev






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.



Nyt fra kommunikation


Nyhedsbrev for kommunikatører i Region Hovedstaden

Linda Bang JessenKonstitueret direktørCenter for Kommunikation

Profilbillede 30x45 px placeres under hovedhistorie

Nyhedsbrev

Et eksempel på nyhedsbrev, hvor profilbillede indgår.


NYHEDSBREV

På vej


Psykiatri Nyt



Nyhedsbrev for kommunikatører i Region Hovedstaden

NYT

Nyhedsbrev

Eksempler på top-bar til nyhedsbreve.


APPS


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.

1

2


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

Documents

Digital designmanual / tredjepartsløsninger/version 1.0