En webb trådram är en enkel visuell guide för att visa dig hur en webbsida skulle se ut. Den föreslår strukturen på en sida, utan att använda någon grafik eller text. En webbplats wireframe skulle visa hela webbplatsstrukturen - inklusive vilka sidor som länkar till var.
Web wireframes är ett bra sätt att starta ditt designarbete. Och medan det är möjligt att skapa komplexa trådramar med stora detaljer, kan din planering börja med en servett och en penna. Nyckeln till att göra bra trådramar är att lämna ut alla visuella element. Använd rutor och linjer för att representera bilder och text.
Saker att inkludera i en webbsida wireframe:
- lådor för primära grafiska element
- placering av rubriker och underrubriker
- en enkel layoutstruktur
- uppmaningar till handling
- textblock
Hur man bygger en enkel web-trådram
Skapa en webbsidor wireframe med något pappersskrot du har praktiskt. Så här gör jag det:
- Rita en stor rektangel - det här kan representera antingen hela sidan eller bara den synliga delen. Jag börjar vanligtvis med den synliga delen, och expandera den så att den innehåller element som skulle ligga under veckan.
- Skissera layouten - är det 2-kolumner, 3-kolumner?
- Lägg till i en ruta för en rubrikgrafik - Rita över dina kolumner om du vill att den ska vara en enda rubrik ovanför kolumnerna, eller bara lägga till den där du vill ha den.
- Skriv "Headline" där du vill ha din H1-rubrik att vara.
- Skriv "Sub-Head" där du vill ha H2 och lägre rubriker ska vara. Det hjälper om du gör dem proportionella - h2 mindre än h1, h3 mindre än h2, etc.
- Lägg i rutor för andra bilder
- Lägg till i navigering. Om du planerar flikar, rita bara rutor och skriv "navigering" överst. Eller lägg till punktlistor i de kolumner där du vill navigera. Skriv inte innehållet. Skriv bara "navigering" eller använd en rad för att representera text.
- Lägg till ytterligare element på sidan - identifiera vad de är med text, men använd inte den faktiska innehållstexten. Om du till exempel vill ha ett anrop till åtgärdsknapp längst ner till höger lägger du en ruta där och märker "call to action". Skriv inte "Köp nu!" i den rutan.
När du har skrivit din enkla wireframe, och det borde inte ta dig mer än 15 minuter att skissa en upp, visa den till någon annan. Fråga dem om det saknas något och för annan feedback. Baserat på vad de säger kan du skriva en annan wireframe eller behåll den du har.
Varför papperstrådar är bäst för första utkast
Även om det är möjligt att skapa wireframes med program som Visio, för dina initiala brainstorming sessioner, borde du hålla fast vid papper. Papper verkar inte vara permanent, och många människor antar att du slängde den i 5 minuter och tveka inte att ge dig bra feedback. Men när du använder ett program för att skapa fina trådramar med perfekta rutor och färger, löper du risken att bli fast i själva programmet och spendera timmar som perfektar någonting som aldrig kommer att gå att leva.
Papperstrådar är lätta att göra. Och om du inte gillar det, klämmer du bara upp papperet, kastar det i återvinning och tar ett nytt ark.
