Wireframes: Hvilken Størrelse Skal De Have?

I UX designprocessen er wireframing ofte det allerførste skridt, når man skal skabe et website. Et website-wireframe er grundlæggende et blåtryk, der skitserer strukturen og layoutet af en webside. Det kortlægger sidens indhold, funktionalitet og navigationsskema.

Fordi wireframes giver webdesignere mulighed for strategisk at placere nøgleelementer på en side, spiller de en afgørende rolle i designet af et website. Ved at skabe en visuel repræsentation af et websites indhold kan designere få en bedre fornemmelse af, hvordan brugere vil interagere med sitet. Dette er netop grunden til, at du handler eller læser indhold fra dit yndlingsmærke – fordi de tilbyder en fremragende brugeroplevelse (UX).

At skabe et wireframe er det første skridt på vejen mod at designe et website, der leverer en fantastisk UX. Men hvad præcist indgår i at lave et wireframe? Og hvordan sikrer du, at dit wireframe resulterer i en god UX? Lad os se nærmere på website-wireframes, eksempler på wireframes, og hvordan man skaber dem, med særligt fokus på det ofte stillede spørgsmål: Hvilken størrelse skal et website-wireframe have?

Hvad er et Wireframe, Præcist?

Et wireframe er en lav-fidelitet, skeletagtig repræsentation af dit websites indhold. Det er i bund og grund en visuel guide, der viser layoutet og arrangementet af et websites indhold. Typisk er der intet fancy over det – bare nogle simple kasser og linjer, der repræsenterer websitets indhold. Pointen med et wireframe er at fokusere på funktionalitet, hierarki og relationer mellem indhold, IKKE på æstetik. Hvis æstetik er dit primære mål, er en karriere inden for visuelt design måske mere passende for dig.

Tænk på det på denne måde: hvis et website var et hus, så ville dets wireframe være blåtrykket. Ligesom blåtryk viser strukturen af et hus og hvordan dets rum er arrangeret, viser wireframes strukturen af et website og hvordan dets indhold er arrangeret.

Wireframes hjælper også webdesignere med at planlægge et websites funktionalitet. Baseret på brugerundersøgelser kan designere kortlægge, hvor visse funktioner skal placeres på en side, og hvordan brugere vil interagere med dem. For eksempel, hvis du designer et e-handelswebsite, vil du sikre dig, at 'tilføj til kurv'-knappen er fremtrædende og nem at finde. Wireframes hjælper designere med at opnå dette ved at give dem mulighed for at planlægge layoutet af en side, før de begynder at tilføje visuelle elementer.

Hvorfor er Wireframing Vigtigt?

Du ville vel ikke bygge et hus uden først at lave et blåtryk, vel? Og du ville bestemt ikke bygge det uden at rådføre dig med en professionel arkitekt. Det samme gælder for wireframing af et website. Ligesom du ikke ville bygge et hus uden et blåtryk eller en arkitekt, bør du ikke bygge et website uden et wireframe eller en UX designer.

Der er flere fordele ved wireframing, både for designere og for de virksomheder, hvis websites de designer:

• Hjælper designere med at planlægge et websites funktionalitet.
• Letter kommunikationen mellem designere og kunder.
• Reducer risikoen for at skulle foretage ændringer senere i processen.
• Sparer tid og penge i det lange løb.
• Bidrager til at skabe en bedre brugeroplevelse.

Website-wireframes er også en fantastisk måde at få feedback fra kunder på. Når du har oprettet et wireframe, kan du dele det med din kunde og få deres input til websitets layout og navigation. Dette er meget nemmere (og billigere) end at foretage ændringer på et færdigt website.

Hvad Indgår Typisk i et Website Wireframe?

Som vi kort berørte tidligere, afhænger mængden af detaljer, der indgår i et wireframe, virkelig af typen af wireframe, du skaber. Men generelt er der et par nøgleelementer, som ethvert wireframe bør inkludere:

• Et header-område med sitets logo og primær navigation.
• Det primære indholdsområde, hvor det meste af sidens indhold vil befinde sig.
• Et footer-område med sekundær navigation og ophavsret information.

Wireframes laves typisk i gråtoner for at holde fokus på funktionalitet og indhold, men nogle designere tilføjer farve for at differentiere mellem forskellige typer indhold (f.eks. billeder, videoer osv.). Andre farveklatter kan bruges i høj-fidelitets wireframes til at indikere links, knapper, advarselsmeddelelser eller klikbare og scrollbare elementer på siden.

Forskellige Typer af Website Wireframes

Inden for website-wireframe design er der tre hovedtyper:

1. Lav-fidelitet (Low-fidelity)
2. Mellem-fidelitet (Mid-fidelity)
3. Høj-fidelitet (High-fidelity)

Og ja, du gættede rigtigt – hver type varierer i forhold til mængden af detaljer, den inkluderer.

Lav-Fidelitet Wireframes

Som navnet antyder, er lav-fidelitet (eller lo-fi) wireframes grundlæggende repræsentationer af et websites indhold og struktur. De oprettes typisk ved hjælp af blyant og papir eller simpel software som Microsoft Word eller PowerPoint.

Fordi de er hurtige og nemme at oprette, bruges lav-fidelitet wireframes ofte i de tidlige stadier af webdesign. De hjælper designere med at kortlægge et websites indhold og layout uden at drukne i detaljer. De er også nyttige for designere, der overvejer flere produktkoncepter og skal beslutte, hvilken retning de skal gå. Disse former for wireframes oprettes normalt for hjemmesiden og et par nøglesider på websitet. Når de har kortlagt brugerflowet og layoutet, kan designere gå videre til at skabe digitale wireframes.

Mellem-Fidelitet Wireframes

Mellem-fidelitet wireframes har lidt mere 'kød' på sig end lav-fidelitet wireframes. Ud over placeholder-tekst og simple former inkluderer de faktiske billeder, reelt indhold og grundlæggende typografi. Du vil sandsynligvis bruge wireframe-værktøjer som Sketch eller Balsamiq til at oprette mellem-fidelitet wireframes af dit site. Disse apps har præbyggede komponenter, som du kan bruge til hurtigt at oprette almindelige web-elementer som knapper, formularfelter og navigationsmenuer.

Mellem-fidelitet wireframes passer ind i billedet, når du har besluttet dig for den overordnede struktur af dit website. De hjælper dig med at kortlægge indholdet for hver side og begynde at tænke over, hvordan brugere vil interagere med dit site.

Høj-Fidelitet Wireframes

Høj-fidelitet (hi-fi) wireframes er den mest detaljerede type wireframe. De inkluderer branding-elementer som skrifttyper og knapper samt detaljeret styling, som skygger, brødtekst, farver og gradueringer. De kan også inkludere UI-elementer som hover-tilstande og drop-down menuer, men disse vil typisk ikke være klikbare. Høj-fidelitet wireframes oprettes typisk ved hjælp af wireframe-værktøjer som Figma eller MockFlow, fordi de kræver lidt mere omhu og detaljegrad end hvad der er tilgængeligt i enklere værktøjer.

På det tidspunkt, hvor produktet når denne fase, kan webdesignere gå videre til mockup- og prototyping-faserne.

Wireframe vs. Mockup vs. Prototype

Man kan sige, at wireframet går, så mockups og prototyper kan løbe. Ligesom wireframes oprettes wireframe mockups typisk ved hjælp af et designværktøj som Figma, Adobe XD eller InVision. Et wireframe mockup er en statisk, høj-fidelitet repræsentation af dit site, der inkluderer reelt indhold og billeder ud over branding-elementer og detaljeret styling.

Interaktive prototyper tager processen et skridt videre ved at tilføje navigationsevner. De er som wireframe mockups, der giver brugerne mulighed for at klikke sig videre til forskellige sider. De er komplette med UI-elementer, animationer og overgange. Når brugertestning er gennemført, forfines prototypen yderligere for at forberede den til kodning.

Sådan Skaber du et Grundlæggende Website Wireframe

Nu... vi ville ikke være den bedste online kodeskol og designskole, hvis vi ikke viste dig, hvordan det gøres, vel? I dette afsnit gennemgår vi det grundlæggende i at skabe et wireframe ved hjælp af et wireframe-værktøj.

1. Identificer målet med website-designet. Uanset om det er til en personlig webside eller blog, en e-handelsbutik du starter, eller et projekt for en klient, er dit første skridt at evaluere målene for websitet. Ved første tanke kan dette virke simpelt – brugerfladen skal se professionel ud og drive så mange konverteringer som muligt, ikke? Forkert. Dit websites design bør altid stemme overens med de specifikke mål, du håber at opnå. Skal dine besøgende afslutte deres session med et køb? Vil du have dem til at blive på din landingsside og lede efter mere information? Vil de downloade din nyeste e-bog eller tilmelde sig dit nyhedsbrev? Hvad hvis de absolut intet gør, men forlader dit site med den information, de har brug for? Svarene på disse spørgsmål vil guide dit team gennem designprocessen og hjælpe dem med at træffe vigtige beslutninger, som at vælge de rigtige fokuspunkter, hypotetiske placeringer for grafiske elementer og placeholder-tekst (lorem ipsum).
2. Kortlæg dit brugerflow. Du ved måske ikke præcist, hvor du skal begynde med dit wireframe-design, og det er okay. De fleste applikationer og websites starter med flere sider, brugeren kan navigere igennem. For at hjælpe med at organisere dine tanker, start med at skitsere et grundlæggende brugerflow-diagram. Dette vil hjælpe dig med at bestemme, hvor mange sider du har brug for, og hvilket indhold der skal være på hver enkelt. Du kan starte med en simpel blyant-og-papir tegning. Dette er sandsynligvis dit bedste første skridt, da det giver dig mulighed for at få dine ideer ned. Du kan også bruge et gratis wireframe-værktøj til at oprette dit eget eller bruge en foruddesignet skabelon. Med en brugervenlig drag-and-drop grænseflade kan dette være en hurtig løsning, der holder dig organiseret. Når du har din informationsarkitektur, kan du begynde at skitsere hver enkelt side. Derefter kan du tegne dem ud i et visuelt hierarki, startende med det vigtigste indhold øverst og arbejde dig ned.
3. Bestem størrelsen på dit wireframe. Afhængigt af den skærmstørrelse, dit website-wireframe skal ses på, skal du justere dimensionerne af dit wireframe. Da de fleste browserbaserede webdesignprojekter kræver en mobil-først tilgang, skal du eventuelt oprette et separat wireframe til mindre skærme, herunder smartphones og tablets. Det er afgørende at designe med responsivitet for øje, hvilket betyder, at dit website skal se godt ud og fungere korrekt på tværs af enheder. Selvom wireframing fokuserer på struktur, er det vigtigt at overveje, hvordan strukturen vil tilpasse sig forskellige skærmstørrelser allerede på dette stadie.
4. Skitser din næste runde ved hjælp af et wireframe-værktøj. Når du har en klar idé om, hvor mange sider du har brug for, hvilket indhold der skal være på hver enkelt, og hvilke sider der skal linkes sammen, er det tid til at begynde at bygge dit mellem-fidelitet wireframe. På det tidspunkt, hvor du har kortlagt dit brugerflow, vil du have nok skitset information til at tage det til et skitseværktøj som Balsamiq, MockFlow eller Sketch og begynde at oversætte dine wireframes til digital form.
5. Fokusér på detaljerne. Nu hvor du har en grundlæggende fundament at arbejde ud fra, er det tid til at begynde at udfylde blanke felter. I de fleste tilfælde vil de konverteringspunkter, du identificerede i trin et, være det primære fokus for din wireframing-strategi. Dette trin er, hvor du begynder at lege med grafiske elementer, skrifttyper og farver for at se, hvad der fungerer bedst. Du kan også tilføje placeholder-tekst (lorem ipsum) for at hjælpe dig med at visualisere, hvordan det endelige produkt vil se ud. Når du når dette stadie, har du det meste af din struktur lagt ud, og du har måske endda noget (eller alt) af teksten skrevet. De eneste ting, der mangler, er dine UI-kits og endelige designelementer.
6. Test dit website-wireframe. Før du kan gå videre til lav-fidelitets prototyper og høj-fidelitets wireframe mockups, skal du sikre dig, at dit wireframe er brugervenligt og effektivt. Den bedste måde at gøre dette på er ved at teste det på rigtige brugere. Du kan rekruttere venner, familie eller kolleger til at teste dit wireframe og give feedback. Hvis du ikke har nogen umiddelbart tilgængelige, kan du også poste dit wireframe på fora eller websites som UserTesting og få feedback fra fremmede.
7. Foretag ændringer og gentag trin 5-6. Når du har indsamlet nok feedback, er det tid til at foretage ændringer i dit wireframe og teste det igen. Gentag denne proces, indtil du har et fremragende wireframe, der er veldesignet, effektivt og har et klart informationshierarki.

Bestemmelse af Størrelsen på dit Wireframe

Spørgsmålet om wireframets størrelse er centralt for at sikre, at dit design fungerer på tværs af de mange enheder, brugerne anvender i dag. Selvom det grundlæggende layout er kernen i et wireframe, er det vigtigt at overveje, hvordan dette layout vil skalere og tilpasse sig forskellige skærmdimensioner. Her er de standardstørrelser, der ofte bruges som udgangspunkt, især når man arbejder med en mobil-først tilgang:

Det er vigtigt at forstå, at disse størrelser ikke er absolutte regler, men snarere almindelige referencepunkter. Moderne webdesign er responsivt, hvilket betyder, at layoutet dynamisk tilpasser sig brugerens skærmstørrelse, snarere end at have faste layout for kun disse tre punkter. Dog giver wireframes i disse standardstørrelser designeren et konkret udgangspunkt for at tænke over, hvordan elementer som navigation, indholdsbokse og billeder vil omarrangeres eller ændre størrelse på forskellige enheder.

At starte med mobil-størrelsen (320x480px) og derefter skalere op til tablet og desktop er en populær og effektiv strategi. Dette tvinger designeren til at prioritere indhold og funktionalitet, da pladsen er begrænset på mobil. De mest vigtige elementer skal være fremtrædende og let tilgængelige. Når designet fungerer godt på mobil, er det ofte nemmere at udvide og tilføje mere komplekse elementer og layout på større skærme.

Husk, at formålet med at lave wireframes i forskellige størrelser er at forudse brugerens oplevelse på forskellige enheder. Det handler ikke kun om at kopiere layoutet og gøre det mindre eller større, men om at gentænke, hvordan brugeren interagerer med indholdet og navigeringen under forskellige forhold. Dette kan betyde, at navigationen ændrer sig fra en top-menu på desktop til en 'hamburger'-menu på mobil, eller at billeder fylder hele bredden på mobil, men kun en del af skærmen på desktop.

Ofte Stillede Spørgsmål

Hvad er forskellen på et wireframe og et mockup?
Et wireframe er et lav- eller mellem-fidelitet 'blåtryk' af strukturen og layoutet, der fokuserer på funktionalitet og hierarki. Et mockup er en statisk, høj-fidelitet visuel repræsentation, der inkluderer farver, typografi, billeder og branding, og viser, hvordan det færdige design vil se ud.

Hvorfor er det vigtigt at lave wireframes i forskellige størrelser?
Det er vigtigt for at sikre, at websitet er responsivt og leverer en god brugeroplevelse på tværs af alle enheder – fra små smartphones til store desktop-skærme. Ved at designe til forskellige størrelser tvinges man til at tænke over, hvordan layout og navigation tilpasser sig.

Hvilke værktøjer kan jeg bruge til at lave wireframes?
Der findes mange værktøjer, afhængigt af fidelitetsniveauet. Til lav-fidelitet kan du bruge blyant og papir eller simple programmer som PowerPoint. Til mellem- og høj-fidelitet findes der dedikerede værktøjer som Balsamiq, Sketch, Figma, Adobe XD og MockFlow.

Skal mit wireframe være farvet?
Typisk laves wireframes i gråtoner for at holde fokus på struktur og funktionalitet frem for æstetik. Dog kan farve bruges sparsomt i høj-fidelitet wireframes til at indikere interaktive elementer eller forskellige indholdstyper.

Hvor lang tid tager det at lave et wireframe?
Tiden det tager varierer meget afhængigt af projektets kompleksitet, websitets størrelse og den ønskede fidelitetsgrad. Et simpelt lav-fidelitet wireframe kan tage minutter eller timer, mens et detaljeret høj-fidelitet wireframe for et stort site kan tage dage.

Få Succes Med Dit Næste Designprojekt Ved at Wireframe Først!

For ikke-designere kan det at skabe et wireframe for en landingsside eller applikation virke lidt udfordrende i starten. Vi ved det. Vi har været der. Men når du først får greb om det, vil du kunne bevæge dig gennem designprocessen med lethed og producere bedre resultater på kortere tid.

Wireframing er et uundværligt skridt, der lægger fundamentet for et succesfuldt digitalt produkt. Ved at fokusere på struktur, funktionalitet og brugerflow tidligt i processen, minimerer du risikoen for kostbare ændringer senere og sikrer, at dit endelige design er intuitivt og effektivt for brugeren, uanset hvilken skærmstørrelse de anvender. At mestre kunsten at wireframe – herunder at designe med forskellige størrelser for øje – er en nøglekompetence for enhver, der arbejder med digitalt design.

Hvis du vil læse andre artikler, der ligner Wireframes: Hvilken Størrelse Skal De Have?, kan du besøge kategorien Fotografi.