1. No category

Digital designmanual / tredjepartsløsninger/version 1.0
/ Region Hovedstaden
INDHOLDSFORTEGNELSE / TREDJEPARTS INTEGRERING
DIGITALE DESIGNELEMENTER
Grundelementer
Logo og navnetræk
Farver
Typografi
Billedestill
Basiselementer
3
4
8
9
10
x
Designkoncept
Sociale medier
11
Eksempler
Facebook
Twitter
Linkedin
Youtube
12
16
19
22
Nyhedsbrev
Mailchimp
25
Applications
Web- og Native apps
29
Digital designmanual / Tredjepartsløsninger
2
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
Digital designmanual / Tredjepartsløsninger
3
FARVER / GRUNDELEMENTER
Farver
Region Hovedstaden / primær farve
RGB
HEX
0,37,85
#002555
RGB
HEX
RGB
HEX
0,125,187
#007DBB
100,108,111
#646C6f
128,146,170
#8092AA
101,101,101
#656565
240,251,191
#F0FBBF
184,184,184
#B8B8B8
51,51,51
#333333
213,213,213
#D5D5D5
255,255,255
#FFFFFF
240,240,240
#F0F0F0
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 hovedelementer.
Region Hovedstaden / sekundære farver
Region Hovedstaden / gradient
Digital designmanual / Tredjepartsløsninger
RGB
HEX
RGB
HEX
0,37,85
#002555
41,85,125
#29557D
4
FARVER / GRUNDELEMENTER
Farver
Hospital / primære farver
RGB
HEX
RGB
HEX
0,156,232
#009CE8
0,125,187
#007DBB
RGB
HEX
RGB
HEX
56,130,127
#38827F
100,108,111
#646C6f
129,204,241
#81CCF1
101,101,101
#656565
240,251,191
#F0FBBF
184,184,184
#B8B8B8
51,51,51
#333333
213,213,213
#D5D5D5
255,255,255
#FFFFFF
240,240,240
#F0F0F0
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
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.
Hospital / gradient
Digital designmanual / Tredjepartsløsninger
RGB
HEX
RGB
HEX
0,156,232
#009CE8
118,198,235
#76C6EB
5
FARVER / GRUNDELEMENTER
Farver
Psykiatri / primære farver
RGB
HEX
RGB
HEX
102,191,15
#66BF0F
79,131,37
#4F8325
RGB
HEX
RGB
HEX
220,32,43
#DC202B
100,108,111
#646C6f
178,223,135
#B2DF87
101,101,101
#656565
240,251,191
#F0FBBF
184,184,184
#B8B8B8
51,51,51
#333333
213,213,213
#D5D5D5
255,255,255
#FFFFFF
240,240,240
#F0F0F0
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
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.
Psykiatri / gradient
Digital designmanual / Tredjepartsløsninger
RGB
HEX
RGB
HEX
102,191,15
#66BF0F
155,206,125
#9BCE7D
6
FARVER / GRUNDELEMENTER
Farver
Virksomheder / primære farver
RGB
HEX
RGB
HEX
128,190,179
#85CCC9
73,125,131
#497D83
RGB
HEX
RGB
HEX
220,32,43
#DC202B
100,108,111
#646C6f
127,186,193
#7FBAC1
101,101,101
#656565
240,251,191
#F0FBBF
184,184,184
#B8B8B8
51,51,51
#333333
213,213,213
#D5D5D5
255,255,255
#FFFFFF
240,240,240
#F0F0F0
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
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.
Virksomheder / gradient
Digital designmanual / Tredjepartsløsninger
RGB
HEX
RGB
HEX
128,190,179
#85CCC9
171,213,218
#ABD5DA
7
TYPOGRAFI / GRUNDELEMENTER
Mari
Mari Light
Specialtegnet skrift til brug i navnetrækket og på
websitet. Den bruges både i rubrikker, brødtekst
og i navigationen.
Mari Book
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
Mari Regular
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
Mari Bold
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
Mari Heavy
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
Mari Poster
Digital designmanual / Tredjepartsløsninger
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
abcdefghijklmnopqrstuvxyzæøå
1234567890
8
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
Faglighed, rent udtryk
Closeups, focus, dept of field
Travlhed
Closeups, focus er centreret
Faglighed, rent
Emotionel, stemning, breather
Closeups, focus er centreret
Forskning, rent udtryk
Hverdag
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.
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.
Tryghed
Vi skal signalere professionalisme og kyndighed
både lægefaglig og sundhedsfagligt - alt sammen
for at give følelse af tryghed.
Digital designmanual / Tredjepartsløsninger
9
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.
1
1.Venstrestillet logo i header
2.Identitetsbånd med en gradient, som tager
udgangspunkt i den primære farve.
Bruges til eksempelvis trompet.
2
3. 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?
Sundhed Forskning Handicap Social
5. Knap er altid lys grå med sort tekst. Det er
tilladt at variere skriftsnittet.
med videre...
6. Footer/afsender er altid grå med hvid tekst.
4
5
Start
Start
Kontakt os her:
6
Center for Forskning og Innovation
Region Hovedstaden
Ole Maaløes Vej 3
2200 København N

Frameld dig nyhedsbrev | Tilmeld dig nyhedsbrev
Digital designmanual / Tredjepartsløsninger
Videresend mailen
10
DESIGNKONCEPT
Digital designmanual / Tredjepartsløsninger
11
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.
Digital designmanual / Tredjepartsløsninger
12
FACEBOOK
Digital designmanual / Tredjepartsløsninger
13
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.
2
1
3
Region Hovedstaden
Politisk organisation
1. Profilbillede (Logo eller afsender identitet)
2. Coverbillede
3. Afsendernavn
Coverbillede
851 x 315 px
Profilbillede
160 x 160 px
Logo
100 x 100 px
Digital designmanual / Tredjepartsløsninger
Region Hovedstaden
Politisk organisation
14
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
Digital designmanual / Tredjepartsløsninger
15
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.
2
1
3
Region Hovedstaden
Politisk organisation
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
TWITTER
Digital designmanual / Tredjepartsløsninger
17
TWITTER / EKSEMPLER
Twitter
Samme retningslinier gælder for Twitter
1. Profilbillede (Logo eller afsender identitet)
2
2. Coverbillede
1
Coverbillede
1500 x 500 px
Profilbillede
400 x 400 px
Digital designmanual / Tredjepartsløsninger
18
TWITTER / EKSEMPLER
Twitter
Følgende er eksempler for hospital, psykiatri og
virksomheder.
Rigshospitalet
Geelsgårdsskolen
Psykiatri
Digital designmanual / Tredjepartsløsninger
19
LINKEDIN
Digital designmanual / Tredjepartsløsninger
20
LINKEDIN / EKSEMPLER
Linkedin
1
Samme retningslinier gælder for Linkedin
1. Profilbillede (Logo eller afsender identitet)
2
2. Coverbillede
Profilbillede
100 x 60 px
Coverbillede
974 x 300 px
Digital designmanual / Tredjepartsløsninger
21
LINKEDIN / EKSEMPLER
Linkedin
Følgende er eksempler for hospital, psykiatri og
virksomheder.
Rigshospitalet
Geelsgårdsskolen
Psykiatri
Digital designmanual / Tredjepartsløsninger
22
YOUTUBE
Digital designmanual / Tredjepartsløsninger
23
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.
1. Profilbillede (Logo eller afsender identitet)
2. Coverbillede
3. Afsendernavn
1
3
2
NYHEDSBREV
Digital designmanual / Tredjepartsløsninger
25
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
2
1
Topbillede
240 x 30 px
Overskrift linje 1
evt. 2 linjer.
1.Logo – det er muligt at bruge logo med navnetræk eller blot H’et.
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
3
Overskrift linje 1
evt. 2 linjer.
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.
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.
Kontakt os her:
Center for Forskning og Innovation
Region Hovedstaden
Ole Maaløes Vej 3
2200 København N

Frameld dig nyhedsbrev | Tilmeld dig nyhedsbrev
Digital designmanual / Tredjepartsløsninger
Videresend mailen
26
NYHEDSBREV / EKSEMPLER
Nyt fra kommunikation
Nyhedsbrev
Nyt fra kommunikation
Et eksempel på nyhedsbrev, hvor
profilbillede indgår.
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
Digital designmanual / Tredjepartsløsninger
Linda Bang Jessen
Konstitueret direktør
Center for Kommunikation
Overskrift linje 1
evt. 2 linjer.
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.
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.
27
NYHEDSBREV / EKSEMPLER
Nyhedsbrev
Eksempler på top-bar til nyhedsbreve.
NYT
Psykiatri Nyt
NYHEDSBREV
Nyt fra kommunikation
På vej
Nyt fra kommunikation
Nyhedsbrev for kommunikatører i Region Hovedstaden
Digital designmanual / Tredjepartsløsninger
28
APPS
Digital designmanual / Tredjepartsløsninger
29
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
Digital designmanual / Tredjepartsløsninger
30
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
Digital designmanual / Tredjepartsløsninger
31