Digital designmanual / version 1.2 / Region Hovedstaden P2 Design Manual 11
HJEMMESIDE Designkoncept Univers Responsivitet Grundelementer Logo og navnetræk Farver Typografi Billedestill Grundskabeloner Design Sideeksempler Gridsystem Indhold Tekstniveauer Spacing Header Search bar Piktogrammer Cookies Fokushistorier Billedformater Infografik 3 4 5 6 10 11 12 13 19 24 30 40 41 42 43 44 45 51 INTRANET Designkoncept Univers Responsivitet Grundelementer Logo og navnetræk Farver Typografi Grundskabeloner Sideeksempler Gridsystem Indhold Tekstniveauer Spacing Header Elementer Billedformater Infografik 53 54 55 56 57 58 63 65 67 68 69 70 74 NOTIFIKATIONER Grundskabeloner Sideeksempler Indhold Billedformater 78 79 Designkoncept Minisites Grafik og branding Kampagnesite Grid Sidetyper Responsivitet 81 82 83 84 85 86 INDHOLDSFORTEGNELSE MINISITES, KAMPAGNESITES OG CO-BRANDING
UNIVERS / DESIGNKONCEPT 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 overskueligt univers. Designguiden har til formål at give professionelle et arbejdsredskab til udvikling og implementering af diverse tiltag. 3
RESPONSIVITET / DESIGNKONCEPT HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES 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. 4
LOGO OG NAVNETRÆK / GRUNDELEMENTER WEBSITE 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 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 5
FARVER / GRUNDELEMENTER HJEMMESIDE INTRANET NOTIFIKATIONER Farver Region Hovedstaden / primær farve RGB HEX 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. 0,37,85 #002555 På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. Region Hovedstaden / sekundære farver RGB HEX RGB HEX 0,125,187 #007DBB 128,146,170 #8092AA 240,251,191 #F0FBBF 100,108,111 #646C6f 101,101,101 #656565 184,184,184 #B8B8B8 51,51,51 #333333 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Region Hovedstaden / gradient RGB HEX RGB HEX 0,37,85 #002555 41,85,125 #29557D 6
FARVER / GRUNDELEMENTER HJEMMESIDE INTRANET NOTIFIKATIONER Farver Hospital / primære farver RGB HEX RGB HEX 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 0,156,232 #009CE8 0,125,187 #007DBB RGB HEX RGB HEX 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. 56,130,127 #38827F 129,204,241 #81CCF1 240,251,191 #F0FBBF 51,51,51 #333333 100,108,111 #646C6f 101,101,101 #656565 184,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Hospital / gradient RGB HEX RGB HEX 0,156,232 #009CE8 118,198,235 #76C6EB 7
FARVER / GRUNDELEMENTER HJEMMESIDE INTRANET NOTIFIKATIONER Farver Psykiatri / primære farver RGB HEX RGB HEX 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 102,191,15 #66BF0F 79,131,37 #4F8325 RGB HEX RGB HEX 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. 220,32,43 #DC202B 178,223,135 #B2DF87 240,251,191 #F0FBBF 51,51,51 #333333 100,108,111 #646C6f 101,101,101 #656565 184,184,184 #B8B8B8 213,213,213 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Psykiatri / gradient RGB HEX RGB HEX 102,191,15 #66BF0F 155,206,125 #9BCE7D 8
FARVER / GRUNDELEMENTER HJEMMESIDE INTRANET NOTIFIKATIONER Farver Virksomheder / primære farver RGB HEX RGB HEX 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 128,190,179 #85CCC9 73,125,131 #497D83 RGB HEX RGB HEX 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. 220,32,43 #DC202B 127,186,193 #7FBAC1 240,251,191 #F0FBBF 51,51,51 #333333 100,108,111 #646C6f 101,101,101 #656565 184,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Virksomheder / gradient RGB HEX RGB HEX 128,190,179 #85CCC9 171,213,218 #ABD5DA 9
TYPOGRAFI/ GRUNDELEMENTER 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. Mari Light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Book ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Heavy ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Poster ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 10
BILLEDSTIL / GRUNDELEMENTER 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. Emotionel, stemning, breather Closeups, focus er centreret De gode historier 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. Faglighed, rent udtryk Closeups, focus, dept of field Travlhed 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. Closeups, focus er centreret Faglighed, rent Emotionel, stemning, breather Tryghed Vi skal signalere professionalisme og kyndighed både lægefaglig og sundhedsfagligt - alt sammen for at give følelse af tryghed. Closeups, focus er centreret Forskning, rent udtryk Hverdag 11
DESIGN / GRUNDSKABELONER 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. 12
SIDEEKSEMPLER / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Sideeksempler A B A. Forside B. Supersektion 13
SIDEEKSEMPLER / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Sideeksempler A B A. Afdelingssektion B. Afdelingssupersektion 14
SIDEEKSEMPLER / GRUNDSKABELONER WEBSITE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Kategoriside B. Indholdsside 15
SIDEEKSEMPLER / GRUNDSKABELONER WEBSITE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Politisk kalender B. Politisk kalender Indholdsside 16
SIDEEKSEMPLER / GRUNDSKABELONER WEBSITE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Selvbetjening kategoriside B. Selvbetjening startside 17
SIDEEKSEMPLER / GRUNDSKABELONER WEBSITE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A A. Selvbetjening klageformular 18
GRIDSYSTEM / GRUNDSKABELONER 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 px 320 px 19
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Grids A 1170 px 940 px B A. 1170 px B. 940 px 70 px 30 px 60 px 20 px 20
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Grids A 724 px 300 px B A. 724 px (Tablet) B. 300 px (Mobile) 42 px 20 px 60 px 20 px 21
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Skabeloner A B A. Forside Region Hovedstaden B. Forside Hospital 22
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Indholdsskabeloner Sektion Supersektion Afdelingssektion (mavebælte) Afdelingssupersektion Kategoriside Listevisning (Presse & nyt) Indholdside Politisk kalender indholdsside 23
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Tekstniveauer Region Hovedstaden Tagline Topnavigation 1 4 2 Servicenavigation 3 For Fagfolk Button Topbannertekst 5 Identitetsbånd 7 6 Button Topfokushistorier rubrik 8 9 Topfokushistorier tid/dato Indgange rubrik 10 11 Arrow links Indgange se alt om -links 12 Afsnitsrubrikker 13 24
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Tekstniveauer Region Hovedstaden Nyheder rubrik 14 15 Nyheder manchet Arrangementer item 16 Footer indgange rubrik 17 Footer indgange links Footer indgange se alt om -links 18 19 Footer adresse 21 20 Footer navigation (button) 25
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Tekstniveauer Region Hovedstaden Body rubrik h1 22 23 Body manchet Body billedtekst 24 Body rubrik h3 25 26 Body brødtekst Body citat 27 Body byline link 28 Body rubrik h2 29 Input felt 2 31 30 Input felt 1 Body doc link 32 26
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Tekstniveauer Region Hovedstaden Left navigation rubrik 33 Left navigation link 34 Bread crumb 35 Alfabetisk oversigt bogstav 36 Organitorisk oversigt rubrik Afdelingsoversigt liste rubrik 37 39 38 40 Afdelingsoversigt emne Afdelingsoversigt liste manchet 27
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Tekstformatering 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
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER 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
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Forside Region Hovedstaden 25 px 25 px 25 px 90 px 30 px 406 px 40 px 40 px 74 px 20 px 20 px 74 px 70 px 30
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Forside Region Hovedstaden 70 px 25 px 20 px 30 px 70 px 70 px 40 px 20 px 70 px 70 px 18 px 40 px 70 px 70 px 31
SPACING/ INDHOLD HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING Forside Region Hovedstaden 40 px 20 px 20 px 40 px 40 px 70 px 40 px 30 px 30 px 40 px 80 px 32
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Footer 70 px 20 px 16 px 60 px 66 px 35 px 20 px 20 px 44 px 33
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Forside Hospitalerne 20 px 20 px 70 px 40 px 10 px 70 px 34
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Indholdsside 30 px 98 px 62 px 34 px 30 px 34 px 40 px 10 px 20 px 60 px 30 px 60 px 40 px 35
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Indholdsside 20 px 40 px 40 px 20 px 40 px 60 px 30 px 30 px 40 px 36
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Supersektion 60 px 60 px 30 px 25 px 20 px 30 px 60 px 37
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Supersektion 20 px 20 px 20 px 20 px 20 px 18 px 20 px 30 px 20 px 30 px 10 px 80 px 38
SPACING/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Afdelingssupersektion 30 px 60 px 90 px 40 px 36 px 36 px 50 px 70 px 30 px 30 px 30 px 60 px 39
HEADER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Desktop Den primære navigation for Region Hovedstadens webunivers 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 40
SEARCHBAR/ INDHOLD 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 Tekst i søgefeltet: Font: Mari Book Size: 16 px Spacing: 50 Color: 333333 Hover color: RGB:224,224,224 HEX:e0e0e0 Hover color: RGB:224,224,224 HEX:e0e0e0 41
PIKTOGRAMMER/ INDHOLD & FARVER HJEMMESIDE INTRANET NOTIFIKATIONER Piktogrammer Piktogrammer til web findes i fire forskellige størrelser. Farver Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. 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 format Piktogrammerne 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. 42
COOKIES / INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Cookies Cookies-båndet optræder i bunden af browservinduet, første gang man besøger siden. 43
FOKUSHISTORIER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Versioneringer af fokushistorier A A. 2 fokushistorier af 6 kolonner. B. 1 fokushistorier af 8 kolonner og 2 fokushistorier af 4 kolonner. C. 4 fokushistorier af 6 kolonner. B C 1 2 3 4 5 6 7 8 9 10 11 12 44
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Forside topbanner 1920 x 520 px Forside topbanner og minisite topbanner 1920 x 520 px Forside tophistorier 270 x 160 px Afdelingssektion topbillede: 1920 x 477 px Forside tophistorier 270 x 160 px 45
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Forside fokushistorier 1/2 570 x 324 px Forside fokushistorier 1/2: 570 x 324 px 2/3: 700 x 466 px 1/3: 370 x 184 px Forside fokushistorier 2/3 700 x 466 px Forside fokushistorier 1/3 370 x 184 px 46
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Afdelingssektion topbillede 1920 x 477 Afdelingssektion topbillede 1920 x 477 px Supersektion indgange 370 x 185 px Supersektion indgange 370 x 185 px 47
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Kategoriside topbillede 870 x 300 px Kategoriside topbillede 870 x 300 px Kategoriside indgange 270 x 160 px Kategoriside indgange 270 x 160 px 48
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Indholdsside topbillede 870 x 300 px Billede i fokusboks højrekolonne 268 x 120 px 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 Indholdsside brødtekstbillede 518 x 242 px Indholdsside brødtekstbillede - bred 668 x 312 px 368 x 164 px Billede i fokusboks bund 368 x 164 px 49
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Billedformater Presse & nyt fukushistorier 420 x 210 px Presse & nyt fokushistorier 420 x 210 px Politisk indholdsside brødtekstbillede 570 x 300 px Politisk indholdsside brødtekstbillede 570 x 300 px 50
BILLEDFORMATER/ INFOGRAFIK HJEMMESIDE INTRANET NOTIFIKATIONER Infografik Region Hovedstaden Eksempler Presse Ipsum Handicaptilbud Dolor Miljø Infografikerne på hjemmesiden tager afsæt i den overorden designlinje, farvepalette, gradient og font, som er angivet til henholdsvis Region Hovedstanden, Hospital, Psykiatri og Virksomheder. Jan Feb Mar April Maj Jun Jul Aug Sep Infografikken skal være enkelt og let at afkode. Hospital Afdelinger Forskning Jan Feb Mar April Maj Jun Jul Aug Sep Psykiatri 25 50 75 100 Virksomheder Driftsmålstyring Administrative arbejde 51
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING INTRANET 52
UNIVERS/ DESIGNKONCEPT 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. 53
UNIVERS/ DESIGNKONCEPT HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES 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
LOGO OG NAVNETRÆK / GRUNDELEMENTER 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 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 55
FARVER / GRUNDELEMENTER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Farver Intranet / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstadens intranet består af to primære farver og en række sekundære farver. 225,247,126 #E1F77E 119,146,0 #779200 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 / sekundære farver RGB HEX RGB HEX De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. 240,251,191 #F0FBBF 220,32,43 #DC202B 67,67,67 #434343 101,101,101 #656565 100,108,111 646C6F 130,130,130 #828282 34,34,34 #222222 184,184,184 #B8B8B8 51,51,51 #333333 204,204,204 #CCCCCC 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Intranet / gradient RGB HEX RGB HEX 226,247,128 #E2F780 240,251,191 #F0FBBF 56
TYPOGRAFI/ GRUNDELEMENTER 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. Mari Light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Book ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Heavy ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 Mari Poster ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 1234567890 57
SIDEEKSEMPLER/ GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Forside B. Supersektion 58
SIDEEKSEMPLER/ GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Afdelingssektion B. Sektion 59
SIDEEKSEMPLER/ GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A A. Indholdsside 60
SIDEEKSEMPLER / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Mødekalender A B A. Mødekalender B. Mødekalender-indholdsside 61
SIDEEKSEMPLER / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sideeksempler A B A. Selvbetjening startside B. Selvbetjening kategoriside 62
GRIDSYSTEM / GRUNDSKABELONER 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 px 320 px 63
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Grids A 1170 px 940 px B A. 1170 px B. 940 px For tablet 724 px og Mobil 300 px, se eksempler fra Hjemmesiden på side 21 70 px 30 px 60 px 20 px 64
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Skabeloner A A. Forside Intranet 65
GRIDSYSTEM / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER Indholdsskabeloner Sektion Supersektion Afdelingssektion (mavebælte) Afdelingssupersektion Kategoriside Listevisning (Presse & nyt) Indholdside Politisk kalender indholdsside 66
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Tekstniveauer Intranet Site-identifikation 1 5 6 7 Toolbar, indgang til mit intranet Alarm info - kanp Service navigation Forside fokus (lokalt) 2 8 Forside fokus (regionalt) Nyheder 3 9 It-drift og support meddelser 10 Diverse valgfri højrekolonneindhold Indhold fra mit intranet, min væg 4 67
TEKSTNIVEAUER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Tekstniveauer Intranet Særlig zone til indhold fra mit intranet 11 Arrangement item 12 Footer indgang - links 14 Footer indgang - rubrik 13 Footer indgang - mere om links 15 16 Footer - navigation (knap) Footer - adresse 5 68
SPACING/ FORSIDE HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Forside - Intranet 25 px 25 px 30 px 40 px 30 px 30 px 30 px 30 px 40 px 30 px 30 px 30 px 30 px 69
HEADER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Desktop Den primære navigation for Region Hovedstadens webunivers 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 70
ELEMENTER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Elementer Intranettet gør brug af samtlige bokse, elementer, ikoner og billedformater, der bliver brugt på hjemmeside. Dog er der nogle unikke elementer og bokse, der kun bruges på intranettet. A. Toolbar/login A B C B. Alarm knap C. Identitetsbånd D. Page tools antal kommentarer, følg person, del siden. E. Kommentarfelt findes på indholdssider D E 71
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Billedformater Afdelingssektion topbillede og supersektion 1920 x 477 Afdelingssektion topbillede og supersektion 1920 x 477 px Forside fokushistorie stor 568 x 278 px Forside fokushistorie lille 368 x 163 px Forside fokushistorie stor 568 x 278 px Forside fokushistorie lille 368 x 163 px 72
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Billedformater Kategoriside topbillede 870 x 300 px Kategoriside topbillede 870 x 300 px Kategoriside indgange 270 x 160 px Kategoriside indgange 270 x 160 px Hvilerum Motionsrum 73
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Billedformater Indholdsside topbillede 870 x 300 px 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 Indholdsside brødtekstbillede 518 x 242 px Indholdsside brødtekstbillede - bred 668 x 312 px 268 x 120 px Billede i fokusboks bund 368 x 164 px Billede i fokusboks højrekolonne 268 x 120 px 74
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Billedformater Mødekalenderindholdsside brødtekstbillede 570 x 300 px Mødekalenderindholdsside brødtekstbillede 570 x 300 px Forside nyhedslister 180 x 108 px Forside nyhedslister 180 x 108 px 75
INFOGRAFIK / INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER Infografik Infografiken på intranettet tager afsæt i den overordnede intranet designlinje, farvepalette, gradient og typografi. Intranet Infografikken skal være enkelt og let at afkode. Eksempler 2021 2020 2019 2018 2017 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 LOREM IPSUM Lorem ipsum Lorem ipsum 2016 2015 Lorem ipsum 2014 2013 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 76
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING NOTIFIKATIONER 77
NOTIFIKATIONER / GRUNDSKABELONER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sideeksempel 78
BILLEDFORMATER/ INDHOLD HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Billedformater Notifikationer stor 600 x 230 px Notifikation stor 600 x 230 px Notifikation lille 260 x 150 px Notifikationer lille 260 x 150 px 79
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING Minisites, kampagnesites og CO-branding, 80
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT 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ærgå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. 81
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT 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 px 320 px 82
MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Kampagnesites med eller uden cobranding 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å virksomheds- og hospitalssite. Logoer for samarbejdspartnere og leverandører indsættes på forsiden, og kan evt. nedarves på underliggende sider. 83
MINISITES, KAMPAGNESITES OG CO-BRANDING / GRID HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Grid Der anvendes det samme 12-spaltede responsive grid som på virksomheds- og hospitalssite. Maksbredde: 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 px 320 px 84
MINISITES, KAMPAGNESITES OG CO-BRANDING / SIDETYPER HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Sidetyper CO-branding-sites, minisites og kampagnesites er alle opbygget med tæt tilførsforhold til virksomheds- og hospitalssite. Kun headeren indeholder nye elementer. Andre indholdselementer er opbygget af samme moduler som på virksomheds- og hospitalssite. 85
MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Grids til responsive design A 1170 px 940 px B Disse eksempler viser, at bredden på grafikken skalerer i forhold til vinduesstørrelse. Fx: A. 1170 px (én vinduesstørrelse) B. 940 px (en anden vinduesstørrelse) 86
MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET HJEMMESIDE INTRANET NOTIFIKATIONER MINISITES Grids til responsive design A 724 px 300 px B Disse eksempler viser, at bredden på grafikken automatisk skalerer i forhold til vinduesstørrelse. Fx: A. 724 px (Tablet) B. 300 px (Mobile) 87
HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING 88