Slægtshistorisk Forening Odense

BjørnØ – Gruppen Multimedieteknologi

Wan Mei Kan, og Interaktions-

Simon Nielsen, design.

Daniel Hjorthmose, Hold 1012 - Odense

Kent Gottschalk Underviser:

Hansen og Per Rasmussen

Halfdan

Pommerencke.

Projektopgave©Bjoernoegruppen

Side 1 af 30

Praktisk information:

Kontakt til gruppen:

Wan Mei Kan wumy@hotmail.com

Simon Sune Nielsen ssn@webspeed.dk

Daniel Hjorthmose hjorthmose80@gmail.com

Kent Gottschalk Hansen kentgottschalk@gmail.com

Halfdan Pommerencke englebo@gmail.com

Link til vores forslag til et site;

http://phpkursus.tietgen.dk/1012/bjoernoe/wp/

Side 2 af 30

Indholdsfortegnelse:

Side:

1 Praktisk information.

2 Indholdsfortegnelse.

3 Forord.

5 Foranalysen – Kundemødet.

7 Undersøgelsen – Idéudvikling og projektplan.

13 Design.

* Flowchart.

* Storyboard.

* De 6 design parametre.

* Designmanualen (bilag 1)

21 Realisering af hjemmesiden.

25 Evaluering af arbejdet i gruppen.

27 Bilag 1

Side 3 af 30

Forord

Side 4 af 30

FORORD

I vores arbejde med at skabe den perfekte hjemmeside til

Slægtshistorisk Forening Odense, her vi været vidt omkring i vores

ideer og ideudvikling.

Fra underviserens side, har der fra starten været nogle ufravigelige

parametre at følge.

1. Der skal laves et redesign af Slægtshistorisk Forening Odenses

hjemmeside.

2. Arbejdet med projektopgaven skal foregå i grupper.

3. Hjemmesiden skal laves i WordPress.

4. Websitet skal have et omfang på 3 til 4 sider.

5. Projektopgaven skal følge HOME modellen.

6. Skal indeholde en tidsplan.

7. Grafiske virkemidler, stil stemning, komposition og

præsentation.

8. Informationsdesign, interaktionsdesign og præsentationsdesign.

9. Skal redegøre for brugen af de 4/6 designparameter.

10. Skal vise arbejdet fra ide til endeligt resultat.

11. Skal indeholde et flowchart, storyboard og skelet.

12. Skal redegøre for Poynter eye-tracking.

13. Skal indeholde en designmanual.

14. Skal indeholde en vurdering af samarbejdet i gruppen.

15. Skal indeholde kontaktinformation.

16. Skal indeholde link til hjemmesiden som gruppen har lavet.

Eksempler på

billeder af

forskellige

overflader. Brugt

i forbindelse

med design.

Side 5 af 30

Foranalyse - Kundemødet

Side 6 af 30

Foranalysen

Formålet med foranalysen er at fremskaffe et

tilstrækkeligt informationsgrundlag, for at kunne for en

ide om hvordan vi skal gribe opgaven an.

Vi startede vores foranalyse med at gøre os nogle

overvejelser omkring spørgsmål til kunden.

Ved vores møde med kunden Arne, fik vi en masse

nyttig information.

- Der er et gammel site, som skal redesignes, fra

bunden af. Den er lavet i et system der ikke

længere er understøttet af div. servere.

- Sitet skal både kunne tiltrække nye

medlemmer samtidig med, at det skal kunne

servicere eksisterende medlemmer.

- For tiden er alderen for medlemmerne 60+

år og en del er over 70 år.

- Der er et ønske om, at kunne tiltrække lidt

yngre medlemmer.

- Det er vigtigt der er en ”Møde” side og en

”Links” side, da det er disse to der bliver brug

mest af eksisterende medlemmer.

- Siden henvender sig til danskere primært

Fynboer.

- Foreningen vil selv efterfølgende vedligeholde

siden.

Det site der ønskes et redesign af, ser i dag sådan ud.

Efter mødet havde vi en uformel snak med Arne. På ham kunne vi forstå, at det

han finder mest spændende ved slægtsforskning er, at finde sjove og

spændende historier om slægten. Der er også dem som går efter at finde flest

slægtled, eller egns historier.

Vi har derfor i vores videre ideudvikling haft fokus på ”den gode historie” om

slægten og ment at det kunne være med til at give sitet sin berettigelse.

Udviklingsmetoden, der bruges er prototyping, dog uden så meget

brugerkonsultation, men der er sat lidt tid af i løbet af projektet til af få kundens

mening om det foreløbige design.

Side 7 af 30

Undersøgelse -

Ideudvikling og projektplan

Side 8 af 30

Undersøgelse – Ideudvikling og tidsplan

Det første vi gjorde i gruppen var at udforme en

tidsplan. Vores tidsplan for projektet kan du se til højre.

Som udgangspunkt var det et estimat, men det har vist

sig at holde nogenlunde.

Timerne er beregnet som timeforbrug pr. person i

gruppen.

Efter vi havde lagt den grundlæggende projektplan, gik

vi videre til idéudviklingen.

Vi arbejdede her primært med ”mindmaps”.

Du kan se nogle eksempler på den næste side.

Vi arbejdede med, at sætte forskellige ord i centrum. Vi

tog blandt andet udgangspunkt i ordene…

Task/opgave Estimater Faktuelt

Foranalyse 4h 5h

Kundemøde, ramme og indhold 4x1h 4x1h15m

Undersøgelse 19h 10h

Ideudvikling 4x1h + 5x3h 4x20m + 5x1h30m

Design (5x12h) = 60h 47h

Flowchart 5x2h 15h

Storyboard 5x2h 30h

Skelet 5x2h 1h

Designmanual 5x6h 1h

Realisering (5x24h) = 120h

115h

Hjemmeside 5x12h 50h

Rapport 5x12h 65h

Total 203h 177h

Vores estimerede tidsforbrug og faktiske tidsforbrug

Side 9 af 30

Historie Odense Slægt

Side 10 af 30

Visuelle elementer.

Efter at have arbejdet på at spore os ind på nogle ideer

ved hjælp af mindmaps, gik vi videre til at arbejde lidt i

ideer til visuelle elementer til sitet.

Vi arbejdede i skitser, et eksempel herpå kan ses her til

højre.

Af de ideer der kom frem, var der mest interesse for, at

arbejde videre med ”stamtræet” og ”bøger”.

Ud over det ville vi gøre brug af gamle slægtsbilleder.

Som det der er vist her.

Dette billede brugte vi til forsiden.

Side 11 af 30

Logo, header mv.

Vores næste skridt gik på at udvikle en ide til logo og

hvordan header på sitet skulle se ud.

Vi havde en del snak omkring foreningens logo. Vi var

omkring at lave det om til et laksegl eller helt at

undlade det. Vi besluttede til sidst, at lade det indgå og

forblive som det er i dag. Dels fordi der oftest er en del

følelser knyttet til foreningers logoer, og dels for at

beholde noget fra det gamle site, som ville være

genkendeligt for de nuværende medlemmer.

Herover er et eksempel på en af vores skitser for

hvordan header kunne se ud. Vi har her leget med

logoet som et laksegl.

I det endelig resultat valgte vi en meget simpel header,

dels fordi det passede godt med det ”tema” vi valgte

som gennemgående for sitet, og for at det skulle være

tydeligt hvad dette site handler om.

Side 12 af 30

Ideudvikling afslutningsvis.

Vi valgte at henlægge en af vores arbejdsdage til

Bjørnø, beliggende i Faaborg fjord.

Her ville vi starte arbejdet med design af hjemmesiden.

For at finde inspiration til hjemmesiden valgte vi at gå

en tur rundt på øen, og se om vi ikke kunne finde

nogen spændende overflader, med en interessant

struktur. Noget der ville signalere ”Slægtsforskning”.

Her til højre, kan du se nogle af de billeder vi tog.

Efter gode lange snak om farver, underlag og

baggrundsfarver, fonter mv. faldt vores blik på dette

billede…

… at tage udgangspunkt i et gammelt

bindingsværkshus, passede rigtig fint med vores

ambition om at holde sitet i et simpelt design.

Et enkelt site, med sort og rødbrun farve og grå

tekst på en hvid baggrund og tykke sorte bjælker,

som illustration.

Vores inspiration til hjemmesiden

Side 13 af 30

Design – Flowchart, Storyboard, designparametre og

designmanual

Side 14 af 30

Design (overordnet)

Overordnet besluttede vi os for at holde siden

forholdsvis simpel. Grunden til dette var, at vi ville

holde siden let at læse og benytte. Dette passer til den

ene af de to målgrupper siden er henvendt til, nemlig

den del af brugerne, som allerede kender siden og som

generelt set er lidt ældre. For dem vil det være vigtig at

kunne navigere nemt rundt på siden, og dette opnår vi

ved ikke at komplicere siden for meget.

Informationsdesign/ indledende omkring design

Ud fra foranalysen og indsamling af information fra

kunden/brugeren fandt vi ud af, hvilke informationer

som var vigtigst at have med i redesignet af siden. Vi

kiggede også lidt på konkurrerende hjemmesider for at

se, om der var yderligere elementer vi kunne tage med

i den nye side, men endte med at holde os til

kundens/brugerens ønsker, da de var de mest

væsentlige i forhold til siden nuværende brug og

funktion.

De væsentligste ønsker var her, at deres oversigt over

møder og links(en side som indeholder eksterne links,

som bruges i forbindelse med slægtsforskning) skulle

være til stede. Disse er derfor placeret i hovedmenuen,

hvor de er nemme at komme til hurtigt. Dette gør, at

brugere af siden nemt og hurtigt kan tilgå disse. Dette

er ikke så anderledes fra den gamle side, hvor disse

sider også er vigtige.

En vigtig grund til at den nuværende side trænger til et

redesign, er at den umiddelbart ikke fanger den

besøgendes interesse. Derfor har hjemmesiden måske

svært ved at få kommunikeret dens budskab hurtigt ud

til den besøgende. Vi har i vores redesign lagt vægt på,

at den nye side skal være nem og hurtig at afkode, dvs.

at forsiden er forholdsvis simpel, der står de vigtigste

budskaber, og ikke så meget andet der kan forvirre en

bruger. Derudover har vi prøvet, at gøre den nye side

mere interessant og fængende, ved at placere logo,

foreningsnavn og blikfang i de områder på

hjemmesiden, som brugerens øjne først ser, jævnfør

Poynter eye-tracking.

Vha. logo og navn får brugeren hurtigt information om

hvem og hvad siden handler om, og via blikfanget kan

brugeren blive fristet til at blive lidt længere på siden

mere end 3-4 sekunder.

Udsnit af hjemmesidens Header og Menubar

Side 15 af 30

Flowchart, storyboard og skelet

Interaktionsdesign og flowchart

Vores flowchart er en forsimpling og forbedring, i

forhold til den gamle side, hvor navigationen rundt på

sitet ikke var optimalt og led af gamle standarter. Fra

undersiderne var det kun muligt at gå tilbage til

forsiden – men ikke andre hovedmenupunkter.

Sitet:

Opbygningen starter som standard med Home, som er forsiden, og

deler sig derefter ud på 6 deciderede undersider, som hele tiden kan

føres tilbage til forsiden igen.

Det hele er lavet med en simpel menubar for oven på sitet, som står

som et fast element på hele websitet, uanset hvilken underside man

vælger at se på.

I fælles forum fandt vi den måde vi syntes var mest logisk, at bygge

sitet op på.

Fordelene ved det nye site, kan udtrykkes i ordene,

Brugbar

Brugervenlighed

Overskuelighed

Flowchart for vores site.

Side 16 af 30

Præsentationsdesign og storyboard

Efter vi fik lavet en overordnet plan for, hvordan

hjemmesiden skulle hænge sammen vha. et flowchart

under interaktionsdesign delen, begyndte vi at arbejde

med, hvordan informationen på hjemmesiden skulle

præsenteres for brugerne.

Vi tænkte over forskellige opsætninger af selve

websiden, men kom rimeligt hurtigt frem til en idé for

præsentation af forsiden. Denne idé var at have en

header i toppen indeholdende logo, navn på foreningen

og en horisontal menubar. Dernæst et blikfang i form af

et eller flere skiftende billeder i midten til venstre af

siden. Til højre for denne en kort beskrivelse af

hjemmesidens/foreningens formål og nederst to feeds

over de seneste møder og historier. Ud fra denne ide til

præsentation lavede vi et initialt storyboard for siden:

Skitsen lavede vi således, at vi havde fast header og

footer, og hvor vi så kunne udskifte content-området.

Dette gjorde, at vi kunne bruge samme header og

footer til også at give en præsentation af andre sider på

hjemmesiden. Så vi lavede derefter hurtigt skitser, for

hvordan strukturen skulle være for siderne for

hovedmenupunkterne og for strukturen for hver enkelt

historie og møde. Disse skitser for content-området kan

ses på næste side.

Side 17 af 30

Eksempel på ”Blikfang”

Eksempel på ”Blikfang”

Side 18 af 30

Baggrunden for dette samlede layout af siden har flere

begrundelser. En af de meget vigtige ting for dette

redesign af kundens hjemmeside, var ifølge ham selv,

at en ny side hurtigt skulle fange nye besøgendes

opmærksomhed og give dem lyst til at blive på siden og

læse mere. Derfor har fokus for forsiden været hurtigt

at give en besøgende indtryk af, hvad siden handler

om(denne information formidles i headeren gennem

logo og foreningsnavn, og man kunne også tilføje et

sigende baggrundsbillede, måske af en skitse af et

stamtræ) og fastholde brugerne vha. af blikfang, som

ligger centralt og til venstre på siden. De steder, hvor vi

placerede disse informationer, passer godt overens med

Poynter eye-tracking studierne, da brugerens øjne løber

henover disse steder, som noget af det første på

hjemmesiden.

Afsluttende omkring præsentationsdesign og

storyboard, skal nævnes, at vores slutprodukt endte

med at afvige lidt fra det tidligere udkast.

Nyhedssektionen blev flyttet og et feed med de seneste

nyheder blev tilføjet til startsiden sammen med de to

tidligere feeds. Derudover flyttede vi også en sidebar på

undersiderne fra at ligge i venstre side til at ligge i

højreside, således at det vil være undersidens indhold

som først for fokus fra brugeren i stedet for

undersidens sidebar.

Skelet for hjemmesiden:

Vi har taget udgangspunkt i det gridsystem, som er

indbygget i Bones temaet. Det er et 12 kolonne grid

med en bredde på 960px.

Vi valgt ikke at udforme et egentligt skelet før vi

begynder på at realisere hjemmesiden, men har i

stedet tilpasset vores storyboard til gridsystemet.

Billede fra vores arbejdsbord

Side 19 af 30

De 6 design parametre

Form

Typografi

Illustration

Farver

Animation

Lyd

Form

Vi har valgt at gøre hjemmesiden let, luftig og

overskuelig og har vægtet at fokusere på de elementer,

som kunden synes er vigtige for dens brugere dvs.

siderne arrangementer og links. For at fremhæve at det

er en lokal forening med fokus på historiefortælling, har

vi oprettet siden fortællinger, som gør det muligt for

brugerne at fortælle om deres slægtshistorie i form af

blogindlæg.

Forsiden består af header, hvori foreningens navn og

logo indgår samt et søgefelt. I header er også tilføjet et

slogan vi har skabt for at uddybe temaet for

hjemmesiden samt et søgefelt. Under header er

menuen placeret. Header og menu går igen på alle

sider.

På forsiden har vi placeret et slide show af billeder med

billedtekst, og siden er derudover opbygget af en spalte

til venstre for billedet, hvor tekst kan indsættes og tre

spalter under slide showet, som er autogenereret. Helt

nederst på siden er footer placeret, og den går igen på

alle sider.

De øvrige sider består spalter med tekst placeret til

venstre, mens der er gjort plads til små funktionelle

elementer til højre.

Side 20 af 30

Typografi

Typografien vi har valgt at anvende er Tahoma og Segeo UI,

da vi ønsker en letlæselig enkel typografi, som ikke er for

snørklet, da det kan være medvirkende til at læsbarheden

nedsættes, og at hjemmesidens budskab derved ikke

kommer i gennem til brugeren. En enkel typografi nedsætter

støj og fremmer læsbarheden.

Vi har anvendt læsetekst med fast forkant samt løs bagkant

og opnår derved at mellemrum i mellem ordene bliver

ensartet.

Illustration

Da vi kun har 3-4 sekunder til at fange en brugers

opmærksomhed, har vi på forsiden anvendt fotos som

blikfang i et slide show, så brugerne ikke nøjes med kun at

se et billede, men at de ser en variation af billeder, som gør

siden mere interessant at komme tilbage til.

Farver

Til hjemmesiden har vi primært valgt at anvende monokrome

farver sort, hvid samt grå og som supplement rød.

Wrapperen er hvid og typografien grå. Links er røde med

understregning i rød.

Hovedmenuen består af sort baggrund med hvid font, når

den er inaktiv. Når musen scrolles henover, bliver

baggrundsfarven hvid med en understregning i rød, og

fonten bliver sort. Et aktivt hovedmenupunkt får samme

udtryk, som når musen scrolles henover.

Undermenuen består af en grå baggrund med hvid font, når

den er inaktiv. Når musen scrolles henover, bliver

baggrunden hvid med understregning i rød og fonten bliver

sort. Et aktivt undermenupunkt får samme udtryk, som når

musen scrolles henover.

Farverne er valgt efter vores inspiration, et hvidt hus med

sort bindingsværk og rødlige vinduer. Vi har ønsket at opnå

et enkelt udtryk med hjemmesiden og til det er variationer

på sort og hvidt et klassisk farvevalg, som gør at

hjemmesiden fremstår klart og tydeligt.

Den røde farve adskiller sig markant fra både den sorte og

hvide farve og gør, at linksene er nemme at finde, mens den

grå farve er anvendt som kontrast til den hvide font i

undermenuen og adskiller sig derved fra hovedmenuen.

Animationer og lyd

Vi har på hjemmesiden ikke gjort brug af animationer og lyd,

men de er en del af de 6 designparametre.

Vi har fravalgt animation og lyd for at fasteholde det simple

og lette udtryk på sitet.

Thxgpa NB! For designmanual se bilag 1.

Side 21 af 30

Realisering af hjemmesiden

Side 22 af 30

Realisering af website

På forhånd var det givet at sitet skulle laves i CMS

systemet Wordpress. Valget af Wordpress giver en

række fordele. Administrationens grænseflade er meget

brugervenlig for redaktører. Desuden er det rimeligt

enkelt for udviklere, at producere temaer via nogle få

CSS og PHP filer. Ulempen ved Wordpress kan være at

det ikke er så godt, hvis man ønsker at udvikle meget

data og formular tunge websites, men dette er ikke

tilfældet ved dette website.

Processen kan deles op i følgende -> valget af tema ->

udvikling af sideskabeloner -> implementering af

plugins -> kodning af CSS -> overvejelser om

videreudvikling.

Valget af Tema

Det første valg vi skulle træffe, inden vi begyndte at

udvikle websitet, var hvilket tema vi skulle bruge som

udgangspunkt. Vi diskuterede en række forskellige

typer af temaer:

Basis tema – som er beregnet på, at det meste

af layout laves direkte i HTML, PHP og CSS.

Design tema – hvor der er lavet en masse

design, som man synes passer til ens projekt.

Indstilling tema – tema, hvor der kan laves en

masse tilpasninger i design fra Wordpress

administrations sider.

Vi valgte et basis tema, da det ville gives os de bedste

muligheder for at tilpasse temaet præcis til det vi

ønskede. Hvis vi havde valgt et indstillingstema vil der

altid være ting som ikke kan indstilles og hvis vi havde

valgt et design tema, havde vi lagt os fast på et design

på forhånd.

Temaet hedder Bones ( som i Barebone) og kan findes

på http://themble.com/bones/. Temaet indeholder

basis PHP og CSS filer, er skrevet i HTML5 og har

indbygget gridsystem.

Side 23 af 30

Sider

En af fordelene ved at benytte et basis tema er at det

gør udviklingen af forskellige sideskabeloner mere

overskueligt.

Til forsiden er der udviklet en særlig sideskabelon

(home-page.php). I denne skabelon er der fire widget

områder, hvor der kan indsættes widgets. Desuden er

der indsat en Nivo Slider, som er et plugin til

Wordpress, som kan vise en række billeder med

tilhørende billedtekst og link.

Nyhedssiden er Wordpress standard blogsiden

(index.php), som normalt vil ligge på forsiden.

Fortællingssiden er en særlig sideskabelon, som kan

vise indholdstypen fortællinger.

Linkssiden er en særlig sideskabelon, hvor der ikke er

nogen ”sidebar”.

Resten af siderne er almindelige Wordpress sider

page.php).

Plugins

Vi har valgt at bruge følgende plugins:

Contact Form 7 – kontaktformular plugin –

shortcode indsat på kontaktside

Event Manager – arrangement plugin –

indsætter sider og custom post type

Nivo Slider – kode indsættes i sideskabelon

Display widgets – gør det muligt at indstille på

hvilke sider et widget skal vises

CSS

Bones temaet kommer med et basis stylesheet, som

alligevel er ret avanceret. Der er således indbygget et

simpelt grid system ”960.gs”. Gridsystemet gør det

nemmere at få elementerne på siden til at stå pænt og

float’e rigtigt. Desuden er der i stylesheet og temaet

generelt bygget på HTML boilerplate, som er en

skabelon til at få en webside til at kunne vises

nogenlunde ens i forskellige browsere på tros af

forskellige fortolkninger af særligt HTML5 og CSS3.

WP Nivo Slider

Side 24 af 30

Der er brugt skriften Segeo UI som overskrifter.

Skriften er standard på nyere Windows systemer.

For at skriften også skal kunne ses på Windows XP,

Mac og Linux er der indlejret en font ved brug af

@font-face.

Bones temaet findes også i en responsive udgave,

som ved hjælp af media query kan tilpasse sitet til

forskellige skærmstørrelser. Vi har valgt ikke at

bruge responsive, da det vil være et meget stort

arbejde at få helt rigtigt. Kunne evt. være et

fremtidigt udviklingsmål.

Videreudvikling

Fremtidig udvikling kunne bestå i:

Responsive design

Arrangementer kan sendes til Google

Calendar

Forskningsarkiv, så man kan se de områder

medlemmerne forsker i, således at man kan

trække på hinandens erfaringer.

Forside skitse Der blev holdt et kort møde med kunden i løbet af

projektet, hvor kunden så et udkast til redesignet. Han kom

med et par kommentarer til designet, f.eks. lød det til at

kunden var meget interesseret i, om der var muligt med

statistik på siden og om man kunne linke den kalender på

siden kundens/brugerens egen kalender(google/outlook).

Han ville gerne have at forside billedet kunne skifte, så det

kunne fange den besøgende. Dette var allerede en del af

planen, men ikke implementeret i den prototype kunden så.

Side 25 af 30

Evaluering af arbejdet

i gruppen.

Side 26 af 30

Evaluering af arbejdet.

Vi besluttet fra en start af, at alle så vidt muligt skulle

være med inden over alle opgaver.

For at skabe det bedst mulige resultat, har vi sat en

tovholder på de enkelte opgaver. Vi valgte som

udgangspunkt de gruppemedlemmer, som have de

bedste kompetencer for at løse den enkelte opgave.

Undervejs har vi så arbejdet i underteams på de

enkelte opgaver, og løbende ændret

sammensætningen af dem, så alle kom i berøring med

alle dele af projektet.

Det har som udgangspunkt fungeret ok, men det ville

have været mere optimalt med en lidt mindre gruppe,

for så ville hvert medlem af gruppen skulle arbejde med

flere aspekter af hjemmesiden og rapporten.

Vi har i vores opgaveløsning oplevet et godt

samarbejde og at vi har været gode til at

komplementere hinanden.

Vi er glade for det produkt vi er kommet frem til og har

alle lært en god del i vores projektarbejde.

Side 27 af 30

Bilag

Side 28 af 30

BILAG 1.

Designmanual

CMS

WordPress

Tema

Bones, classic version.

Kan finds her: http://themble.com/bones/

Font

Brødtekst og links:

font-family: Tahoma

font-size: 13px

Headlines, h1-h5:

font-family: Segoe UI

font-size h1: 2.5em

font-size h2: 1.75em

font-size h3: 1.125em

font-size h4: 1.4em

font-size h5: 0.846em

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

Side 29 af 30

Farver:

Menu baggrundsfarve #000000

Menu tekstfarve #FFFFFF

Menu baggrundsfarve hover #FFFFFF

Menu tekstfarve hover #000000

Undermenu baggrundsfarve #555555

Undermenu tekstfarve #FFFFFF

Undermenu baggrundsfarve hover #FFFFFF

Undermenu tekstfarve hover #000000

Menu “underline” #CC0000

Brødtekst farve #333333

Links #CC0000

Links hover #F05E81

Markerede kalenderpunkter #FD7E29