Wireframes, ook wel interactie-ontwerp genoemd, worden vaak gebruikt door webdeveloppers. In dit artikel lees je meer over wat wireframes zijn, waarvoor ze gebruikt kunnen worden en waarom ze belangrijk zijn in het proces van het ontwikkelen van een website of webapplicatie.

Wat zijn wireframes?

Wireframes worden meestal gezien als een visueel hulpmiddel bij het ontwikkelen van een website of –applicatie. Het is een soort van bouwtekening van een website. Hierin wordt een overzicht gegeven van de verschillende onderdelen die op een website aanwezig zijn.

In wireframes worden de volgende zaken vastgelegd:

  • Navigatie
  • Indeling en inhoud

Dit wordt gedaan zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel van wireframes is dat het alleen op de inhoud gefocust wordt en niet op het grafische aspect.

blog10

Waarvoor gebruik je wireframes?

Zodra de doelstellingen van de website bekend zijn kunnen ideeën in wireframes uitgewerkt worden. Het is goed om hier al zo vroeg mogelijk in het proces mee te beginnen, zonder hierbij nog over vormgeving na te denken.

Een wireframe kan ook gebruikt worden als een communicatiehulpmiddel, omdat je hiermee helder kunt communiceren bij een webproject.

Een voordeel van wireframes is dat je snel een concept kunt toetsen. Dit kun je doen door niet alleen te kijken of het idee goed is uitgewerkt, maar ook of het op het gebied van gebruiksvriendelijkheid voldoet. Hiermee toets je of de gebruiker begrijpt hoe de website of applicatie in elkaar zit.

Hoe maak je een wireframe?

Er zijn een aantal manieren en programma’s waarmee je een wireframe kunt maken. Dit zijn de manieren waarmee je een wireframe kunt maken:

  • Pen en Papier
  • Microsoft Visio
  • Microsoft powerpoint
  • Adobe indesign
  • Balsamiq

Dit is een kleine greep uit de vele mogelijkheden voor het maken van een wireframe.

Voordelen van het maken van wireframes

Verhelderen – Om een duidelijk beeld te krijgen van welke informatie nodig is voor je begint met ontwerpen

Focussen – Tijd investeren om uitvoerig te kijken naar de layout en de inhoud van je website

Begrijpen – Hoe reageert de site op bezoekers, zonder dat je wordt afgeleid door drukke kleuren en designelementen

Aanpassen – Makkelijk te maken en aan te passen zodat je de planningfase soepel doorkomt

Specificeren – Duidelijk pakket aan visuele specificaties

Verbinden – Klant intensief betrekken bij het planningsproces

Veiligstellen – Markeerpunten uitzetten waar je naar terug kunt keren, om te voorkomen dat het project te uitgebreid wordt en je dingen opnieuw moet doen

Verfijnen – Terugkoppelrondes opzetten met je team en de klant

Profiteren – Tijd, geld en moeite besparen door van te voren de belangrijke ontwikkelstappen vast te leggen.

Bronnen:

(Maltha, 2009)

https://www.frankwatching.com/archive/2009/11/23/wireframes-de-bouwtekening-van-een-website/

(Admin, Het voordeel van wireframes, 2016)

https://www.creativeict.nl/het-voordeel-van-wireframes

(Maltha, 2009)

https://www.frankwatching.com/archive/2009/11/23/wireframes-de-bouwtekening-van-een-website/

Advertenties