Hoe een website-schema te maken

Als uw bedrijfswebsite eenmaal verder is dan een basisdiagram, kunt u beginnen beslissingen te nemen over wat er op de afzonderlijke pagina's gebeurt. Een schematische website, of wireframe, presenteert de moeren en bouten van paginafunctionaliteit zonder de ontwerpelementen, kleurenschema's, typestijlen of interactieve elementen zelf op te nemen. Beschouw het schema als een plattegrond en de afgewerkte pagina als een gemeubileerde kamer. In plaats van muren opnieuw te schilderen en meubels te herschikken of te vervangen om de manier te wijzigen waarop uw pagina's samenkomen, kunt u uw online ruimte plannen met behulp van kaders en tijdelijke aanduidingen die bepalen hoe uw sitepagina's functioneren.

1.

Maak een lijst van de terugkerende items die op uw pagina's verschijnen. Deze omvatten elementen zoals uw logo, sitenavigatie, fotogebieden, tekstgebieden, kopteksten, voetteksten en zijbalken.

2.

Teken een diagram waarin de relatieve grootte van pagina-elementen en hun verticale en horizontale posities worden weergegeven. U kunt dit diagram op papier schetsen, het in een beeldbewerkings- of illustratieprogramma bewerken of samenvoegen met behulp van een online wireframing-toepassing.

3.

Maak een paginadiagram voor elk type pagina dat uw website nodig heeft. Uw startpagina kan een andere subset van pagina-elementen bevatten dan een product- of servicepagina, contactpagina of blog.

4.

Gebruik tekst van plaatsaanduiding om aan te geven waar woordenschat wordt weergegeven. Misschien wilt u kiezen tussen serif en schreefloze lettertypen, maar een schema is niet de plaats voor experimenten en demonstraties in typestijl.

5.

Annoteer uw wireframes met notities over hoe elementen werken of waar ze naar verwijzen. Voeg pictogrammen toe die verwijzen naar externe sites of services, waaronder RSS, Twitter, Facebook en sites van partners of fabrikanten.

6.

Circuleer uw wireframes ter beoordeling, discussie en goedkeuring, wijzig ze indien nodig. Wanneer u het punt bereikt waarop uw schema's alle terugkerende elementen bevatten die uw werkelijke pagina's vereisen, en de relatieve positie en grootte van elementen past bij de behoeften van uw website, kunt u verder gaan dan het wireframe-stadium.

Tips

  • Schema's van websites gaan meestal vooraf aan mockups en prototypes in het ontwerpproces. Modellen tonen kleurenschema's, typestijlen en andere ontwerpdetails in formulieren die u feitelijk overweegt te implementeren. Prototypes gaan verder dan mockups tot strak geformatteerde exemplaren die een echt pagina-uiterlijk laten zien.
  • Als u van plan bent een mobiele -en een browsergebaseerde versie van uw site te maken, moet u mogelijk schema's maken voor meer dan één ontwerpstroom.
  • Als u uw schema's met de hand tekent, gebruikt u gekleurde pennen of potloden om specifieke delen van uw paginalay-outs te benadrukken die van groter belang zijn in het ontwerp- of ontwikkelingsproces. U kunt bijvoorbeeld een specifieke kleur selecteren om modules te vertegenwoordigen die door een specifieke persoon moeten worden gecodeerd. Deze kleuren geven planningselementen aan, geen ontwerpkeuzes.

Waarschuwing

  • Als u uw schema's ontwikkelt in een hulpmiddel voor het ontwerpen van websites en CSS maakt voor uw wireframes, vermijd dan de schematische fase van site-ontwikkeling om te zetten in een ontwerpoefening. Wireframes brengen kenmerken over, geen stijl.

Populaire Berichten