J. SVARRE

Design Challenge

I denne workshop var opgaven at designe en hjemmeside for en selvvalgt branche. Jeg valgte at arbejde inden for e-handel og har designet en hjemmeside til en blomsterbutik, der sælger buketter online. Formålet var at anvende viden om visuel identitet, adfærdsdesign og brugervenlighed til at udvikle et sammenhængende design for både desktop og mobil. Designet blev udarbejdet i Figma med brug af et grid-system og med fokus på, at løsningen lever op til centrale tilgængelighedsprincipper fra A11Y Project-tjeklisten baseret på WCAG.

Proces

Forberedelse og planlægning

For at sikre, at designet fremstår moderne, relevant og intuitivt for brugeren, undersøgte jeg UI-tendenser inden for e-handel. Jeg læste faglige artikler og analyser, der beskrev, hvordan moderne webshops arbejder med navigation, produktvisning, mobiloplevelse og tilgængelighed. Undersøgelsen omfattede brede trendoversigter for 2024–2025 og mere datadrevne UX-studier, der viste, hvordan brugere interagerer med webshops på forskellige enheder. Analysen pegede på en række centrale principper, der er afgørende for at skabe et design, der fungerer effektivt og er nemt at bruge.

De vigtigste indsigter er opsummeret her:

  • Mobiloplevelse og responsivitet: Mobile-first design er standard i e-handel, da størstedelen af brugerne shopper via mobil. Navigation, søgning og checkout skal derfor være hurtige, intuitive og optimeret til touch. Samtidig er det vigtigt, at designet er fuldt responsivt, så det tilpasser sig forskellige skærmstørrelser og enheder uden at gå på kompromis med funktionalitet, læsbarhed eller brugeroplevelse. Dette sikrer en konsistent og problemfri oplevelse for alle brugere, uanset om de benytter smartphone, tablet eller desktop.
  • Enkel struktur og tydeligt hierarki: Moderne brugergrænseflader bevæger sig væk fra tunge layouts og mod luftige, minimalistiske strukturer med tydelige call-to-actions, færre distraktioner og mere whitespace. Et klart hierarki hjælper brugeren med hurtigt at orientere sig, finde produkter og træffe beslutninger. Den enkle struktur gør det desuden lettere at tilpasse designet til forskellige skærmstørrelser, hvilket understøtter både brugervenlighed og æstetik.
  • Tydelig visuel identitet. Store hero-billeder, harmoniske farver og konsekvent typografi bruges til at udtrykke stemning og skabe en sammenhængende visuel oplevelse. En tydelig visuel identitet gør designet genkendeligt og styrker oplevelsen af kvalitet. I e-handel er det afgørende, at farver og billeder understøtter brandets udtryk og formidler den ønskede atmosfære.
  • Micro-interaktioner og feedback. Små animationer, fx ved hover, ved tilføjelse til kurv eller under sideovergange, giver brugeren tydelig visuel feedback og gør oplevelsen mere levende og engagerende. Animationerne bekræfter brugerens handlinger og gør det lettere at forstå, hvordan systemet reagerer. Effekterne skal dog være diskrete, så de understøtter brugerens fokus frem for at forstyrre det.
  • Layouttendenser: Moderne webshops eksperimenterer med grid-systemer, bento-grid eller asymmetriske layouts for at bryde med standardopstillinger og skabe karakter på siderne. Variationen i layout hjælper med at fremhæve indhold, skabe visuel interesse og guide brugeren gennem siden på en naturlig måde.
  • Tilgængelighed: Moderne webdesign fokuserer i stigende grad på tilgængelighed for alle brugere. Farvekontraster, tekststørrelser, tastaturnavigation og store klikbare områder er centrale elementer, der forbedrer oplevelsen for alle og gør brugerflader mere intuitive og inkluderende. Retningslinjerne fra A11Y Project og WCAG fungerer som vigtige referencepunkter, når man udvikler e-handelsdesign, der lever op til både brugerbehov og gældende standarder.
  • Navigation og produktopdagelse: Moderne webshops prioriterer synlig og intuitiv navigation, så brugerne hurtigt kan finde produkter via kategorier, søgning og filtre. Forkert eller skjult navigation øger risikoen for frafald i checkout, mens klare strukturer understøtter konvertering og en positiv oplevelse. For at reducere usikkerhed ved onlinekøb anvender nogle webshops også Augmented Reality (AR), som gør det muligt for kunderne at visualisere produkter i deres eget miljø, inden de køber. AR kan øge brugerens tillid til produktet, reducere returneringer og forbedre konverteringsraten.

Kilder:

Discovery & interpretation – Analyse af hjemmesider

For at hente inspiration og forstå, hvordan forskellige webshops og hjemmesider anvender tekst, farver og layout, har jeg analyseret tre prisvindende websites fra awwwards.com samt to mindre gode eksempler. Analysen har givet indsigt i designvalg, der fungerer godt, og hvilke udfordringer man bør undgå.

Gode Websites

More Nutrition (https://more-nutrition.webflow.io/)

Siden anvender en moderne, ren visuel stil med et tydeligt visuelt hierarki. Overskrifter bruges konsekvent til at skabe struktur og gøre det let for brugeren at skanne indholdet. Farvepaletten er afbalanceret og begrænset til to farver, hvilket understøtter læsbarheden og fremhæver vigtige call-to-actions som “Buy now”. De anvendte farver er #90b96d og #335c30, hvilket skaber god kontrast samtidig med at de afdæmpede, naturlige toner giver et rent og tillidsvækkende udtryk.

Et særligt stærkt træk ved siden er brugen af bullet points og typografi til at gøre produktinformation overskuelig. Under produktbeskrivelserne listes nøglefordele med små ikoner, fx: “Low in sugar”, “High in protein”, “Supports muscle growth” osv. (billede 1). Kombinationen af ikoner og tydelig typografi gør det hurtigt og intuitivt for brugeren at forstå produktets værdi.

Billede 1: Oversigt over produktets nøglefordele med ikoner og bullet points.

Layoutet følger en logisk og lineær onepage-struktur, der guider brugeren gennem siden på en naturlig måde. Øverst findes en stor hero-sektion med et centralt placeret call-to-action (“Buy now”), der fungerer som hovedfokuspunkt (billede 2). Ved scroll møder brugeren først en kort beskrivelse af virksomhedens “Why” (Golden Circle), der kommunikerer missionen på en enkel og tilgængelig måde:

“We want to make healthy, science-backed nutrition simple and accessible – so you can feel better, perform better, and enjoy life every single day.”

Herefter følger en tydelig præsentation af produktets indhold, efterfulgt af oversigten med nøglefordele (billede 1), og til sidst vises brugerreviews, der styrker troværdigheden og skaber social proof. Den lineære opbygning kombineret med whitespace mellem elementerne skaber et roligt og overskueligt design, der fremhæver vigtige indholdselementer uden at overvælde brugeren.

Billede 2: Hero-sektion med central call-to-action-knap (“Buy now”).

Siden er mobiloptimeret med responsive layouts, hvor sektionerne tilpasser sig forskellige skærmstørrelser. Små animationer, såsom bevægelse af tekst ved scroll og produktrotation, bidrager til en levende og engagerende brugeroplevelse uden at forstyrre fokus. Micro-interaktioner, fx ved hover på knapper og check-ikoner, fungerer som tydelig visuel feedback, der bekræfter brugerens handlinger og bekræfter brugerens handlinger.

Dont Board Me (https://dontboardme.com/)

Siden skiller sig ud med et legende og interaktivt design, hvor store illustrationer, animationer og dynamiske overgange skaber en engagerende brugeroplevelse. Hero-sektionen indeholder en tydelig call-to-action i højre hjørne (BOOK NOW), og typografien er læsbar på tværs af alle enheder med store overskrifter, der skaber et klart hierarki og guider brugeren gennem siden (billede 3). Teksten er præcis med korte beskrivelser af ydelsen, der gør det nemt at forstå, hvad der tilbydes, samtidig med at det giver et hurtigt overblik og understøtter navigationen.

Billede 3: Hero-sektion med call-to-action-knap i højre hjørne (“Book now”).

Farvepaletten består af lyse og energiske toner. Rød (#E33529) anvendes til tekst på en lyserød baggrund (#ECC5CB), mens blå (#3B6683) bruges til tekst på en lyseblå baggrund (#AFD8FB) (billede 4-5). Den monokromatiske farvebrug skaber visuel sammenhæng og ro, samtidig med at den afdæmpede baggrund fungerer som en neutral ramme for animationer og interaktive elementer, som tilfører liv og dynamik uden at overvælde oplevelsen. Knapperne står i kontrast til baggrunden, hvilket sikrer, at call-to-actions tydeligt fanger brugerens opmærksomhed.

Billede 4: Monokromatisk farvebrug med rød tekst på lyserød baggrund, der fremhæver “Our Services”.
Billede 5: Monokromatisk farvebrug med blå tekst på lyseblå baggrund, der fremhæver kontaktoplysninger.

Layoutet er grid-baseret med store illustrationer og tydelige call-to-actions. Efter hero-sektionen præsenteres en simpel oversigt over ydelserne, efterfulgt af en kort beskrivelse af konceptet og til sidst kontaktoplysninger. Den lineære opbygning kombineret med whitespace skaber et roligt og overskueligt design, der fremhæver vigtige indholdselementer uden at overbelaste brugeren. Hover-effekter på knapper og billeder samt dynamiske overgange mellem sektioner giver tydelig visuel feedback og gør det let at forstå, hvordan siden reagerer på brugerens handlinger. Effekterne bidrager samtidig til en levende og engagerende oplevelse uden at forstyrre fokus.

Caveman Outdoor Shop (https://caveman-shop.it/en)

Siden fremstår med et klart, cool og urbant udtryk, der understøtter brandets outdoor-profil. Layoutet er modulært og grid-baseret, og produktkategorierne er tydeligt fremhævet i en struktureret navigation, hvilket gør det hurtigt for brugeren at danne sig et overblik over sortimentet. Den horisontale navigation i toppen fremstår intuitiv og brugervenlig med overskuelige dropdown-menuer, der effektivt dækker samtlige produktområder (billede 6).

Billede 6:  Navigation med overskuelig dropdown-menu, der viser de forskellige produktkategorier.

Typografien er sans serif, hvilket bidrager til et moderne og læsbart udtryk. Overskrifterne skaber et klart hierarki, mens produkttekster og tekniske specifikationer er korte og funktionelle, så brugeren hurtigt kan skimme nøgleoplysninger. Kombinationen af whitespace, modulopbygning og tydelige produktbilleder understøtter et professionelt og funktionelt design, hvor fokus fastholdes på produkterne. De sorte knapper er tydelige og fremtrædende, da de står i tydelig kontrast til den hvide baggrund. Den sorte “Add to cart”-knap er særligt markant, da den både anvender kontrastfarve og har en betydelig størrelse, der tiltrækker opmærksomhed (billede 7). Farvepaletten er neutral med sort, hvid og gråtoner, hvilket styrker det urbane og funktionelle udtryk samtidig med, at produkterne forbliver det centrale visuelle fokus. Siden anvender desuden mikrointeraktioner ved hover på knapper og billeder, hvilket giver en subtil, men tydelig visuel respons. Dette styrker brugeroplevelsen og gør navigation og handling mere intuitiv, uden at distrahere fra formålet: at finde og købe produkter.

Billede 7: Produktside med tydelig sort “Add to cart”-knap, der fremhæves gennem kontrast, størrelse og placering.
Mindre gode websites

OdenseHobby.dk – odensehobby.dk

OdenseHobby.dk er et eksempel på en mindre optimal hjemmeside med flere designmæssige udfordringer. Layoutet fremstår kompakt og visuelt rodet, hvilket gør det vanskeligt for brugeren hurtigt at skanne indholdet og finde relevante produkter. Farvebrug og typografi mangler konsekvens, da overskrifter, links og brødtekst anvender forskellige størrelser, skrifttyper og farver uden et klart system. Vigtige elementer som navigation, knapper og call-to-actions fremhæves ikke ensartet, hvilket reducerer tydeligheden og gør det vanskeligt at identificere central information. Tekstelementer, billeder og baggrunde følger ikke en logisk visuel struktur, hvilket bidrager til et uoverskueligt og uprofessionelt indtryk (billede 8).

Billede 8: Forside med kompakt og visuelt rodet layout samt uensartet farve- og typografibrug.

Navigationen er lang og uklart struktureret, hvilket gør det svært for brugeren at finde specifikke produkter. Produktbeskrivelserne er ofte fraværende eller utilstrækkelige, hvilket begrænser brugerens mulighed for at forstå produktets egenskaber og værdi (billede 9). Siden er delvist responsiv, men enkelte elementer skalerer ikke optimalt til mobile enheder, hvilket yderligere påvirker brugeroplevelsen negativt.

Billede 9: Produktside med produktbillede og mangelfuld produktbeskrivelse.

Bloom & Wild –bloomandwild.com

Bloom & Wild er et eksempel på en visuelt livlig, men mindre optimal hjemmeside med flere designmæssige udfordringer. Layoutet fremstår kompakt og overfyldt, hvilket gør det svært for brugeren hurtigt at skanne indholdet og skabe overblik over produkterne (billede 10). Farvepaletten og typografien anvendes ikke konsekvent, da overskrifter, brødtekst og knapper varierer i størrelse, stil og placering uden et klart system, hvilket kan skabe forvirring. Samtidig anvendes hele otte forskellige farver på siden. Selvom farverne er pastelfarver og dermed visuelt sammenhængende, skaber det alligevel et rodet udtryk, hvor det kan være svært for brugeren at fokusere på de vigtigste elementer. For overskuelighedens skyld anbefales det ofte at følge “60-30-10”-reglen, hvor 60 % af designet består af en dominerende farve, 30 % af en sekundær farve og 10 % af en accentfarve til at fremhæve centrale elementer. Navigationen indeholder mange menupunkter og undermenuer, hvilket gør det mindre intuitivt at finde specifikke produkter. Siden er mobiloptimeret, men det tætte og kompakte layout kan stadig virke overvældende på mindre skærme, hvilket påvirker brugeroplevelsen negativt.

Billede 10: Forside med kompakt og overfyldt layout.

Sammenfatning af analyser:

Analysen af de tre prisvindende websites (More Nutrition, Dont Board Me og Caveman Outdoor Shop) viser tydeligt, hvordan et gennemtænkt visuelt design kan understøtte både brugeroplevelse og brandidentitet. Fælles for alle tre sites er en konsekvent anvendelse af Aaron Marcus’ principper om Visible Language, hvor layout, typografi, farver, billeder og interaktioner samarbejder om at skabe en intuitiv og effektiv kommunikation.

Alle tre sites demonstrerer principperne Organize, Economize og Communicate. Struktur og navigerbarhed er konsekvent prioriteret (Organize). More Nutrition anvender en lineær onepage-struktur med klart definerede sektioner, Dont Board Me organiserer indholdet i et grid-layout med tydelige segmenter, og Caveman Outdoor Shop benytter en modulopbygget navigation med overskuelige dropdown-menuer. Denne klare organisering styrker brugerens evne til hurtigt at orientere sig og reducerer kognitiv belastning, hvilket er i tråd med Jakob’s Law, idet designet møder brugerens forventninger til webshops og dermed minimerer risikoen for forvirring eller frustration. Omvendt viser analyserne af OdenseHobby.dk og Bloom & Wild, hvordan manglende konsekvens i layout, typografi og farvebrug, samt uoverskuelig navigation, kan skabe forvirring og øge den kognitive belastning for brugeren.

Principperne fra Economize kommer til udtryk gennem enkelhed og klarhed i designet. Alle tre sites anvender et begrænset antal visuelle signaler, hvilket understøtter brugerens fokus på det centrale indhold. More Nutrition fremhæver nøglefordele med bullet points og ikoner, Dont Board Me bruger monokromatiske farver til at skabe ro, mens Caveman Outdoor Shop sikrer, at call-to-action-knapper fremstår markante uden at overbelaste layoutet. Hick’s Law illustreres tydeligt ved de minimalistiske menustrukturer og overskuelige produktoversigter, som reducerer brugerens beslutningstid. Desuden understøttes Fitts’ Law gennem brugen af store, tydelige knapper, som fx den sorte “Add to cart”-knap på Caveman Outdoor Shop, hvor størrelse, kontrast og placering gør handlingen både hurtig og intuitiv.

Typografi og læsbarhed (Communicate) er også centralt i alle tre analyserede sites. Sans serif-skrifttyper og hierarkisk opbygning af overskrifter sikrer, at information hurtigt kan skannes. Brugen af whitespace og modulopbygning skaber et visuelt roligt og funktionelt design, der fastholder fokus på det primære indhold uden at distrahere brugeren. Symbolik og billeder understøtter kommunikationen, fx ved ikoner for produktfordele eller tydelige illustrationer af ydelser, mens små animationer og mikrointeraktioner tilfører dynamik uden at forstyrre.

Farvepaletterne på de tre sites er nøje udvalgt med henblik på både æstetik og funktionalitet. More Nutrition benytter afdæmpede, naturlige farver, Dont Board Me arbejder med lyse og energiske toner i monokromatiske kombinationer, og Caveman Outdoor Shop holder sig til en neutral palet, hvor sort, hvid og grå fremhæver produkter og call-to-actions. Farverne er konsekvent anvendt (Organize), økonomisk begrænset for at undgå overbelastning (Economize) og tydelige i kommunikationen af funktion og hierarki (Communicate). Omvendt anvender Bloom & Wild mange forskellige farver uden et klart system, hvilket skaber visuel forvirring og reducerer brugerens mulighed for at fokusere på centrale elementer. Her illustreres vigtigheden af at anvende principper som fx “60-30-10”-reglen til at skabe balance i farvepaletten.

Samlet set illustrerer analyserne, at et vellykket website kræver en balanceret integration af layout, typografi, farver, billeder og interaktioner. Klar struktur, økonomisk brug af visuelle signaler og effektiv kommunikation skaber en intuitiv brugeroplevelse, hvor indhold og handlinger er lette at forstå, mens uovervejede designvalg kan føre til kognitiv overbelastning, forvirring og lavere brugervenlighed.

Definition af formål, målgruppe & brandidentitet

Efter at have undersøgt UI-tendenser og analyseret de fem hjemmesider, definerede jeg målgruppe, formål og en begyndende brandidentitet. Dette skabte et tydeligt udgangspunkt for designprocessen og sikrede, at beslutninger om layout, typografi, farver og navigation blev truffet på et målrettet og fagligt funderet grundlag.

Målgruppe

Den primære målgruppe for hjemmesiden er æstetisk bevidste kvinder og mænd i alderen 28–55 år, bosat i byområder og med middel til høj indkomst. De værdsætter kvalitet, æstetik og sans for detaljer og betragter blomster som et udtryk for personlig stil, stemning og omtanke. For målgruppen er købet af blomster ikke kun en praktisk handling, men en måde at skabe æstetisk værdi i hjemmet og formidle følelser gennem form og farve.

Ud fra Minervamodellen befinder målgruppen sig i det moderne-idealistske segment, hvor værdier som bæredygtighed, æstetik og personlig identitet vægtes højt. De forventer derfor et design, der udstrålerro, overblik og kvalitet. Hjemmesiden skal dermed tilbyde en intuitiv og visuelt balanceret oplevelse, der matcher brugernes forventning om digital elegance og professionel æstetik.

Begyndende brandidentiet

Navn: Bloomé

Beskrivelse:
Bloomé repræsenterer moderne elegance og tidløs kvalitet inden for blomsterhandel. Hver buket sammensættes med omtanke og sans for proportioner, så den fremstår unik, inspirerende og visuelt harmonisk. Brandet prioriterer enkelhed, håndværksmæssig præcision og et stilrent udtryk, der skaber genkendelighed og tillid.

Kerneværdier:

  • Kvalitet: Håndplukkede blomster og omhyggeligt komponerede buketter.
  • Æstetik: Elegante, harmoniske kompositioner med fokus på detaljer.
  • Tillid: Transparent information om produkter, levering og pleje.
  • Ro: Et visuelt og kommunikativt univers, der understøtter overblik og intuitiv navigation.

Tone of Voice:

  • Tone: Elegant, rolig og gennemført. Formidler kvalitet uden dramatik eller højstemte formuleringer.
  • Sprog: Kortfattet og præcist. Der anvendes konkrete beskrivelser frem for metaforer, fx “Buket med håndplukkede roser og liljer” frem for poetiske vendinger. Teksten skal være let at skanne, understøttet af tydelige overskrifter og punktform, hvor det styrker overblikket.
  • Karakter: Professionel, pålidelig og æstetisk bevidst. Brandet fremstår som en kyndig rådgiver, der guider brugeren gennem kuraterede valg uden at virke bedrevidende.
  • Formål: At formidle buketternes kvalitet og design, skabe overblik og inspirere til køb samtidig med at kommunikationen styrker brandets visuelle og værdimæssige identitet.

Formål
Formålet med hjemmesiden er at skabe en digital platform, der præsenterer blomster som kuraterede designobjekter frem for masseproducerede varer. Gennem et rent, balanceret og intuitivt design skal siden formidle kvalitet, æstetik og håndværksmæssig præcision, samtidig med at den giver brugeren en oplevelse af ro, overblik og tillid. Målet er at skabe et digitalt univers, hvor brugeren intuitivt kan udforske buketter, få indsigt i deres sammensætning og nemt gennemføre et køb. Hjemmesiden skal dermed fungere som et æstetisk og funktionelt udstillingsvindue, der understøtter Bloomés brandidentitet og målgruppens forventning om en eksklusiv, sammenhængende oplevelse.

Visual reseach og udvikling af wireframes og Mockups

Med afsæt i den definerede målgruppe, brandidentitet og formål gik jeg videre til designfasen, hvor jeg først samlede visuel inspiration til udtryk, farver og typografi. Herefter udarbejdede jeg low-fidelity wireframes for både landingpage og produktsider i desktop- og mobilversion.

Wireframes blev designet i Figma med anvendelse af et grid, der sikrede konsistent struktur og proportioner på tværs af siderne. Til desktopversionen anvendte jeg et 12-kolonne grid med en kolonneafstand (gutter) på 12 px samt fem horisontale rækker, der strukturerede indholdet i sektioner efter skærmens højde. Derudover tilføjede jeg to faste vertikale akser i hver side af layoutet, der skabte en fælles lodret struktur, så alt indhold flugtede præcist (billede 11, venstre). Det bidrog til et harmonisk og balanceret layout, hvor tekst, billeder og knapper har samme visuelle udgangspunkt. Mobilversionen blev opbygget med et 6 px grid og de samme to faste vertikale akser, hvilket sikrede, at strukturen forblev enkel og fleksibel, samtidig med at indholdet bevarede alignment og hierarki på den smallere skærm (billede 11, højre).

Billede 11: Lo-fi wireframes for desktop- (venstre) og mobilversion (højre), der viser anvendelsen af grid til struktur og præcis alignment.

Fitts’ Law og Hick’s Law blev anvendt som retningslinjer for knapstørrelser, afstande og antal valg, så brugerens kognitive belastning blev minimeret. I tråd med Aaron Marcus’ principper om Organize, Economize og Communicate blev designet struktureret med fokus på klar organisering, enkelhed og tydelig kommunikation.  Derudover blev preattentive attributes inddraget for at styre brugerens opmærksomhed mod de mest centrale elementer. Ved at arbejde med kontrast, størrelse og farveintensitet blev brugerens blik naturligt ledt mod overskrifter, call-to-action-knapper og produktbilleder, uden at designet føltes påtrængende. Dette bidrog til et klart visuelt hierarki og en intuitiv navigation på tværs af siderne.

Landingpagen blev struktureret med et tydeligt hero-billede, overskrift og CTA-knap, efterfulgt af sektioner med buketter og produktkategorier, der inviterer til rolig udforskning. Produktsiderne blev opbygget med fokus på genkendelighed og overblik i henhold til Jakob’s Law, hvor de mest centrale handlinger, som fx “Tilføj til kurv”, blev fremhævet gennem kontrast og placering.

Efter fastlæggelsen af struktur og hierarki udarbejdede jeg et style tile, der oversatte Bloomés brandidentitet til konkrete visuelle retningslinjer (billede 12). Style tile’et samlede farvepalet, typografi, billedstil og UI-elementer for at sikre en harmonisk og konsekvent æstetik på tværs af siderne. Farverne blev fordelt ud fra 60-30-10-reglen, hvor den dominerende farve skaber ro, den sekundære farve tilfører kontrast, og accentfarven fremhæver centrale interaktive elementer. Denne tilgang understøttede Marcus’ princip om Economize, idet designet blev holdt enkelt, afbalanceret og funktionelt. Typografien blev valgt for at formidle både elegance og læsbarhed, mens billedstilen fokuserede på naturligt lys, afdæmpede toner og kompositioner, der fremhæver blomsterne som visuelt attraktive dekorationer.

Billede 12: Style tile med farvebrug, typografi, billedstil og UI-elementer.

Style tile’et dannede grundlag for de efterfølgende high-fidelity mockups, hvor designprincipperne blev implementeret i praksis. Ved udviklingen af det endelige design blev tilgængelighed (A11Y) aktivt overvejet. Designet blev testet med fokus på farvekontrast, læsbarhed, tydelig navigation, touch-venlige elementer og tilpasset animation, så brugere med forskellige behov kunne interagere med hjemmesiden uden besvær. Wireframes for henholdsvis desktop- og mobilversionen kan ses på billede 13 og 14, mens high-fidelity mockups kan ses på billede 15 og 16. De færdige device mockups fremgår under resultat.

Billede 13: Wireframes for desktopversion af landingspage, produktoversigt og en produktside.
Billede 14: Wireframes for mobilversion af landingspage, produktoversigt og en produktside.
Billede 15: Hi-fi mockup for desktopversion af landingspage, produktoversigt og en produktside.
Billede 16: Hi-fi mockup for mobilversion af landingspage, produktoversigt og en produktside.
Resultat

Her ses det færdige resultat for desktop og mobil i device mockups (hhv. forside, produktoversigt og en produktside):

Reflektion

I forhold til vores tidligere workshops, har jeg ikke lært så meget nyt. Til gengæld fik jeg mulighed for at genopfriske pensum og afprøvet teorien i praksis. Det gav mig en bedre forståelse for, hvordan principper som Fitts’ Law, Hick’s Law, Jakob’s Law, Marcus’ Visible Language og A11Y kan bruges til at træffe konkrete designbeslutninger.

Mit mål var at skabe et roligt og tillidsvækkende univers, der afspejler Bloomés værdier om kvalitet, æstetik, tillid og ro. Jeg brugte afdæmpede farver og whitespace omkring elementerne for at skabe et harmonisk udtryk og give brugeren en følelse af overblik. Farverne blev fordelt efter 60-30-10-reglen, så designet fremstår afbalanceret, og de vigtigste elementer, som CTA-knapper, får tydelig opmærksomhed. Denne tilgang afspejler Marcus’ princip om Economize, hvor enkelhed og visuel balance fremmer fokus på det væsentlige. Samtidig fungerer accentfarven som en preattentive attribute, der guider brugerens blik mod centrale handlinger som “Tilføj til kurv” uden at forstyrre helhedsindtrykket.

Typografien blev valgt med fokus på læsbarhed og æstetik. Kombinationen af Abhaya Libre til overskrifter og Montserrat til brødtekst skaber et tydeligt hierarki og en god balance mellem det klassiske og moderne. Dog er jeg lidt i tvivl om skriftstørrelserne i mobilversionen, hvor teksten enkelte steder virker en smule lille. Til en anden gang vil jeg undersøge WCAG’s retningslinjer for tekststørrelse og kontrast mere grundigt før designfasen for at sikre, at alt indhold er let at læse på alle enheder.

For at styrke brugernes tillid og engagement valgte jeg at inkludere et afsnit med kundeanmeldelser på forsiden, der fungerer som social proof og skaber tryghed ved at vise, at andre kunder har haft gode oplevelser. Denne beslutning er taget på baggrund af teorien om social bekræftelse, der øger sandsynligheden for køb ved at signalere troværdighed og tilfredshed hos andre brugere. Samtidig placerede jeg CTA-knappen til højre på produktsiden i mobilversionen, så den ligger tæt på tommelfingerens naturlige rækkevidde. Denne placering gør knappen hurtig og nem at trykke på, hvilket stemmer overens med Fitts’ Law. Desuden arbejdede jeg med et 12-kolonne grid til desktop og et 6-kolonne grid til mobil for at sikre en ensartet struktur og alignment på tværs af siderne. De store klikbare områder og den tydelige afstand mellem elementerne er med til at reducere risikoen for fejlklik på touchskærme.

Dog er der flere områder, jeg gerne vil forbedre i næste iteration. Først og fremmest kunne designet gøres mere levende ved at tilføje mikroanimationer i form af små hovereffekter som et lille zoom på produktbilleder og farveskift på CTA-knapper. Sådanne subtile animationer fungerer som visuel feedback, der hjælper brugeren med at forstå, hvilke elementer der er interaktive. Derudover bør hjemmesiden udvides med flere sider. Det nuværende design dækker kun forside, produktoversigt og produktside, men en komplet webshop kræver et mere sammenhængende flow med “Læg i kurv”-sektion, checkout-proces, ordrebekræftelse og en “Om os”-side med information om brand og levering. Disse sider er vigtige for at understøtte hele brugerrejsen og skabe tillid gennem transparens og forudsigelighed.

Et andet forbedringspunkt er produktoversigten. Jeg har allerede tilføjet en søgefunktion, men jeg kunne med fordel supplere med et filtreringssystem, så brugerne nemt kan sortere efter pris, farve eller bukettype. Ifølge Hick’s Law kan sådan en funktion mindske kognitiv belastning, fordi den hjælper brugeren med at overskue valgmulighederne. Desuden kunne jeg også tilføje et billedgalleri på produktsiden, så produktet vises fra flere vinkler eller i forskellige miljøer. Det ville give en mere realistisk og inspirerende oplevelse, samtidig med at det styrker tilliden til produktets kvalitet.