Wireframing is de vroege stap waarin een ontwerper het skelet van een pagina schetst, voordat er kleur, branding of echte content in komt. Het laat zien waar de header, de knoppen, de tekst en de beelden komen, met simpele blokken en plaatshouderlabels. Het gaat om structuur, niet om schoonheid. De meeste wireframes zijn expres grijs en lelijk, en dat is precies de bedoeling.
Zie het als de plattegrond van een huis. Voordat iemand verf of meubels kiest, tekent een architect waar de muren, deuren en kamers komen, want een muur verzetten op papier kost niets en een muur verzetten als het huis er staat kost een fortuin. Een wireframe is die plattegrond voor een scherm. Je legt er layout en flow mee vast, wat de kern is van goed UX-design, terwijl aanpassen nog goedkoop en snel is. Zien dat de belangrijkste knop onder de vouw valt, kost één minuut om op te lossen in een wireframe. Merk je het na de lancering, dan ben je een week aan het herbouwen.
Wireframes zitten vroeg in het webdesign-proces. Zodra de structuur is goedgekeurd, wordt hij aangekleed tot uitgewerkte mockups met echte visuals, en soms tot een klikbaar prototype zodat mensen de flow echt kunnen testen voordat er één regel productiecode is geschreven. Die grijze lelijkheid houdt het gesprek in deze fase bij wat telt. Je bekvecht over waar de zoekbalk komt, niet over welke tint blauw de knop moet hebben.
Bij TopDevs maken we eerst wireframes voordat we iets bouwen, zodat jij en je team kunnen aftekenen hoe een pagina werkt, lang voordat we moeite steken in een gepolijst uiterlijk.
