phone icon

Hvad er en wireframe og hvorfor skal du bruge det?

Læs her hvilke fordele du opnår ved at bruge wireframes som en del af designprocessen til dit nye website eller webshop. Artiklen beskriver både metoder og software som kan anvendes.


Hvad er en wireframe og wireframing?

Der findes mange definitioner af wireframes på nettet.
Her er en engelsk definition som beskriver, hvad der typisk bliver praktiseret i dag:
A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site.
(kilde: webopedia)

Altså et visualiseringsværktøj som præsenterer foreslåede funktioner, struktur og indhold på et website. Desværre fortolkes dette ofte lidt anderledes i praksis så det i stedet bruges som: en stregtegning som præcist dikterer funktioner, struktur og indhold på et website.

Sidstnævnte, og dermed den definition som ofte ses brugt i praksis, begrænser dog potentialet ved et webdesign. Det sætter et glasloft for det visuelle og indholdet på websitet, som begge er primære parametre ved et godt og gennemtænkt webdesign. Når man lader sig diktere af wireframen og dermed begrænser kreativiteten, forstærker det tesen om, at grafikere og tekstforfattere ikke må have indflydelse på størrelse, placering og funktionalitet af deres respektive produkter nemlig det visuelle og indholdet. Det var måske i orden i de tidlige website-år (1999), hvor vi først var ved at vænne os til de nye UX metaforer på nettet. Hvis ikke det grafiske og indholdet bliver en central del af websitet i dag, risikerer man at ødelægge det naturlige flow og interaktion på hjemmesiden. Derfor er det vigtigt at bruge wireframen som inspiration og ikke en facitliste. 

wireframe 2

Se f.eks. på den naturlige udvikling vi har oplevet, hvor ”tilbage knappen” og ”scrolling” ligger på rygraden som almindelige værktøjer i vores daglige færden på nettet. Dette er på grund af den sammensmeltning, som sker mellem discipliner og medier f.eks. med browsere på smartphones hvor vi er vant til at scrolle og trykke tilbage.

Essensen er, at den generelle tanke og brugen af wireframes skal opdateres.


Hvorfor bruge wireframes?

Hvis du aldrig før har brugt wireframes som en del af et projekt kan det være irriterende at bruge i starten. Det kan føles som om din kreativitet bliver pakket ned i en æske og kastet væk. Ligeledes kan det være svært at finde ud af, hvor meget og hvor lidt du skal have design i tankerne, mens du wireframer og hvor mange detaljer du skal have med.
Hvis du er uerfaren kan det tage lidt tid at vænne sig til at wireframe, men det er umagen værd! Inden længe vil du elske at have en wireframe, at basere dit design på. Hvad angår kunden, så vil de fleste kunder forstå vigtigheden af at kortlægge websitet og indholdet på de forskellige sider, inden man designer sitet.
Man skal kende forskellen mellem begreberne wireframe, mock-ups og prototyper, hvilket nogle gange bruges på kryds og tværs. Det er nemlig 3 forskellige ting, selvom der kan være overlap imellem dem. Alle 3 har forskellige formål som de bidrager med til designprocessen.

Wireframes er simple illustrationer af strukturen og komponenterne på en hjemmeside. Dette er typisk første skridt i designprocessen


Mockups fokuserer generelt på de visuelle designelementer på siden. Disse er ofte identiske, eller meget tætte på det færdige design og indeholder alt grafik, typografi og elementer på siden. Mockups er generelt bare billedfiler.

Prototyper er semifunktionelle webside-layouts af et mockup, hvis formål er give et større indblik i funktionaliteten af sitet inden det bygges endeligt. Prototyper har et user interface og er som regel lavet med HTML/CSS og nogen gange endda JavaScript, for at vise hvordan frontenden virker. Prototyper anvendes inden programmering af logikken på et site. Selvom den fulde funktionalitet ikke er bygget i en prototype, så giver det kunden en mulighed for at klikke rundt og prøve den endelige funktionalitet som siden får. Prototyper kan laves både med og uden de endelige design elementer.

Fordele ved wireframing:

wireframe 3

  1. Det er nemmere at forventningsafstemme med kunden inden sitet designes. Kunden kan se hvordan det bliver inden der er brugt mange designtimer, og såfremt der er rettelser kan de implementeres inden designfasen påbegyndes.
  2. Selvom du er verdensmester i Photoshop, så er det stadig tidskrævende at lave ændringer i Photoshop. Disse ændringer er nemmere at lave i simple tegninger eller illustrationer.
  3. Det er relativt nemt og hurtigt at afprøve mange forskellige idéer til websitet med en wireframe
  4. Wireframes gør det nemt at fastlægge, hvad der er vigtigt på de forskellige sider
  5. Det er nemmere at fastlægge, hvor CTA-elementerne skal placeres. Det giver designeren mere tid til at koncentrere sig om at lave gode CTA’er, visuel hierarki og meget mere
  6. Man undgår en 1.000 siders kravspecifikation fordi funktioner og features ofte implementeres i wireframen og deraf også en bedre produktspecifikation.


Sådan laver du en wireframe

Der finds flere forskellige værktøjer og metoder til at lave en wireframe. Underneden kan du læse lidt om de forskellige tilgange til wireframing med fordele og ulemper ved dem, hver især.

Tegninger / Sketching
Kan bruges på mange måder: F.eks. med blyant, kuglepen, tusch, farveblyanter – selv kridt på en tavle. Det er bare med at komme i gang.

Det gode:

  • Hastighed
    Det er meget hurtigt at bruge og du kan nemt tegne de idéer som falder dig ind
  • Fleksibilitet
    Du kan hurtigt gå mere eller mindre i detaljen med funktionaliteten på samme side
  • Begrænsede forstyrrelser
    Du kan virkelig fokusere på produktstrukturen, indhold, informationshierarki, funktionalitet og interaktion i stedet for det visuelle design.


Det dårlige:

  • Dobbelt arbejde
    Der er ingen master skabelon eller elementer som kan genbruges. Du kan ikke rette eller kopiere hvilket hurtigt bliver kedeligt
  • Lavpraktisk
    Du kan ikke inkludere medier eller fonte og det er sværere at vise interaktion og animationer end med digitale redskaber
  • Ikke interaktiv
    Du kan ikke koble tegninger sammen
  • Ingen versionskontrol
    Det er det samme med alle analoge redskaber: Der er ingen tidsstempel, overblik over hvem so har lavet ændringer og du kan ikke tage kopier
  • Begrænset samarbejde
    Som regel er det kun en enkelt person som arbejde på dem. Samarbejde sker som regel kun når den ene person beslutter sig for at dele dem på et møde. Før under og efter det tidspunkt, har få eller ingen adgang til dem. 
  • Ingen standardisering
    Elementer kan være usammenhængende hvis man ikke passer på og proportionerne kan være skæve
  • Æstetisk grimt
    For de fleste som ikke har gået på designskolen, kan tegningerne være så grimme at de bliver betragtet som ubrugelige


Tavle / Black og Whiteboards
Minder meget om ovenstående (tegning) dog med nogle få men vigtige forskelle.

Det gode:

  • Samarbejde
    Forskellige team medlemmer kan arbejde på de samme wireframes samtidig, uanset hvor simple eller komplekse det måtte være
  • Skala
    Mediet tillader dig at starte på et højere niveau i produktdesignprocessen og binde flere forskellige aspekter sammen rent visuelt
  • Tilgængelighed
    De fleste kontorer har dem


Det dårlige:

  • Fast montering
    Tavler er ofte fastmonterede hvilket kan gøre det sværere eller måske endda en dealbreaker for nogen. Det kræver øvelse at kunne udnytte en tavle ordenligt. 
  • Begrænsede detaljer
    Detaljegraden er ofte begrænset på en tavle


Papirskabeloner
Standard papir wireframing redskaber

Det gode:

  • Detaljegrad
    Du kan benytte digitale wireframing redskaber til at skabe de indledende elementer og kan derefter vælge hvor detaljeret det skal være.
  • Standaradisering
    Du laver en masse af de samme udskæringer eller opsætter de samme udskæringer. Derfor bliver din wireframe elementer standardiseret
  • Interaktivitet
    Du kan opsætte indhold på en væg, sætte dem fast rundt om din telefon, tape dem på din computerskærm, flytte og reorganisere.

Det dårlige:

  • Hastighed
    De tager længere tid end tegninger indledningsvis, men kan spare dig tid hvis wireframe elementer skal reorganiseres. 


Grafisk design redskaber
Illustrator, Photoshop og InDesign, som alle er nemme at bruge – hvis man kender dem.
Du kan bruge ”Grey Box Metoden”, hvor man bruger det fulde gråskalaspektrum til at lægge vægt på visse elementer, uden at bruge tid på at vælge en bestemt farve eller klistre dit design til med Lorem Ipsum tekst som begge kan virke distraherende i de indledende designskridt. Det kan ligeledes hjælpe dig med det grafiske design senere. Det er specielt godt til at teste user-flows og organisere grafisk indhold, men kan også være en personlig præference fremfor blokdiagrammer eller blokke med tekst.

Det gode:

  • Bekendt
    Mange har arbejdet med redskaberne før
  • Wireframing Element biblioteker
    Der er et have af skabeloner og værktøjer, hvilket gør programmerne til et pseudo-wireframing redskab. Hvis du er meget struktureret, kan du opbygge master skabeloner og smarte elementer mens du arbejder. Det kræver dog disciplin og erfaringen siger at det ikke udnyttes helt godt nok.
  • Detaljegrad
    Du kan gøre den så detaljeret som du ønsker

Det dårlige:

  • Feature mareridt
    Nogle af redskaberne er så omfattende at de kan virke forvirrende og indlæringskurven er stejl. Derfor kan det virke langsommere og mindre effektivt end analoge wireframing og prototyping metoder.
  • Ikke-standard element biblioteker
    Det kan være tidskrævende at finde de rette biblioteker eller lave dine egne fra bunden
  • Ingen samarbejde
    I langt de fleste grafik-programmer kan man ikke arbejde flere sammen
  • Ingen præsentation
    Du kan eksportere til PDF, e-mail eller anden filtype, eller dele din skærm. Det er de eneste måder at præsentere det på
  • Ingen flowcharting eller bruger flows
    Det eksisterer ikke i disse værktøjer
  • Ingen interaktivitet
    Det eksisterer heller ikke i disse værktøjer
  • Detaljegrad
    Uanset om du importerer 3-parts wireframing biblioteker eller ej, så risikerer du at du ikke giver den rette mængde detaljer som teamet ønsker. Der er så mange tilpasninger du kan lave – også selvom det ikke er et krav


Wireframing software
Der er mange digitale wireframing programmer som kan bruges. Her er et par eksempler: Axure, UxPin, Balsamiq og Proto io som alle fungerer godt.wireframe 4

Det gode:

  • Bygget til wireframing
    Mere avancerede værktøjer tilbyder også prototyping funktionalitet
  • Hastighed
    Fordi de er designet specifikt til wireframing fungerer de hurtigt og effektivt til formålet

Du kan skifte mellem:

  • Kun strokes og titles
  • Grey Box Metoden
  • Hight Fidelity Text
  • High Fidelity Color
  • High Fidelity Media
  • High Fidelity Interactions


En god tilgang med et kundeprojekt


Hvis du er ny til wireframing så kan du med fordel gøre brug af det såkaldte “Tactile Design Kit”. Dette værktøj er lavet af Megan Miller som er Web og User Experience designer hos Stanford Universitet.
Det inkluderer fysiske erfaringer til at guide kundens oplevelser gennem et webdesign projekt.
Gennem en traditionel designproces er der mange artefakter man laver for at kommunikere bedre med sine kunder. Style tiles, moodboards og wireframes. Det er vigtigt at forklare din forståelse for kunden.
Wireframes hjælper en webdesigner med at forstå layout hierarkier og hjælper ligeledes med at konferere med teamet og udviklere om de tekniske valg som skal træffes. Men wireframes hjælper ikke nødvendigvis med det helt essentielle som for kunden kan være, målene med websitet, prioriteringerne på websitet og de stilmæssige præferencer. Disse ting skal kunden selv formidle. Kunden stoler som regel på at du træffer gode beslutninger da du jo er ”eksperten”. Men nogle gange er det svært at forklare om de tekniske begrænsninger eller designbeslutninger som du har truffet, mens du arbejdede på websitet.
Hvad nu hvis du kan skabe en struktur som kan hjælpe med at guide samtalen. Noget som begrænser mængden af dialog som er påkrævet, men hvor du stadig får trukket de relevante informationer ud fra din kunde, på en måde som faktisk hjælper dem med at forstå processen bedre. wireframe 5


Hvad nu hvis vi skaber en fysisk oplevelse for kunden, som kan højne følelsen af ejerskab, engagement, kreativitet og får dem dybere ind i processen. Megan Miller foreslår nemlig at eftersom vi er fysiske mennesker skal vi gøre designoplevelsen fysisk. Det gør vi netop ved at præsentere nogle fysiske objekter som kunden kan få indflydelse på. Helt præcist har Megan Miller lavet nogle worksheets og eksempler, som giver kunden mulighed for at se tilblivelsen af wireframen gennem en slags guidet tour af worksheets. Disse worksheets og eksempler kan hentes fra hendes hjemmeside her: (http://tactiledesignkit.com/)
Hvis flere personer er involveret i processen, kan en decideret workshop være bedre, men man kan stadig tage udgangspunkt i de samme worksheets bare på en mere skjult måde.
Ved et mindre projekt kan man wireframe med kunden direkte på et whiteboard. Ved større projekter kan det være nødvendigt at tage al informationen med hjem og arbejde videre med wireframen selv. Wireframen kan præsenteres og diskuteres ved et senere møde, hvor der også er mulighed for at tilføje rettelser til wireframen. Dette leder kunden i den retning som du vil have inden du tegner websitet.


Husk dog, at der er ingen rigtig eller forkert måde at wireframe på. Du skal kunne forstå konteksten og kravene til projektet og starte fra en ende af. Du skal vide, at uanset kompleksiteten af wireframen er det stadig bare et værktøj til designprocessen som du kan bruge til hurtigt at få feedback, teste dit designbeslutninger og i sidste ende hjælpe dig med at levere et bedre produkt for kunden.
Har du behov for hjælp til at wireframe et projekt er du selvfølgelig velkommen til at kontakte redWEB.