Dag 4: Wireframe maken

Vandaag gaan we beginnen met het echte werk. Het design. Om een goed design te kunnen maken is eerst een globale schets nodig waarmee de verschillende onderdelen van de website ingedeeld worden. Deze schets noemen we een wireframe. Vandaag gaan we een wireframe maken die als blauwdruk gaat dienen voor onze website.

Een wireframe dwingt ons direct belangrijke beslissingen te maken over onze website. Het geeft ons een overzicht van de onderdelen die we gaan gebruiken op onze website en hoe deze optimaal ingedeeld kunnen worden. De bezoeker moet zo snel mogelijk de voor hem of haar belangrijkste informatie kunnen vinden. Het mooie aan een wireframe is dat het makkelijk aan te passen is. Dit wordt lastiger als de website al helemaal gebouwd is en het blijkt dat sommige bezoekers moeite hebben met het vinden van informatie. Maar voordat we direct beginnen met het maken van een wireframe zijn er enkele regels waar we rekening mee moeten houden.

De ongeschreven regels
Door de jaren heen zijn er ongeschreven regels ontstaan voor websites. Het is belangrijk om deze in acht te nemen bij het maken van een wireframe omdat de gemiddelde bezoeker gewend is aan deze regels:

• Het logo staat links bovenaan (of in het midden),
• zoeken staat rechts bovenaan,
• de gemiddelde bezoeker bekijkt de website in een F vorm dat wil zeggen dat:
  
• informatie aan de linkerkant beter wordt bekeken,
• en informatie aan de rechterkant slechter wordt bekeken of soms totaal wordt genegeerd.

Met al deze regels in ons achterhoofd gaan we aan de slag met het wireframe.
Het wireframe van Poker Magazine ziet er als volgt uit:

Dit wireframe geeft een indruk van hoe de website wordt ingedeeld. Maar voordat we daadwerkelijk beginnen met het ontwerpen en bouwen van de website naar aanleiding van het wireframe is het belangrijk om het te testen.

Het wireframe testen
Het testen van een wireframe is belangrijk omdat het in deze fase gemakkelijker is om wijzigingen te maken in de indeling van de website. Zodra de website ontworpen of gebouwd wordt is het moeilijker om onderdelen te verplaatsen. Het testen van een wireframe is een simpel proces en hoeft niet lang te duren. Het bestaat voornamelijk uit het vragen van feedback aan vrienden, familie of potentiële bezoekers.

• Wat vinden zij van de indeling?
  
• Is het volgens hen logisch of kloppen er bepaalde onderdelen niet?
• Zijn er onderdelen die zij op een andere plek zouden zetten?
• Ontbreken er onderdelen of zijn sommige onderdelen juist overbodig?

Feedback
Het vragen van feedback van andere personen is essentieël voor de ontwikkeling van een goede website. Als ontwerper en/of bouwer van de website kan er niet meer objectief naar een wireframe gekeken worden. Iemand met een frisse blik ziet veel sneller problemen die anders onopgemerkt blijven. Vraag daarom altijd op tijd om feedback.

Pas het wireframe aan naar aanleiding van de feedback. Blijf net zolang verbeteren tot je helemaal tevreden bent met de indeling. Neem hier de tijd voor, het is namelijk één van de belangrijkste stappen bij het ontwikkelen van een website.

Samenvatting
Vandaag zijn we echt begonnen met de ontwikkeling van onze website. We hebben bepaald welke onderdelen we op de website willen zetten en waar we de onderdelen willen plaatsen. Naar aanleiding van deze beslissingen hebben we een wireframe gemaakt en getest. Overmorgen gaan we beginnen met het omzetten van het wireframe naar een daadwerkelijk design, maar daarvoor moeten we eerst inspiratie op doen. We laten morgen zien hoe dit in zijn werk gaat.

Commentaar (11)