Workshop, Design Challenge

Til denne workshop skulle vi i forvejen have set på nogle forskellige hjemmesider, og udvælge en branche vi ville arbejde med. Jeg valgte at gå med e-handel, og dertil undersøgte jeg forskellige hjemmesider med handel. Jeg kiggede igennem pinterest for at få noget inspiration, og der blev jeg inspireret til at arbejde med en Etsy shop.

På Etsy har man sin egen “shop”, men ikke stor mulighed for at kunne customize sin egen side. Derfor valgte jeg at tage en shop som eksempel, og lave en tilpasset side til LovedByMimii.

LovedByMimii sælger forskellige håndlavet smykker, nøgleringe, billederammer osv. Derudover har siden i forvejen et meget “piget” udtryk, og jeg kunne derfor tage en masse inspiration fra nogle lidt mere “piget” sider fra pinterest.

Der fulgte disse krav til hjemmesiden, med i opgaven:

1. Du skal anvende et grid (i Figma), når du designer.
2. Hjemmesiden skal være designet til både desktop og mobilversion.
3. Brug den viden, du har opnået gennem undervisningen – hav særligt fokus på adfærdsdesign, visuel identitet og principper for brugervenlighed.
4. Sørg for, at din hjemmeside i videst muligt omfang lever op til punkterne “Appearance”, “Color contrast”, “Mobile and touch” og “Animation” i A11Y Projects tjekliste (baseret på WCAG)

Jeg startede med at tage en masse af de eksisterende produktbilleder og skabe et moodboard ud af de billeder. Det gjorde jeg at jeg kunne matche siden og ikoner til de billeder der skulle sættes ind. Så jeg valgte derefter farver til siden, og ikoner der kunne passe til.

Jeg startede med at lave en forside. Her til fandt jeg inspiration fra pinterest, samt den eksisterende shop side på Etsy. Da vi ikke havde særligt meget tid, nåede jeg ikke at lave en wireframe, men gik i stedet bare direkte i gang.

Jeg lavede den først i mobilversion, altså mobile first, og derefter satte jeg den op i computer version.

Efter at have opsat en forside nogenlunde, kunne jeg tilpasse billeder dertil og lege med en navigationsbar. Navigationsbaren ville jeg gerne have skulle indeholde navn/logo, og diverse kategorier til siden. Jeg havde dog en smule besvær med at få det lige i et grid, da jeg ikke kunne få designet til at passe. Det var især svært at få lavet i mobile version. Jeg har i forvejen relativt svært ved at arbejde med et grid, og så derfor dette som en god øvelse.

Jeg begyndte herefter at tilpasse ting til at kunne opbygge en produktside. Her tog jeg inspiration fra eksisterende produktsider, på forskellige hjemmesider. Jeg valgte at inkludere de samme ting som der er på Etsy produktsiden, for at gøre det lettere for mig selv.

Da jeg havde tilpasset første produktside, og forsiden, kunne jeg begynde at fokusere på brugervenlighed. Jeg havde i forvejen indarbejdet den stærke visuel identitet, som LovedByMimii har og kunne derfor teste på om de farver jeg havde valgt, levede op til color contrast. Her brugte jeg A11y Color Contrast Checker på figma.

Efter det fantastiske resultat, havde jeg ikke meget tid tilbage, og besluttede her at jeg til sidst ville gøre siden til en fungerende prototype. Jeg nåede at tilføje en ekstra produktside, og gøre så man kan gå til de to sider fra forsiden, og tilbage til forsiden.

Da tiden var ved at være ovre, lavede jeg en hurtig figma slides, som viste alt jeg havde gjort i gennem denne workshop. Jeg havde blandt andet inkluderet mit moodboard, den side jeg tog inspiration fra, og den side jeg havde lavet – mobile og web version.

Refleksion:

Jeg kunne rigtig godt lide denne workshop. Der var rigtig meget frihed, og det var faktisk rigtig hyggeligt at sidde med folk og lave det. Både Jesper og Freja var til rådighed inde i lokalet med os hele dagen, og man havde derfor også rig mulighed for at få vejledning undervejs. Jeg havde egentlig ikke nået at tænke voldsomt meget over hvad jeg ville til denne workshop, men det var en klar fordel at have læst lidt op på tingene hjemmefra. Jeg ville gerne prøve at lege med noget farverigt, da jeg ofte ender med at sidde med noget “kedeligt”. Det var helt klart en øvelse at implementere farver, og sørge for at kontrasten ikke var for meget eller for lidt. Jeg var rigtig tilfreds med det hvad jeg havde lavet, og så denne workshop som en rigtig god øvelse.
Jeg vil også sige at jeg måske har fundet en lille hjemmeside designer i mig selv, som jeg ikke havde troet fandtes. Jeg har endnu ikke rigtig haft set det som en mulighed at skulle designe websites, men jeg synes faktisk at det var rigtig spændene. Nu har jeg endnu en dør jeg kan snige mig stille ind af, og jeg er spændt på om jeg kommer til at lave mere af dette.
Herunder web versionen af min side ses: