Om designen

Vi fick designen från gruppen Tomatchutneyn. De valde ett Halloween tema med en sida som bjuder in användaren till en kommande Halloween fest. Det första som slog oss var att Tomatchutney valde att skapa en 3-sidig design istället för en one-pager som vi hade förväntat oss. Inte för att det är något obekant för oss men vi insåg att det sannolikt kommer ta lite längre tid att genomföra.

Designen överlag domineras av en mörkblå färg för bakgrunden med gul text och orangea knappar. Nedanför rubriken finns tre länkar som leder till olika sidor. Rubriken ska, endast på desktop, försvinna i länkarna ”Fina priser” och ”Om oss”. På Tablet och Mobile ska rubriken vara synlig på samtliga sidor.

Desktop

Startsida

Startsidan består av en informationsruta samt input fält för e-post och en anmälan knapp. När man fyller i korrekt e-post så visas en pop-up med bekräftelse. Bakgrunden ska då tonas ut. Bredvid Information rubriken ska en pumpa visas och animeras en gång.

Fina priser

Fina priser sidan består av en slider där användaren kan bläddra mellan två olika biler med hjälp av pilar på vardera sida.

Om oss

Om oss sidan består av en Om oss ruta med information om festen.

Tablet

Den stora skillnaden gentemot desktop är att den animerade pumpan ska flyttas upp till Rubriken och att Startsida och Fina priser ska kombineras till en. Dvs man ska mötas av Informationsrutan och direkt under det Fina priser slidern. Och som sagt ovan ska rubriken vara synlig hela tiden oavsett sida man är på.

Mobile

På mobil ska animerade pumpan helt plockas bort. Vidare ska ramarna runt textrutorna och slidern också tas bort.

Arbetsprocess:

Vi började med att gå igenom allt som behövde göras och bröt ner det till Issues. Totalt blev det 41 issues, med namngivningsstrukter enligt Desktop: Startsida -> Skapa knapp osv. Samtliga issues fick även ett flertal ”Labels” (desktop, tablet, Om oss, Startsida osv). På så vis kunde vi lättare sortera och gå igenom allt som ska göras. Därefter fick man assigna sig själv allt som man direkt kände att man ville göra/bli bättre på.

När man var klar med sina issues så assignade man nya åt sig själv. Om det var något man kände sig osäker på eller behövde hjälp så kommunicerade man ut det i Teams och fick oftast hjälp direkt.

Lighthouse resultat

Desktop

Mobile

Optimeringsprocessen har pågått under hela projektet. Det som hindrar Tillgänlighet från att nå 100 är att bakgrunden och förgrunden har för lite kontrast. Detta är dessvärre något vi inte kan ändra utan att påverka designen i alltför stor grad.

Tekniker vi använt

För design använde vi Figma och Affinity Design. All kodning i VS Code. Vi valde att köra med vanilla JS, HTML och CSS, inga ramverk. Vi valde medvetet att generera så mycket av HTML som möjligt i JS i inlärningssyfte.