Wireframe, designskiss och prototyp - vad är skillnaden?

Kanske har du hört talas om begreppen wireframe, designskiss eller prototyp - men vad är egentligen skillnaden mellan dem? Och när i designprocessen används de? Här ska vi försöka reda ut begreppen och visa hur de används.

När vi arbetar med våra digitala projekt så använder vi olika verktyg och olika metoder beroende på vilka moment som är aktuella just nu. Initialt startar vi med trådskisser som sedan kompletteras med designskisser - ofta också en prototyp som komplement. Men vad är vad egentligen? Vi gillar att arbeta så transparent och tydligt som möjligt tillsammans med våra kunder - här beskriver vi det lite närmare.

Vad är en wireframe?

Wireframes, eller trådskisser, är skisser för en digital produkt eller tjänst (till exempel för en webbplats eller mobilapp) som visar grundläggande layout, navigation och struktur innan man har en färdig design. En wireframe visar alltså var olika komponenter ska finnas och ibland också vad de ska innehålla, snarare än att visa vilken färg och form de ska ha. 

Eftersom wireframes används i början av designprocessen fungerar de som en visuell kravspecifikation och ett kommunikationsunderlag mellan kunden och designteamet. Skisserna baseras på kundens mål och användarnas behov och säkerställer att vi får med alla de komponenter som måste finnas.

För att ytterligare förklara vad en wireframe är skulle man kunna dra likheter till en husritning där man presenterar husets uppbyggnad, utan interiör. På samma sätt som en ritningar fungerar för en arkitekt, fungerar wireframes för en UX-designer som ska designa en webbplats eller webbapplikation. Man skissar, planerar och kartlägger var vi står och vart vi ska. Man lägger helt enkelt grunden för huset eller webbplatsen. Att bortse från wireframing-fasen i designprocessen och gå rakt på utseendet är som att strunta i att göra ritningen till ett hus. 

Wireframes består ofta inledningsvis av enklare skisser gjorda med papper och penna, för att senare övergå i digitala grova skisser. Skisserna tas fram av UX-designern och de itereras, förbättras och utvecklas kontinuerligt under designprocessens. När den grundläggande strukturen är på plats blir skisserna mer detaljerade i form av designskisser och det är nu art directorn tar vid i designprocessen.

 

Fördelar & begränsningar

• Snabbt, enkelt och billigt
  En fördel med att använda wireframes är att det är ett snabbt, enkelt och billigt sätt att testa och utveckla idéer. Det är bättre att testa, iterera och få möjlighet att upptäcka eventuella fel tidigt i processen, innan man har en färdig produkt.

 

• Fokus på användarvänlighet och grundstruktur
  Eftersom vi med hjälp av wireframes skalar bort designen ligger fokus först och främst på att få ihop en bra grundstruktur och användarvänlighet. Hade vi istället inkluderat design i våra skisser redan från start, blir det lätt hänt att man fastnar i diskussioner kring till exempel olika färgval. Risken är då att man glömmer bort viktiga funktioner, flöden eller användarbehov som vi behöver tillgodose. 

 

• Svårt att föreställa sig det slutgiltiga resultatet
  En nackdel med wireframes är att de ibland är så pass avskalade och enkla i sin utformning att det ibland kan vara svårt att föreställa sig det slutgiltiga resultatet. Ett sätt att motverka detta, som vi upptäckt genom vårt sätt att arbeta, är att inkludera så mycket autentiskt innehåll som möjligt. Det är därför något vi på Limetta alltid strävar efter.

Vad är en designskiss?

Till skillnad från en wireframe är en designskiss mer detaljerad. Designen utgår från det som tagits fram i wireframes men inkluderar färg, form och mer riktigt content. En designskiss visar alltså hur den färdiga produkten kommer att se ut men oftast inkluderas inte någon interaktion. Det är alltså inte en klickbar prototyp. 

Liksom wireframes fungerar designen som en visuell kravspecifikation och kommunikationsunderlag mellan kund, designteam och utvecklare. Designen kan utgå från kundens befintliga grafiska profil eller så tas ett helt nytt koncept anpassat för digitala kanaler fram. 

Om vi återgår till husbygget så kan vi likna en designskiss med interiören där man väljer tapeter och färg till väggarna. På samma sätt tar Art directorn fram den grafiska designen till de komponenter som ska finnas på webbplatsen. Ibland kan det handla om att påverka användaren till ett önskat beteende med hjälp av rätt sorts färger och former på en smart placering. Det kan även handla om att stärka varumärket med ett visst budskap, tonalitet i text eller specifikt bildmanér i foton.

Fördelar & begränsningar

• En tydligare bild av den färdiga produktenFördelar med designskisser är att de ger en känsla för hur den färdiga produkten kommer att se ut. Vi har möjlighet att testa olika designval innan vi har en färdig produkt, vilket är mer kostnadseffektivt än att ändra något senare i processen. 
  

 

• Diskussioner om färg och form
  Hur saker och ting ser ut och upplevs väcker känslor, vilket gör att man lätt fastna i diskussioner om färgval och typsnitt istället för att se till kärnan - dvs användarvänlighet. För att motverka detta börjar man ofta med att specificera kraven med hjälp av wireframes som sedan successivt växer fram till en färdig designskiss.

Vad är en prototyp?

Till skillnad från en wireframe eller designskiss inkluderar en prototyp interaktion. Man kan säga att det är en simulering av en produkt eller tjänst. Det behöver inte alltid vara en pixelperfekt version av den färdiga produkten, men prototypen ska kunna visa hur det går till när man använder produkten. Man ska helt enkelt kunna utföra användartester för att se hur användare interagerar med sidan eller applikationen. På så sätt får man en god insikt i funktionaliteten och användbarheten innan själva utvecklingsarbetet påbörjas. Detta kan göras på olika sätt och på olika nivåer.

Exempel på olika prototyper:

• Enkla klickbara designskisser
• HTML-prototyper
• Animerade prototyper

Fördelar & begränsningar

• Testa och upptäcka eventuella fel innan utvecklingen sker
  En fördel med att använda sig av prototyper är att man kan testa en produkt innan den är färdigutvecklad. På så sätt spara man både tid och pengar på att upptäcka eventuella fel eller justeringar som måste ändras innan den faktiska utvecklingen tar vid. 

 

• Tidsaspekten
  Att ta fram en prototyp är vanligtvis lite mer tidskrävande (än t.ex wireframes), vilket påverkar den tid och budget man har att förhålla sig till. Samtidigt - om man väljer att bygga prototypen i HTML så blir den ofta fröet till den kod som används i den slutgiltiga lösningen. 

Vad är egentligen skillnaden?

Om vi sammanfattar det lite kort skulle man skulle kunna säga att wireframes, designskisser och prototyper är olika steg eller olika verktyg och metoder under olika faser i designprocessen. De fyller alla en egen viktig funktion för att levererar en färdig digital produkt. 

 

• Wireframes visar den grundläggande strukturen. Vart saker ska placeras och vilka komponenter som ska finnas.
• Designskisser utgår från wireframes men är mer detaljerade. De inkluderar färg och form och ger en tydligare bild av den hur den färdiga produkten kommer att se ut.

• Prototyper är klickbara och inkluderar interaktioner som ger oss en bra känsla för funktionaliteten och användbarheten.

Vad händer med skisserna sen? 

Nu börjar du kanske få kläm på vad de olika metoderna innebär och hur de används. Men vad händer med skisserna sen då? Både wireframes, designskisser och prototyper itereras, förbättras och utvecklas kontinuerligt under designprocessens. De används också som kommunikationsunderlag mellan kund, designteam och utvecklare. När designfasen är avlutad tar själva utvecklingen vid. Huset som fått sin grund börjar nu byggas. Väggar reses och taket läggs. Här fungerar skisserna som en mall för de som ska utveckla produkten eller tjänsten. Genom att följa skisserna vet man hur allt ska se ut och bete sig och till slut har vi en produkt färdig att lanseras. 

 

Hur vi på Limetta jobbar med Wireframes, designskisser och prototyper

På Limetta använder vi oss av alla tre metoderna i arbetet med våra kunder. Eftersom varje projekt är unikt utgår vi från varje enskild kund och deras behov när vi bestämmer vad som ska göra och hur vi gör det. Beroende på tidsaspekt och budget och vilket typ av uppdrag det är används ibland alla tre metoderna och ibland enbart wireframes och designskisser. Oavsett vilka metoder vi använder handlar det i slutändan om att nå fram till lösningar på kundens problem på bästa möjliga sätt.

Läs även