Een wireframe is het skelet van een ontwerp. Vakken voor afbeeldingen. Lijnen voor tekst. Labels voor knoppen. Geen kleuren. Geen lettertypen. Geen gepolijste visuals. Alleen de structuur, teruggebracht tot de essentie.

Wireframes komen vroeg in het ontwerpproces aan bod, na de schetsen maar vóór de gedetailleerde mockups. Hun taak is om vragen over de lay-out te beantwoorden: waar komt de navigatie, hoeveel kolommen, wat is de hiërarchie? Het is de bedoeling dat ze er niet al te strak uitzien. Als een wireframe er te afgewerkt uitziet, beginnen belanghebbenden te discussiëren over de tint blauw in plaats van over de functionaliteit van de lay-out.

Wat een wireframe laat zien

• Plaatsing van de belangrijkste elementen: header, navigatie, content, footer
• Relatieve grootte en prioriteit van componenten
• Navigeren tussen schermen of pagina's
• Interactieve elementen zoals knoppen en formulieren

Tools zoals Balsamiq en Figma hebben wireframing snel gemaakt. Sommige ontwerpers gebruiken nog steeds papier en stiften. Het medium is minder belangrijk dan de gedachte erachter. Een wireframe is een aanzet tot een gesprek. Het zegt: dit is de structuur, wat vind je ervan? Wijzigingen zijn in dit stadium goedkoop. Als het visuele ontwerp eenmaal klaar is, betekent het verplaatsen van een zijbalk dat alles wat daarop volgt opnieuw moet worden gedaan. Verplaats het liever in het wireframe.