Workshop – Design Challenge
Proces:
D. 11 november
Hjemme fra skulle vi lave forberedelse til i dag:
Beskrivelse
Inden du kommer til workshoppen er det vigtigt du har gennemført nedenstående.
Vælg en af følgende brancher du vil arbejde med i workshoppen og undersøg UI tendenser indenfor den branche du har valgt.
- Servicevirksomheder (f.eks. Kaffebar, koncert, restauranter)
- Hobby butik/e-handel (det kan være indenfor din hobby)
- Håndværker forretning (f.eks. murer forretning, tømmer forretning)
- Offentlig institution (f.eks. Uddannelser, Kommuner, Sundhedssektoren)
Analyser følgende hjemmesider, herunder deres brug af tekst, farver og opsætning.
- Tre valgfri hjemmesider fra awwwards.com
- To (mindre gode) websites i selv finder
Jeg valgte opgaven med hjemmesider der havde min hobby/interesse.
(Jeg skal være ærlig at sige at jeg ikke helt forstod hvorfor vi samlet skulle finde alle de hjemmesider)
Den første halvdel med at finde UI tendenser på hobby-hjemmesiderne, gav egentlig god mening, det var sjovt at se at der var fælles tendenser på tværs af de forskellige hjemmesider. Særligt banneret oppe i toppen gjorde sig gældende på dem alle.
Den anden halvdel gav ikke nogen mening
Find 3 hjemmesider på awwwards.com
hvorfor?
– Og skal det være en særlig type vi skal finde?,
– Skal vi finde dem der er mest imponerende?,
– Skal vi finde ligheder i det vi lige har lavet?
Jeg valgte holde fokus på e-handel hjemmesider, for det gav mening for mig.
På Awwwards.com var det svært at finde nogle som forhandlede flere forskellige produkter. fokuset på de fleste var der lagt mere vægt i udseende og effekter og derfor var produktlinjerne som oftest et enkelt produkt i forskellige varianter som blev præsenteret.
Mange af hjemmesiderne brugte også effekten af infinity scroll eller parallax, hvilket jeg elsker når en virksomhed har leget sådan med deres hjemmesidedesign (fx Apple)
Den sidste opgave
Find 2 mindre gode hjemmesider
igen hvorfor?
– hvad skal det bruges til?
– skal vi redesigne dem eller hvordan?
I de to mindre gode hjemmesider fandt jeg virksomheder som specialiserede sig i paper art – hvilket også har min interesse rent hobbymæssigt.
… så hvad så nu …?
På dagen sov jeg for længe, så jeg var der først lidt over 9. I letbanen på vej herind så jeg på itslearning at der var blevet lagt en opgavebeskrivelse ind:
Opgaven:
Del 1: Design en hjemmeside
Ud fra den valgte branche (se liste med brancher i ‘Forberedelse’), skal du designe en hjemmeside. Der er følgende krav til hjemmesiden:
- Du skal anvende et grid (i Figma), når du designer.
- Hjemmesiden skal være designet til både desktop og mobilversion.
- Brug den viden, du har opnået gennem undervisningen – hav særligt fokus på adfærdsdesign, visuel identitet og principper for brugervenlighed.
- 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): a11yproject.com/checklist/
Del 2: Præsentation
Lav en præsentation af dit hjemmesidedesign.
Der er følgende krav til præsentationsformatet:
1) Dit design skal vises i device mockups (desktop og mobil).
2) Præsentationen skal være fængende og visuelt appellerende – tænk på den som en pitch af dit design!
3) Inkludér en kort beskrivelse af dine designvalg og begrund dem ud fra de principper, du har arbejdet med.
Din præsentation skal afleveres på ItsLearning.
Vi afslutter dagen med en ‘Show and tell’, hvor I går rundt og ser hinandens præsentationer. 🙂
Jeg var stadig lidt i tvivl om hvilke hjemmesider jeg skulle tage udgangspunkt i, så da jeg kom ind klassen spurgte jeg vores undervisere og viste hvad jeg havde lavet af forbedredelse,
- dertil fik jeg at vide at alt forberedelsen var inspiration og det jeg nu skulle lave kunne være hvad som helst, lige fra redesign af en eksisterende hjemmeside, til en fiktiv hjemmeside.
Jeg havde svært ved at komme i gang både fordi at der var en deadline men også fordi det kan være rart når der ligesom er nogle retningslinjer at gå ud fra.
Det første stykke tid prøvede jeg at sætte mig ind i det der grid i figma, dernæst grublede jeg længe over hvad jeg kunne nå at lave på kort tid. Jeg havde i forberedelsen hjemmefra, været bange for om vi skulle kaste os ud at lave/kode parallax hjemmesider ud fra eksisterende, så da det havde rumsteret meget i mit hoved og det faktum at det “bare” skulle laves i figma, tog jeg tyren ved hornene og begyndte at kigge ind i hvordan man lavede det (min underviser Jesper sagde at det lød ambitiøst, hvilket det også viste sig at være.)
Hertil valgte også at tage udgangspunkt i Royal Copenhagen da det er en stor interesse for mig og dertil havde jeg også meget grafisk materiale baseret på det musselmalede mønster liggende, som jeg kunne bruge på hjemmesiden.
I forbindelse med at Royal Copenhagen fejre 250 års jubilæum i år, udtænkte jeg at min hjemmeside skulle være en kampagneside som opfordrede folk til at komme ind og male deres egen tallerken på deres malerskole. “Malerskolen” er noget de i virkeligheden også afholder, men mest i forbindelse med særlige lejligheder og arrengementer. Her til ville jeg så lave parallax med de fire mega mussel motiver der lige nu er i deres sortiment af middags tallerkener for bibeholde brugerens engagement samt skabe inspiration.
Jeg tog udgangs punkt i den mørkeblå velkendte farve og så de hvide tallerkener kunne skinne kontrast i gennem på hjemmesiden, dertil valgte jeg en gullig farve til overskrifterne, jeg var dertil opmærksom på WCAG tilgængeligheds niveauer og tjekkede af at farven på overskriften havde et v-tegn i kontrasten i mellem den blå og gule farve. Dertil brugte jeg de skrifttyper som Royal Copenhagen selv bruger og som jeg havde undersøgt under forberedelserne til i dag.
For at finde ud af hvordan man lavede parallax i figma, gik jeg på Google og fandt nogle plug-ins til figma, men dem forstod jeg ikke noget af, dernæst søgte jeg på YouTube og fandt video der forklarede det på 6 min. Ved første øjekast så det egentlig let nok ud, men i praksis skulle jeg lige forstå præmissen i det hele. Det tog sin tid og en masse gentagne forsøg. Hen vejen begyndte det at give mening. Da jeg sad og testede det igennem kom Jesper forbi og sagde
“du kom i mål med det!, – så er det bare indholdet du mangler”
Og her havde jeg kun lavet forsiden til desktop version. Jeg skyndte mig at lave forsiden til mobilversion. Bagefter var der kun lidt under en time tilbage inden vi skulle præsentere så jeg begyndte at side hvor brugeren kunne vælge det motiv som det ønskede at male. Men ja nåede ikke i mål.
Til præsentationen havde jeg kun prototyperne at vise frem men i gik derfor i dybden med fortælle hvordan dette parallax i figma fungerede.
Meningen var jo egentlig at man skulle lave en præsentation med faglige argumenter for valg af design. Men dette nåede jeg ikke i processen, de faglige argumenter havde jeg jo egentlig arbejdet ud fra i brainstormen og under opbygning men ja jeg fik dem ikke præsenteret eller skrevet ned, jeg fik dog alligevel en bemærkning på at det var fedt at se at jeg havde gået i dybden med at lære at lave noget ambitiøst i figma og jeg bemærkede også selv at der var stor opmærksomhed på mit produkt.
Så selvom at jeg ikke løste opgaven præcist, så er jeg egentlig godt tilfreds med det jeg fik lavet.
Refleksion
Det ville have været rart hvis der var blevet beskrevet at der skulle laves en præsentation med ens færdige produkt og at det “checkhæfte” som blev sendt med opgaven havde været med også. Særligt fordi det kan være svært at huske alle de mange begreber der er på stående fod, omvendt kan jeg godt se at hvis al det materiale var blevet frigivet, ville nogle (heriblandt mig selv) nok have siddet og designet hjemmesiden hjemmefra og havde ikke været med i samme læringsproces med de andre.
Men forberedelserne hjemmefra gav bare heller ikke nogen mening, før selve opgaven blev offentliggjort dagen efter ..
Så ja det ville have været rart hvis der havde været en klar afklaring i hvorfor forberedelserne var som de var.
Men det var spændende at lære noget nyt i figma heriblandt også introduktionen til grid.