Portfolio  >  Digital adventskalender

Digital adventskalender

Bild på digital adventskalender i en datorskärm

Område: Webbdesign/webbutveckling
Programmeringsspråk: Javascript

Besök webbplatsen

Om du vill besöka sajten med adventskalendern kan du klicka på länken här nedanför.
Digital adventskalender länk

Bakgrund

Det här projektet gick ut på att skapa en enklare webbapplikation vars grafiska utformning styrs med hjälp av Javascript. Applikationen skulle vara genomtänkt och kännas naturlig rent funktionsmässigt. Jag valde att skapa en adventskalender med animering, baksgrundsmusik och ljudeffekter.

Mina tankar om arbetet

Målsättningen var att skapa en traditionell adventskalender som förmedlar en gnistrande och mysig julkänsla. Designen och uppbyggnaden av kalendern är tämligen enkel: Den består av en julig bakgrundsbild som innehåller 24 numrerade luckor. Bakom luckorna, som öppnas genom att man klickar på dem, finns bilder med julrelaterade motiv. Även om utformningen av kalendern kan ses som traditionell, så kan färgsättningen upplevas som något okonventionell eftersom jag har valt en brun färgskala i stället för de mer traditionella julfärgerna rött och grönt. Valet av den bruna färgskalan hänger ihop med valet av bakgrundsmusik, som är en lugn och stillsam instrumental jazzversion av ”Stilla natt”. De associationer som den här låten framkallar hos mig är lite dunkla salonger, bruna skinnmöbler och konjak i gnistrande kristallglas, vilket sammantaget ledde fram till valet av den bruna färgsättningen. För att ytterligare höja julstämningen har jag lagt till ett stilla snöfall och lite stjärnglitter som tillsammans med bakgrundsmusiken sprider en rofylld känsla och kanske även lockar till att sänka tempot för en liten stund.

Bild på digital adventskalender i närbild på datorskärm
Bild på digital adventskalender i mobil
Bild på digital adventskalender i en tablet

Animering

Här kan du se hur animeringen av luckorna ser ut och hur ljudeffekten låter.
Klicka på luckan här nedanför, både för att öppna och stänga den.

2
Bild på en julkula från digital adventskalender

Besök webbplatsen

Om du vill besöka sajten med adventskalendern kan du klicka på länken här nedanför.
Digital adventskalender länk