Annons
På teknisk nivå är en modern webbplats inte bara en sak. Det är en komplex soppa av interagerande tekniker, till exempel HTML (markeringen du ser på sidan), JavaScript (the språk som körs i din webbläsare, påverkar interaktioner), CSS (språket för inställning av sidans utseende) och Mer. Men på en mer grundläggande nivå är en webbplats en idé.
Om det är din webbplats vet du förmodligen vad du vill att den ska göra eller vad du vill att användare ska komma ut ur den. Det kanske ska vara en enkel plats för dem att hitta information om teknik; eller kanske det skulle förklara varför du är det bästa bandet eller hund-vandraren runt. I alla fall, långt innan du måste ta itu med HTML, CSS, JavaScript eller någon annan specifik webbutveckling teknik, bör du ha en mycket tydlig uppfattning om vad din webbplats ska göra och vad den i allmänhet ska se ut tycka om. Och wireframes för webbplatser är sättet att stelna den idén och kommunicera den.
Baksidan Av En Servett
En wireframe för en webbplats är bara en skiss över hur du vill att din webbplats ska se ut. Det är inte tänkt att vara vackert, och du behöver inte ens programvara för att skapa det. Du kan bara ta ett papper, eller till och med en servett, och börja blockera på din webbplats, element för element. “
Titeln går här... och sedan har vi en navigationsmeny... åh, och här kan jag sätta en sökruta.”Bara i de allmänna, enkla termerna, lägg en del av din webbplats samman tills slutresultatet ser ut så här:
Som ni ser är detta inte datorkod eller något alltför tekniskt eller komplicerat. Vem som helst kunde titta på denna snabba skiss och omedelbart ta reda på vad de ser. Och det är poängen med trådramar: De är väldigt snabba att göra och lätta att förstå. De låter dig få de viktiga sakerna rätt, som webbplatslayouten, navigationsstrukturen och annonsplacering, innan du trycker på en enda kodrader. Och om du arbetar med andra människor, till exempel en kodare eller en designer, låter de er alla komma överens om hur slutresultatet kommer att se ut. Detta kan spara massor av förvirring och dubbelt arbete, särskilt när det gäller större projekt.
Det är viktigt att notera bristen på detaljer i trådramen ovan: Bilderna bredvid varje artikel är inte "riktiga" bilder, utan uppenbara platshållare. Till och med artikeltexten fylls inte i - det är bara en rad rader. Du kan inte se vad färgschemat kommer att bli - det är bara svart och vitt. Detta är vad en trådram är förment att se ut som. Det är inte tänkt att vara en fullständig representation av den slutliga webbplatsen, utan bara dess anda eller väsen, om du vill. Det är bara det viktigaste.
Verktyg för Wireframing
Som jag tidigare nämnt är det bästa verktyget för wireframing ofta bara ett papper och en penna. Att komma ifrån din dator kan verkligen hjälpa till att rensa ditt sinne och fokusera på det du vill att din webbplats ska se ut, utan irriterande avbrott eller röra om att lära sig ett nytt wireframing-verktyg. En matematisk anteckningsbok (som visas ovan) fungerar vanligtvis bäst eftersom du spårar längs linjerna, skapar snygga rektanglar och enkelt justerar de olika bitarna på din webbplats. Ta en, en penna eller två och ta en kopp kaffe någonstans långt borta från din dator. Du kommer tillbaka med en tydlig uppfattning om vad du exakt försöker skapa.
Som sagt är ibland wireframing-programvara nödvändig. Till exempel kanske du arbetar som en del av ett team som är utspridda över hela landet eller världen, eller kanske skriver du ett blogginlägg om wireframing. I dessa fall är manuell skanning av wireframes inte en mycket praktisk lösning. Här är några gratis programverktyg som kan hjälpa dig om du verkligen inte kan använda en penna och papper:
- Lumzy: Ett gratis, Flash-baserat wireframing-verktyg med ett rikt bibliotek med objekt. Detta är verktyget jag använde för att skapa den trådram som du ser ovan - det är snabbt och smärtfritt.
- QuirkTools Wires [Bruten URL borttagen]: Ett enklare verktyg utan justeringsalternativ. Det är dock inte Flash-baserat.
- Härmfågel: Ett kommersiellt verktyg, men det har en begränsad gratis plan.
Inte bara för webbplatser
Du insåg förmodligen detta själv, men det är en bra anmärkning att avsluta med: Trådramar är ett fantastiskt verktyg för att skapa en produkt, inte bara en webbplats. Du kanske har en ungefärlig idé för en iPhone eller Android-app, eller till och med en fullskalig datorprogram. I dessa fall är wireframes för webbplatser ovärderliga för att visa hur allt ser ut och kan till och med hjälpa dig att få människor att stödja ditt projekt på olika sätt.
Har du någonsin skapat en trådram själv? Ska du börja nu när du har läst det? Låt mig veta i kommentarerna!
Bildkrediter: Skrynklig servettbild via ShutterStock, Röd anteckningsbok via ShutterStock
