Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
11
Digital designmanual / version 1.2 / Region Hovedstaden
P2 Design Manual
HJEMMESIDE
DesignkonceptUniversResponsivitet
GrundelementerLogo og navnetræk Farver Typografi Billedestill
Grundskabeloner DesignSideeksemplerGridsystem
Indhold Tekstniveauer SpacingHeaderSearch barPiktogrammerCookiesFokushistorierBilledformaterInfografik
3
4
5
6
10
11
12
13
19
24
30
40
41
42
43
44
45
51
INTRANET
DesignkonceptUnivers Responsivitet
GrundelementerLogo og navnetræk Farver Typografi
Grundskabeloner SideeksemplerGridsystem
Indhold Tekstniveauer SpacingHeader ElementerBilledformaterInfografik
53
54
55
56
57
58
63
65
67
68
69
70
74
NOTIFIKATIONER
Grundskabeloner Sideeksempler
Indhold Billedformater
78
79
Designkoncept MinisitesGrafik og brandingKampagnesite
Grid
Sidetyper
Responsivitet
81
82
83
84
85
86
INDHOLDSFORTEGNELSE
MINISITES, KAMPAGNESITES OG CO-BRANDING
3
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Univers
Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængelig og enkelt stiliseret univers.
Ved hjælp af et lyst venligt farvespektre, der i sit udtryk er minimalt, kan brugeren koncentrere sig om indholdet og navigere hurtigt rundt i et over-skueligt univers.
Designguiden har til formål at give professionelle et arbejdsredskab til udvikling og implementering af diverse tiltag.
UNIVERS / DESIGNKONCEPT
4
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESRESPONSIVITET / DESIGNKONCEPT
Responsivitet
Webdesignet er responsivt, så det tilpasser sig alle skærmstørrelser og devices.
Dermed har websitets elementer ikke en fast størrelse, men tilpasses efter skærmopløsningen.
WEBSITE INTRANET NOTIFIKATIONER MINISITES
5
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 admini-strative 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 OG NAVNETRÆK / GRUNDELEMENTER
6
HJEMMESIDE INTRANET NOTIFIKATIONER
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 webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.
På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve.
FARVER / GRUNDELEMENTER
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
7
HJEMMESIDE INTRANET NOTIFIKATIONER
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 webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.
På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve.
FARVER / GRUNDELEMENTER
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
8
HJEMMESIDE INTRANET NOTIFIKATIONER
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 identitetsfar-ve) 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.
De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.
På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve.
FARVER / GRUNDELEMENTER
Psykiatri / primære farver
Psykiatri / sekundære farver
100,108,111 #646C6f
101,101,101 #656565
184,184,184 #B8B8B8
213,213,213
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
9
HJEMMESIDE INTRANET NOTIFIKATIONER
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.
De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.
På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve.
FARVER / GRUNDELEMENTER
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
10
HJEMMESIDE INTRANET NOTIFIKATIONER
Mari
Specialtegnet skrift til brug i navnetrækket og på websitet. Den bruges både i rubrikker, brødtekst og i navigationen.
TYPOGRAFI/ GRUNDELEMENTER
Mari Light
Mari Book
Mari Regular
Mari Bold
Mari Heavy
Mari Poster
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
11
HJEMMESIDE INTRANET NOTIFIKATIONER
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 ople-ver. 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.
BILLEDSTIL / GRUNDELEMENTER
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
12
HJEMMESIDE INTRANET NOTIFIKATIONER
Design
Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængeligt – og enkelt stiliseret univers.
Ved hjælp af et lyst venligt farvespektre der i sit udtryk er minimalt kan brugeren koncentrere sig om indholdet og navigere hurtigt rundt i et overskueligt univers.
DESIGN / GRUNDSKABELONER
13
HJEMMESIDE INTRANET NOTIFIKATIONER
Sideeksempler
A. Forside
B. Supersektion
SIDEEKSEMPLER / GRUNDSKABELONER
A B
14
HJEMMESIDE INTRANET NOTIFIKATIONER
Sideeksempler
A. Afdelingssektion
B. Afdelingssupersektion
SIDEEKSEMPLER / GRUNDSKABELONER
A B
WEBSITE INTRANET NOTIFIKATIONER MINISITES
15
Sideeksempler
A. Kategoriside
B. Indholdsside
SIDEEKSEMPLER / GRUNDSKABELONER
A B
WEBSITE INTRANET NOTIFIKATIONER MINISITES
16
Sideeksempler
A. Politisk kalender
B. Politisk kalender – Indholdsside
SIDEEKSEMPLER / GRUNDSKABELONER
A B
WEBSITE INTRANET NOTIFIKATIONER MINISITES
17
Sideeksempler
A. Selvbetjening – kategoriside
B. Selvbetjening – startside
SIDEEKSEMPLER / GRUNDSKABELONER
A B
WEBSITE INTRANET NOTIFIKATIONER MINISITES
18
Sideeksempler
A. Selvbetjening – klageformular
SIDEEKSEMPLER / GRUNDSKABELONER
A
19
HJEMMESIDE INTRANET NOTIFIKATIONER
Grid
Der anvendes et 12-spaltet responsivt grid med en maksbredde på 1170 px.
Kolonners bredde er varianble, så griddet passer til forskellige skærmsørrelser og devices.
Breakpoints:
940 px 768 px320 px
GRIDSYSTEM / GRUNDSKABELONER
20
HJEMMESIDE INTRANET NOTIFIKATIONER
1170 px 940 px
Grids
A. 1170 px
B. 940 px
A B
GRIDSYSTEM / GRUNDSKABELONER
70 px 60 px30 px 20 px
21
HJEMMESIDE INTRANET NOTIFIKATIONER
724 px 300 px
Grids
A. 724 px (Tablet)
B. 300 px (Mobile)
A B
GRIDSYSTEM / GRUNDSKABELONER
42 px 60 px20 px 20 px
22
HJEMMESIDE INTRANET NOTIFIKATIONER
Skabeloner
A. Forside – Region Hovedstaden
B. Forside – Hospital
BA
GRIDSYSTEM / GRUNDSKABELONER
23
HJEMMESIDE INTRANET NOTIFIKATIONERGRIDSYSTEM / GRUNDSKABELONER
Indholdsskabeloner
• Sektion • Afdelingssektion (mavebælte)• Supersektion • Afdelingssupersektion
• Indholdside • Kategoriside • Listevisning (Presse & nyt) • Politisk kalender – indholdsside
24
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstniveauer Region Hovedstaden
TEKSTNIVEAUER/ INDHOLD
1
4
5
7
8
10
12
13
Tagline
Topnavigation
Topbannertekst
Identitetsbånd
Topfokushistorier – rubrik
Indgange – rubrik
Indgange – ”se alt om”-links
Afsnitsrubrikker
Servicenavigation
Button
Topfokushistorier – tid/dato
Arrow links
For Fagfolk – Button2
6
9
11
3
25
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstniveauer Region Hovedstaden
TEKSTNIVEAUER/ INDHOLD
14
16
17
18
19
21
Nyheder – rubrik
Arrangementer – item
Footer – indgange – rubrik
Footer – indgange – links
Footer – indgange – ”se alt om”-links
Footer – adresse
Nyheder – manchet
Footer – navigation (button)
15
20
26
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstniveauer Region Hovedstaden
TEKSTNIVEAUER/ INDHOLD
22
24
25
27
28
29
31
32
Body – rubrik h1
Body – billedtekst
Body – rubrik h3
Body – citat
Body – byline – link
Body – rubrik h2
Input felt 2
Body – doc link
Body – manchet
Body – brødtekst
Input felt 1
23
26
30
27
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstniveauer Region Hovedstaden
TEKSTNIVEAUER/ INDHOLD
33
34
35
36
37
39
Left navigation – rubrik
Left navigation – link
Bread crumb
Alfabetisk oversigt – bogstav
Organitorisk oversigt – rubrik
Afdelingsoversigt – liste – rubrik
Afdelingsoversigt – emne
Afdelingsoversigt – liste – manchet
38
40
TYPE FONT SIZE LEADING SPACING STYLE COLOR HOVER ACTIVE
1. Tagline Mari Light 17 px 21 px 50 9a9a9a
2. Servicenavigation Mari Regular 13 px 50 656565 / 007dbb 8092aa
3. For fagfolk - button Mari Regular 13 px 20 px 50 uppercase ffffff ffffff
4. Topnavigation Mari Bold 17 px 20 px 20 333333 8092aa 8092aa
5. Topbannertekst Mari Light 54 px 61 px 50 000000
6. Button Mari Light 16 px 20 px 20 333333 ffffff
7. Identitetsbånd Mari Book 20 px 30 px 50 ffffff
8. Topfokushistorier – rubrik Mari Bold 17 px 22 px 20 002555 8092aa
9. Topfokushistorier – tid/dato Mari Heavy 12 px 20 uppercase 333333
10. Indgange – rubrik Mari Bold 22 px 40 002555 8092aa
11. Arrow links Mari Regular 18 px 40 arrow 333333 8092aa
12. Indgange – ”se alt om”-links Mari Poster 13 px 40 007dbb 8092aa
13. Afsnitsrubrikker Mari Light 34 px 20 333333
14. Nyheder – rubrik Mari Bold 22 px 25 px 40 002555 8092aa
15. Nyheder – manchet Mari Regular 15 px 32 px 40 333333
16. Arrangementer – item Mari Regular 18 px 32 px 40 333333 / 007dbb 8092aa
17. Footer – indgange – rubrik Mari Heavy 18 px 40 underline 4b4b4b 9e9e9e
18. Footer – indgange – links Mari Regular 15 px 40 4b4b4b 9e9e9e
19. Footer – indgange – ”se alt om”-links Mari Bold 15 px 40 4b4b4b 9e9e9e
20. Footer – navigation (buttons) Mari Bold 12 px 40 333333 ffffff
21. Footer – adresse Mari Regular 12 px 80 ffffff
22. Body – rubrik h1 Mari Light 50 px 53 px 30 333333
23. Body – manchet Mari Book 22 px 29 px 40 646c6f
24. Body – billedtekst Mari Bold 13 px 16 px 40 646c6f
25. Body – rubrik h3 Mari Bold 25 px 28 px 20 333333
26. Body – brødtekst Mari Book 16 px 23 px 40 333333
27. Body – citat Mari Book 28 px 33 px 40 002555
28. Body – byline – link Mari Regular 14 px 21 px 20 007dbb 8092aa
29. Body – rubrik h2 Mari Light 34 px 34 px 38 px 333333
30. Input felt 1 Mari Book 19 px 40 757575
31. Input felt 2 Mari Book 19 px 24 px 40 333333
32. Body – doc link Mari Bold 16 px 20 007dbb 8092aa
33. Left navigation – rubrik Mari Heavy 18 px 40 uppercase 002555 8092aa
34. Left navigation – link Mari Regular 16 px 45 px 40 333333 8092aa Mari Heavy / 333333
35. Bread crumb (navigation) Mari Regular 14 px 40 969696 969696 4d4d4d
28
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstformatering
TEKSTNIVEAUER/ INDHOLD
TYPE FONT SIZE LEADING SPACING STYLE COLOR HOVER ACTIVE
36. Alfabetisk oversigt – bogstav Mary Heavy 54 px 333333
37. Organitorisk oversigt – rubrik Mary Heavy 36 px 20 333333
38. Afdelingsoversigt – emne Mary Bold 25 px 20 646c6f
39. Afdelingsoversigt – liste – rubrik Mary Bold 20 px 20 007dbb 8092aa
40. Afdelingsoversigt – liste – manchet Mari Book 16 px 23 40 333333
29
HJEMMESIDE INTRANET NOTIFIKATIONER
Tekstformatering
TEKSTNIVEAUER/ INDHOLD
30
HJEMMESIDE INTRANET NOTIFIKATIONER
Forside – Region Hovedstaden
SPACING/ INDHOLD
25 px
406 px
74 px
70 px
90 px
25 px
25 px
30 px
40 px
20 px
20 px
74 px
40 px
31
HJEMMESIDE INTRANET NOTIFIKATIONER
Forside – Region Hovedstaden
SPACING/ INDHOLD
25 px
30 px
20 px
20 px
18 px
40 px
70 px
70 px
70 px
70 px
70 px
70 px
70 px
40 px
32
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
Forside – Region Hovedstaden
SPACING/ INDHOLD
40 px
40 px
40 px
20 px
20 px
30 px
30 px
40 px
40 px
70 px
80 px
33
HJEMMESIDE INTRANET NOTIFIKATIONER
Footer
SPACING/ INDHOLD
60 px
20 px
16 px
20 px20 px
66 px
35 px
44 px
70 px
34
HJEMMESIDE INTRANET NOTIFIKATIONER
Forside – Hospitalerne
SPACING/ INDHOLD
70 px
70 px
40 px
10 px
20 px
20 px
35
HJEMMESIDE INTRANET NOTIFIKATIONER
Indholdsside
SPACING/ INDHOLD
30 px
20 px
60 px
60 px
30 px
40 px
10 px
30 px
62 px
40 px
98 px
34 px
34 px
36
HJEMMESIDE INTRANET NOTIFIKATIONER
Indholdsside
SPACING/ INDHOLD
20 px
20 px
40 px
40 px
40 px
30 px
30 px
60 px
40 px
37
HJEMMESIDE INTRANET NOTIFIKATIONER
Supersektion
SPACING/ INDHOLD
60 px
60 px
25 px
30 px
30 px
20 px
60 px
38
HJEMMESIDE INTRANET NOTIFIKATIONER
Supersektion
SPACING/ INDHOLD
20 px
20 px
18 px
30 px
10 px
80 px
20 px
20 px
20 px
20 px
20 px
30 px
39
HJEMMESIDE INTRANET NOTIFIKATIONER
Afdelingssupersektion
SPACING/ INDHOLD
36 px
36 px
30 px
30 px
90 px
30 px
40 px
50 px
70 px
60 px
30 px
60 px
40
HJEMMESIDE INTRANET NOTIFIKATIONERHEADER/ INDHOLD
Desktop
Den primære navigation for Region Hovedstadenswebunivers ligger i toppen af hver side.
Topsystemet er delt i servicenavigation, globalnavigation og breadcrumb.
Tablet/mobil
På mindre devices samles menupunkter, som der ikke er plads til, i en dropdown.
Drop Shadow: Blend Mode: Multiply , Opacity: 15% ,
Angle: 120 , Distance: 2px , Spread: 0px , Size: 2px
41
HJEMMESIDE INTRANET NOTIFIKATIONER
Global søgning
Ved klik på søgeikonet i topnavigationen foldes søgefeltet ud og alt indhold under søgefeltet skubbes 95 px ned
SEARCHBAR/ INDHOLD
Hover color: RGB:224,224,224HEX:e0e0e0
Tekst i søgefeltet: Font: Mari BookSize: 16 pxSpacing: 50Color: 333333 Hover color:
RGB:224,224,224HEX:e0e0e0
42
HJEMMESIDE INTRANET NOTIFIKATIONERPIKTOGRAMMER/ INDHOLD & FARVER
Piktogrammer
Piktogrammer til web findes i fire forskellige stør-relser.
Piktogrammerne tager afsæt i farvepaletten for Region Hovedstaden. De må kun benyttes til det navngivne formål, og den fulde pakke kan ses på regionens designmanual under ”piktogrammer”.
Eksempler på store 180x180px - 360x360px.– 180x180 hvis piktogrammet er bærende på en side + til print fra web– 360x360 hvis der er brug for et ekstra stort formatPiktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder.
FarverPiktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder.
Eksempler på små 63x63px – til top task-felterne i den store brandingboks på forsiderne + til brødtekstfelter, højrespalte og nedarvning.Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Disse findes yderligere i hvid på gennemsigtig baggrund.
Eksempler på mini 32x32px – til forside-linklisterne på regionh.dk. Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Disse findes yderligere i hvid på gennemsigtig baggrund.
43
HJEMMESIDE INTRANET NOTIFIKATIONERCOOKIES / INDHOLD
Cookies
Cookies-båndet optræder i bunden af browservinduet, første gang man besøger siden.
44
HJEMMESIDE INTRANET NOTIFIKATIONERFOKUSHISTORIER/ INDHOLD
Versioneringer af fokushistorier
A. 2 fokushistorier af 6 kolonner.
B. 1 fokushistorier af 8 kolonner og 2 fokushistorier af 4 kolonner.
C. 4 fokushistorier af 6 kolonner.
A
B
C
1 5 93 7 112 6 104 8 12
45
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Forside topbanner og minisite topbanner• 1920 x 520 px
Forside tophistorier• 270 x 160 px
Afdelingssektion topbillede: • 1920 x 477 px
Forside topbanner1920 x 520 px
Forside tophistorier270 x 160 px
46
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Forside fokushistorier
• 1/2: 710 x 404 px• 2/3: 944 x 628 px• 1/3: 710 x 353 px
Forside fokushistorier 1/2710 x 404 px
Forside fokushistorier 2/3944 x 628 px
Forside fokushistorier 1/3710 x 353 px
47
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Afdelingssektion topbillede
• 1920 x 477 px
Supersektion indgange
• 370 x 185 px
Afdelingssektion topbillede1920 x 477
Supersektion indgange370 x 185 px
48
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Kategoriside topbillede
• 870 x 300 px
Kategoriside indgange
• 270 x 160 px
Kategoriside topbillede870 x 300 px
Kategoriside indgange270 x 160 px
49
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Indholdsside topbillede
• 870 x 300 px
Indholdsside brødtekstbillede
• 518 x 242 px Indholdsside brødtekstbillede - bred
• 668 x 312 px
Billede i fokusboks – højrekolonne
• 268 x 120 px
Billede i fokusboks – bund
• 368 x 164 px
Billede i fokusboks – bund368 x 164 px
Billede i fokusboks – højrekolonne268 x 120 px
Indholdsside topbillede870 x 300 px
Indholdsside brødtekstbillede518 x 242 px
Indholdsside brødtekstbillede - bred668 x 312 px
50
HJEMMESIDE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Presse & nyt – fokushistorier
• 420 x 210 px
Politisk indholdsside – brødtekstbillede
• 570 x 300 px
Presse & nyt – fukushistorier420 x 210 px
Politisk indholdsside – brødtekstbillede570 x 300 px
51
HJEMMESIDE INTRANET NOTIFIKATIONER
Infografik
BILLEDFORMATER/ INFOGRAFIK
Region Hovedstaden Eksempler
Psykiatri
Hospital
Virksomheder
Ipsum
Dolor
Infografikerne på hjemmesiden tager afsæt i den overorden designlinje, farvepalette, gradient og font, som er angivet til henholdsvis Region Hoved-standen, Hospital, Psykiatri og Virksomheder.
Infografikken skal være enkelt og let at afkode.
Jan
Jan
Feb
Feb
Mar
Mar
April
April
Maj
Maj
Jun
Jun
Jul
Jul
Aug
Aug
Sep
Sep
2525
Driftsmålstyring
Afdelinger
Presse
HandicaptilbudMiljø
Forskning
Administrative arbejde
50 75 100
52
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
INTRANET
53
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Univers
Designet for Region Hovedstadens intranet har til formål at give målgruppen et brugervenligt, tilgængeligt og enkelt stiliseret univers. Universet skal signalere en rar arbejdsplads og adskille sig fra hjemmesiden ved hjælp af en anden farvepalette samt toplogin, der giver adgang til personificeret indhold.
Intranettet gør brug af det samme responsive gridprincip som hjemmesiden.
UNIVERS/ DESIGNKONCEPT
54
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESUNIVERS/ DESIGNKONCEPT
Responsivitet
Intranettet er responsivt, så det tilpasser sig alle skærmstørrelser og devices.
Dermed har websitets elementer ikke en fast størrelse, men tilpasses efter skærmopløsningen.
55
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
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 admini-strative 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 OG NAVNETRÆK / GRUNDELEMENTER
56
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESFARVER / GRUNDELEMENTER
Farver
Farvepaletten for Region Hovedstadens intranet består af to primære farver og en række sekundære farver.
Hvor den ene primære farve bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#779200) er lidt mørkere end den anden. Dette skyldes at den skal leve op til WCAG farvevalideringskrav.
De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states.
Intranet / primære farver
Intranet / sekundære farver
RGB HEX
RGB HEX
RGB HEX
RGB HEX
225,247,126 #E1F77E
119,146,0 #779200
Intranet / gradient
RGB HEX RGB HEX
226,247,128 #E2F780
240,251,191 #F0FBBF
RGB HEX RGB HEX
240,251,191 #F0FBBF
220,32,43 #DC202B
100,108,111 646C6F
34,34,34 #222222
51,51,51 #333333
255,255,255 #FFFFFF
67,67,67 #434343
101,101,101 #656565
130,130,130 #828282
184,184,184 #B8B8B8
204,204,204 #CCCCCC
240,240,240 #F0F0F0
57
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Mari
Specialtegnet skrift til brug i navnetrækket og på websitet og intranet. Den bruges både i rubrikker, brødtekst og i navigationen.
TYPOGRAFI/ GRUNDELEMENTER
Mari Light
Mari Book
Mari Regular
Mari Bold
Mari Heavy
Mari Poster
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅabcdefghijklmnopqrstuvxyzæøå1234567890
58
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Forside
B. Supersektion
A B
59
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Afdelingssektion
B. Sektion
A B
60
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Indholdsside
A
61
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Mødekalender
A. Mødekalender
B. Mødekalender-indholdsside
SIDEEKSEMPLER / GRUNDSKABELONER
A B
62
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Sideeksempler
A. Selvbetjening – startside
B. Selvbetjening – kategoriside
SIDEEKSEMPLER / GRUNDSKABELONER
A B
63
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Grid
Der anvendes et 12-spaltet responsivt grid med en maksbredde på 1170 px.
Kolonners bredde er varianble, så griddet passer til forskellige skærmsørrelser og devices.
Intranet griddet følger samme mål og principper som hjemmesiden. Se side 20
Breakpoints:
940 px 768 px320 px
GRIDSYSTEM / GRUNDSKABELONER
64
1170 px 940 px
Grids
A. 1170 px
B. 940 px
For tablet 724 px og Mobil 300 px, se eksempler fra Hjemmesiden på side 21
A B
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
70 px 60 px30 px 20 px
65
HJEMMESIDE INTRANET NOTIFIKATIONER
Skabeloner
A. Forside – Intranet
A
GRIDSYSTEM / GRUNDSKABELONER
66
HJEMMESIDE INTRANET NOTIFIKATIONERGRIDSYSTEM / GRUNDSKABELONER
Indholdsskabeloner
• Sektion • Afdelingssektion (mavebælte)• Supersektion • Afdelingssupersektion
• Indholdside • Kategoriside • Listevisning (Presse & nyt) • Politisk kalender – indholdsside
67
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Tekstniveauer Intranet
TEKSTNIVEAUER/ INDHOLD
1
2 8
9
10
3
4
Site-identifikation
Forside fokus (lokalt)
Nyheder
Indhold fra”mit intranet”, min væg
5
6
7
Toolbar, indgang til ”mit intranet”
Alarm info - kanp
Service navigation
Forside fokus (regionalt)
It-drift og support meddelser
Diverse valgfri højrekolonneindhold
68
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Tekstniveauer Intranet
TEKSTNIVEAUER/ INDHOLD
11
12
13
15
5
14
Særlig zone til indhold fra ”mit intranet
Arrangement item
Footer indgang - rubrik
Footer indgang - mere om links
Footer - adresse
Footer indgang - links
16 Footer - navigation (knap)
69
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Forside - Intranet
SPACING/ FORSIDE
40 px
40 px
25 px
25 px
30 px
30 px
30 px
30 px
30 px
30 px
30 px
30 px
30 px
70
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESHEADER/ INDHOLD
Desktop
Den primære navigation for Region Hovedstadenswebunivers ligger i toppen af hver side.
Topsystemet er delt i servicenavigation, globalnavigation og breadcrumb.
Tablet/mobil
På mindre devices samles menupunkter, som der ikke er plads til, i en dropdown.
Drop Shadow: Blend Mode: Multiply , Opacity: 15% ,
Angle: 120 , Distance: 2px , Spread: 0px , Size: 2px
71
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESELEMENTER/ INDHOLD
Elementer
Intranettet gør brug af samtlige bokse, elemen-ter, ikoner og billedformater, der bliver brugt på hjemmeside. Dog er der nogle unikke elementer og bokse, der kun bruges på intranettet.
A. Toolbar/login
B. Alarm knap
C. Identitetsbånd
D. Page tools – antal kommentarer, følg person, del siden.
E. Kommentarfelt – findes på indholdssider
A
B
C
D E
72
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Afdelingssektion topbillede og supersektion • 1920 x 477 px
Forside fokushistorie – stor
• 568 x 278 px
Forside fokushistorie – lille
• 368 x 163 px
Forside fokushistorie – stor568 x 278 px
Afdelingssektion topbillede og supersektion1920 x 477
Forside fokushistorie – lille368 x 163 px
73
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Kategoriside topbillede
• 870 x 300 px
Kategoriside indgange
• 270 x 160 px
Kategoriside topbillede870 x 300 px
Kategoriside indgange270 x 160 px
Hvilerum
Motionsrum
74
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Indholdsside topbillede
• 870 x 300 px
Indholdsside brødtekstbillede
• 518 x 242 px Indholdsside brødtekstbillede - bred
• 668 x 312 px
Billede i fokusboks – bund
• 368 x 164 px
Billede i fokusboks – højrekolonne
• 268 x 120 px
Billede i fokusboks – bund368 x 164 px
Billede i fokusboks – højrekolonne268 x 120 px
Indholdsside topbillede870 x 300 px
Indholdsside brødtekstbillede518 x 242 px
Indholdsside brødtekstbillede - bred668 x 312 px
75
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Mødekalenderindholdsside – brødtekstbillede
• 570 x 300 px
Forside nyhedslister
• 180 x 108 px
Mødekalenderindholdsside – brødtekstbillede570 x 300 px
Forside nyhedslister180 x 108 px
76
HJEMMESIDE INTRANET NOTIFIKATIONER
Infografik
INFOGRAFIK / INDHOLD
Intranet
Eksempler
Infografiken på intranettet tager afsæt i den over-ordnede intranet designlinje, farvepalette, gradient og typografi.
Infografikken skal være enkelt og let at afkode.
2021
2020
2019
2018
2017
2016
2015
2014
2013
LOREM IPSUM
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
LOREM IPSUM Illa eario doluptas elende pre con conse pra que re cus accae verumet voluptiumqui ommolore nieturisi qui ulparch ilitatur? Est, ipissim in nis et quo consectem. Ebit aliquos cum utatur sus eveliti usandebitas maion porecum volorro volor assit, simi, volor. Od ut fugitatius reic tem rem. Ut qui bearum adi ut aspit inim
77
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
NOTIFIKATIONER
78
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESNOTIFIKATIONER / GRUNDSKABELONER
Sideeksempel
79
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Notifikation – stor
• 600 x 230 px
Notifikation – lille
• 260 x 150 px
Notifikationer – stor600 x 230 px
Notifikationer – lille260 x 150 px
80
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
Minisites, kampagnesites og CO-branding,
81
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Minisites
Minisites er opbygget med tæt tilførsforhold til virksomheds- og hospitalssite. Hovedafsenderlogo er placeret øverst til venstre.
Supplerende navnetræk – typisk navn på tvær-gående enhed – skrives med skriften “Mari Light” størrelse 30 px. Det supplerende navnetræk placeres i en afstand der svarer til 2 x bredden af ben i H’et.
Indholdselementer er opbygget af samme moduler som virksomheds- og hospitalshjemmesider.
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT
82
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Grafik og branding
Ud over brugen af navnetræk i tagline, kan minisites bruge det store topbanner fra forside-layoutet til branding.
Minisites kan også indsætte en godkendt grafik i topbaren. Topgrafik skal placeres til højre for servicemenuen.
Billedformat, topbanner
1920 x 520 px
Topgrafik til minisites
Topgrafik er todelt: En venstreside med logo og titel, og en højre med ”vignet”.
Venstre side: Logo skal fylde hele højden da den skaleres i systemet (66%). Afleveres som PNG med gennemsigtig baggrund. 110 pixel høj, variabel bredde.
Højre side: Vignetten skal holdes indenfor 110 x 266 pixels. PNG fil. Grafik med høj kontrast bør ikke ligge for tæt på venstre side af filen - da det responsive design rykker højremenuen ind over vignetten.
Formatet på topgrafikken er 110 x 1170 pixels.
Breakpoints:940 px 768 px320 px
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT
83
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Kampagnesites – med eller uden co-branding
Kampagnesites er opbygget som minisites, men her er hovedafsender ikke en af virksomhederne. Hovedafsender er det co-branding projekt eller den kampagne, man ønsker at fremhæve.
Logoets makshøjde er 60 px, ligesom på virksom-heds- og hospitalssite.
Logoer for samarbejdspartnere og leverandører indsættes på forsiden, og kan evt. nedarves på underliggende sider.
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT
84
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Grid
Der anvendes det samme 12-spaltede responsive grid som på virksomheds- og hospitalssite. Maks-bredde: 1170 px.
Mellem servicenavigationen og topgrafikken er der 35 px ”luft”.
Topgrafikken i højre side måler 266 px X 110 px og klæber altid til browserens højre kant.
Breakpoints:
940 px 768 px320 px
MINISITES, KAMPAGNESITES OG CO-BRANDING / GRID
85
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
Sidetyper
CO-branding-sites, minisites og kampagnesites er alle opbygget med tæt tilførsforhold til virksom-heds- og hospitalssite. Kun headeren indeholder nye elementer.
Andre indholdselementer er opbygget af samme moduler som på virksomheds- og hospitalssite.
MINISITES, KAMPAGNESITES OG CO-BRANDING / SIDETYPER
86
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
1170 px 940 px
Grids til responsive design
Disse eksempler viser, at bredden på grafikken skalerer i forhold til vindues-størrelse.Fx:A. 1170 px (én vinduesstørrelse)B. 940 px (en anden vinduesstørrelse)
A B
MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET
87
HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES
724 px 300 px
Grids til responsive design
Disse eksempler viser, at bredden på grafikken auto-matisk skalerer i forhold til vinduesstørrelse.Fx:A. 724 px (Tablet)B. 300 px (Mobile)
A B
MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET
88
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING