Hur vi arbetar med design, del 2 - Wireframes

I mitt föregående inlägg i den här bloggserien berättade jag om vilka delmoment ett designprojekt på Odd Hill kan bestå av. Jag fokuserade främst på själva produktionen av design, men i själva verket ligger det en hel del förarbete bakom. Det får bli en annan bloggserie längre fram, för i det här inlägget ska vi snacka Wireframes.

Keep it simple, stupid

Vi befinner oss i projektets startfas och utifrån det förarbete som gjorts har vi fakta som vi kan basera våra tidiga skisser på. De skisserna kallas i designvärlden oftast för “Wireframes” och har som syfte att förklara layoutprinciper och flöden. Ofta använder vi någon slags mjukvara till detta och exempelvis Balsamiq Mockups kan vara ett grymt verktyg för att snabbt komma fram till odetaljerade wireframes, även kallade “Low fidelity wireframes”. En fördel med Balsamiq Mockups är att skissernas stil inte går att påverka, designern behåller därför fokus på att distribuera elementen på sidan istället för att lägga onödig tid på att finputsa skissernas utseende. Vi kan därmed hålla ledtider och kostnader nere tidigt i projektet och nå produktionsstart snabbare.

Vad som dock ibland kan ligga Low fidelity wireframes till last är att skisserna ibland kan bli avskräckande fula eller orsaka förvirring kring syfte och status. Något jag tar upp lite längre ner i den här artikeln.

 

Exempel på Low fidelity wireframes
Exempel på Low Fidelity wireframes

 

Mer fokus på detaljerna

Ibland kan det kännas lite knapphändigt och bakbundet att jobba med sådana begränsningar som Low fidelity wireframes, som i sin natur är väldigt begränsade och odetaljerade, innebär. Ibland kanske projektet behöver en högre detaljnivå och det kan dessutom vara nödvändigt att hålla en högre detaljnivå för att kunna presentera koncept och lösningar för utvecklare, kunder eller andra projektdeltagare. Då kan vi använda oss av “High fidelity wireframes” istället.

High fidelity wireframes håller en betydligt högre detaljnivå än sin enklare föregångare och är därför nyttig för att lösa mer avancerade designproblem. En vision som startat i huvudet hos designern och som skissats ner på ett papper kan behöva nå en högre nivå på skärmen för att rättfärdigas. Eftersom det huvudsakliga syftet med wireframes är att bekräfta och kommunicera kundens vision till produktionsteamet, är det naturligtvis fördelaktigt med en så detaljerad bild som möjligt. Vi får dessutom möjligheten att rätta till eventuella misstag tidigare och minimerar risken för att behöva spendera onödig tid på designrevisioner längre fram.

 

Exempel på High Fidelity Wireframes
Exempel på High Fidelity Wireframes

 

Varning för missförstånd

När vi designar för en kund handlar det i slutändan alltid om att nå fram till lösningar på kundens problem. Oavsett hur hög nivå vi håller för detaljerna är målsättningen att kunden förstår vad vi gör och kan bidra med nödvändig insikt som kan driva designarbetet framåt.

Om kunden istället missförstår hur nära eller långt ifrån den slutliga designen våra skisser befinner sig kan vi råka på problem. Antingen kan kunden avskräckas av den oputsade och tråkiga bilden som våra odetaljerade skisser ger av deras projekt, eller så kan kunden hämmas i sin kreativitet av skisserna med en högre detaljnivå. Vi kan således gå miste om insikter som hade varit nödvändiga för att verkligen lyckas med projektet och skapa meningsfull design.

Av ovan nämnda anledningar är det därför viktigt att vi anpassar vårt arbete efter kundens 1: Önskemål, 2: Kunskapsnivå och 3: Budget. High fidelity wireframes tar betydligt längre tid att designa och kostar därför mer, men de kan vara ett ovärderligt verktyg när man försöker övertyga en kund. De leder generellt dessutom till nöjdare kunder tidigare under projektets gång. Har kunden en tight budget eller ont om tid kan det vara nödvändigt att snabba på skissarbetet lite. Dock är det i så fall en absolut nödvändighet att kunden litar till fullo på designprocessen, annars kan antalet designrevisioner äta upp både tid och budget väldigt snabbt.

Slutligen

Jag tenderar att försöka genomföra high fidelity wireframes om möjligheten finns. Förutom att det ger mig en mer inspirerande arbetsmetod ger det även kunden en tydligare bild av vad som senare kommer att byggas. Ju tydligare bilden är desto högre är sannolikheten att kunden senare känner sig nöjd med slutresultatet.

Självklart kostar det mer tid initialt i projektet, och det kan vara svårt att sälja in de extra timmarna innan projektet startat, men detta tenderar att löna sig i längden. Mer utförliga wireframes resulterar ofta i färre designrevisioner, något som spar tid och låter oss sätta igång med utvecklingsarbetet tidigare.

I mitt nästa inlägg i den här serien kommer jag att berätta om prototyper, ytterligare en metod för att förtydliga och verkligen sudda ut alla frågetecken kring en designlösning. Något som verkligen kan göra skillnad för ett projekt. Till dess kan det vara en bra idé att gå in och följa oss på Twitter, Instagram, LinkedIn & Facebook.

 

Fler inlägg i serien

 

Har ni frågor om design eller vill prata om ett designprojekt?
Maila mig på calle.tuvesson [at] oddhill.se så bokar vi ett möte!