Wireframe när, vad, hur och varför?

Transkript

1 Wireframe när, vad, hur och varför - 1 Wireframe när, vad, hur och varför? Arbetsflöde är ett samlande begrepp för alla steg som används för att göra en webbplats. Från första början till färdig sajt. Hur arbetsflödet ser ut beror till stor del på i vilket sammanhang man gör webbplatsen. Till ett stort företag eller organisation? En liten privat webbplats? Det är stor skillnad. Jag jobbar som lärare och lär folk göra webbplatser på ungefär samma sätt som andra lärare lär folk läsa. Därför handlar min vardag om de absoluta grunderna i att bygga webbplatser. Här vänder jag mig till dej som kanske fått i uppgift att göra en webbplats som en del av en nybörjarkurs i webbdesign eller kanske har kommit så långt att du vill pröva på att göra ett tema till WordPress på egen hand. Vi ska vrida lite på begreppet wireframe, se vad det innebär och vad du kan ha för nytta av det. Vi landar i en enkel metod och på köpet får du referenser till bra fördjupningsmaterial. Det arbetsflöde vi talar om kan delas in i följande steg. Bakgrunden sammanfattar vi i begreppet research: Vad handlar projektet om? Vilket sammanhang, vilka användare, speciella krav och begränsningar gäller? I nästa steg gäller att generera, vrida och vända på idéer. Därefter blir det ofta någon form av prototyp, som följs av designarbete. Så gäller det att göra sidan, dvs. den fas vi kan kalla utveckling. Till sist ser vi till att vi har ett korrekt innehåll och testar allt så det fungerar. Äntligen kan vi gå online. (Sen är det bara underhåll och uppdatering kvar, det kanske viktigaste av allt!) I denna process har begreppet wireframe en central roll. Ett okänt begrepp? Låt oss reda ut det. Vad är en wireframe? Vi konstaterar att en wireframe hör hemma i idéfasen i första hand. Huvudtanken är att ta fram en skiss innan den slutliga designen görs. En mer exakt definition gör Mário Andrade: En webbplats wireframe visar dess grundläggande struktur. Den innehåller ingen funktionalitet eller design, det är den grundläggande strukturen för layout och fungerar som en guide för designern. En wireframe ska omfatta all viktig information och behålla sidstrukturen ren och tillgänglig. Mário ger oss följande exempel.

2 Wireframe när, vad, hur och varför - 2 Han beskriver en wireframe med bilden av ett skelett. Det kan inte göra något i sig självt, inte ens hålla sig upprätt. Det behöver muskler. Här kommer designen in. Den håller samman sidan. Men det räcker inte. En kropp får inget liv med enbart muskler och skelett, den behöver hjärta och hjärna också. Inom webbutvecklingen motsvaras det av front end och back end. Jag gillar Will Evans sätt att beskriva wireframing: Ett tankeverktyg för att lösa ett givet problem. Han betonar vikten av en wireframe för att kommunicera med andra: Medan jag undersöker problemet skulle jag tämligen enkelt kunna ha de olika designmodellerna i huvudet, men jag skulle misslyckas i min viktigaste uppgift, att skapa förutsättning för samtal mellan uppdragsgivarna, de tänkta besökarna och mig själv. Will beskriver i sin artikel sitt eget sätt att arbeta. Den kom till som ett bakgrundsmaterial för ett kapitel i boken, A Project Guide to UX Design. Han konstaterar att en wireframe för honom lika mycket handlar om att få grepp om det (design)problem som ska lösas som själva lösningen av problemet. Därför börjar han alltid med kontexten. Vad är sammanhanget? Wireframe på olika nivåer Will avslutar sin artikel med en relativt detaljerad wireframe. Den är ett exempel på hur han under en process med många skisser tidigare definierat fram en wireframe utan plats för så mycket ändringar.

3 Wireframe när, vad, hur och varför - 3 Janko Jovanovic skriver om Sketching, Wireframing & Prototyping i boken The Smashing Book #2. Han inleder det med ett tänkvärt citat om arbetsflödet: Den steniga stigen från en dunkel idé till finputsat slutresultat är lika viktig som idén i sig om inte viktigare, eftersom en idé utan ett korrekt genomförande bara blir en abstrakt tanke. Ha lyfter fram ett engelskt begrepp ideation. Det motsvaras ungefärligt av vår idéstadium, men med fokus på att man faktiskt jobbar med idéerna. Inte att de ligger och slumrar någonstans. Han använder följande bild som sätter in begreppet wireframe i sitt sammanhang.

4 Wireframe när, vad, hur och varför - 4 Här ser vi hur det är mera skissartat i början för att följas av mer detaljerade wireframes ju längre processen fortgår. Samtidigt sållas alternativa skissar bort efter hand. Beroende på i vilket sammanhang och vilken roll man befinner sig i ett webbprojekt är behovet av detaljer i en wireframe väldigt olika. Janko använder begreppet lo-fidelity wireframes, när de bara innehåller huvuddelarna, till vänster på bilden ovan. Här är det lätt att lägga till och dra ifrån saker på sidan. Det är fortfarande ett slags skisstadium. High-fidelity wireframes är mycket detaljerade, där de flesta avgörande designbeslut redan tagits. Vad bör finnas med på en wireframe? Janko sammanfattar: Sidstruktur, som visar hur informationen organiserats på sidan, vad användarna ser och kan göra. Navigering, som visar hur användarna kan förflytta sig på sajten, var de befinner sig och vart de kan ta vägen. Interaktionsdetaljer, som visar vad som händer när användaren gör något, följderna av deras handlande och nästa steg för att nå målet. Vissa sammanhang kräver detaljerade wireframes, men det finns olika sätt att arbeta och det handlar om att hitta ett sätt man själv tycker är bra, och som funkar i det sammanhang man finns. Ibland behöver man förfinade wireframes, andra gånger kanske det räcker med en skiss på en servett! En vardagsmetod grå boxar Låt oss kika på en vardagsmetod för oss som inte jobbar i större sammanhang. Vi har inte behov av att göra lika detaljerade skisser. Efter lite arbete med innehållet, där vi tagit fram de olika delar som ska finnas med på sidan, handlar det om att prova sig fram till olika alternativ att utforma sidan. I detta läge sparar vi de kreativa designidéerna och -detaljerna. Vi provar helt enkelt vilka olika sätt det finns att presentera innehållet på sidan/sidorna (man kan få göra flera wireframes om man behöver helt olika sidor, t.ex. en unik startsida). Låt en wireframe fokusera på innehållet och gör den enkel. Det finns en teknik som använder grå rutor. Jason Santamaria visar exempel på detta med sin Grey Box methodology i en artikel från

5 Wireframe när, vad, hur och varför Han beskriver hur han skissar strukturen på sitt innehåll med att fylla en wireframe med grå boxar. På detta sätt fokuserar man på hur innehållet ska placeras på sidan/sidorna och lägger designen åt sidan. Om man öppnar Photoshop och börja skissa på en detaljerad design direkt är det oerhört lätt att fastna i detaljer, exempelvis i fråga om val av färger och typsnitt. Man riskerar att missa alternativa layouter för helheten. Andy Clark har anammat denna teknik i sin bok Transcending CSS och slår ett slag för metoden. Om vi tittar på ett exempel från Janson Santamaria ser vi de grå boxarna i funktion. Det är innehåll eller funktioner på sidan som ska placeras i de grå boxarna. Hur kan man lägga ut de olika delarna? När man inte lägger till specifika designelement är det mycket lättare att hålla fokus på att prova olika alternativa sätt att placera innehållet. Det innebär inte alls att man saknar idéer för hur det ska se ut. Det innebär bara att man väntar med att fokusera på dessa idéer tills struktureringen av innehållet är klart. Det visar Jason i de olika skisser han hade med sig när han jobbade med wireframen ovan.

6 Wireframe när, vad, hur och varför - 6 Jason ger själv ett tydligt exempel på användning av wireframe i ett testprojekt. Han visar tre varianter på förslag till wireframe och sen den färdiga designen. Papper och penna Några ord om själva tekniken. Använd gärna papper och penna. Framför allt i inledningsfasen. Av flera anledningar: Papper och penna är lättillgängligt. Du kan komma igång direkt. Det är billigt. Kräver inga program. Det hjälper till att fokusera på de viktigaste delarna, inte detaljerna. Har du bara en tjock filtpenna blir det ännu tydligare. Du får bara med huvuddelar. Det är lätt att kassera! Fångar man en idé så här blir det ingen prestige om man ratar den, vare sig för den som gör den eller den som kommer med kritik. Bara att knyckla ihop och kasta i papperskorgen. Den skissartade metoden uppmuntrar till att jobba snabbt och göra många utkast. Det är viktigt eftersom det inte handlar om att komma på en lösning utan hitta så många alternativ som möjligt. Dessutom är det viktigt att notera: Man behöver inte kunna teckna för att göra wireframes! Det handlar inte om konstverk, utan om att förmedla idéer. När man gjort sina skisser på papper kan man gå över till valfritt program och göra dem mer detaljerade. För enkla sajter kan det räcka gott med handskisser. Avslutande exempel Låt oss avsluta med ytterligare några exempel på wireframes. I boken Build Your Own Wicked Wordpress Themes går Brandon R Jones igenom hur man bör planera för att skapa ett eget tema. I slutet av arbetet med innehåll gör man en eller flera wireframes. Så här:

7 Wireframe när, vad, hur och varför - 7 Han betonar vikten av att förbereda sajten för sidor med olika innehåll. Det enklaste sättet är då att göra en wireframe för varje innehållstyp. Här ser vi hur han ger ett exempel med en startsida, en sida där man listar poster, en sida för enbart en post och en för en enstaka sida (till skillnad från en post). Elliot Jay Stocks ger följande exempel i boken Sexy Web Design. De talar tydligt utan kommentarer:

8 Wireframe när, vad, hur och varför - 8

9 Wireframe när, vad, hur och varför - 9

10 Wireframe när, vad, hur och varför - 10 Elliot säger för övrigt så här om vårt ämne: När man skapar en wireframe tänker vi helt enkelt kring hur de olika delarna fungerar bäst på sidan. Vi överväger vilka element som ska lyftas fram och hur de bäst hänger samman. Fler exempel För exempel på wireframes kan du bege dig till I love wireframes, en plats där Ivana Jurcic samlar på olika exempel. Hoppas denna översikt ger dig inspiration att testa wireframes, om du inte redan gör det. PS. Det finns många program för att göra wireframe. Det finns även tjänster på nätet.