Share
Efter skissen finns det en sista sak du borde arbeta på innan du börjar designa (även om det visserligen är detta är en del av designen). Wireframing är i grunden en visuell guide till en webbplats som hjälper dig att titta på layouten utan att tänka på projektets estetik.
Hur en wireframe ska se ut varierar vildt beroende på vem du pratar med. Du har många alternativ när du skapar trådramar - från det sätt du visar dina trådramar till den programvara du skapar dem med.
När du skapar dina trådlister måste du arbeta med layout och med det innehåll som du tidigare har kuratiserat. Tanken med en wireframe - som en leveransbar till en klient, eller som ett extra steg du föredrar att ta - är att kunna visa den visuella layouten och flödet av en hemsida innan du sätter dig ihop med designen detaljer som färg, typografi eller andra visuella flair.
Det bästa sättet att flytta på att skapa digitala trådramar för ditt projekt är att flytta direkt från skissfasen. I det avsnittet borde du redan ha spelat med layout, men att skapa en digital trådram är ett mycket mer professionellt sätt att spika ner dina idéer på layout och flöde på din webbsida.
När du utformar kreativa trådramar vill du se till att du använder det verkliga innehållet som du har kuraterat närmare början av projektet. Personligen föredrar jag att utforma trådramar som saknar någonting som kan sväva en klient till att tänka att designbeslut fattas som kommer att påverka projektets utseende och känsla. Därför försäkrar jag alltid att jag designar en wireframe som bara fokuserar på projektets innehåll och hur innehållet presenteras på sidan.
Ett exempel wireframe skapat med Balsamiq Desktop applikationen. Innehåll som är välskriven och visas på ett sätt som är användbart och relevant för dem som kommer att läsa det, leder alltid till en bättre design och online-upplevelse. En väl utformad wireframe är en som håller med om att innehållet är det viktigaste på sidan och är sympatiskt att visa innehållet på ett sätt som passar projektet och dess slutanvändare.
Wireframe-scenen i ett projekt kommer starkt att relatera till när du redigerar och arbetar med ditt innehåll närmare början av projektet. Som ett kort exempel har du på den tiden arbetat hårt för att se till att innehållet är lätt att läsa genom att använda rubriker och listor korrekt. Att utforma en bra wireframe innebär att du transporterar det innehållet (i stycken, rubriker, listor och vad som helst du valde för att formatera innehållet) i din wireframe och titta på hur du kan börja skapa visuell relationer mellan varje bit av innehåll, koppla prickarna tills du har en visuell representation av hur det innehållet kan se på en sida.
För att hålla dina trådlösa ramar designfria och innehållsinriktade, är det enkelt att skära av delar av en sida för specifika innehållsområden med att arbeta med block.
I praktiskt hänseende betyder det att om du till exempel ville ha en standardrubrik längst upp på sidan, skulle du lägga till ett block ovanpå din wireframe-design. Om du till exempel bara vill lägga till en logotyp och ett navigeringsområde inom rubriken, skulle du placera ytterligare block för dessa element i huvudet på din wireframe design.
Du kan sedan använda block i hela resten av wireframe-designen, fortsätter att avsnyta områden för specifika bitar av innehåll.
Block behöver inte bara vara en bokstavlig svartvitt kvadrat eller rektangel, men när du väl har en uppfattning om din grundläggande layout med de block du har lagt till, kan du använda ditt faktiska innehåll på platser som det kommer att vara användbart. Använd till exempel det verkliga innehållet för navigeringsobjekten, en introduktion till en sida, rubrikerna och så vidare. Det hjälper till att börja visa visuellt hur innehållet fungerar tillsammans i layouten du skapar.
När du utformar dina trådramar, se till att du märker de områden eller sektioner som du placerar i din trådram. Även om du kanske förstår vad ett visst block anger (speciellt när det verkliga innehållet inte placeras där), kanske en kund eller kollega inte och du borde göra det så tydligt som möjligt för dem att förstå vad de tittar på.
När du utformar dina trådramar är en sak du bör tänka på sidans flöde - titta på hur innehållet sitter på sidan och hur det flyter från en sektion av innehåll till en annan.
Syftet är att se till att innehållet läser korrekt och att du blickar i ögonen rörligt från ett avsnitt till ett annat. Detta är särskilt viktigt när du har innehållssvåra sidor - användarna ska kunna flytta enkelt från ett avsnitt till ett annat, utan att det är en skrämmande upplevelse. Om sidorna är upptagna och inte har rätt slags flöde till dem kommer användarna att stängas av med det som verkar vara svårt att förstå eller följa processen.
En idé är att tänka på vad du skulle göra intuitivt när du navigerar på en webbplats - börja med att titta på logotypen och rubriken, sedan ner till huvudrubriken och följa huvudinnehållet, gå gradvis över till ett sidofält och så vidare.
Vid utformning av en webbplats är det nästan omöjligt att skapa en separat trådram för varje steg som webbplatsen kan ändra, hur den ser ut eller passar ihop. Istället har du tidigare funderat på flödet av din design och innehåll, kan du titta på ett responsivt flöde till wireframe designen.
Detta var ett tips som jag plockade upp från Sarah Parmenters Responsive Day Out-pratstund, där Sarah förklarade hur hon lägger till nummer till hennes wireframes som hjälper till att hjälpa en klient att förstå hur innehållet och föremålen kan stapla när de är på en mindre skärm. Det här är verkligen användbart eftersom det kommer att hjälpa en klient att börja förstå om innehållshierarkin också, vilket också innebär att du kan börja titta på eventuella fallgropar eller utmaningar när du jobbar responsivt mycket tidigt i projektet - något som kan spara dig en mycket tid senare i projektet.
När du designar wireframes har du en löjlig mängd val när det gäller den programvara som du kan använda. Personligen tror jag att det finns en bestämd tre val som verkar mest populära, särskilt i webbbranschen.
Vid utformning av en wireframe är det kanske den enklaste lösningen att arbeta med en grafikapp som du redan känner till - eller åtminstone använt lite tidigare. Det betyder att det finns liten eller ingen inlärningskurva, så du kan förhoppningsvis fortsätta med att designa dina trådlister lite snabbare.
Det enklaste sättet att designa med din grafikprogramvara är att använda formen och textverktygen, med hjälp av dessa för att skapa dina grundläggande block samt specifika områden med verkligt innehåll. Kom ihåg att märka dina wireframe-block med hjälp av textverktyget medan du går med.
Detta kan vara en överraskning för vissa, eftersom Keynote och Powerpoint vanligtvis används för att skapa presentationer. Men de är verkligen kraftfulla och lättanvända verktyg för att skapa andra saker, inklusive trådramar. Med hjälp av standardverktygen som finns tillgängliga i programmen själva kan du enkelt skapa professionella wireframes verkligen snabbt.
Min personliga preferens, Balsamiq Mockups är en app som är dedikerad till att skapa wireframes. Den här appen gör det enkelt att designa dina trådramar och har många resurser till ditt förfogande för att snabbt dra och släppa de element du vill placera.
En sak jag älskar om Balsamiq Mockups är att den använder en grov skisserad stil som verkligen låter sig visa att wireframes är just det - en uppfattning om layout som sedan kan översättas till en riktig design. Du har möjlighet att välja mellan en mer standard känsla till wireframesna samt den skisserade finishen, om du känner att en klient skulle vara mer mottaglig för det.
Med införandet av användargränssnittssatser är det också väldigt enkelt att börja utforma mer komplexa trådramar på en rad olika appar. Från fullpaket kan du ladda ner för att använda som en PSD i Photoshop, för att du kan skapa trådramar i Keynote mycket lättare - det finns något där för att hjälpa dig.
Accentsconagua