Hvordan man laver et websted skematisk

Når din virksomheds hjemmeside udvikler sig ud over et grundlæggende site diagram, kan du begynde at træffe beslutninger om, hvad der foregår på individuelle sider. Et skematisk websider eller wireframe præsenterer møtrikker og bolte til sidens funktionalitet uden at inkorporere designelementer, farveskemaer, typestile eller interaktive elementer selv. Tænk på det skematiske som en grundplan og den færdige side som et møbleret værelse. I stedet for at gentage vægge og omlægge eller udskifte møbler for at ændre, hvordan dine sider kommer sammen, kan du planlægge dit onlinerum ved hjælp af bokse og pladsholdere, der fastlægger, hvordan dine websider fungerer.

1.

Skriv de tilbagevendende elementer, der vises på dine sider. Disse omfatter elementer som dit logo, site navigation, foto områder, tekstområder, overskrifter, footers og sidebars.

2.

Tegn et diagram, der viser de relative størrelser på sideelementer og deres lodrette og vandrette positioner. Du kan skitse dette diagram på papir, arbejde det op i et billedredigerings- eller illustrationsprogram eller sætte det sammen ved hjælp af en online wireframing-applikation.

3.

Opret et sidediagram for hver type side, dit websted kræver. Din hjemmeside kan indeholde en anden delmængde af sideelementer end en produkt- eller tjeneste side, kontakt side eller blog.

4.

Brug pladsholdertekst til at angive, hvor verbiage vises. Du kan ønske at vælge mellem serif og sans serif skrifttyper, men en skematisk er ikke stedet for typestil eksperimenter og demonstrationer.

5.

Angiv dine wireframes med noter om, hvordan elementer fungerer, eller hvor de forbinder. Tilføj ikoner, der linker til eksterne websteder eller tjenester, herunder RSS, Twitter, Facebook og partner eller producent sites.

6.

Cirkuler dine wireframes til gennemgang, diskussion og godkendelse, om nødvendigt ændre dem. Når du når frem til det punkt, hvor dine skemaer indeholder alle de tilbagevendende elementer, som dine faktiske sider kræver, og den relative placering og størrelsen af ​​elementer passer til dine webstedsbehov, kan du gå videre end wireframe-scenen.

Tips

• Website skemaer går typisk forud for mockups og prototyper i designprocessen. Mockups viser farveskemaer, stilarter og andre designdetaljer i formularer, du overvejer at implementere. Prototyper går videre end mockups til tæt formaterede eksemplarer, der viser ægte sideudseende.
• Hvis du planlægger at oprette en mobil- såvel som en browserbaseret version af dit websted, skal du muligvis opbygge skemaer for mere end et designflow.
• Hvis du tegner dine skemaer med hånden, skal du bruge farvede penne eller blyanter til at fremhæve bestemte områder af dine sidelayouter, som har større betydning i design- eller udviklingsprocessen. Du kan for eksempel vælge en bestemt farve til at repræsentere moduler, der skal kodes af en bestemt person. Disse farver indikerer planlægningselementer, ikke designvalg.

Advarsel

• Hvis du udvikler dine skemaer i et website-designværktøj og opretter CSS til dine wireframes, skal du undgå at ændre den skematiske fase af webstedets udvikling til en designøvelse. Wireframes formidle funktioner, ikke stil.