Använda Wireframes för att effektivisera din utvecklingsprocess

Skapa en wireframe är ett av de första stegen du bör ta innan du utformar en webbplats.

En wireframe hjälper dig att organisera och förenkla element och innehåll på en webbplats och är ett viktigt verktyg i utvecklingsprocessen.

En wireframe är i grunden en visuell representation av innehållslayout i en webbdesign .

Trådramen fungerar som en prototyp som visar placeringen av sidfunktioner, som sidhuvud, sidfot, innehåll, sidfält och navigering.

Det specificerar också placeringen av elementen inom dessa innehållsområden. Om du vill utveckla en webbplats som exakt matchar kundens krav och minimera projektrevisioner, kommer trådframställning att hålla dig på rätt spår.

Fördelar med Wireframing

Att skapa en wireframe ger kunden, utvecklaren och designern möjlighet att ta en kritisk titt på webbplatsens struktur och låter dem göra revisioner lätt tidigt i processen.

Wireframing ger följande viktiga fördelar:

Det ger klienten en tidig, närbildsvy av webbplatsdesignen (eller omformningen).
Det kan inspirera designern, vilket resulterar i en mer flytande kreativ process.
Det ger utvecklaren en tydlig bild av de element som de behöver koda.
Det gör uppmaningen till handling på varje sida klar.
Det är lätt att anpassa och kan visa layouten på många delar av webbplatsen.

Verktyg för Wireframe Development

Du har många verktyg att välja mellan när du skapar en trådram:

Handskissning på papper är alltid en bra utgångspunkt för någon formgivare. Det ger ett snabbt och enkelt sätt att fokusera och organisera. Om du är mycket exakt med skisser kan du till och med använda den som din sista trådram. (Se figur 1.)
Flödesschema eller mind-mapping programvara , till exempel Visio . Dessa programalternativ finns med förpackade element som gör att du enkelt kan skapa flödesdiagram representationer av din wireframe.
Webprototypprogramvara , till exempel Gliffy eller Balsamiq . Verktyg som dessa skapades speciellt för att generera wireframes, och de har lätta att använda prototypfunktioner.
Grafisk programvara , till exempel Photoshop eller Illustrator. Fördelen med att använda dessa verktyg är att trådramen då kan konverteras direkt till en grafisk mockup av webbplatsens design. Nackdelen är dock att du måste skapa alla element för hand.
(X) HTML wireframes är nästan som själva webbplatser själva. Du kan lägga ut wireframe med kod innan du använder stilerna, eller du kan skapa en helt stilig, högfärdig layout som ser ut som en slutlig design. (Se figur 2.)

I slutändan ska utvecklaren eller formgivaren välja det verktyg de föredrar. Personligen använder jag Photoshop eftersom jag gillar hur det organiserar processen och hur lätt jag kan konvertera filen till en mockup.

Wireframe Exempel

Nivån på detaljer i en trådram beror på flera faktorer, bland annat: hur mycket riktning och innehåll kunden har angett, hur komplicerat innehållet är, hur långt i processen du är och hur mycket detaljer du vill att den ska inkludera .

Här är exempel på trådramar som skapades med hjälp av olika verktyg och uppvisar olika nivåer av detaljer och färg:

Figur 1: Den här enkla wireframe-skissen för webbplatsen Coastal Partners-partners (nu omdämd Broad Reach Retail Partners) användes för att skapa grafiska mockups och slutligen den slutliga designen. Av Mike Rohde .

Figur 2: Mycket low-confidence HTML wireframe. Användbar för att visa vad en webbplats kommer att se ut innan stilen läggs till. Mycket hjälpsamt för synskadade användare.

Figur 3: Fidelity wireframe för Embrace Pet Community , av Jesse Bennett-Chamberlain av 31Three .

Figur 4: En preliminär mockup av ett socialt konferensverktyg byggt på Tiddlywiki för användning på Le Web 3. Anteckningarna som åtföljs av den är på tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.

Figur 5: Den här är baserad på avancerad användning av ett bloggpubliceringssystem (WordPress). Av Mattheiu Mingassson eller Activeiveside Internet Strategies and Consulting .

Figur 6: En trådram för Embrace Pet Community , av Jesse Bennett-Chamberlain av 31Three .

Figur 7: En trådram med färg och bilder. Författarens sida wireframe av Bokhandel .

Figur 8: En annan trådram med färg. Av Mattheiu Mingassson av Activeiveside Internet Strategies and Consulting .

Bästa praxis

För att uppnå optimala resultat är här flera viktiga saker att tänka på när du utvecklar en wireframe:

Enkelhet. Nyckeln är att hålla det enkelt för att vara tydligt för kunden och vara flexibel för designern, men tillräckligt detaljerad för att styra programmeraren. Som nämnts kan du skapa en högfärdig trådram, men om du gör det tidigt i utvecklingsprocessen kan det vara förvirrande för kunden, som kan missa det för ett slutligt utkast.
Arbeta i gråskala. När du skapar element för en wireframe, är det bäst att arbeta i gråskala så att du kan fokusera på layouten utan att distraheras av designen. Om du har fått en fullfärgslogo, konvertera den till gråskala också. För att skilja mellan och kategorisera olika element, visa former och konturer i olika nyanser av grått.
Använd trådramar i kombination med en sitemap. En wireframe är en visuell representation av en bra webbplatskarta, inte en ersättare. En webbplatskarta är ett användbart verktyg för alla webbplatser och skulle definitivt vara till hjälp att referera till under utvecklingsprocessen.
Fokusera på önskat resultat. Få en klar förståelse för hur din kund vill att användarna ska svara på sidan innan du skapar din trådframställning. Samtalen till handling bör vara mycket tydlig helt enkelt från att titta på wireframe.
Skapa en fullstorad wireframe om den gäller en webbplats. Detta ger den mest exakta representationen av den faktiska sidan.
Planera elementen genom att säkra innehållet i förväg. I bästa fall har din klient redan tillhandahållit de element som ska visas på varje sida, till exempel logotypen, annonserna, Flash- eller videospelarna, funktionerna, navigeringsavsnitt och sidofält, sidhuvud och sidfotfält. Om du inte har denna information än, träffa din klient och skaffa (eller skapa) en webbplatskarta. Om du omformar befintliga delar kan du samla dem från en noggrann granskning av webbplatsen. I det här scenariot, var noga med att först bekräfta med din klient att du inte kommer att behöva lägga till eller ta bort element, för att inte ha en klar förståelse för deras förväntningar kommer att sakta ner processen.

Grayscale vs Color

När du skapar en wireframe, hjälper arbetet i gråskala att hålla fokus på processens primära funktion , vilket är att slutföra layouten, inte designen (se Figur 3). En annan risk för att arbeta i färg är att klienten kan misstänka trådramen för den sista mockupen.

Färgburken kan dock vara användbar när man visar platsen för varje uppmaning till handling. Eftersom en sida kan innehålla flera uppmaningar till handling är det viktigt att prioritera dem. Wireframes kan hjälpa till att avgöra vilken åtgärd som helst för att dra användarens öga först.

Jag har nyligen arbetat med ett projekt som hade en väldigt vibrerande logotyp, vilket i det fallet var det främsta tilltalet eftersom det representerade en nystartad tidning.

När du använder färg kan du lättare berätta om vissa element överväger det primära handlingen. Denna process faller fortfarande inom ramen för wireframing, i stället för mockup-design, eftersom elementlokaler fortfarande är bestämda.

Färg kan gradvis läggas till wireframe när projektet går framåt , vilket är mer effektivt än att gå vidare med mockups innan elementets placering är låst. Med detta kan grafisk programvara hjälpa dig att växla direkt till en mockup när du är klar.

Vad som ska undvikas

Liksom andra aspekter av din utvecklingsprocess kan trådframställning ha sina fallgropar om det inte utförs ordentligt. Här är några tips om vad du ska undvika för att uppnå de mest effektiva resultaten:

För mycket händer på sidan. Lämna gott om vitt utrymme så att designen inte visas för upptagen eller rörig.
Betoning på färg och design. Wireframing är för att bestämma layout och placering av element. Även om en wireframe kan påverka designen, skulle antagligen grafik och färg förmodligen bara distrahera från dess syfte.
För mycket detalj. Du kan alltid lägga till mer information senare, men om du inkluderar för mycket i början kan kunden förvirra trådramen för den sista mockupen.

Om du är intresserad av att lära dig mer om wireframes, Wireframe Magazine är en stor resurs som delar prover, diskuterar tekniker och löser problem relaterade till informationsarkitektur.

Skapa en wireframe för din kunds hemsida ger ett effektivt kommunikationsverktyg för alla berörda parter.

Även byggandet av en enkel wireframe kommer att spara tid på lång sikt och underlätta utvecklingsprocessen för designern, utvecklaren och kunden.

Skriven uteslutande för WDD av Eric Shafer.

Använder du trådramar till din design? Vad är några av de bästa sätten att skapa effektiva trådramar?

design webbdesign wireframes