Workshopbeskrivelse:
Del 1
Ud fra den valgte branche, skal du designe en hjemmeside. Der er følgende krav til hjemmesiden:
- Du skal anvende et grid (i figma) når du designer
- Du skal designe siden så den som minimum fungere på desktop og mobil
- Brug den viden du har fået fra undervisningen i Layout & Komposition og Datavisualisering
- Sørg for din produktion så vidt muligt overholder ”Appearance”, ”Color contrast”, ”Mobile and touch” og ”Animation” punkterne fra a11yproject.com/checklist/ som tager udgangspunkt i WCAG
Del 2
Forbered dit præsentation af din produktion som efterfølgende kan analyseres af dine med studerende. Derefter skal du også analysere og give feedback til dine medstuderende. Der er følgende krav:
- Præsenter dit design i et device mockup, hvor der også beskrives design valg (f.eks. gennem slides i Figma) Inspirations link: behance
- Aflever på itslearning
- Analyser de tildelte websites og giv skriftligt feedback eller en optagelse af skærm (med lyd) hvor du giver feedback til produktionen. Det afleveres som bedømmelse på itslearning.
Proces:
Jeg påbegyndte workshop-opgaven med først at identificere den branche, jeg ønskede at lave mit mockup af en hjemmeside til. Da jeg tidligere havde arbejdet med garnbutikker og strikkebranchen i forbindelse med 1. semesters eksamensprojekt, valgte jeg at tage udgangspunkt i samme branche her.
For at få inspiration begyndte jeg med at researche hjemmesider fra andre garnbutikker og strikkedesignere. Mit fokus var at identificere gennemgående designelementer, aktuelle trends og komponenter, som jeg ønskede at inkorporere i mit eget projekt. Jeg fandt hurtigt ud af, at jeg var tiltrukket af et simpelt design med lyse farver og en elegant æstetik. Derudover kunne jeg godt lide brugen af store billeder, der fik lov til at stå i fokus.
Næste skridt var at skitsere en lo-fi wireframe i min notesbog, så jeg fik et visuelt udgangspunkt for det videre arbejde i Figma. Herefter udarbejdede jeg en styletile for at sikre en ensartet visuel retning for projektet. Under min research valgte jeg en farvepalette med rolige nuancer samt en elegant skrifttype, der passede til det minimalistiske udtryk.
I Figma begyndte jeg med at designe wireframen til desktopversionen og anvendte grid templates for at sikre korrekte afstande og en harmonisk layoutstruktur. Da jeg senere designede mobilversionen, tilpassede jeg layoutet, så enkelte billeder fyldte hele skærmen fremfor at stå side om side – på den måde kunne jeg bevare det visuelle fokus på billederne, som jeg godt kunne lide.
For at fuldende designet fandt jeg en række billeder af strikdesigns og garn, som matchede den visuelle stil, jeg havde udviklet. Til sidst gennemgik jeg mit materiale med et kritisk blik og vurderede, at designet fremstod en smule for simpelt. Derfor valgte jeg at designe et grafisk element – en blomst – i Adobe Illustrator. Dette element kunne både bruges som en del af logoet og som dekorativt grafisk element på hjemmesiden, hvilket gav designet et mere unikt og personligt præg.
Resultat:
Refleksion:
Alt i alt var workshoppen en både god og lærerig oplevelse. En af de vigtigste erfaringer, jeg tog med mig, var fordelene ved at bruge grid design i Figma. Denne metode gjorde det betydeligt lettere at skabe et ensartet og harmonisk layout. I mit tidligere arbejde med eksamensprojektet oplevede jeg udfordringer med netop dette, da jeg dengang måtte justere afstande manuelt, hvilket var både tidskrævende og upræcist. Grid design viste sig derfor at være en langt mere effektiv og struktureret tilgang.
Derudover erfarede jeg, hvor stor en forskel et enkelt grafisk element kan gøre for en hjemmesides samlede udtryk. Ved at designe en simpel blomst i Adobe Illustrator kunne jeg både styrke brandidentiteten og tilføje et professionelt præg til designet. Denne proces viste mig, hvordan små, gennemtænkte detaljer kan løfte en visuel helhed markant.
Samlet set gav workshoppen mig nye værktøjer og metoder, som jeg fremover vil anvende til at skabe mere strukturerede og visuelt tiltalende designløsninger.