Een wireframe is een schematische schets van een webpagina of app-scherm, waarin alleen de indeling en de plaats van de onderdelen te zien zijn. Het laat zien waar bijvoorbeeld de kop, de tekst, de afbeeldingen en de knoppen komen, zonder kleuren, lettertypen of definitief beeldmateriaal.
Waarvoor wordt een wireframe gebruikt
Met een wireframe wordt de structuur van een pagina besproken voordat er een ontwerp of code wordt gemaakt. Ontwerpers, opdrachtgevers en ontwikkelaars kunnen aan de hand van de schets afspreken welke onderdelen er op de pagina komen en in welke volgorde. Wijzigingen zijn in dit stadium snel en goedkoop door te voeren.
Het is een veelgebruikt hulpmiddel binnen UX-design, omdat de aandacht uitgaat naar gebruiksgemak en niet naar het uiterlijk.
Kenmerken van een wireframe
Een wireframe is bewust eenvoudig gehouden, zodat de discussie over de indeling gaat en niet over smaak. Typische kenmerken zijn:
- grijstinten en simpele vormen in plaats van kleur en vormgeving;
- plaatshouders voor afbeeldingen en tekstblokken;
- duidelijke aanduiding van knoppen, formulieren en menu’s;
- meestal één wireframe per type pagina, zoals een homepage of een productpagina.
Verschil met een prototype
Een wireframe is meestal statisch: het toont de opzet van één scherm, maar er valt niets mee te doen. Een prototype gaat een stap verder en laat een bezoeker door de schermen klikken. Ook is een wireframe geen eindontwerp: de visuele uitwerking, zoals kleur en stijl, volgt pas daarna bij het UI-design.
Wanneer is een wireframe nuttig
Een wireframe is vooral nuttig bij een nieuwe website, een grote aanpassing of een pagina met veel onderdelen. Het is ook handig wanneer meerdere mensen meebeslissen: een eenvoudige schets leidt minder af dan een uitgewerkt ontwerp. Voor een kleine wijziging, zoals een andere tekst, is een wireframe meestal niet nodig.
