Byg sider op i wireframes
Design og UX
Workshop
Wireframing er et brugbart værktøj, når man skal skitsere hvordan en side skal opbygges. Inden du begynder at tænke farver, fonte, billeder og indhold, kan du med fordel lave et wireframe-forløb, så dig og dit team alle er enige om hjemmesidens opbygning.
Introduktion
En wireframe er en visuel skitse, der viser, hvordan indholdet på en side skal placeres i forhold til hinanden – altså layoutet. Formålet er ikke at designe siden færdigt, men at skabe et overblik over strukturen: Hvor skal overskriften være? Hvor placeres billeder? Hvilke knapper skal brugeren kunne klikke på – og hvor giver det mest mening, at de står?
Du tegner wireframen med enkle former som firkanter, streger og tekstbokse – det behøver hverken være kønt eller teknisk. Brug det som en hurtig og lavpraktisk måde at afprøve idéer til siden, uden at du skal tage stilling til farver, skrifttyper eller billeder endnu.
Tænk på det som en slags "skelet" for din side. Du fokuserer på funktion og rækkefølge. Keep it simple - det vigtigste er, at det giver mening for dig (og dem du evt. samarbejder med).
Du tegner en wireframe med enkle former som firkanter, streger og tekstbokse. På den måde kan alle være med, og din idé står tydeligt frem. Et eksempel på en wireframe er følgende:
En wireframe er et helt enkelt og tidligt værktøj i planlægningen af en hjemmeside. Den bruges til at skitsere struktur og funktion, længe før man tager stilling til farver, fonte, billeder og grafik. Det er en visuel tjekliste over, hvad der skal være med på siden, og hvor det skal placeres.
Et mockup kommer først senere i designprocessen. Det er en mere detaljeret og “pæn” udgave af siden, hvor man også tager højde for det visuelle udtryk: Layout, typografi, farvevalg og billedstil. Mockups laves ofte i professionelle designværktøjer og bruges til at vise, hvordan den færdige side vil komme til at se ud.
Du bruger altså en wireframe som et hurtigt og lavpraktisk redskab til at få styr på, hvordan en side er opbygget uden at blive fanget i grafiske beslutninger for tidligt.
Forløb
Lav dine egne wireframes
Wireframe-øvelsen hjælper dig med at få overblik over, hvordan en side bedst bygges op. Øvelsen gør det muligt at planlægge en sides struktur og indhold, og hjælper med at samle alles idéer og kommunikere dem til kolleger, designere eller udviklere.
Øvelsen er delt op i fem trin og fungerer bedst, når man er flere der producerer wireframes til de samme sider på samme tid.
Det skal du bruge
For at wireframe-workshoppen bliver en succes, er det vigtigt at have styr på de praktiske rammer. Du skal ikke bruge meget, men det, du har, skal være klart og tilgængeligt, så deltagerne kan fokusere på idéudvikling og samarbejde.
Her er det, du bør have klar:
- Masser af papir og blyanter
Almindeligt A4-papir fungerer fint. Brug gerne flere ark pr. person, så der er plads til at skitsere og starte forfra.
Blyanter eller tuscher gør det nemt at tegne hurtigt og ændre undervejs. -
Evt. et digitalt workspace
Hvis I arbejder digitalt, kan I bruge værktøjer som Miro, Figma, PowerPoint, Jamboard eller lignende. Sørg for, at alle deltagere har adgang og kender det grundlæggende. -
Et fysisk eller virtuelt rum til at præsentere og diskutere
Det kan være en væg, whiteboard, delt skærm eller en digital tavle. Det vigtige er, at I har et fælles sted at samles og gennemgå hinandens wireframes. -
Tydelig opgaveformulering og eksempel
Hav en klar instruktion klar: Hvilken side skal de skitsere? Hvad er formålet med siden? Og vis gerne et enkelt eksempel på en wireframe, så alle er trygge ved opgaven. -
IA eller sideliste fra tidligere øvelse
Sørg for, at deltagerne har adgang til den informationsarkitektur eller sideliste, de tidligere har udarbejdet. Det gør det lettere at vælge relevante sider at arbejde med og forstå, hvordan siderne er placeret i strukturen.
Trin 3 ud af 5
Tegn
Brug blyant og papir, whiteboard eller digitale værktøjer som PowerPoint, Figma eller Miro. Tegn enkle streger, firkanter og tekstbokse til at vise, hvor de forskellige elementer skal placeres. Du kan skrive “overskrift her”, “billede her”, “knap” osv. som supplement til stregerne. Husk det ikke behøver at være pænt eller detaljeret, men at det bare skal kommunikere, hvor indholdet skal placeres i forhold til hinanden.
Hvis du har begrænset erfaring med at tegne eller alle ikke føler sig komfortable med at tegne for hinanden, kan I i gruppen starte med en kort opvarmningsøvelse hvor I tegner forskellige ting, eks. en kop, en sko, en plante, et ansigt eller et dyr – gerne hurtigt og uden at løfte pennen fra papiret. Det handler ikke om at det skal være pænt, men om at få hånden i gang og give slip på perfektion.
Hvad så nu?
Når du har lavet dine wireframes, har du ikke bare nogle skitser liggende. Du har skabt et vigtigt udgangspunkt for det videre arbejde med jeres website. Wireframes gør det nemmere at arbejde videre med både indhold, design og teknik, og de kan bruges på flere måder i de næste faser:
Som brief til designere
Når du skal samarbejde med en designer, gør wireframen det langt nemmere at forklare, hvad siden skal kunne, og hvilke elementer der er vigtigst. Den giver en tydelig retning og reducerer misforståelser.
Som input til udviklere
Wireframes kan også bruges til at give udviklere en idé om, hvordan siden skal fungere og opbygges – især hvis man skal arbejde med moduler eller komponenter.
Til prioritering af indhold
Wireframes hjælper dig med at finde ud af, hvilke tekster, billeder og funktioner du mangler. Du får et klart billede af, hvad du skal producere af indhold.