Indholdsfortegnelse Designmanual Borsen.dk 1 Introduktion..................................................... 02 Farver 01 Fonte 02 Ikoner og knapper 03 Menuen 04 Bannere 05 Generelle mål 06 Grafikelementer 07 Billedstørrelser 08 Tabeller og Input-felter 09 Skabelonoversigt 10 Moduler 11 Subsites 12 Koder.......................................................... 03 Eksempler....................................................... 04 Oversigt over fontbrug i overskrifter................................. 05 Oversigt over fontbrug i brødtekt................................... 06 Links........................................................... 07 Eksempler....................................................... 09 Knapfarver og mål................................................ 11 Ikoner.......................................................... 12 Knapper........................................................ 13 Ikoner til Artikelarkiv.............................................. 14 Oversigt over funktion af menuen................................... 15 Foldet ud........................................................ 16 Mål for grafik.................................................... 17 Mål for placering af tekst.......................................... 18 Overstates....................................................... 19 Mål............................................................ 20 Størrelser........................................................ 23 Toppen / Global menu............................................. 26 Bunden......................................................... 27 Forsiden........................................................ 28 Skabelon A...................................................... 29 Skabelon C...................................................... 30 Skabelon D...................................................... 31 Popup.......................................................... 32 NyhedsTicker.................................................... 34 Content stibler................................................... 35 Boks............................................................ 36................................................................ 37 Tabelmål........................................................ 41 Input-felter...................................................... 42................................................................ 44 Lister (A3 A4)................................................... 47 Lister (A5)....................................................... 48 Lister (A6)....................................................... 49 Lister (A7)....................................................... 50 Lister (A8)....................................................... 51 Lister (L1 L2).................................................... 52 Top (A1)........................................................ 53 Overskrifts baggrund (H)........................................... 54 Infoboks (J)...................................................... 55 Tekst og billeder (A2 A9 A10 A11 A14 D1 E1 E2 E3 E4 E5 E6 F1 F2)................................... 55 Custom (K K2 C3 C6 C8 C11 C15 C16 C17 C18 C21 C23)............................................. 65 Generelle mål.................................................... 73 Firmabilen undersider............................................. 74 Farveeksempler.................................................. 79 Eksempel på andet subsite......................................... 73
Introduktion Designmanual Borsen.dk 2 Formålet med denne designmanual er at sikre, at alle siderne på www.borsen.dk får et ensartet og professionelt udseende. Med designmanualen i hånden kan Børsens medarbejdere og samarbejdspartnere altid slå op og få svar på spørgsmål om hjemmesidens layout. Her er svar på alt lige fra farven på et link til pixelmålene for en bannerreklame. Hver side på www.borsen.dk består af en skabelon. Alle skabeloner indeholder en top, en bund og en menu. Forskellen mellem de forskellige skabeloner består typisk i, hvor mange spalter siden har, og hvor store de er. Hver skabelon indeholder et antal moduler. Modulerne viser sidens indhold, f.eks. tekster, billeder eller nyhedslister. Designmanualen beskriver også, hvordan de enkelte moduler skal se ud. Denne designmanual er designet og produceret af Dwarf Ved spørgsmål kan der rettes hendvendelse til: Dwarf A/S. Bernhard Bangs Allé 25, DK-2000 Frederiksberg T: (+45) 38 16 00 00. E: info@dwarf.dk. www.dwarf.dk
Farver 01 Farver
Farver Her ses en oversigt over de farver, som bliver brugt på borsen.dk. Farverne er de generelle farver, d.v.s at der kan forekomme andre farver i grafikker og billeder Designmanual Borsen.dk 3 Grundfarver RGB: 36 59 119 HEX: #243B77 RGB: 247 231 218 HEX: #F7E7DA RGB: 181 185 192 HEX: #B5B9C0 RGB: 241 242 244 HEX: #F1F2F4 Grafikelementer RGB: 36 59 119 HEX: #243B77 RGB: 138 141 149 HEX: #8A8D95 RGB: 150 154 161 HEX: #969AA1 RGB: 236 228 220 HEX: #ECE4DC RGB: 241 242 244 HEX: #F1F2F4 RGB: 255 255 255 HEX: #FFFFFF RGB: 95 217 72 HEX: #5FD948 RGB: 153 0 0 HEX: #990000 Fonte RGB: 0 0 0 HEX: #2000000 RGB: 41 43 44 HEX: #292B2C RGB: 28 54 122 HEX: #1C367A RGB: 153 0 0 HEX: #990000 RGB: 40 61 115 HEX: #283D73 RGB: 242 241 241 HEX: #F2F1F1
Farver: Eksempler Designmanual Borsen.dk 4 Eksempel på farvebrug RGB: 247 231 218 HEX: #F7E7DA RGB: 0 0 0 HEX: #2000000 RGB: 41 43 44 HEX: #292B2C RGB: 36 59 119 HEX: #243B77 RGB: 150 154 161 HEX: #969AA1 RGB: 241 242 244 HEX: #F1F2F4 RGB: 138 141 149 HEX: #8A8D95 RGB: 28 54 122 HEX: #1C367A RGB: 242 241 241 HEX: ##F2F1F1 RGB: 181 185 192 HEX: #B5B9C0
Fonte 02 Farver
Fonte: Oversigt over fontbrug i overskrifter Designmanual Borsen.dk 5 Verdana Bold 10 px. #F2F1F1 - i overskriftbokse og på mørk/blå baggrund Verdana 10 px. #F2F1F1 - i overskriftbokse og på mørk/blå baggrund Helvetica Bold 24 px. ##000000 - nyheds- og artikeloverskrifter Helvetica Bold 20px. #000000 - nyheds- og artikeloverskrifter Helvetica Bold 16 px. #000000 - nyheds- og artikeloverskrifter
Fonte: Oversigt over fontbrug i brødtekst Designmanual Borsen.dk 6 Verdana Bold 9 px. #292B2C - bruges til datoer, klokkeslet og til billedtekst i overskrifter Verdana 9 px. #292B2C - bruges til datoer, klokkeslet og til billedtekst i brødtekst Verdana Bold 11 px. #292B2C - bruges til overskrifter og fremhævelser i brødtekst Verdana 11 px. #292B2C - brødtekst Verdana 10 px. #1C367A - bruges til læs mere... og enkeltstående links Verdana Italic 10 px. #292B2C - bruges til ekstra infomationer i f.eks. artikler
Fonte: Links 01 Farver, størrelser og brug Designmanual Borsen.dk 7 Overskrifter Overskrift Link: Helvetica 24 & 16 px. #000000 Hover: Helvetica 24 & 16 px. #1C367A Overskrifter og brødtekster Overskrift Link: Helvetica 24 & 16 px. #000000 Link: Verdana 10 px. #1C367A Hover: Helvetica 24 & 16 px. #1C367A Hover: Verdana 10 px. #990000
Fonte: Links 02 Designmanual Borsen.dk 8 Lister Link: Verdana 11 px. #1C367A Hover: Verdana 11 px. #990000 Link: Verdana 10 px. #1C367A Lister Link: Verdana 10 px. #FEFEFC Hover: Verdana 10 px. #FEFEFC Overskrifter Link: Verdana Bold 11 px. #1C367A Hover: Verdana Bold 11 px. #990000
Fonte: Eksempel 01 Designmanual Borsen.dk 9 Helvetica Bold. 24 px. #000000 Verdana Bold. 11 px. #292B2C Verdana Bold. 10 px. #F2F1F1 Helvetica Bold. 16 px. #000000 Verdana. 11 px. #292B2C Verdana. 11 px. #292B2C Verdana. 10 px. #292B2C Verdana. 11 px. #1C367A Verdana. 9 px. #292B2C Verdana Bold. 9 px. #292B2C Verdana. 10 px. #F1F2F4 Verdana. 10 px. #1C367A Verdana. 10 px. #1C367A Verdana Bold. 9 px. #292B2C Verdana. 9 px. #292B2C
Fonte: Eksempel 02 Designmanual Borsen.dk 10 Verdana Bold. 11 px. #292B2C Helvetica Bold. 16 px. #000000 Verdana Bold. 10 px. #F2F1F1 Verdana. 10 px. #F2F1F1 Verdana. 10 px. #1C367A Verdana. 11 px. #1C367A Verdana Bold 11 px. #292B2C Verdana 11 px.#1c367a Verdana. 10 px. #1C367A Verdana. 11 px. #292B2C Verdana. 10 px. #292B2C Verdana. 11 px. #1C367A Verdana Bold & Normal. 11 px. #292B2C
Ikoner og knapper 03 Farver
Ikoner og knapper: Knapfarver og mål Designmanual Borsen.dk 11 Grafikfarver til knapper RGB: 124 139 178 HEX: #7C8BB2 RGB: 28 54 122 HEX: #1C367A RGB: 114 128 148 HEX: #728094 RGB: 174 182 194 HEX: #AEB6C2 RGB: 153 0 0 HEX: #990000 RGB: 33 161 33 HEX: #21A121 RGB: 82 94 110 HEX: #525E6E RGB: 255 255 255 HEX: #525E6E Mål og farver på knapper Gradient: # D6DBE6 - # F2F6FB # 9EA2AB min. 4 px 16 px # BDC3D0 7 px 9 px Verdana Regular 10 px. # 4E5053
Ikoner og knapper: Ikoner Der skal som grundregl være 6 px luft mellem ikonet og den efterfølgende tekst el. grafik Designmanual Borsen.dk 12 Link til andet område(hvis der vurderes at brugeren skal gøres opmærksom på at han/hun forlader aktuelle område) Booking Email Foran et link, der står alene. F.eks et Søg tidligere artikler link i bunden af en liste Foran link til et Børsen værktøj Foran et link der linker til en Artikel Gem RSS feid Slet Foran et frem link Bagved et tilbage link Foran et link for at vise, at det linker til noget længere nede el. bunden af siden (anker) Indikerer, at linket åbner en PDF-fil Log ind icon Bruges i grå infobox Vigtig infomation Bruges i grå infobox Indhold fra dagbladet Børsen (avisen) Indhold fra Børsen Nyhedstjeneste Print ikon (bruges kun i globalmenuen) Videoikon Lydikon Pinch, et pinched artikel forbliver åbent, når man ekspanderer en anden Pil ned (illustrerer nedadgående tal) Pil op (illustrerer opadgående tal) Tilvalg Zoom ind
Ikoner og knapper: Knapper Designmanual Borsen.dk 13 Rediger Slet
Ikoner og knapper: Ikoner til Artikelarkiv Designmanual Borsen.dk 14 Listeknap efterfulgt af forklarende link Søgeknap efterfulgt af forklarende link Søgeknap Startsiden Aktuel liste / Inaktiv Forrige liste / Inaktiv Næste liste / Inaktiv Bunden af siden / Inaktiv Toppen af siden / Inaktiv Sidste dokument / Inaktiv Første dokument / Inaktiv Forrige dokument / Inaktiv Næste dokument / Inaktiv Udgangsdokument for søgelink / Inaktiv Forrige søgelink / Inaktiv Næste søgelink / Inaktiv Søgelink / Inaktiv Hjælp Ord, der indgår i en ordstreng Ord / ordstrenge, der slutter med Ord / ordstrenge, der begynder med
Menuen 04 Farver
Menu: Oversigt over funktion af menuen Designmanual Borsen.dk 15 Menu default Menu ikke logget ind Min Børsen fungerer som knap
Menu: Foldet ud Menuen er opbygget i niveauer. Klikker man på nyheder, folder menuen sig ud til andet niveau. Klikker man på ugens overblik, vises tredie niveau osv. Nivauerne har forskellige farver, som gør det nemt at se, hvor langt nede i menuen man er Designmanual Borsen.dk 16 Menu foldet ud i 2. niveau Menu foldet ud i 3. niveau Menu foldet ud i 4. niveau
Menu: Mål for grafik Designmanual Borsen.dk 17 Ramme: 1 px. #9EA2AB 27 px 4 px 13 px 14 px Gradient: 5 px. #AFB3BD - #F1F2F4 Afstand: 2 px Afstand: 2 px 13 px 25 px i tilfælde af to linier Afstand: 1 px 13 px Afstand: 1 px Afstand: 1 px Afstand: 1 px 25 px i tilfælde af to linier Afstand: 1 px Afstand: 1 px 13 px 25 px i tilfælde af to linier min. 52 px 5 px Afstand: 4 px Afstand: 2 px 13 px Afstand: 8 px Afstand: 10 px Gradient: 5 px. #AFB3BD - #F1F2F4 14 px 10 px 10 px Stiblet linie: 1 px. #969AA1 10 px 10 px Stiblet linie: 1 px. #969AA1 15 px min. 52 px 5px
Menu: Mål for placering af tekst Designmanual Borsen.dk 18 Verdana Bold. 10 px. #F2F1F1 4 px 5 px 3 px 5 px Verdana Bold. 10 px. #F2F1F1 10 px Verdana Bold. 10 px. #990000 4 px 14 px i tilfælde af to linier 18 px Verdana. 10 px. #990000 26 px Verdana. 10 px. #FFFFFF 19 px Verdana. 10 px. #3C4D7A 11 px 3 px 5 px 4 px Verdana Bold. 10 px. #3C4D7A 15 px 5 px 3 px 4 px Verdana 10 px. #F2F1F1 Verdana 11 px. #3C4D7A 5 px 4 px Verdana 11 px. #3C4D7A
Menu: Overstates Designmanual Borsen.dk 19 Verdana Bold. 10 px. #990000 Verdana 11 px. #990000 Verdana 11 px. #990000 Verdana 10 px. #990000
Bannere 05 Farver
Banner: Mål 01 Designmanual Borsen.dk 20 B0 Topbanner: 728 x 90 px Ramme 1 px. # 8A8D95 B4 Verdana 9 px. #292B2C Banner 300 x 250 px 3 px
Banner: Mål 02 Designmanual Borsen.dk 21 B1 Banner (højre spalte): 240 x 400 px 3 px Verdana 9 px. #292B2C B2 Banner (højre spalte): 140 x 350 px 3 px Verdana 9 px. #292B2C 5 px
Banner: Mål 03 Designmanual Borsen.dk 22 B3 Verdana 9 px. #292B2C 11 px min. 11 px 14 px 14 px 12 px 13 px Verdana 10 px. #1C367A
Banner: Størrelser 01 Venstre spalte er den spalte tættest på menuen. Alle mål angiver bredder på spalterne Designmanual Borsen.dk 23 Skabelon A A W: 240 pix. Venstre spalte : Højre spalte : 454 px 240 px Logo Menu Stor overskrift Banner Global menu / login område Banner/ Fokusområde Højre Menu Afmelding Skabelon B B W: 140 pix. Venstre spalte : Midterste spalte : Højre spalte : 300 px 229 px 140 px Logo Menu Banner Global menu / login område Fokusområde Banner Afmelding Skabelon B2 B2 W: 140 pix. Venstre spalte : Højre spalte : 554 px 140 px Logo Menu Banner Global menu / login område Fokusområde Liste Banner Afmelding Skabelon B3 B3 W: 140 pix. Venstre spalte : Højre spalte : 554 px 140 px Logo Menu Banner Global menu / login område Fokusområde Banner Afmelding
Banner: Størrelser 02 Designmanual Borsen.dk 24 Skabelon C C W: 140 pix. Venstre spalte : Højre spalte : 554 px 140 px Logo Menu Billedområde Banner Global menu / login område Højre menu Banner/ Fokusområde Afmelding Skabelon C2 C2 W: 140 pix. Venstre spalte : Midterste spalte: Højre spalte : 300 px 229 px 140 px Logo Menu Banner Global menu / login område Fokusområde Banner Afmelding Skabelon D D W: 252 pix. Venstre spalte : Højre spalte : 442 px 252 px Logo Menu Banner Global menu / login område Afmelding Skabelon E E W: 240 pix. Venstre spalte : Højre spalte : 454 px 240 px Logo Menu Stor overskrift Banner Global menu / login område Billed + billed tekst Afmelding
Banner: Størrelser 03 Designmanual Borsen.dk 25 Skabelon F1 F1 W: 140 pix. Venstre spalte : Højre spalte : 554 px 140 px Logo Menu Formside Banner Global menu / login område Fokusområde Banner Afmelding Skabelon F2 F2 W: 140 pix. Venstre spalte : 554 px Når opdelt i to Spalte 1 : 265 px Spalte 2 : 265 px Højre spalte : 140 px Logo Menu Formside Banner Global menu / login område Fokusområde Banner Afmelding Skabelon F3 F3 W: 140 pix. Venstre spalte : 554 px Når opdelt i tre Spalte 1 : 168 px Spalte 2 : 168 px Spalte 2 : 168 px Højre spalte : 140 px Logo Menu Formside Banner Global menu / login område Fokusområde Banner Afmelding
Generelle mål 06 Farver
Generelle mål: Toppen / Global menu Designmanual Borsen.dk 26 Generelle mål Ramme 1 px. #8A8D95 Banner 728 x 90 px. 1 px 166 px 19 px 20 px 11 px 16 px 916 px Specifikke mål Verdana Bold 10 px. #F2F1F1 Verdana 10 px. #F2F1F1 Verdana Bold 10 px. #F2F1F1(højrestillet) Verdana 10 px. #F2F1F1 4 px 10 px 12 px 6 px 6 px 6 px 6 px 4 px 4 px Verdana 10 px. #F2F1F1 60 x 12 px. 2 px 3 px 8 px 3 px 12 px 6 px 6 px 6 px 6 px Gradient #7B7775 - #F3E3D6. H; 6 px. 4 px 4 px
Generelle mål: Bunden Designmanual Borsen.dk 27 Gradient #F4E5D8 - #D7CCC4. H; 4 px. 2 px. #294788 Gradient: #213F7A - #1C336B Verdana. 10 px. #FFFFFF Verdana. 10 px. #1C367A 36 px 14 px 19 px 5 px 4 px 20 px 20 px 331 px centreret 916 px
Generelle mål: Forside Afstanden mellem de forskellige moduler og elementer Designmanual Borsen.dk 28 20 px 12 px 12 px 12 px 12 px 12 px 12 px 20 px 23 px 13 px 27 px 15 px 10 px 15 px 14 px 15 px 24 px 10 px 10 px 36 px 956 px
Generelle mål: Skabelon A Designmanual Borsen.dk 29 Afstande mellem de forskellige elementer og de generelle afstande i tekstafsnit 12 px 12 px 15 px 12 px 12 px 45 px 28 px 17 px min. 21 px 15 px 10 px 26 px 39 px 15 px 24 px 21 px 18 px 34 px
Generelle mål: Skabelon C Designmanual Borsen.dk 30 12 px 12 px 12 px 12 px 12 px 12 px 12 px 12 px 21 px 12 px
Generelle mål: Skabelon D Designmanual Borsen.dk 31 12 px 12 px 12 px 12 px 21 px 15 px 10 px min. 10 px 27 px 21 px 10 px 10 px 21 px 10 px
Generelle mål: Popup 01 Her er taget udgangspunkt i en brugervejledning for Artikelarkiv Designmanual Borsen.dk 32 768 px Verdana 11 px. #292B2C Helvetica Bold 24 px. #000000 20 px 12 px 12 px 20 px 18 px 46 px Verdana Bold 11 px. #292B2C 22 px 24 px 26 px 15 px 21 px Verdana Bold 10 px. #292B2C 16 px Verdana 10 px. #1C367A Verdana 11 px. #243B77 Verdana 11 px. #292B2C Verdana 11 px. #292B2C 20 px 16 px 21 px 40 px 40 px 40 px Helvetica Bold 24 px. #000000 fortsættes...
Generelle mål: Popup 02 Popup fortsat Designmanual Borsen.dk 33 Helvetica Bold 24 px. #000000 20 px 20 px 21 px Verdana Bold 11 px. #292B2C 8 px Verdana 11 px. #292B2C Verdana 11 px. #243B77 39 px 10 px 10 px Verdana Bold 10 px. #F2F1F1 min. 6 px 13 px 36 px 14 px 22 px 40 px 40 px Visuelt centreret
Generelle mål: NyhedsTicker Designmanual Borsen.dk 34 300 px 7 px 11 px 16 px 7 px 10 px 14 px 10 px 5 px 7 px 21 px #243B77 256 px Verdana 11 px. #292B2C #F7E7DA min. 18 px 6 px Verdana Bold 10 px. #F2F1F1 11 px 34 x 13 px 16 px 13 px Verdana 10 px. #292B2C Verdana 9 px. #1C367A 26 px Verdana 11 px. #292B2C Verdana 10 px. #1C367A 18 px Verdana 9 px. #F2F1F1 Verdana 11 px. #1C367A
Grafik elementer 07 Farver
Grafikelementer: Content stibler Designmanual Borsen.dk 35 Den vandrette stiblede streg bruges mellem modulerne, og aldrig efter det sidste modul på en side. Bemærk at luften fra grafikelement eller tekst, kan variere i de grå bokse. (se undermoduler) 12 px 12 px 1 px. #969AA1 Mellemrum -> 1 x 2 px. 1 px. #969AA1 Mellemrum -> 2 x 1 px. 15 px 10 px
Grafikelementer: Boks Designmanual Borsen.dk 36 Den grå boks: Bruges til f.eks. link-samlinger såsom mest læste nyheder og billedtekstboks 2 px 2 px H: 16 px. Gradient: #DCE0E4 - # F1F2F4 Bg. & Skalerende farve # F1F2F4 Ramme 1 px. #9EA2AB Den grå/hvide boks: Bruges til f.eks grafer m. overskrifter el. kurstal 1 px. #F1F2F4 50 px 1 px. #9EA2AB Mellemrum -> 1 x 2 px. 1 px. #9EA2AB 12 px. Gradient: #FFFFFF - #F2F3F5 3 px. #FFFFFF 3 px. #FFFFFF 3 px. #FFFFFF
Billedstørrelser 08 Farver
Billedstørrelser: 01 Designmanual Borsen.dk 37 Forsiden 227 x 179 px Ramme 1 px # 8A8D95 99 x 75 px Ramme 1 px # 8A8D95 99 x 75 px Ramme 1 px # 8A8D95 99 x 75 px Ramme 1 px # 8A8D95 A 227 px. x variabel Ramme 1 px # 8A8D95
Billedstørrelser: 02 Designmanual Borsen.dk 38 B 99 px Ramme 1 px # 8A8D95 138 px Ramme 1 px # 8A8D95 162 x 227 px Ramme 1 px # 8A8D95 64 x 87 px Ramme 1 px # 8A8D95 99 x 132 px Ramme 1 px # 8A8D95 99 px 99 x 63 px Ramme 1 px # 8A8D95 Ramme 1 px # 8A8D95 227 px Ramme 1 px # 8A8D95 B1 227 px Ramme 1 px # 8A8D95 138 px Ramme 1 px # 8A8D95 138 x 195 px Ramme 1 px # 8A8D95
Billedstørrelser: 03 Designmanual Borsen.dk 39 F3 140 x 195 px Ramme 1 px # 8A8D95 E Rammer 1 px # 8A8D95 238 x 168 px
Billedstørrelser: 04 Designmanual Borsen.dk 40 F1 99 px Ramme 1 px # 8A8D95 D 250 x 75 px Ramme 1 px # 8A8D95 99 px Ramme 1 px # 8A8D95 99 px Ramme 1 px # 8A8D95
Tabeller og Input-felter 09 Farver
Tabeller og input-felter: Tabelmål Designmanual Borsen.dk 41 1 px 121 px min. 4 px 4 px 21 px 21 px 14 px 28 px Verdana. 11 px. #292B2C : 14 px Verdana Bold. 11 px. #292B2C Verdana Bold. 11 px. #1C367A H: 11 px. #FFFFFF H: 17 px Verdana. 11 px. #292B2C : 13 px : 14 px 14 px H: 24 px #FFFFFF H: 30px
Tabeller og input-felter: Input-felter 01 Designmanual Borsen.dk 42 Imput-felter bliver defineret specielt til hver enkelt brug. Disse mål er derfor vigtige, når der bliver lavet et el. flere nye felter m.m. Verdana. 11 px. #292B2C 10 px 10 px 26 px 4 px 18 px 15 px 10 px 10 px 5 px 4 px 10 px 10 px 18 px Verdana. 10 px. #292B2C 6 px 10 px 12 px 12 px 10 px 10 px 9 x 9 px 26 px 17 px 4 px 17 px
Tabeller og input-felter: Input-felter 02 Designmanual Borsen.dk 43 Inputfelter: Verdana Bold. 10 px. #292B2C Verdana. 11 px. #292B2C : 13 px 6 px 10 px 10 px 26 px 25 px 26 px 4 px 18 px 17 px 21 px Verdana. 10 px. #292B2C Verdana. 11 px. #292B2C : 13 px 25 px 10 px 10 px 4 px 18 px 15 px 15 px 15 px
Skabelonoversigt 10 Farver
Skabelonoversigt: 01 Designmanual Borsen.dk 44 A 454 px 240 px B 554 px 140 px Logo Banner Logo Banner Global menu / login område Global menu / login område Menu Stor overskrift Banner Menu Fokusområde Højre Menu Banner Afmelding Afmelding 300 px 229 px B1 554 px 140 px B1 554 px 140 px Logo Banner Logo Banner Global menu / login område Global menu / login område Menu Fondsbørsen Fokusområde Menu Stor overskrift Info box Fokusområde Samme skabelon Overskrift Banner Banner Overskrift Afmelding Afmelding 300 px 229 px 300 px 229 px B2 554 px 140 px B3 554 px 140 px Logo Banner Logo Banner Global menu / login område Global menu / login område Menu Fokusområde Menu Fokusområde Liste Banner Banner Afmelding Afmelding
Skabelonoversigt: 02 Designmanual Borsen.dk 45 C2 554 px 140 px C 554 px 140 px Logo Banner Global menu / login område Logo Banner Global menu / login område Menu Fokusområde Menu Billedområde Højre menu Banner Afmelding Afmelding 300 px 229 px D 719 px D 442 px 252 px Logo Banner Logo Banner Global menu / login område Global menu / login område Menu Menu Samme skabelon Afmelding Afmelding 442 px 252 px E 454 px 240 px E1 719 px Logo Banner Global menu / login område Logo Banner Global menu / login område Menu Stor overskrift Billed + Menu billed tekst Afmelding Afmelding
Skabelonoversigt 03 Designmanual Borsen.dk 46 F1 554 px 140 px Logo Menu Formside Banner Global menu / login område Fokusområde Banner Afmelding
Moduler 11 Farver
Moduler: Lister 01 Designmanual Borsen.dk 47 A3 A4
Moduler: Lister 02 Designmanual Borsen.dk 48 A5
Moduler: Lister 03 Designmanual Borsen.dk 49 A6
Moduler: Lister 04 Designmanual Borsen.dk 50 A7
Moduler: Lister 05 Designmanual Borsen.dk 51 A8
Moduler: Lister 06 Designmanual Borsen.dk 52 L1 L2
Moduler: Top 01 Bruges i toppen af nyhedsartikler, som en værktøjslinie der knytter sig til artiklen Designmanual Borsen.dk 53 A1
Moduler: Overskrifts baggrund Vær opmærksom på, at mange moduler allerede indeholder en blå topboks, og modul H er derfor til særlige tilfælde Designmanual Borsen.dk 54 H 6 px # 243B77 Efterfulgt af tekst 3 px 21 px 14 px Gradient fra # BDADA0 til # F7E7DA Efterfulgt af tekstboks 4 px Overskrift ombrudt i to linier 12 px 26 px 5 px Overskrift efter ikoner 7 px
Moduler: Infoboks Infoboksen bliver brugt til at sætte fokus på generelle informationer. F.eks hvis man som bruger ikke er logget på borsen.dk, kan boksen bruges til at gøre opmærksom på dette og linke til relevant abonnement tilbuds side Designmanual Borsen.dk 55 J
Moduler: Tekst og billeder 01 A2-modulet behøver nødvendigvis ikke at indeholde både billede og graf. De kan frit klikkes fra og til. Teksten kan derfor også stå alene Designmanual Borsen.dk 56 A2
Moduler: Tekst og billeder 02 Designmanual Borsen.dk 57 A9 A10 A11
Moduler: Tekst og billeder 03 Designmanual Borsen.dk 58 A14 D1
Moduler: Tekst og billeder 04 Designmanual Borsen.dk 59 E1
Moduler: Tekst og billeder 05 Designmanual Borsen.dk 60 E2 E3
Moduler: Tekst og billeder 06 Designmanual Borsen.dk 61 E4 E4 Special
Moduler: Tekst og billeder 07 Designmanual Borsen.dk 62 E5
Moduler: Tekst og billeder 08 Designmanual Borsen.dk 63 E6
Moduler: Tekst og billeder 09 Designmanual Borsen.dk 64 F1 F2
Moduler: Custom 01 Custon-modulerne er specialdesignet til det specifikke indhold Designmanual Borsen.dk 65 K K2
Moduler: Custom 02 Designmanual Borsen.dk 66 C3 C6
Moduler: Custom 03 Designmanual Borsen.dk 67 C8
Moduler: Custom 04 Designmanual Borsen.dk 68 C11
Moduler: Custom 05 Designmanual Borsen.dk 69 C15
Moduler: Custom 06 Designmanual Borsen.dk 70 C16 C17 C17 02
Moduler: Custom 07 Designmanual Borsen.dk 71 C18 C21
Moduler: Custom 08 Designmanual Borsen.dk 72 C23
Subsites 12 Farver
Subsites: Generelle mål I dette afsnit ses overordnede retningslinier for subsites plus eksempler på mulige farver. Designmanual Borsen.dk 73 Et subsite er opbygget på samme måde som borsen.dk og skal derfor følge de samme mål for tekstafstande og placering af grafikelementer. Adskillelsen ligger i farven af grafikker, ikoner og menu-links. Der foreslås at valg af farver til subsites understreger indholdet og målgruppen 20 px 172 px 12 px 12 px 254 px 12 px 12 px 255 px 12 px 12 px 20 px 78 px Verdana Bold 10 px. #849EB1 Verdana Bold 10 px. #004B81 37 px 27 px 21 px 32 px 15 px 10 px 21 px 36 px 11 px #23689F
Subsites: Firmabilen undersider 01 Designmanual Borsen.dk 74
Subsites: Firmabilen undersider 02 Designmanual Borsen.dk 75
Subsites: Firmabilen undersider 03 Designmanual Borsen.dk 76
Subsites: Firmabilen undersider 04 Designmanual Borsen.dk 77
Subsites: Firmabilen undersider 05 Designmanual Borsen.dk 78
Subsites: Farveksempler 01 Designmanual Borsen.dk 79 Tile med gradient RGB: 36 36 36 HEX: #242424 Tile med gradient RGB: 177 0 0 HEX: #B10000 Tile med gradient RGB: 137 46 91 HEX: #892E5B
Subsites: Farveksempler 02 Designmanual Borsen.dk 80 Tile med gradient RGB: 123 178 208 HEX: #7DB3DC Tile med gradient RGB: 30 128 128 HEX: #1E8080 Tile med gradient RGB: 148 148 148 HEX: #949494
Subsites: Farveksempler 03 Designmanual Borsen.dk 81 Tile med gradient RGB: 41 7 113 HEX: #290771 Tile med gradient RGB: 75 63 40 HEX: #4B3F28 Tile med gradient RGB: 182 161 121 HEX: #B6A179
Subsites: Farveksempler 04 Designmanual Borsen.dk 82 Tile med gradient RGB: 36 57 95 HEX: #24395F Tile med gradient RGB: 229 142 222 HEX: #E58EDE Tile med gradient RGB: 255 173 0 HEX: #FFAD00
Subsites: Farveksempler 05 Designmanual Borsen.dk 83 Tile med gradient RGB: 35 104 159 HEX: #23689F Tile med gradient RGB: 87 142 72 HEX: #578E48
Subsites: Eksempel Eksempel på et andet subsite. Opbygningen er den samme som på Firmabilen, men adskiller sig tydeligt ved brug af andre farver i top, overskrifts baggrunde og grafik. Designmanual Borsen.dk 84