Design Challenge

Opgaven gik ud på at lave et redesign af en eksisterende hjemmeside. Målet var at skabe et mere moderne og brugervenligt design, der fungerede både på computer og mobil. Jeg skulle arbejde i Figma og anvende grid eller columns som opsætningsværktøj, så layoutet blev mere struktureret og professionelt.

Jeg valgte at redesigne hjemmesiden Allround Byg (https://www.allroundbyg.dk/), fordi jeg syntes, den havde et lidt forældet udtryk og manglede tydelig struktur i sit layout. Jeg så derfor en god mulighed for at øve mig i at skabe et mere overskueligt og æstetisk design, der stadig passede til virksomhedens stil.

Jeg startede med at undersøge den eksisterende hjemmeside for at finde ud af, hvad der fungerede, og hvad der kunne forbedres.
Jeg lagde mærke til, at forsiden havde meget tekst og billeder, men uden en klar hierarki i opstillingen. Der var mange elementer, som lå lidt tilfældigt i forhold til hinanden, og det gjorde det svært for øjet at finde fokus. Samtidig virkede siden ikke helt mobilvenlig, da nogle elementer blev små eller rykkede rundt, når man så den på telefon.

På baggrund af det besluttede jeg, at mit redesign skulle fokusere på tilgængelighed det æstetiske design. Et renere og mere overskueligt layout, tydelig gridstruktur, så alt blev justeret pænt i linje og et design der også fungerede responsivt på mobil.

Jeg begyndte min proces i Figma, hvor jeg for første gang arbejdede med columns som opsætningsværktøj. Det var en ny måde for mig at tænke design på, men jeg fandt hurtigt ud af, hvor smart det er i forhold til alignment og struktur.

Da tiden var begrænset, lavede jeg ikke wireframes først, men gik direkte i gang med at designe prototypen. Det betød, at jeg arbejdede direkte med layout, farver, tekst og billeder fra starten. Det var en effektiv måde at arbejde på, fordi jeg kunne se resultaterne med det samme og hurtigt justere efter behov.

Jeg arbejdede både med en desktop-version og en mobilversion, hvor jeg tilpassede elementerne, så siden fungerede på begge skærmstørrelser. Undervejs havde jeg fokus på tilgængelighed, f.eks. at tekstkontraster var tydelige, at knapper havde passende størrelse, og at strukturen var let at overskue for alle brugere.

Ved at bruge kolonner kunne jeg placere indholdet mere præcist og skabe en rytme i layoutet. Det hjalp mig med at forstå, hvordan man får et design til at virke balanceret og professionelt.

Dette er forsiden, som jeg har forenklet. Bl.a.ved at indsnævre alt det de tilbyder, og så måske tage udgangspunkt i det mest “populære” fagområder.

Har også fokus på deres garanti, da det kunne være en vigtig faktor for kunden.

En hurtigt beskrivelse af selve firmaet.

Dette er deres kontaktboks, som bliver vist på forsiden og er “sticky” når man scroller ned på siden.

Når man trykker ind på et af fagområder, har jeg givet det mere information. Har derudover også valgt bruge et mere “personligt”billede kontra det de havde på deres side, hvor det bare vise noget værktøj.

Beholdt teksten de havde inde på siden, men har kørt i sektioner så det skaber noget dynamik.

til sidst et billede galleri, man kan slide igennem.

Dette er min mobilversion, lærte at det er vigtigt at man holder desktop og mobilversion op mod hinanden så det er 1 til 1. Har så lavet en brugermenu, som en dropdown. Har fomindsket kontaktboksen med et genkendeligt ikon.

Jeg valgte at ændre en smule på logoet, da jeg syntes, det virkede lidt uroligt for øjet på grund af farveopdelingen, der skiftede, og da jeg kiggede nærmere, lagde jeg mærke til, at det var deres hjemmeside, de linkede til nederst.

Dette projekt har lært mig meget om opbygning, struktur og brugervenlighed. Det var første gang, jeg arbejdede seriøst med columns i Figma, og det har givet mig en helt ny forståelse for, hvordan man får et layout til at hænge sammen. Jeg oplevede, at columns ikke kun er et værktøj til placering af elementer, men også hjælper med at skabe en visuel rytme og balance, som gør siden mere overskuelig og behagelig at navigere i.

Et centralt fokus for projektet var tilgængelighed, hvilket jeg ikke havde arbejdet med så meget før. Jeg blev bevidst om, hvor stor forskel kontraster, tydelige klikområder og læsbar tekst gør for brugeroplevelsen. Dette har givet mig en forståelse af, at tilgængelighed ikke kun handler om personer med handicap, men faktisk forbedrer oplevelsen for alle brugere. Det er noget, jeg fremover vil have med som en naturlig del af min designproces.

Jeg valgte også at tage udgangspunkt i et erhverv, som jeg normalt ikke ville vælge. Jeg har ofte arbejdet med butikker, hvor jeg allerede har en del kendskab, men Allround Byg er en håndværkervirksomhed, og det betød, at jeg måtte undersøge branchen lidt mere grundigt. Det har givet mig erfaring med research uden for min komfortzone og lært mig, hvordan man hurtigt kan sætte sig ind i et nyt område for at skabe et design, der passer til målgruppen.

Jeg arbejdede også med mobilversionen, hvilket viste mig, hvor vigtigt det er at prioritere indhold og layout, så det fungerer på mindre skærme. Jeg lærte at tænke fleksibelt, forstå hvordan elementer kan skaleres, og hvordan man skaber en sammenhængende oplevelse på tværs af enheder.

Endelig har projektet givet mig et større indblik i det æstetiske og kommunikative aspekt af design. Jeg har lært, hvordan farver, typografi og billeder kan understøtte et budskab og samtidig skabe en harmonisk visuel oplevelse. Jeg kan tydeligt se, hvordan mit redesign fremstår mere professionelt og troværdigt end den oprindelige hjemmeside.

En ting jeg dog savnede, var mere feedback undervejs til sidst “Show and Tell”. Det havde været værdifuldt at høre hvad lærerne synes og få input til, hvordan jeg kunne forbedre layout og brugeroplevelse yderligere.

Alt i alt har dette projekt været en værdifuld læringsoplevelse. Jeg har fået praktisk erfaring med Figma, gridstruktur, mobilvenligt design, tilgængelighed og research i nye brancher, samtidig med at jeg har udviklet min evne til at arbejde struktureret og reflekteret under tidspres.

Jeg føler, at jeg har opnået både tekniske færdigheder og en større forståelse for, hvordan design kan gøre en konkret forskel for brugeren, selv under begrænsede rammer.