I denne workshop var opgaven at designe en hjemmeside til både desktop og mobilversion med fokus på brugervenlighed, visuel identitet og adfærdsdesign. Der skulle samtidig arbejdes med gridsystemer i Figma.
Jeg valgte at udvikle en hjemmeside til en tømrer- og snedkervirksomhed med fokus på et moderne og overskueligt design, der både skulle fungere på mobil og desktop.
Designproces
Jeg startede processen med at opsætte grids i Figma til både mobil- og desktopversionen. Dette blev gjort for at skabe struktur og consistency i layoutet.
– På mobilversionen arbejdede jeg med et simpelt grid for at sikre:
– overskuelig navigation
– tydelig hierarki
– god spacing
– responsivt layout
På desktop versionen arbejdede jeg med flere kolonner for at skabe mere luft og bedre udnyttelse af skærm pladsen.
Mobile first
Jeg valgte at starte med mobilversionen først, da mange brugere i dag besøger hjemmesider gennem mobile enheder. Dette gjorde det lettere at prioritere det vigtigste indhold og skabe en mere simpel brugeroplevelse.
– Mobilversionen blev designet med fokus på:
– store klikbare knapper
– tydelig navigation
– enkel struktur
– tydelige CTA’er
– hurtig adgang til kontaktinformation
Visuel identitet
I designet arbejdede jeg med en mørk blå/grøn farve kombineret med neutrale baggrundsfarver. Farverne blev valgt da det var deres eksisterende farver og synes de fungerede helt fint til formålet.
– Derudover arbejdede jeg med:
– konsistent typografi
– tydelig kontrast
– store overskrifter
– genkendelige CTA-knapper
– Jeg forsøgte samtidig at skabe en tydelig visuel identitet på tværs af mobil og desktop.
Navigation
Navigationen blev holdt simpel for at gøre hjemmesiden nem at forstå for brugeren. På mobilversionen anvendte jeg en burger-menu for at spare plads og gøre layoutet mere overskueligt.
På desktopversionen blev navigationen placeret horisontalt i toppen for at skabe hurtig adgang til de vigtigste sider.
Efter designprocessen blev løsningen sat op i device mockups for både mobil og desktop. Dette gjorde det lettere at præsentere designet og visualisere, hvordan hjemmesiden ville fungere på forskellige enheder.
Refleksion
Denne workshop gav mig større forståelse for arbejdet med gridsystemer og responsive layouts i Figma. Jeg lærte, hvor vigtigt det er at skabe struktur tidligt i designprocessen, da det gør resten af arbejdet langt mere overskueligt.
Jeg blev også mere opmærksom på forskellen mellem mobil- og desktopdesign, og hvordan brugerens behov kan ændre sig afhængigt af enheden.
En af de største udfordringer var at skabe et design, der både virkede moderne og overskueligt samtidig med, at der var fokus på usability og accessibility. Det var særligt udfordrende at arbejde med spacing på mobilversionen, da pladsen er begrænset.
Jeg lærte samtidig, hvor vigtigt visuel consistency er i UI-design. Ved at arbejde med de samme farver, CTA’er og typografi på tværs af siderne blev designet mere professionelt og sammenhængende.