11
Digital designmanual / version 1.1 / Region Hovedstaden
P2 Design Manual
WEBSITE
DesignkonceptUniversResponsivitet
GrundelementerLogo og navnetræk Farver Typografi Billedestill
Grundskabeloner DesignSideeksemplerGridsystem
Indhold Tekstniveauer SpacingHeaderSearch barPiktogrammerCookiesFokushistorierBilledformater
3
4
5
6
10
11
12
13
19
24
30
40
41
42
43
44
45
INTRANET
DesignkonceptUnivers Responsivitet
GrundelementerFarver
Grundskabeloner Sideeksempler
Indhold ElementerBilledformater
52
53
54
55
58
59
NOTIFIKATIONER
Grundskabeloner Sideeksempler
Indhold Billedformater
62
65
Designkoncept MinisitesGrafik og brandingKampagnesite
Grid
Sidetyper
Responsivitet
65
66
67
68
69
70
INDHOLDSFORTEGNELSE
MINISITES, KAMPAGNESITES OG CO-BRANDING
3
WEBSITE 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
WEBSITE 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
WEBSITE 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
RGB HEX
0,125,187 #007DBB
128,146,170 #8092AA
240,251,191 #F0FBBF
51,51,51 #333333
255,255,255 #FFFFFF
7
WEBSITE 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
WEBSITE 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 #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
9
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE INTRANET NOTIFIKATIONER
Sideeksempler
A. Forside
B. Supersektion
SIDEEKSEMPLER / GRUNDSKABELONER
A B
14
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE INTRANET NOTIFIKATIONER
Skabeloner
A. Forside – Region Hovedstaden
B. Forside – Hospital
BA
GRIDSYSTEM / GRUNDSKABELONER
23
WEBSITE INTRANET NOTIFIKATIONERGRIDSYSTEM / GRUNDSKABELONER
Indholdsskabeloner
• Sektion • Afdelingssektion (mavebælte)• Supersektion • Afdelingssupersektion
• Indholdside • Kategoriside • Listevisning (Presse & nyt) • Politisk kalender – indholdsside
24
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE INTRANET NOTIFIKATIONER
Tekstformatering
TEKSTNIVEAUER/ INDHOLD
30
WEBSITE 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
WEBSITE 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 INTEGRERINGWEBSITE INTRANET NOTIFIKATIONER
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
WEBSITE INTRANET NOTIFIKATIONER
Footer
SPACING/ INDHOLD
60 px
20 px
16 px
20 px20 px
66 px
35 px
44 px
70 px
34
WEBSITE INTRANET NOTIFIKATIONER
Forside – Hospitalerne
SPACING/ INDHOLD
70 px
70 px
40 px
10 px
20 px
20 px
35
WEBSITE 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
WEBSITE INTRANET NOTIFIKATIONER
Indholdsside
SPACING/ INDHOLD
20 px
20 px
40 px
40 px
40 px
30 px
30 px
60 px
40 px
37
WEBSITE INTRANET NOTIFIKATIONER
Supersektion
SPACING/ INDHOLD
60 px
60 px
25 px
30 px
30 px
20 px
60 px
38
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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
43
WEBSITE INTRANET NOTIFIKATIONERCOOKIES / INDHOLD
Cookies
Cookies-båndet optræder i bunden af browservinduet, første gang man besøger siden.
44
WEBSITE 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
WEBSITE 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
WEBSITE INTRANET NOTIFIKATIONERBILLEDFORMATER/ INDHOLD
Billedformater
Forside fokushistorier
• 1/2: 570 x 324 px• 2/3: 700 x 466 px• 1/3: 370 x 184 px
Forside fokushistorier 1/2570 x 324 px
Forside fokushistorier 2/3700 x 466 px
Forside fokushistorier 1/3370 x 184 px
47
WEBSITE 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
WEBSITE 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
WEBSITE 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
WEBSITE 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 MINISITE SOCIAL INTEGRERING
INTRANET
52
WEBSITE INTRANET NOTIFIKATIONER MINISITES
Univers
Webdesignet 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 det åbne website ved hjælp af en anden farvepa-lette samt toplogin, der giver adgang til personifice-ret indhold.
Intranettet gør brug af det samme responsive gridprincip som hovedsitet.
UNIVERS/ DESIGNKONCEPT
53
WEBSITE 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.
54
WEBSITE 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
55
WEBSITE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Forside
B. Supersektion
A B
56
WEBSITE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Afdelingssektion
B. Afdelingssupersektion
A B
57
WEBSITE INTRANET NOTIFIKATIONER MINISITESSIDEEKSEMPLER/ GRUNDSKABELONER
Sideeksempler
A. Indholdsside
B. Indholdsside
A B
58
WEBSITE 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
59
WEBSITE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Forside fokushistorie – stor
• 568 x 278 px
Forside fokushistorie – lille
• 368 x 163 px
Forside – Mit netværk
• 120 x 120 px
Forside fokushistorie – stor568 x 278 px
Forside fokushistorie – lille368 x 163 px
Forside – Mit netværk120 x 120 px
60
WEBSITE INTRANET NOTIFIKATIONER MINISITESBILLEDFORMATER/ INDHOLD
Billedformater
Forside nyhedslister
• 180 x 108 px
Indholdsside kommentar
• 80 x 80 px
Telefonbog – profilbillede
• 100 x 100 px
Forside nyhedslister180 x 108 px
Indholdsside kommentar80 x 80 px
Telefonbog profilbillede100 x 100 px
61
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
NOTIFIKATIONER
62
WEBSITE INTRANET NOTIFIKATIONER MINISITESNOTIFIKATIONER / GRUNDSKABELONER
Sideeksempel
63
WEBSITE 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
64
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING
Minisites, kampagnesites og CO-branding,
65
WEBSITE 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
66
WEBSITE 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. Headergrafik skal placeres til højre for servicemenuen.
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT
67
WEBSITE 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
68
WEBSITE 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
69
WEBSITE 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
70
WEBSITE 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.
Billedformat, topbanner:1920 x 520 px
Grids til responsive designDisse eksempler viser, at bredden på grafikken automatisk skalerer i forhold til vinduesstørrelse.
Fx:A. 1170 px (én vinduesstørrelse)B. 940 px (en anden vinduesstørrelse)
A B
MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET
71
WEBSITE 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
72
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING