Digital designmanual / version 1.1 / Region Hovedstaden · Design Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængeligt – og enkelt

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.


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


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.



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


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.




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


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

10


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






11


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


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


Sideeksempler

A. Forside

B. Supersektion

SIDEEKSEMPLER / GRUNDSKABELONER

A B

14


Sideeksempler

A. Afdelingssektion

B. Afdelingssupersektion


A B


15

Sideeksempler

A. Kategoriside

B. Indholdsside


A B


16

Sideeksempler

A. Politisk kalender

B. Politisk kalender – Indholdsside


A B


17

Sideeksempler

A. Selvbetjening – kategoriside

B. Selvbetjening – startside


A B


18

Sideeksempler

A. Selvbetjening – klageformular


A

19


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


1170 px 940 px

Grids

A. 1170 px

B. 940 px

A B


70 px 60 px30 px 20 px

21


724 px 300 px

Grids

A. 724 px (Tablet)

B. 300 px (Mobile)

A B


42 px 60 px20 px 20 px

22


Skabeloner

A. Forside – Region Hovedstaden

B. Forside – Hospital

BA


23

WEBSITE INTRANET NOTIFIKATIONERGRIDSYSTEM / GRUNDSKABELONER

Indholdsskabeloner

• Sektion • Afdelingssektion (mavebælte)• Supersektion • Afdelingssupersektion

• Indholdside • Kategoriside • Listevisning (Presse & nyt) • Politisk kalender – indholdsside

24


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




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




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




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


Tekstformatering


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


Tekstformatering


30


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



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


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


Footer

SPACING/ INDHOLD

60 px

20 px

16 px

20 px20 px

66 px

35 px

44 px

70 px

34


Forside – Hospitalerne

SPACING/ INDHOLD

70 px

70 px

40 px

10 px

20 px

20 px

35


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


Indholdsside

SPACING/ INDHOLD

20 px

20 px

40 px

40 px

40 px

30 px

30 px

60 px

40 px

37


Supersektion

SPACING/ INDHOLD

60 px

60 px

25 px

30 px

30 px

20 px

60 px

38


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


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


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


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



47


Billedformater

Afdelingssektion topbillede

• 1920 x 477 px

Supersektion indgange

• 370 x 185 px

Afdelingssektion topbillede1920 x 477

Supersektion indgange370 x 185 px

48


Billedformater

Kategoriside topbillede

• 870 x 300 px

Kategoriside indgange

• 270 x 160 px

Kategoriside topbillede870 x 300 px

Kategoriside indgange270 x 160 px

49


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


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


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.


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


Sideeksempler

A. Afdelingssektion

B. Afdelingssupersektion

A B

57


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


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


NOTIFIKATIONER

62

WEBSITE INTRANET NOTIFIKATIONER MINISITESNOTIFIKATIONER / GRUNDSKABELONER

Sideeksempel

63


Billedformater

Notifikation – stor

• 600 x 230 px

Notifikation – lille

• 260 x 150 px

Notifikationer – stor600 x 230 px

Notifikationer – lille260 x 150 px

64


Minisites, kampagnesites og CO-branding,

65


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


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.


67


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.


68


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


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


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


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


Documents

Digital designmanual / version 1.1 / Region Hovedstaden · Design Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængeligt – og enkelt