Webdesign - Udnyt mulighederne by Malene Frei

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Designguide for browserbaseret kommunikation i Region Hovedstaden Version 1.7

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

00.01.00 Indhold

Indhold HJEMMESIDE

Grundelementer Billedformater Logo og navnetræk Farver Typografi

01.01.00-03 01.02.00 01.03.00-02 01.04.00

Grundskabeloner Forsider Områdeforside Indholdsside

02.00.00 02.01.00-03 02.02.00 02.03.00

Indholdsside Skrifthierarkier og brødtekst Bokse og formularer Listevisning Kalender

03.01.00 03.02.00 03.03.00 03.04.00

Navigation For- og emnesider Indholdssider Navigationstyper

04.01.00 04.01.01 04.02.01-11

INTRANET

Grundelementer Logo og navnetræk Farver

05.01.00 05.02.00

Grundskabeloner Forsider

06.00.00-03 06.01.00-02

Navigation Forside Navigationstyper

07.01.00 07.02.01-04

Indholdsside Bokse og formularer

08.01.00-02

Denne designguide er udviklet til dem, der skal forestå arbejdet med programmering og opsætning af Region Hovedstadens hjemmesider. Guiden beskriver en række regler og principper i form af sideskabeloner, beskrivelser af menupunkter, navigationstyper, billedfelter, anvendelse af typografier, farver mv. Disse regler skal nøje følges for at sikre at Region Hovedstadens hjemmesider får et ensartet udtryk, der stemmer overens med regionens overordnede designprogram.

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

01.01.00 Biiledformater

Billedformater Alle mål opgives i pixel (BxH). I nogle tilfælde opgives H som FRI dvs. at der ikke er nogle krav til højden. Vi anbefaler at man holder sig indenfor de angivne pixelstørrelser, og bruger en billedopløsning på 72 DPI, for at optimere sidernes svartider.

Stort kampagne modul (bredformat ~ingen navigations menu) - Regionsforside 1 ( Hjemmeside ) - Intranetforside for virksomhed A - Virksomhedsforside 1 ( Hjemmeside )

Eks. Stort kampagne modul (bredformat)

(472x168)

Stort kampagne modul - Intranet niveau 2 - Afdelingshjemmeside ( Hjemmeside )

Eks. Stort kampagne modul

(376x188)

Stort kampagne modul - Regionsforside 2 ( Hjemmeside )

(312x246)

Eks. Stort kampagne modul

01.01.01 Biiledformater

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Billedformater Stort kampagne modul - Intranetforside for virksomhed B

Eks. Stort kampagne modul

(312xFRI)

Stort kampagnemodul højreﬁkseret - Intranetforside for virksomhed A - Intranetforside for virksomhed B (ved højre eller brødtekst visning)

Eks. Højreﬁkseret

(115x115)

Lille kampagne modul - Forsider ( Hjemmeside + Intranet )

(152x169)

Eks. Lille kampagne modul

01.01.02 Biiledformater

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Billedformater Artikelbillede - Artikelsider ( Hjemmeside + Intranet )

Eks. Artikelbillede

(152x120)

Topnyhed modul -Nedarvningsfelt Genvejsmodul ( Hjemmeside + Intranet )

Eks. Topnyhed modul (nedarvning)

For Internet (200x111) For Intranet (200xFRI)

Genvejsmodul billede - Relateret indhold modulet (3 kolonne) ( Hjemmeside + Intranet )

(152xFRI)

Eks. Genvejsmodul billede (3 kolonne)

01.01.03 Biiledformater

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Billedformater Lille kampagne modul -Nedarvningsfelt Genvejsmodul ( Hjemmeside + Intranet )

Eks.Lille kampagne modul (nedarvning)

(200xFRI)

200x FRI

Listeside-topbillede - Listesider ( Hjemmeside + Intranet )

Eks. Liste topbillede

(376x188)

Listevisnings billede - Listesider ( Hjemmeside + Intranet )

Eks. Listeindholdsbillede

(120x90)

Thumbnails nyheds liste - Forsider (listemodul) ( Hjemmeside + Intranet ) - Nedarvning (listemodul) ( Hjemmeside + Intranet )

(80x84)

Eks. Listeindholdsbillede

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Hjemmeside

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

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. De fire hovedsektorer under Region Hovedstaden; Hospital, Psykiatri, Handicap og Apotek har hver deres logo i forskellig farve. Navnetrækket er sat i samme typografi og i samme farve. De fem logoer er organisatorisk på samme niveau, så de vil aldrig optræde sammen. Højden af logoet er altid 57px på hjemmesiden.

57px

01.02.00 Grundelementer

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

01.03.00 Grundelementer

Farver Gråtoner

Primær farve Farvepaletten for Region Hovedstaden består af en primær farve, en række gråtoner og tre sekundære farver. Ydermere kan primær farverne fra de tre sektorer anvendes i kampagneelementer i de respektive kategorier Primær og sekundære farver kan bruges i fire gradereringer; 100%, 50%, 25% og 10%.

RGB 0,37,85

HEX #002555

RGB 51,51,51

HEX #333333

128,146,170 191,201,212 230,233,238

#8092AA #BFC9D4 #E6E9EE

128,128,128

#808080

208,208,208

#D0D0D0

0,0,0

#000000 240,240,240

#F0F0F0

255,255,255

#FFFFFF

226,0,74

#E2004A

241,128,160 248,191,210

#F180A0 #F8BFD2

252,230,237

#FCE6ED

255,153,0

#FF9900

255,204,128 255,230,191 255,245,230

#FFCC80 #FFE6BF #FFF5E6

0,125,201

#007DC9

167,237,255 211,246,255 237,251,255

#80BEE4 #BFDEF1 #E5F2FA

Sekundære farver

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Farver til virksomhederne

HOSPITAL PRIMÆR

Primær farverne fra defire sektorer anvendes i kampagneelementer i de respektive kategorier.

RGB

HEX

BRUGES PÅ RESPEKTIVE HJEMMESIDER SOM

0,156,232

#009CE8

Hover og valgt-farve på links i topmenu

De sekundære farver kan anvendes på virksomhedernes respektive hjemmesider.

#80CDF3 #BFE6F9 #E5F5FD

Udover virksomhedernes primære og sekundære farver, kan Region H’s overordnede primærfarve (blå) og gråtoner anvendes. Farverne kan bruges i fire gradereringer; 100%, 50%, 25% og 10%.

01.03.01 Grundelementer

Baggrundsfarve

SEKUNDÆR 196,240,0

133,204,201

#C4F000

#E2F780 #F0FBBF #F9FDE5

#85CCC9

#C2E5E4 #E0F2F2 #F3FAFA

PSYKIATRI PRIMÆR 102,191,15

#66BF0F

#B2DF87 #D9EFC3 #F0F9E7

Hover og valgt-farve på links i topmenu

Baggrundsfarve

SEKUNDÆR 255,102,0

#FF6600

#FFB280 #FFD9BF #FFF0E5

64,31,66

#421F42

#A18FA1 #D0C7D0 #ECE9EC

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Farver til virksomhederne

HANDICAP PRIMÆR

01.03.02 Grundelementer

RGB

HEX

BRUGES PÅ RESPEKTIVE HJEMMESIDER SOM

219,3,38

#DB0326

Hover og valgt-farve på links i topmenu

#ED8193 #F6C0C9 #FBE6E9

Baggrundsfarve

SEKUNDÆR 255,255,0

145,33,101

#FFFF00

#912166

#C890B2 #E4C8D9 #F4E9F0

#FFFF80 #FFFFBF #FFFFE5

APOTEK PRIMÆR 128,190,179

#80BEB3

#BFDED9 #DFEFEC #F2F8F7

Hover og valgt-farve på links i topmenu

Baggrundsfarve

SEKUNDÆR 255,0,43

#FF002B

#FF8095 #FFBFCA #FFE5EA

0,159,0

#009E00

#80CF80 #BFE7BF #E5F5E5

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

01.04.00 Grundelementer

Typografi Region Hovedstaden anvender 4 typografier på digtale medier. MARI HEAVY

Specialtegnet skrift til brug i navnetrækket. For at gøre designet mest muligt dynamisk bruges skriften dog kun i navnetrækket. ARIAL

Standardskrift der bruges i hovedmenu, overskrifter, manchettekster og henvisninger. VERDANA

Standardskrift der bruges i undermenu, henvisninger og brødtekst. GEORGIA

Standardskrift der bruges i overskrifter.

Tis nullupt atetumsandre dolorper si. Et dolobor si. Oborper sumsandreet amcor aliquat nonsendio od tat lum vent ing et doluptat. Mari Heavy

Tis nullupt atetumsandre dolorper si. Et dolobor si. Oborper sumsandreet amcor aliquat nonsendio Arial Regular

Wisciduisi bla faccum non henim nulla conulla consequis doluptat. Arial Bold

Tis nullupt atetumsandre dolorper si. Et dolobor si. Oborper sumsandreet Verdana Regular

Wisciduisi bla faccum non henim nulla conulla consequis doluptat. Verdana Bold

Wisciduisi bla faccum non henim nulla conulla consequis doluptat. Georgia Regular

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Grundskabeloner Til Region Hovedstadens hjemmesider findes flere grundskabeloner. Tre forsideskabeloner, en områdeforsideskabelon og en indholdssideskabelon. Alle skabeloner er bygget op af fire horisontale elementer: • • • •

en permanent topbar med logo, navnetræk, servicemenu, søgefunktion og overordnede indgange. menubar, inkl guickjump til parallelle sider indhold adresse og datofelt

Menubaren og indholdselementet er omkranset af en hvid ramme, med en svag skygge omkring. Siderne er horisontalt centreret i browseren.

02.00.00 Grundskabelon

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.01.00 Grundskabelon

Forside – Type 1 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

472 px

240 px

Værktøj

200 px

Nyhedsfelt

Genveje

Kampagnefelt

8 px 152 px

152 px

Kampagnefelt

8 px 152 px Kampagnefelt

8 px 8 px 8 px

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.01.01 Grundskabelon

Forside – Type 1, forskellig ombrydning I forsideskabelonen kan kampagnefelterne opbygges på forkellig måde. Her vises et par eksempler.

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

Værktøj

Kampagnefelt

Genveje

Værktøj

Nyhedsfelt

Kampagnefelt

Genveje

Kampagnefelt

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

Værktøj

Kampagnefelt

Genveje

Nyhedsfelt

Værktøj

Nyhedsfelt

Kampagnefelt

Genveje

Kampagnefelt

Nyhedsfelt

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.01.02 Grundskabelon

Forside – Type 2 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

312 px

152 px

240 px

Værktøj

Kampagnefelt 200 px

Kampagnefelt

Nyhedsfelt

Genveje

8 px 152 px Kampagnefelt

8 px

8 px 8 px 8 px

152 px

Kampagnefelt

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.01.03 Grundskabelon

Forside – Type 3 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

472 px

240 px

Værktøj

200 px

Nyhedsfelt

Genveje

Kampagnefelt

8 px 312 px

152 px

Nyhedsfelt over 2 spalter

Kampagnefelt

8 px

8 px 8 px 8 px

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.02.00 Grundskabelon

Områdeforsider 960 px

Områdeforsideskabelonen er ligeledes opbygget af fire horisontale elementer. Siden tilpasser sig i højden efter mængden af indhold i indholdselementet.

81 px 8 px 25 px 8 px 8 px 14 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

160 px

Navigation

Breadcrum

Værktøj

384 px

152 px

Kampagnefelt

200 px

Genveje

Eksterne genveje

360 px

8 px

Nyhedsfelt

8 px 8 px 8 px

Adresse- og datofelt 8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

02.03.00 Grundskabelon

Indholdsside 960 px

Indholdssideskabelonen er ligeledes opbygget af fire horisontale elementer. Siden tilpasser sig i højden efter mængden af indhold i indholdselementet.

81 px 8 px 25 px 8 px 8 px 14 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider

160 px

Navigation

Breadcrum

Værktøj

384 px

152 px

Indholdsfelt

200 px

Genveje

Eksterne genveje

8 px

8 px 8 px 8 px

Adresse- og datofelt 8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Skrifthierarkier og brødtekst Alle niveau 1 overskrifter er sat med Georgia. Og al brødtekst står i Verdana. Herunder overskrift 2.

Overskrift 1 Georgia 21/24px #333333

Billeder kan placeres venstre- og højrestillet med tekstomløb.

Manchet Verdana 13/16px #333333 Brødtekst Verdana 11/14px #333333

Overskrift 2 Verdana Bold 11/14px #333333 8px margin omkring billedet

8px

32px Forfatter og tidspunkt Verdana Bold 10/14px #808080

03.01.00 Indholdsside

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

03.02.00 Indholdsside

Bokse og formularer

Titel på boks Verdana Bold 11/14px #333333

Kategorier Verdana Bold 11/14px #333333

Boks #E6E9EE 8px padding

Bogstaver der ikke er aktive Verdana 11/14px #808080

Knap Baggrundsfarve #002555 Arial 10px #FFFFFF Links Verdana 11/13px #007DC9 Links - Mouseover Understregning

Titel på boks Verdana Bold 11/14px #333333 Kapitæler Stiplet linie kan bruges som adskiller Boks #E6E9EE 8px padding Knap Baggrundsfarve #002555 Arial 10px #FFFFFF

Andet tekst Verdana 11/14px #333333

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

03.03.00 Indholdsside

Listevisning

Kategorier Verdana Bold 11px #333333 Liste Hver anden linje har farven #E6E9EE 2px padding Links Verdana Bold 11/13px #002555 Links - Mouseover Understregning

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

03.04.00 Indholdsside

Kalender Kalenderen kan fylde fra anden til fjerde spalte. Og den kan bruges med eller uden søgefelt.

Dato Verdana 11px #333333

Måned Verdana Bold 11px Centreret i spalten #333333

19px 19px

94px Links Verdana 11/13px #007DC9 Links - Mouseover Understregning

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.01.00 Navigation

Navigationstyper på for- og enmesider Fra alle sider er det muligt at navigere i indholdet. Her er en oversigt over de forskellige typer af navigation på for- og emnesider.

Servicenavigation Overordnede indgange Menu

Quickjump Værktøj

Kampagnefelter

Genveje

Nyhedsfelt

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.01.01 Navigation

Navigationstyper på indholdssider

Servicenavigation Overordnede indgange Menu

Quickjump Værktøj

Undermenu Breadcrum

Navigation i brødtekst

Genveje Relaterede information og henvisninger

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.01 Navigation

Navigationstyper Guidelines for menu, servicemenu, overordnede indgange, quickjump, breadcrum og ikoner i værktøjsfelt.

Menu Arial 13px #000000

Menu – Mouseover Arial 13px #002555

Sundhed & sygehuse 8px

8px 8px 1px

Menu – Valgt Arial 13px #002555

Sundhed & sygehuse 8px

8px 8px 1px

Sundhed & sygehuse 8px

8px 8px 1px

Servicemenu Arial 11px #333333

Servicemenu – Mouseover Arial 11px, understregning #333333

Servicemenu – Valgt Arial 11px, understregning #333333

Kontakt

8px

Overordnede indgange Arial Bold 11px Generel knibning +60/1000em Kapitæler #002555

Overordnede indgange - Mouseover Arial Bold 11px, understregning Generel knibning +60/1000em Kapitæler #002555

Overordnede indgange - Valgt Arial Bold 11px, understregning Generel knibning +60/1000em Kapitæler #002555

NYHEDER

12px

16px

Guickjump Standard html select-menu Arial Bold 11px, #000000

16px

Breadcrum Arial 10/13px #808080

Forside > Afdelinger > Kirurgisk afdeling C 19px Værktøjsfelt – ikoner 8px

2px streg #333333

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.02 Navigation

Navigationstyper Guidelines for undermenu. Pilen indikerer, at menupunktet har et eller flere underpunkter.

Menupunkt 3

13px 19px

Menupunkt 2 der er i to linjer Menupunkt 3 8px

8px

Undermenu 2 – til brug ved mange undermenupunkter Verdana 11/13px #333333

Menupunkt 1 1. Undermenupunkt 1 2. Undermenupunkt 1 8px 13px

Menupunkt 1

Menupunkt 1 Menupunkt 2 der er i to linjer

Undermenu 1 – Valgt Verdana Bold 11/13px #002555

Undermenu 1 – Mouseover Verdana 11/13px #002555

Undermenu 1 Verdana 11/13px #333333

1px streg #002555

13px 19px

Menupunkt 2 der er i to linjer Menupunkt 3 8px

13px 19px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.03 Navigation

Navigationstyper Guidelines for genveje.

Genveje

Bredden af genvejsfelterne er 200px når de bruges på forsider og 152px når de bruges på emne- og indholdssider.

TITEL PÅ GENVEJE

Ved flere genveje over hinanden er der 18px i mellem hver genvejsfelt.

Ommodo dolore conse tat, consed min venim adipsum vulput exer sequis dolessi.

Alle henvinsninger under genveje får farven #808080 når det er et allerede besøgt link.

Genveje – Mouseover på tekst Arial 10px Kapitæler #333333 Tekst Verdana 10/13px #333333 Link Verdana 8/13px Kapitæler #007DC9

Genveje – listeform

∙ Amager Hospital

13px

Arial 10px Kapitæler #333333

TITEL PÅ GENVEJE

Verdana 11/13px Listeform med lille bullit #007DC9

∙ Bornholms Centralsygehus

19px

∙ Amager Hospital

8px

Link Verdana 8/13px Kapitæler Understregning #007DC9

13px 19px

Verdana 11/13px Listeform med lille bullit Understregning #007DC9

Fremhævet genveje – listeform – Mouseover på tekst

TITEL PÅ GENVEJE

∙ Amager Hospital

Tekst Verdana 10/13px #333333

8px

Fremhævet genveje – listeform

∙ Bornholms Centralsygehus

Ommodo dolore conse tat, consed min venim adipsum vulput exer sequis dolessi.

Genveje – listeform – Mouseover på tekst

TITEL PÅ GENVEJE

∙ Bornholms Centralsygehus

Arial 10px Kapitæler #333333

TITEL PÅ GENVEJE

13px 19px

Arial 10px Kapitæler #E2004A

TITEL PÅ GENVEJE

Verdana 11/13px Listeform med lille bullit #E2004A

∙ Bornholms Centralsygehus

Omrids 1px streg #E2004A 8px padding

∙ Amager Hospital 8px

Arial 10px Kapitæler #E2004A

13px 19px

Verdana 11/13px Listeform med lille bullit Understregning #E2004A Omrids 1px streg #E2004A 8px padding

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.04 Navigation

Navigationstyper Guidelines for genveje.

Genvej med billede

Bredden af genvejsfelterne er 200px når de bruges på forsider og 152px når de bruges på emne- og indholdssider.

TITEL PÅ GENVEJE

Ved flere genveje over hinanden er der 18px i mellem hver genvejsfelt.

∙ Kort over hospitalet

Genvej med billede – Mouseover Arial 10px Kapitæler #333333

13px

Verdana 11/13px Listeform med lille bullit #007DC9

TITEL PÅ GENVEJE

∙ Kort over hospitalet Mouseover #007DC9 75% opacitet

Alle henvinsninger under genveje får farven #080808 når det er et allerede besøgt link. Genveje kan indeholde billeder, fx til kort. Formatet er 200x100px.

∙ Til og fra sygehuset ∙ 8px

Parkering

13px

∙ Til og fra sygehuset ∙

Parkering

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Navigationstyper Guidelines for brug af navigation i brødtekst.

Navigation i brødtekst Link #007DC9

Navigation i brødtekst – Mouseover Link #007DC9 Understregning

Navigation i brødtekst – Besøgt Link #808080

04.02.05 Navigation

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.06 Navigation

Navigationstyper Nyhedsfelt Guidelines for nyhedsfelt.

Nyheder

Bredden af nyhedsfelterne er 240px når de bruges på forsider og 312px når de bruges på emnesider.

20px

På enmesider vises ikke billede og hovednyhed.

100px

Titel Arial Bold 10px #FFFFFF Kapitæler

Bar #002555 75% opacitet

Hovednyhed Arial 15px #002555 Mouseover: Understrgning Nyhed – overskrift Verdana Bold 10/13px #002555 Mouseover: Understregning

Nyhed – tekst Verdana 10/13px #333333

Dato Arial Bold 10/13px #333333

Link – læs mere Verdana 8/13px Kapitæler Mouseover: Understregning #808080

Relaterede henvisninger Arial Bold 10px #333333 Kapitæler

Kilde Arial 10/13px #333333

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.07 Navigation

Nyhedsfelt – over 2 spalter Guidelines for nyhedsfelt over 2 spalter.

Nyhedsfelt over 2 spalter

Den findes i to versioner; én uden billeder og én med billeder. Bredden af nyhedsfeltet er 312px og er ikke låst i højden.

Billedformatet er 80x50px.

20px Nyhed – overskrift Verdana Bold 10/14px #002555 Mouseover: Understregning

Titel Arial Bold 10px #FFFFFF Kapitæler

Bar #002555

Dato Arial Bold 10/14px #333333

Kilde Arial 10/14px #333333

Titel Arial Bold 10px #FFFFFF Kapitæler

Bar #002555

Dato Arial Bold 10/14px #333333

Kilde Arial 10/14px #333333

Nyhedsfelt over 2 spalter med billeder 20px Nyhed – overskrift Verdana Bold 10/14px #002555 Mouseover: Understregning

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

04.02.08 Navigation

Navigationstyper Kampagnefelter 472px

Guidelines for kampagnefelter på forside.

Kampagnefelt 1

Generelt kan kampagnefelter have alle farver. Er det indhold der relaterer sig til de tre sektorer, så bruges de respektive primærfarver.

148px

Kampagnefelt 1: Billede, titelbar og farvet felt med stor overskrift og tekst. Bruges kun på forsider (472px i bredden) og enmeside (312px i bredden).

20px Overskrift Georgia 26px #002555

80px

Bar Primær farve 75% opacitet

Tekst Verdana 11/14px #002555

Baggrund Primær farve 472px

Mouseover Primær farve 75% opacitet Mouseover reagerer på hele feltet og ikke kun billedet

Titel Arial Bold 10px #FFFFFF Kapitæler

148px

20px

80px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Navigationstyper Kampagnefelter Kampagnefelt 2: Billede, titelbar og farvet felt med stor overskrift og tekst. Bruges kun på forsider (310px i bredden).

04.02.09 Navigation

310px Kampagnefelt 2

256px

20px Overskrift Georgia 26/25px #002555 Tekst Verdana 11/14px #002555

Mouseover Primær farve 75% opacitet Mouseover reagerer på hele feltet og ikke kun billedet

100px

Titel Arial Bold 10px #FFFFFF Kapitæler Bar Primær farve 75% opacitet Baggrund Primær farve

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Navigationstyper Kampagnefelter Kampagnefelt 3: Titelbar, billede og farvet felt med tekst. Kan bruges på alle sider. På forsider er bredden 152px og på emne- og indholdssider er bredden 200px. På forsider er højden altid 248px og på enme- og indholdssider tilpasser højden sig efter tekst indhold. Kampagnefelt 4: Titelbar og farvet felt med tekst. Kan bruges på alle sider. På forsider er bredden 152px og på emne- og indholdssider er bredden 200px. På forsider er højden altid 120px og på enme- og indholdssider tilpasser højden sig efter tekst indhold.

04.02.10 Navigation

152px

152px Kampagnefelt 3

20px

Titel Arial Bold 10px #FFFFFF Kapitæler Bar Primær farve 75% opacitet

Mouseover Primær farve 75% opacitet Mouseover reagerer på hele feltet og ikke kun billedet

Baggrund Primær farve, 10%

Overskrift Arial 15/16px #333333 Tekst Verdana 11/14px #002555

Kampagnefelt 5: Billede og farvet felt med tekst. Bruges kun på forsider. Bredden er 152px og 12opx i højden. 152px Kampagnefelt 4

152px

20px

Tekst Verdana 11/14px #002555

Titel Arial Bold 10px #FFFFFF Kapitæler Bar Primær farve 75% opacitet

Link Verdana 11/14px #FFFFFF

Baggrund Primær farve, 50%

Mouseover

Link Verdana 11/14px #FFFFFF Understregning

152px Kampagnefelt 5

Tekst Georgia 18/21px #002555

20px

152px Baggrund Primær farve, 25%

Mouseover Primær farve, 25% 75% opacitet Mouseover reagerer på hele feltet og ikke kun billedet

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Navigationstyper Kampagnefelter Kampagnefelt 6 : Billede og linkpil. Bruges kun på forsider. Bredden er 472px og 168px i højden.

04.02.11 Navigation

472px Kampagnefelt 6

472px Kampagnefelt 6 Mouseover

Mouseover Primær farve, her vist med hospitalsfarven. 75% opacitet

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Intranet

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

05.01.00 Intranet grundelementer

Logo og navnetræk på intranet Region Hovedstadens identitet er forankret i et logo og navnetræk. Det karakteriske H er ligeledes grundelementet for regionens ligeværdige underidentiteter. De fire hovedsektorer under Region Hovedstaden; Hospital, Psykiatri, Handicap og Apotek har hver deres logo i forskellig farve.

REGI

Navnetrækket er sat i samme typografi og i samme farve. De fem logoer er organisatorisk på samme niveau, så de vil aldrig optræde sammen. Højden af logoet er altid 57px på intranet. De forskellige intranetnavne skrives med Mari Light, i en størrelse der passer til længden af navnet.

Journalen

RIGET Intranet

57px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

05.02.00 Intranet grundelementer

Farver på intranet Primær farve Farvepaletten for Region Hovedstaden Intranet består af en primær farve, en række gråtoner og tre sekundære farver. På intranettet kan primær farverne fra de tre sektorer ikke anvendes . Primær og sekundære farver kan bruges i fire gradereringer; 100%, 50%, 25% og 10%.

Gråtoner RGB 0,37,85

HEX #002555

RGB 51,51,51

HEX #CCCCCC

128,146,170 191,201,212 230,233,238

#8092AA #BFC9D4 #E6E9EE

128,128,128

#808080

208,208,208

#D0D0D0

0,0,0

#000000 240,240,240

#F0F0F0

255,255,255

#FFFFFF

226,0,74

#E2004A

241,128,160 248,191,210

#F180A0 #F8BFD2

252,230,237

#FCE6ED

255,153,0

#FFC200

255,204,128 255,230,191 255,245,230

#FFE080 #FFF0BF #FFF9E5

0,125,201

#007DC9

167,237,255 211,246,255 237,251,255

#80BEE4 #BFDEF1 #E5F2FA

Sekundære farver

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Intranet Forside 1 Til Region Hovedstadens intranet findes flere grundskabeloner til forsiden. De resterende sider er bygget op efter samme principper som for hjemmesiden. På intranettet er der ingen baggrundsfarve eller svag skygge omkring menubaren og indholdselementet. I stedet er de markeret med en tynd streg. Indholdselementet har på intranettet har svag gråfarvet baggrund, så de forskellige genveje, kampagne- og nyhedselementer står frem. Siderne er horisontalt centreret i browseren.

06.01.00 Intranet grundskabelon

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Intranet Forside 2 Forside med hel artikel, kampagnemoduler og lille nyhedsoversigt.

06.01.01 Intranet grundskabelon

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Intranet Forside 3 Forside med tophistorie, kampagnemoduler og stor nyhedsoversigt.

06.01.02 Intranet grundskabelon

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

Intranet Indholdsside Eksempel pĂĽ almindelig indholdsside pĂĽ intranettet.

06.01.03 Intranet grundskabelon

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

06.01.00 Intranet grundskabelon

Intranet Forsideskabelon 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider og afdelinger

152 px

256 px

200 px

Kampagnefelt

Genveje

Nyhedsfelt

Kalender

152 px 200 px

Kampagnefelt

8 px 472 px

200 px 8 px

8 px 8 px 8 px

Genveje

Kampagnefelt

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

06.01.01 Intranet grundskabelon

Intranet Forsideskabelon med hel artikel 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider og afdelinger

472 px

256 px

200 px

Hel artikel

Div. moduler

Alarm modul

200 px Div. moduler

8 px

8 px 152 px

152 px

Nyhedsliste

Kampagnefelt

169px

8 px 8 px 8 px

169px

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

06.01.02 Intranet grundskabelon

Intranet Forsideskabelon med tophistorie 960 px

81 px 8 px 25 px 8 px 8 px

Permanent topbar indeholder logo, navnetræk, servicemenu, søgefunktion og overordnede indgange.

Menubar, inkl quickjump til parallelle sider og afdelinger

312 px

152 px

256 px

200 px

Nyhedsfelt med tophistorie

Kampagnefelt

Div. moduler

Alarm modul

120px

268px

200 px 152 px

Div. moduler

Kampagnefelt 120px

8 px 472 px

8 px

8 px 8 px 8 px

Nyhedsfelt over 3 spalter

Adresse- og datofelt 8 px

8 px

16 px

8 px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

07.01.00 Intranet navigation

Navigationstyper pĂĽ forside Fra alle sider er det muligt at navigere i indholdet. Her er en oversigt over de forskellige typer af navigation pĂĽ intranet forsider.

Servicenavigation Overordnede indgange Menu

Quickjump

Kalender

Genveje

Kampagnefelt

Genveje

Kampagnefelt

Nyhedsfelt

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.01 Intranet navigation

Navigationstyper Guidelines for menu, servicemenu, overordnede indgange og quickjump

Menu Arial 13px #333333

Menu – Valgt Arial 13px #000000

Menu – Mouseover Arial 13px #000000

Vejledninger 8px

Vejledninger 8px 8px 1px

8px

Vejledninger 8px 8px 1px

Servicemenu Arial 11px #333333

Servicemenu – Mouseover Arial 11px, understregning #333333

Kontakt

8px

8px 8px 1px

8px

Overordnede indgange Arial Bold 11px Generel knibning +60/1000em Kapitæler #002555

Overordnede indgange - Mouseover Arial Bold 11px, understregning Generel knibning +60/1000em Kapitæler #002555

Overordnede indgange - Valgt Arial Bold 11px, understregning Generel knibning +60/1000em Kapitæler #002555

NYHEDER

12px

16px

Guickjump Standard html select-menu Arial Bold 11px, #000000 19px

16px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.02 Intranet navigation

Navigationstyper Guidelines for genveje. Bredden af genvejsfelterne på intranet er 152px når de bruges på emne- og indholdssider.

Genveje – Mouseover på tekst

Genveje Arial 10px Kapitæler #4FDBFF

TITEL PÅ GENVEJE

∙ MED-udvalg

Verdana 11/13px Listeform med lille bullit #002555

∙ Kurser, forskning og uddannelse

Omrids 1px streg #808080 8px padding

Arial 10px Kapitæler #4FDBFF

TITEL PÅ GENVEJE

∙ MED-udvalg

Verdana 11/13px Listeform med lille bullit Understregning #002555

∙ Kurser, forskning og uddannelse

Omrids 1px streg #808080 8px padding

Genveje – Servicemeddelelse – Mouseover på tekst

Genveje – Servicemeddelelse Arial 10px Kapitæler #4FDBFF

TITEL PÅ GENVEJE

∙ MED-udvalg

Verdana 11/13px Listeform med lille bullit #002555

∙ Kurser, forskning og uddannelse

Omrids 1px streg #808080 8px padding

Arial 10px Kapitæler #4FDBFF

TITEL PÅ GENVEJE

∙ MED-udvalg

Verdana 11/13px Listeform med lille bullit Understregning #002555

∙ Kurser, forskning og uddannelse

Omrids 1px streg #808080 8px padding

Baggrundsfarve #FFF0BF

Fremhævet genveje – Mouseover på tekst

Fremhævet genveje

TITEL PÅ GENVEJE

∙ Bornholms Centralsygehus ∙ Amager Hospital

Baggrundsfarve #FFF0BF

13px 19px

Arial 10px Kapitæler #FFFFFF

TITEL PÅ GENVEJE

Verdana 11/13px Listeform med lille bullit #FFFFFF

∙ Bornholms Centralsygehus

8px padding

∙ Amager Hospital

Baggrundsfarve #E2004A 8px

8px

Arial 10px Kapitæler #FFFFFF

13px 19px

Verdana 11/13px Listeform med lille bullit Understregning #FFFFFF 8px padding Baggrundsfarve #E2004A

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.03 Intranet navigation

Navigationstyper Nyhedsfelt Guidelines for nyhedsfelt.

Nyheder

Bredden af nyhedsfeltet er 256px.

20px

Nyhed – overskrift Verdana Bold 10/13px #002555 Mouseover: Understregning

Nyhed – tekst Verdana 10/13px #333333

Titel Arial Bold 10px #002555 Kapitæler

Dato Arial Bold 10/13px #333333 Kilde Arial 10/13px #333333

Bar #BFC9D4

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.04 Intranet navigation

Nyhedsfelt – Tophistorie i bredformat Guidelines for nyhedsfelt med tophistorie.

Tophistorie i bredformat

Den findes i to versioner; én med billede i bredformat og én til mere traditionelt beskåret billede.

20px

Bredden af nyhedsfeltet er 312px og højden er 268px.

Titel Arial Bold 10px #FFFFFF Kapitæler

Bar #333333 75% opacitet

Dato Arial Bold 10/14px #333333

Kilde Arial 10/14px #333333

Billedformatet er 310x129px. Nyhedsfeltet med tophistorie skal bruges sammen med to kampagnefelter, der begge har formatet 152x120px.

Nyhed – overskrift Gerogia 23/25px #333333

Nyhed – tekst Verdana 10/14px #333333

Tophistorie i bredformat Mouseover Mouseover #333333 75% opacitet Mouseover reagerer på hele feltet og ikke kun billedet

Nyhed – overskrift Mouseover: Understregning

Omrids 1px streg #808080 8px padding

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.05 Intranet navigation

Nyhedsfelt – Tophistorie i alm. format Bredden af nyhedsfeltet er 312px og højden er 268px.

Tophistorie i alm. format

Billedformatet er 115x130px. Nyhedsfeltet med tophistorie skal bruges sammen med to kampagnefelter, der begge har formatet 152x120px.

20px Nyhed – overskrift Gerogia 23/25px #333333

Nyhed – tekst Verdana 10/14px #333333

Tophistorie i bredformat Mouseover

Nyhed – overskrift Mouseover: Understregning

Titel Arial Bold 10px #FFFFFF Kapitæler

Bar #333333

Dato Arial Bold 10/14px #333333

Kilde Arial 10/14px #333333

Omrids 1px streg #808080 8px padding

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.06 Intranet navigation

Nyhedsfelt – over 3 spalter Guidelines for nyhedsfelt over spalter.

Nyhedsfelt 20px

Den findes i to versioner; én uden billeder og én med billeder. Bredden af nyhedsfeltet er 472px og er ikke låst i højden.

Nyhed – overskrift Verdana Bold 10/14px #009CE8 Mouseover: Understregning

Nyhed – tekst Verdana 10/14px #333333

Titel Arial Bold 10px #FFFFFF Kapitæler

Dato Arial Bold 10/14px #333333 Kilde Arial 10/14px #333333

Links Arial 10px #009CE8 Kapitæler

Bar #009CE8

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.07 Intranet navigation

Nyhedsfelt – over 3 spalter Guidelines for nyhedsfelt over spalter med billeder.

Nyhedsfelt med billeder 20px

Bredden af nyhedsfeltet er 472px og er ikke låst i højden. Billedformatet er 120x94px.

Nyhed – overskrift Verdana Bold 10/14px #009CE8 Mouseover: Understregning

Nyhed – tekst Verdana 10/14px #333333

Titel Arial Bold 10px #FFFFFF Kapitæler

Dato Arial Bold 10/14px #333333 Kilde Arial 10/14px #333333

Links Arial 10px #009CE8 Kapitæler

Bar #009CE8

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

07.02.08 Intranet navigation

Navigationstyper Kampagnefelter 472px

Guidelines for kampagnefelt på forside.

Kampagnefelt 1

148px

Dato Arial Bold 10/13px #002555

20px

Kilde Arial 10/13px #002555

80px

Titel Arial Bold 10px #FFFFFF Kapitæler Bar Primær farve 75% opacitet

Tekst Arial 15/16px #002555

Baggrund #BFC9D4 472px

Mouseover Primær farve 75% opacitet

148px

20px

80px

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

08.01.00 Intranet indholdsside

Bokse og formularer Visning og upload af billeder.

Boks #E6E9EE 8px padding

Knap Baggrundsfarve #002555 Arial 10px #FFFFFF

Dato Arial Bold 11/14px #333333 Fotograf/kilde Verdana Bold 11/14px #333333 Andet tekst Verdana 11/14px #333333 Evt. links Verdana 11/13px #007DC9 Evt. links - Mouseover Understregning

Boks #E6E9EE 8px padding Dato Arial Bold 11/14px #333333 Fotograf/kilde Verdana Bold 11/14px #333333 Andet tekst Verdana 11/14px #333333 Evt. links Verdana 11/13px #007DC9 Evt. links - Mouseover Understregning

Knap Baggrundsfarve #002555 Arial 10px #FFFFFF

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

Bokse og formularer Kommentarmodul

Kommentarmodul Overskrift Verdana Bold 11/14px Kapitæler #333333 Andet tekst Verdana 11/14px #333333 Evt. links Verdana 11/13px #007DC9 Evt. links - Mouseover Understregning

Kommentarmodul – svar Overskrift Verdana Bold 11/14px Kapitæler #333333 Andet tekst Verdana 11/14px #333333 Evt. links Verdana 11/13px #007DC9 Evt. links - Mouseover Understregning

08.01.01 Intranet indholdsside

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

08.01.02 Intranet indholdsside

Bokse og formularer Opslagstavle

Opslagstavle Boks #E6E9EE 8px padding Bruger Arial 11/14px #333333 Dato Arial Bold 11/14px #333333 Overskrift Verdana 15/14px #333333 Andet tekst Verdana 11/14px #333333 Evt. links Verdana 11/13px #007DC9 Evt. links - Mouseover Understregning

Opslagstavle â&#x20AC;&#x201C; Upload Boks #E6E9EE 8px padding Andet tekst Verdana 11/14px #333333

Knap Baggrundsfarve #002555 Arial 10px #FFFFFF

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 â&#x20AC;&#x201C; Ver. 1.7

E-mailsignatur

Designguide for browserbaseret kommunikation i Region Hovedstaden Nov 2008 – Ver. 1.7

09.01.00 E-mailsignatur

E-mailsignatur Guidelines for opsætning af e-mailsignatur. E-mail formateres som HTML.

Generel skrift Verdana 11px/13px

Med venlig hilsen

Titel fremhæves med fed

Flemming Østergaard Hansen Overlæge

Mellemrum: 2 inier

Direkte: +45 48 50 70 80 Mobil: +45 35 45 46 02 Mail: ﬂemming.hansen@hovedorto.rh.hosp. dk Virksomhed Fremhæves med fed

Rigshospitalet HovedOrtoCentret Klinik for Medicinsk Ortopædi og Rehabilitering Blegdamsvej 9 2100 København Ø Tlf: Fax: Web:

Oplysning om fortrolighed Verdana 8px/10px

+45 35 45 35 45 +45 35 45 59 21 www.moor.rh.dk

Denne e-mail indeholder fortrolig information. Hvis du ikke er den rette modtager af denne e-mail eller hvis du modtager den ved en fejltagelse, beder vi dig venligst informere afsender om fejlen ved at bruge svar-funktionen. Samtidig bedes du slette emailen med det samme uden at videresende eller kopiere den”.

Mellemrum: 2 inier