Ga naar ‘t Rijksmuseum, wandel af op een willekeurig kunstwerk, schraap met een mesje de verflaag eraf en er valt je direct iets op. Okee, die luide sirenes, maar let daar vooral niet op. Je zult onder de verf een schets ontdekken — het uiteindelijke werk opgezet in ruwe lijnen. Als zelfs meesters het deden, waarom zou jij dan niet eerst een schets maken?

Zo’n schets heet in de wereld van webdesign een wireframe en is een onmisbare tool in het arsenaal van elke ontwerper. Voordat je met kleuren en afbeeldingen aan de slag gaat, moet je nadenken over de opzet van je website of applicatie. Je gaat op zoek naar een antwoord op de vraag hoe het allemaal gaat werken.

Het voordeel van een wireframe is dat je snel verbeteringen doorvoert en zo makkelijk van de ene op de andere versie overspringt. Als je al uren een groepje pixels heen en weer hebt geduwd, op zoek naar de mooiste vorm, om die vervolgens weg te moeten gooien omdat het niet in de uiteindelijke website terugkomt — au, dat doet pijn.

Je snel geschetste wireframes in de prullenbak mieteren als het toch niet werkt zoals je wil? Dat overleef je wel.

Wireframes kun je dus gewoon met pen en papier schetsen, maar ze zijn ook te maken met tools zoals Balsamiq, Adobe XD en – mijn weapon of choice – Figma. In deze tools kun je ook samenwerken aan de wireframes, waardoor je hele designproces nog efficiënter wordt.

Low en high fidelity wireframes

Je kan dus een snelle schets maken, maar er ook wat verder in duiken met een programma als Figma. Dit is ook wel het verschil tussen low en high fidelity wireframes. 'Fidelity' vertaalt Google voor je als 'getrouwheid', maar word je daar wijzer van? Amper.

Snelle schetsen zijn low fidelity en dieper uitgewerkte wireframes zijn high fidelity.

Je kan begrijpen dat je altijd met low fidelity wireframes begint en steeds een laag details toevoegt. Zo zal een wireframe stap voor stap steeds meer high fidelity worden en al op het uiteindelijke ontwerp gaan lijken.

Hoeveel detail je voor je wireframes gebruikt is afhankelijk van veel zaken, maar een belangrijk punt is de grootte van het project. Als je een nieuwe website ontwerpt voor Bol.com zullen ze graag in veel meer detail de werking zien, dan wanneer je iets ontwerpt voor de lokale scholengemeenschap.