Jeg har den ide at designet skal være en modsætning til det mere dunkle design som er på sitet – på nuværende tidspunkt. Dog uden at jeg ønsker at ændre på typografi og elementer, da jeg synes de fungere rigtig godt. For længe siden faldt jeg over et tegnet landskab, som så lækkert ud. Jeg synes at det vil virke frisk at anvende dette naive og glade stykke grafik.

Farvepaletten
Jeg vil gerne holde farvepaletten i samme farver som landskabet – derfor tager jeg en farveprøve. Jeg har konstateret at den grønne der ca. er midtimellem den mørkeste og lyseste farve er #406B12.

Nu kan jeg så oprette min paletten oprette et Photoshop dokument. Tegner et kvadrat og sætter dets farve til #406B12 duplikerer kvadratet. Konstaterer hvad lyshed #406B12 har via LAB farve valgene er det kun L der er interessant. Som baggrund ville jeg have en blå, valgte ”L” 39 og kunne nu finde en blå i samme lysstyrke altså #006699. På den måde får jeg et site med harmoni i farverne. Artikler omkring LAB farver og farvekontraster som jeg har min viden fra:

• Johannes Ittens bog, Farvekunstens Elementer
• Tips farvetilstande
• Photoshop CS4 / Adobe
• Visble.dk (Dansk reklamegude)
• Digitalmagasinet
• Artmachine.dk, vejleder — Morten Bøll
• idamarie.dk Kompendium i farvelære
  / ved Ida-Marie Müller (Olsen)

Den lysegrønne er en farveprøve fra landskabet af den lyseste grønne – nemlig #78C823 som således skal virke som kontrast farve til de andre. Klik på billedet for at se det i fuld størrelse.

Til bordere og baggrundsfarver i områder indenfor ”body” anvendes #406B12. Som baggrund for hele sitet laver jeg et en gradient med #006699 som den mørke farve og #FFFFFF (hvid) som den lyseste.

Oprettelse af gradienter
Slicer / gemmer gradienten til en jpg som jeg kan benytte som baggrund som kan gentages horisontalt via CSS’en. Som ”footer ” laver jeg en gradient med farverne #406B12 til #78C823. Laver en slice som ligeledes kan gentages horisontalt i „footer” området.

Logo
For at lave en visuel identitet på sitet anvender jeg et logo som jeg har lavet for længe siden „tr” desværre kan jeg ikke huske hvordan processen var da jeg lavede det logo. Det er min idé at dette logo skal beholde sin horisontale placering selvom hovedområdet af sitet bliver større eller mindre. Samtidig er hovedområdet af sitet centreret, og er styret at størrelsen på browser vinduet, som således flytter sig i forhold til logoet.

Har i et stykke tid gået og barslet med en idé – brugeren skal kunne vælge mellem flere forskellige webdesign. Jeg synes at brugeren gerne må få en oplevelse af en „personlig” side som hun/han selv kan ændre designet af. Jeg synes rent personligt at det er fantastisk at man ved at skifte ”stylesheet ” og dermed ændre designet radikalt.

Målet for projektet er:
Give brugeren muligheden for at kunne ”customize” sitet ved at vælge mellem flere forud definerede design. Dog vil jeg begrænse mig til kun at lave et ekstra layout i denne opdatering og fokusere mest på at få selve koden til at virke. Det alternative design vil kun ændre header billede og farver. Men det er min mening at forberede løsningen til at man kan lave ”helt” andre webdesign.

Teknologier:

• Javascript (cookies, onload event og DOM manipulation)
• (x)html (form — dropdown menu)
• CSS (ekstra ”stylesheet ”som tilføjer ændringer af designet)

Flowcharts for applikationen:
Flowchart over onload eventen

Flowchart over onchange eventen

Workflow
Jeg fik hurtigt implementeret løsningen.

Skrev hurtigt de to funktioner.

For at give brugeren mulighed for at vælge mellem designs oprettede jeg en dropdown menu (select) og gav den en id så det var muligt at finde den via javascript.

Samtidig satte jeg onchange til setStyleCookie(). På den måde vil setStyleCookie() blive kaldt hver gang brugeren vælger en værdi.

Umiddelbart gik det nemt og smerte frit. Men desværre virkede løsningen ikke som forventet. Nogle dage efter fandt jeg ud af applikationen ikke kunne håndtere hvis brugeren ikke havde været på siden før. Det viste sig at jeg havde lavet min if struktur lidt for hård. Derfor løste jeg op for den så jeg bare checkede på Cookie(’mode’). Det tog noget tid at få det til at virke efter hensigten.

Men nu er løsningen klar så den kan nemt udvides og fin justeres.