Designguide for Domstol.dk Designguide December 2006 for Domstol.dk
Indholdsfortegnelse Designelementer..................... 3 Navigationsprincipper................ 11 Tekstformatering.................... 13 Grid................................ 15 2
Designelementer: Logo Logo På Domstol.dk findes logoet i øverste venstre hjørne på alle websitets sider. 3
Designelementer: Typografi På Domstole.dk anvendes Georgia som primær og sekundær typografi. Den bruges i snittene Regular og Bold. ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 abcdefghijklmnopqrstuvwxyz Georgia Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 abcdefghijklmnopqrstuvwxyz Georgia Bold
Designelementer: Farver Faverne på Domstol.dk består af rød, mørk sand og sand, samt to gråtoner til tekst. Rød: #a90534, R:169 G:5 B:52 Mørk sand: #868175, R134 G:129 B:117 Sand #7e83ab, R:224 G:221 B:211 Tekst farve Mørk grå: #625e56, R98 G:94 B:86 Brødkrummesti farve Mellem grå: #868175, R134 G:129 B:117 5
Designelementer: Billedstil og beskæring forside Billedstil Billederne på Domstole.dk skal være med til at skabe et indblik i dagligdagen i de forskellige retter. Det skal bestræbes at billederne viser domhusene inde- som udefra. Det er vigtigt at der både er totalbilleder af for eksempel retsale, domhuse, kontore etc. og nærbilleder af for eksempel tavler, stukdøre etc. Beskræring På Domstole.dk anvendes der på forsiden to billedstørrelser. I det store billedfelt er der zoomet ud, og i det lille billedfelt er der zoomet ind på en detalje i fotografiet. Beskåret billede Beskåret billede Til højre kan man se eksempler på beskæring af billeder. Originalt billede Originalt billede 6
Designelementer: Billedstil og beskæring enmesider Billedstil og beskæring Se side 6. Beskåret billedee Beskåret billed Originalt billede Originalt billede 7
Designelementer: Billedstil og beskæring underside Billedstil og beskæring Se side 6. Beskåret billede Beskåret billede Originalt billede Originalt billede 8
Designelementer: Billedformater Billedformater På Domstol.dk findes seks billedformater: 1) 478 x 178 pixel Dette billedformat bruges til billeder i venstre side at topfeltet på forside og emneforsider. 178 pix 178 pix 2) 237 x 178 pixel Dette billedformat bruges til billeder i højre side af topfeltet på forside og emneforsider. 1) Billedformat: 478 x 178 pix 478 pix 237 pix 2) Billedformat: 237 x 178 pix 3) 478 x 75 pixel Dette billedformat bruges til billeder i venstre side af topfeltet på undersiderne. 75 pix 75 pix 4) 237 x 75 pixel Dette billedformat bruges til billeder i højre side af topfeltet på undersiderne. 3) Billedformat: 478 x 75 pix 478 pix 237 pix 4) Billedformat: 237 x 178 pix 5) 217 x 178 pixel Dette billedformat bruges i indholdsfeltet. 75 pix 6) 227 x 75 pixel Dette billedformat bruges til kampagner i indholdsfeltet og højrespalte. 178 pix 227 pix 6) Billedformat: 227 x 75 217 pix 5) Billedformat: 217 x 178 pix 9
Designelementer: Kampagnefelter Kampagnefelter i højrespalte På Domstol.dk findes en række kampagnefelter i højre spalte. 75 pix Fælles for dem alle er, at de har en bredde på 227 pix og en variabel højde, som bestemmes af mængden af tekst i feltet. 227 pix Kampagnefelt: 227 x variabel pix variabel pix 10
Navigationsprincipper: Emne -og servicemenu Emnemenu Emnemenuen findes på alle sider på Domstol.dk. Ved mouse over og valgt bliver menupunket markeret med en understregning Farve: #a90534 Farve: #a90534, underline Farve: #868175 Servicemenu Servicemenuen findes på alle sider på Domstol.dk. Ved mouse over og valgt bliver menupunket markeret med en understregning. Farve: #868175, underline 11
Navigationsprincipper: Venstremenu Venstremenu På Domstol.dk findes en dynamisk venstremenu, hvorfra websitets centrale emner og undersider kan tilgås. Ved aktivt menupunkt bliver punktet market med rød, pilen vender nedad og punktet folder sig ud. De underliggende punketer bliver markeret med rød og understregning. 12
Tekstformatering Font Størrelse Farve Dekoration Mouse over Valgt Visited Overskrifter Header 1 (sideoverskrift) Georgia Regular 20/2 #625e56 Header 2 (manchet) Georgia Regular 12/21pix #a90534 Header 3 (overskrift i brødtekst) Georgia Regular 16/ #625e56 Header 3 (overskrift i højrespalte) Georgia Regular 20/2 #625e56 Brødtekst Brødtekst Georgia Regular 11/16 pix #625e56 Brødtekst overskrift Georgia Bold 11/16 pix #625e56 Links (i brødtekst) Georgia Regular 11/16 pix #a90534 #a90534 #868175 Links (selvstændige) Georgia Bold 11/16 pix #625e56 pil før link #625e56, understreg #625e56, understreg - Dato Georgia Regular 10/16 pix #625e56 Navigation Emnemenu Georgia Regular 18 pix #a90534 understreg understreg Servicemenu 1 Georgia Regular 10 pix #868175 understreg understreg Venstremenu (niveau 1) Georgia Regular 12/40 pix #625e56 pil før tekst #a90534 #a90534 Venstremenu (niveau 2) Georgia Regular 11/ #625e56 #a90534, understreg #a90534, understreg Venstremenu (niveau 3...) Georgia Regular 11/15 pix #625e56 #a90534, understreg #a90534, understreg Andet Links i højre spalte, overskrift Georgia Bold 12/16 pix #625e56 pil før link #a90534 Links i højre spalte, tekst Georgia Regular 10/13 pix #625e56 pil før link #a90534 Brødkrummesti Georgia Regular 10 pix #868175 understreg Sidst opdateret Georgia Regular 10 pix #625e56 understreg Tekst kampagnefelt, overskrift Georgia Bold 12/16 pix #625e56 pil før link #a90534 Tekst kampagnefelt Georgia Regular 10/13 pix #625e56 #a90534 13
Tekstformatering: Tekstniveauer Emnemenu Header 1 Brødtekst Header 2 (manchet) Servicemenu 2 Brødkrummesti Venstremenu, niveau 1 Header 3 Links i højre spalte Header 3 Venstremenu, niveau 2 Link i brødtekst Overskrift Overskrift Venstremenu, niveau 3 Selvstændige links 2 Selvstændige links 1 14
Grid: Forside Domstol.dk, forside Forsiden og de resterende sider på Domstol.dk har en fast bredde og er midterstillet i browersvinduet. Bredde: 962 pix Højde: 575 px Generelle marginer vertikalt:. Generelle marginer horisontalt: 35 pix 30 pix 33 pix 178 pix 10 pix fra kanten af elementet til tekst. 575 pix 291 pix 17 pix 237 pix 237 pix 237 pix 237 pix 962 pix 15
Grid - Emneside 35 pix 30 pix 33 pix 178 pix 575 pix 17 pix 237 pix 478 pix 237 pix 962 pix 16
Grid - Indholdsside 35 pix 30 pix 33 pix 75 pix 70 pix 17 pix 237 pix 478 pix 237 pix 962 pix 17
Grid: Forside og emnesider 3 3 2 15 pix min.15 pix 15 pix 35 pix 17 pix 175 pix 10 pix 10 pix 10 pix 237 pix 237 pix 10 pix 2 47 16 pix 5 pix 10 pix 10 pix 478 pix 18
Grid: Indholdsfelter 3 3 175 pix 50 pix 47 17 pix 47 1 1 1 40 pix 40 pix 22 pix 10 pix 478 pix 10 pix 40 pix 22 pix 10 pix 25 pix 217 pix 217 pix 10 pix 19
Grid - Venstre og højrespalte 5 pix 6 pix 5 pix 5 pix 5 pix 2 15 pix 3 2 15 pix 15 pix 10 pix 237 pix 10 pix 10 pix 10 pix 10 pix 237 pix 10 pix 20