Wireframe

En wireframe er en skitse af siden. Den viser typisk overskrift, navigation, indholdsblokke, knapper, billeder og formularer som enkle felter. Formålet er at diskutere struktur uden at blive distraheret af farver og flotte fotos.

Det kan sammenlignes med en plantegning. Det er billigere at flytte køkkenet på tegningen end efter huset er bygget. På samme måde er det lettere at ændre rækkefølgen på en hjemmeside før design og udvikling er langt.

Den kan være skitseret på papir, i Figma eller i et specialværktøj. Det vigtigste er ikke programmet, men de spørgsmål skitsen hjælper med at besvare.

En wireframe bør vise hierarki og funktion: Hvad ser brugeren først? Hvor ligger næste skridt? Hvilke informationer hører sammen? Hvordan kommer man videre?

På en webshop kan den vise kategori, filtre, produktkort og kurv. På en serviceside kan den vise problem, løsning, dokumentation, proces og kontakt. Det er tæt forbundet med brugerrejsen og CTA’en.

Der behøver ikke stå færdig tekst, men brug realistiske overskrifter og omtrentlige tekstmængder. “Lorem ipsum” på tre linjer hjælper ikke, hvis den virkelige forklaring bliver 250 ord.

Uden skitse kan kunden sige “jeg vil have noget moderne”, og designeren kan forestille sig noget helt andet. Med en wireframe kan man tale om konkrete valg: Skal priserne stå før cases? Skal kontaktformularen være på siden eller åbne separat? Er produktfilteret vigtigere end kampagnebanneret?

Det reducerer ændringer senere, men det betyder ikke, at alt er låst. En god proces bruger wireframen som arbejdsredskab og justerer, når ny viden kommer.

For en frisørside kan man eksempelvis opdage, at booking og behandlinger skal ligge højere, mens virksomhedens historie kan vente. Det er en prioritering, ikke et farvevalg.

En low-fidelity wireframe er grov og hurtig. Den er god tidligt, fordi ingen bliver forelsket i detaljer. En high-fidelity wireframe eller prototype ligger tættere på det færdige produkt og kan bruges til mere præcis test.

Problemet opstår, når en grå skitse bliver vist uden forklaring, og kunden tror, at designet allerede er kedeligt. Sæt forventningen tydeligt: Vi tester struktur nu; udtryk kommer senere.

Når strukturen er godkendt, kan UI-design og visuel identitet give siden karakter og genkendelighed.

En meget enkel kampagneside kan nogle gange designes direkte, især hvis indholdet og designsystemet allerede findes. Det er ikke et mål at producere flere dokumenter.

Til gengæld er wireframes nyttige ved komplekse sider, nye funktioner, flere interessenter eller uklare krav. De er også gode til at teste mobil først, før desktopversionen får lov at fylde alt.

Brug wireframes, når de reducerer usikkerhed. Spring dem over, når de bare bliver endnu en fil, ingen bruger.

Wireframes er værdifulde, fordi de gør uenigheder synlige tidligt. Hvis kunden forventer priser på forsiden, mens designeren har gemt dem i en undermenu, er det bedre at opdage det, før typografi, billeder og animationer er på plads.

De bør vise hierarki og funktion, men ikke foregive at være det færdige design. En simpel skitse kan indeholde navigation, hovedbudskab, dokumentation, næste skridt og de vigtigste mobile tilpasninger. Den behøver ikke have rigtige farver eller perfekte tekster.

Brug realistiske tekstmængder. En boks med “lorem ipsum” på to linjer kan se elegant ud, men falder fra hinanden, når den rigtige ydelsesforklaring fylder otte linjer. Det samme gælder produktnavne, medarbejderprofiler og nyhedsoverskrifter.

Når wireframen er godkendt, bliver den et fælles kort for UI-design, indhold og udvikling. Den fjerner ikke ændringer senere, men den reducerer dyre overraskelser. På en større hjemmeside er det ofte den hurtigste måde at få beslutninger ud af møder og ned på en konkret side.

Gennemgå wireframen med én, der ikke har deltaget i projektet. Bed personen pege på, hvor man finder pris, kontakt, levering eller næste skridt. Hvis det kræver en forklaring fra designeren, er strukturen ikke tydelig nok endnu. Den slags test tager ti minutter og kan spare mange rettelser i det færdige design.

Gem den godkendte version som reference. Når nye ønsker dukker op under udviklingen, kan man se, om de løser et reelt behov eller bare flytter projektet væk fra de beslutninger, der allerede blev truffet.