Hur man gör en webbplats schematisk

När din företags webbplats utvecklas utöver ett grundläggande siddiagram kan du börja fatta beslut om vad som händer var på enskilda sidor. En webbschema eller trådram presenterar muttrarna och bultarna på sidfunktionalitet utan att de innehåller designelement, färgscheman, typstilar eller interaktiva element själva. Tänk på det schematiska som en planritning och den färdiga sidan som ett möblerat rum. Snarare än att måla väggar och omorganisera eller byta ut möbler för att ändra hur dina sidor kommer ihop kan du planera ditt onlineutrymme med hjälp av lådor och platshållare som bestämmer hur sidorna fungerar.

1.

Ange de återkommande objekten som kommer att visas på dina sidor. Dessa inkluderar element som din logotyp, sidnavigering, fotoområden, textområden, rubriker, sidfot och sidfält.

2.

Rita ett diagram som visar de relativa storlekarna på sidelementen och deras vertikala och horisontella positioner. Du kan skissa det här diagrammet på papper, arbeta upp det i ett bildredigerings- eller illustrationsprogram eller lägga det ihop med en onlineframställning.

3.

Skapa ett siddiagram för varje typ av sida som din webbplats kräver. Din hemsida kan innehålla en annan delmängd av sidelement än en produkt- eller tjänstesida, kontaktsida eller blogg.

4.

Använd platshållartekst för att ange var verbiage visas. Du kanske vill välja mellan serif och sans serif typsnitt, men en schematisk är inte platsen för typstil experiment och demonstrationer.

5.

Anteckna dina trådramar med anteckningar om hur element fungerar eller var de länkar. Lägg till ikoner som länkar till externa webbplatser eller tjänster, inklusive RSS, Twitter, Facebook och partner eller tillverkares webbplatser.

6.

Cirkulera dina trådramar för granskning, diskussion och godkännande, ändra dem efter behov. När du når den punkt där din schema innehåller alla återkommande element som dina faktiska sidor kräver, och den relativa positionen och storleken på elementen passar dina webbplatsbehov, kan du gå längre än wireframe-scenen.

tips

• Webbplatsscheman föregår typiskt mockups och prototyper i designprocessen. Mockups visar färgscheman, typ stilar och andra designdetaljer i formulär som du faktiskt överväger att implementera. Prototyper går utöver mockups till tätt formaterade exemplar som visar verkligt sidoutseende.
• Om du planerar att skapa en mobil- och en webbaserad version av din webbplats kan du behöva bygga scheman för mer än ett designflöde.
• Om du ritar dina scheman för hand, använd färgpennor eller pennor för att betona specifika delar av dina sidlayouter som har större betydelse i design- eller utvecklingsprocessen. Du kan till exempel välja en specifik färg för att representera moduler som kodas av en viss individ. Dessa färger indikerar planeringselement, inte designalternativ.

Varning

• Om du utvecklar dina scheman i ett webbdesignverktyg och skapar CSS för dina trådramar, undviker du att ändra den schematiska fasen av webbplatsutveckling till en designövning. Wireframes förmedla funktioner, inte stil.