Wireframes

Wireframes

Wireframes van de key pagina’s van je website en de bijbehorende functionaliteit op die pagina’s. De focus ligt op het menu, de submenu’s en de templates die je voor je site nodig hebt. Een serie wireframes van uw hele website geeft iedereen een goed overzicht van wat er precies moet gebeuren.

Een aantal mooie voorbeelden vind je op:
https://dribbble.com/kenhanson/buckets/169686-Beautiful-Wireframes
http://blog.mockupbuilder.com/wp-content/uploads/2013/06/Park-Bond-on-Behance.png 
http://blog.mockupbuilder.com/category/inspiration/

Het is niet nodig om van iedere pagina een wireframe te maken. Een detailpagina voor de aankoop van een boek (bijvoorbeeld) is voor een studieboek immers hetzelfde als voor een kookboek; hoogstens de content zal verschillen. Een serie wireframes noemen we een functioneel ontwerp (FO). Een goed FO is noodzakelijk voor een goede kostenraming, tijdsplanning en personeelsplanning. Hieronder ziet u een afbeelding van een digitaal uitgewerkt wireframe, in de reader wordt dit een high fidelity wireframe genoemd waarbij uitgelegd staat wat welk onderdeel doet.

wireframe voor een onepage lay-out

Wireframe parallax 2

 

Hoe teken je een wireframe?

Het begint met een schets op papier. In je schetsen zul je sowieso moeten aangeven hoe het menu werkt; is het een dropdown? Een harmonica menu? Een tweede balk als submenu? Etc. Teken alleen de keypages; de nieuwe schermen; de templates!

Eerste wireframe schets

 

 

Gebruik in ieder geval het volgende:

  • Teken een vlak met een kruis erin als afbeelding
  • Gebruik rechte lijntjes voor platte tekst
  • Gebruik een kriebellijntje voor headings
  • Schrijf menu-items al op; vooral als de klant dit al heeft aangeleverd!
  • Geef eventuele scrollbalken of paginering ook aan

Na de eerste schets wordt een wireframe iets beter uitgewerkt. Dit mag digitaal maar evt ook netjes getekend.

wireframe2

 

wireframe3

 

Hierna maakt u de high fidelity wireframes. Hierbij gaat u zo gedetailleerd aangeven wat wat is. Stelt u zich voor dat u ziek wordt en niet meer op het werk verschijnt, of dat u alles naar India stuurt om voor een soepele prijs te laten bouwen. Dan kunt u niet makkelijk even iets communiceren; uw wireframes oftewel functioneel ontwerp moet dit voor u doen.

Menu in rust

Menu 2 lagen diep
High fidelity wireframe 1

 

Met de goedgekeurde wireframes kunt u in feite al je HTML/PHP met de div-elementen gaan opzetten. Met behulp van je CSS kun je de vormgeving later implementeren.

http://www.functioneelontwerpen.nl/2009/11/wat-is-een-functioneel-ontwerp/