Kleine grijze tekst op een drukke achtergrond. Je ogen worden moe nog voor je de eerste zin uit hebt. Daarom zijn wireframes belangrijk voor je merk. Als layout en kleur de boodschap in de weg zitten, vertrekken mensen zonder te zeggen waarom.
Een wireframe is een eenvoudige plattegrond van je layout met contentblokken en navigatie, zonder de uiteindelijke opmaak. In dit hoofdstuk leggen we in gewone taal uit wat dat betekent, waarom het invloed heeft op je website en marketing en hoe je het toepast zonder te verdwalen in vakjargon. Je ziet ook hoe het ontwerpproces in hetzelfde plaatje past. We lopen het stap voor stap door.
Wat is een wireframe en wanneer heb je er een nodig
Een wireframe is een eenvoudige plattegrond van je layout met contentblokken en navigatie, zonder de uiteindelijke opmaak.
In de praktijk zie je wireframes terug in de kop van je website, op dienstenpagina's, in social graphics en op drukwerk. Als je de juiste woorden gebruikt, geef je ontwerpers sneller een briefing en beoordeel je concepten met meer vertrouwen.
Verwante begrippen zoals het ontwerpproces hangen er direct mee samen. Houd ze in gedachten terwijl je de rest van deze module leest.
Met wireframes stem je de structuur af met je team, voordat kleuren en foto's het gesprek afleiden.
Waarom is het belangrijk voor je bedrijf om te weten wanneer je een wireframe nodig hebt?
Klanten beoordelen betrouwbaarheid aan de hand van de indeling, nog voor ze elk woord lezen. Een duidelijke visuele structuur haalt wrijving weg en maakt aanbiedingen makkelijker te begrijpen.
Beslissingen over de indeling van een website zijn in wireframes goedkoper aan te passen dan in gebouwde pagina's.
Maak een wireframe voor je homepage als je een redesign of een nieuwe dienstensectie plant.
Wil je zien hoe dit samenhangt met aanverwante onderwerpen? Lees dan hierna voorbeelden van goed websiteontwerp en slecht websiteontwerp.
Een praktische checklist voor vandaag
Maak een wireframe voor je homepage als je een redesign of een nieuwe dienstensectie plant.
Vraag je bij elke pagina die je bekijkt af of wireframes op mobiel zichtbaar zijn zonder te scrollen. Zo niet, verander dan de volgorde van de secties voordat je aan de details gaat sleutelen.
Bewaar screenshots van voor en na elke wijziging, zodat je leert wat bij wireframes op jouw site het verschil maakte.
Deel deze checklist met iedereen die je site bijwerkt, zodat het ontwerpproces consistent blijft op nieuwe pagina's.
Kies deze maand één cijfer om te volgen, zoals de tijd op de pagina of het aantal gestarte formulieren, zodat ontwerpwijzigingen gekoppeld zijn aan zakelijke resultaten en niet alleen aan smaak.
Zo past dit onderwerp in je bredere merk
Visuele keuzes blijven zelden beperkt tot één pagina. Beslissingen over de indeling van een website zijn in wireframes goedkoper aan te passen dan in gebouwde pagina's.
Je berichten op social media, e-mails en drukwerk horen dezelfde hiërarchie, kleuren en lettertyperegels te volgen als je website.
Wijken je visuele uitingen af van elkaar, dan voelen klanten een subtiele mismatch, ook al kunnen ze niet uitleggen waarom.
Gebruik kosten van websiteontwerp om te vergelijken met een verwant hoofdstuk in deze module.
Met wireframes stem je de structuur af met je team, voordat kleuren en foto's het gesprek afleiden.
Vragen die mensen vaak over het hoofd zien
Verwante zoektermen zoals het ontwerpproces en de indeling van een website helpen je om diepere voorbeelden te vinden en je werk te vergelijken met gangbare standaarden.
Beslissingen over de indeling van een website zijn in wireframes goedkoper aan te passen dan in gebouwde pagina's.
Schrijf één verandering (voor en na) op die je deze week op een live pagina gaat testen. Kleine, gemeten aanpassingen winnen het van vage plannen.
Als je team dezelfde woorden gebruikt rond wireframes, heb je minder aanpassingsrondes met ontwerpers en bureaus.
Tools die visuele aanpassingen makkelijker maken
Voor veel problemen met indeling en opmaak heb je geen eigen code nodig. In een visuele editor pas je ruimte, kleuren en lettertypen aan, terwijl je de mobiele en de desktopweergave bekijkt.
WEMASY heeft een Websitebouwer met visueel bewerken, zodat je wijzigingen kunt publiceren zonder voor elke kleinigheid op een ontwikkelaar te wachten. Open de Websitebouwer zodra je toe bent aan het toepassen van wat je hebt geleerd.
Controleer na het publiceren van updates nog eens voorbeelden van goed websiteontwerp en slecht websiteontwerp, zodat de module goed blijft hangen.
Je hebt nu een werkbare bril voor wireframes. Gebruik die als je je site beoordeelt, marketingmateriaal goedkeurt of een ontwerper instructies geeft. Ga verder met slecht websiteontwerp en kosten van websiteontwerp om in deze module vaart te houden.
Veelgestelde vragen
Hoe lang duurt het om wireframes te verbeteren?
De meeste kleine bedrijven hebben na een paar gerichte sessies duidelijkere pagina's, zodra ze de basis uit dit hoofdstuk toepassen. Begin met je homepage en pas dezelfde regels daarna toe op je dienstenpagina's en contactpagina.
Heb je een ontwerper nodig voor wireframes?
Een ontwerper helpt bij een grote rebranding, maar veel verbeteringen rond wireframes kun je zelf doen als je weet waar je op moet letten. Lees voorbeelden van goed websiteontwerp erbij voor aanvullend advies.
Kan WEMASY je helpen om wireframes toe te passen op je website?
WEMASY heeft in de Websitebouwer een visuele editor, zodat je indeling, kleuren en lettertypen zonder code aanpast. Open de Websitebouwer om templates aan te passen en wijzigingen op mobiel te bekijken.
Wat is de meest gemaakte fout bij wireframes?
Mensen willen alles in één keer oplossen in plaats van pagina voor pagina. Kies één prioriteit, zoals leesbaarheid of contrast, en kijk daarna bij slecht websiteontwerp voor de volgende verbetering.
Wat heeft wireframes met SEO te maken?
Een duidelijke visuele hiërarchie en leesbare tekst houden bezoekers langer op de pagina. Dat ondersteunt de signalen over betrokkenheid waar zoekmachines naar kijken. Combineer ontwerpverbeteringen met een goede opbouw van je content voor het beste resultaat.
Waar ga je verder na wireframes?
Ga verder met voorbeelden van goed websiteontwerp en slecht websiteontwerp in dit boek om een compleet visueel systeem voor je merk online op te bouwen.