Wireframe: eerst de indeling, dan pas de vormgeving
Laat iemand een ontwerp zien met kleuren en foto’s en het gesprek gaat over kleuren en foto’s. Of de knop wat donkerder mag, of die foto de juiste is. Bijna niemand vraagt of de volgorde van de blokken klopt.
Toch is dat de vraag die je omzet bepaalt. Een mooie pagina met de verkeerde volgorde levert niets op.
Haal je de kleuren weg, dan blijft alleen de structuur over. Dan gaat het gesprek daar vanzelf over.
Dat is de hele reden dat deze stap bestaat. Het is geen tussenproduct maar een manier om het juiste gesprek te voeren.
Een schets in grijstinten, voordat er iets moois wordt gemaakt.
Wat is een wireframe?
Een wireframe is een schets zonder kleur van een pagina. Je ziet blokken, koppen en knoppen in grijstinten.
Geen kleuren, geen foto’s, geen lettertypes. Alleen waar wat komt en hoe groot het is.
Wat je erin bepaalt
De volgorde van blokken, de indeling van je kolommen en welk element het meest opvalt.
Dat laatste is de kern van je pagina. Meer daarover lees je bij visuele hierarchie.
Waarom zonder kleur
Omdat kleur afleidt. Zodra er een huisstijl in zit, praat iedereen over smaak.
Bij het discussie voorkomen wil je juist de andere vragen stellen. Staat het antwoord op de vraag van je bezoeker bovenaan?
Wat het bespaart
Een verbouwing achteraf. Een blok verplaatsen in een schets kost twee minuten.
Datzelfde blok verplaatsen in een gebouwde pagina kost een uur. In een sjabloon soms een dag.
Het verschil met de rest
Drie stappen op een rij
Wireframe: waar komt wat, in grijstinten.
Mockup: hoe ziet het eruit, met kleur en beeld.
Prototype: hoe werkt het, klikbaar.
Ze bouwen op elkaar voort. Meer daarover lees je bij mockup en prototype.
Niet elk project heeft alle drie nodig
Bij een bedrijfssite van tien pagina’s kun je de eerste twee samenvoegen. Bij een webshop of klantomgeving wil je ze los.
Hoe meer schermen en stappen, hoe meer je aan die eerste stap hebt.
Hoeveel je er maakt
Niet voor elke pagina. Je maakt ze voor de soorten die je hebt.
Een homepage, een dienstenpagina, een contactpagina en een overzicht. De rest volgt dat stramien, zie design system.
Wie ze maakt
Je ontwerper of je bouwer, en jij kijkt mee. Het hoeft niet mooi te zijn.
Ik teken ze soms gewoon op papier. Dat werkt in een gesprek beter dan een net bestand, want je kunt er direct in krassen.
Kun je het overslaan?
Dat kan, en dan verplaats je het gesprek naar een later moment. Meestal naar het moment dat er al gebouwd is.
Dan wordt een structuurwijziging een verbouwing. Bij het schermen uittekenen kies je liever vooraf.
Vraag ernaar in je offerte
Vraag of er een schetsfase in zit en wat je te zien krijgt. Dat is een concrete vraag met een concreet antwoord.
Krijg je meteen een kleurenontwerp, dan is de volgorde al voor je bepaald. Meer daarover lees je bij UX.
Jouw rol is de belangrijkste
Jij weet welke vraag je klanten stellen. Dus jij kunt beoordelen of het antwoord op de goede plek staat.
Dat is geen ontwerpkennis maar vakkennis. Laat je dus niet buitenspel zetten in deze fase.
Het kan prima uitpakken zonder
Een goede bouwer maakt vaak de juiste keuzes uit ervaring. Alleen heb jij die keuze dan niet gemaakt.
Merk je later dat er iets anders moet? Dan is dat een verbouwing in plaats van een gesprek.
Papier werkt vaak beter
Een nette schets nodigt uit tot knikken. Een schets op papier nodigt uit tot krassen.
Dat tweede wil je in deze fase. Zie ook usability.
Meer vragen over Wireframe
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een wireframe?
Waarom maak je een wireframe zonder kleur?
Wat is het verschil tussen een wireframe, een mockup en een prototype?
Wie maakt een wireframe?
Hoeveel wireframes heb je nodig?
Kun je een wireframe overslaan?
Wat is een wireframe?
Omdat kleur afleidt. Zodra er een huisstijl in zit, praat iedereen over smaak.
Laat iemand een ontwerp zien met kleuren en foto’s en het gesprek gaat over kleuren en foto’s. Of de knop wat donkerder mag, of die foto de juiste is.
Bijna niemand vraagt dan of de volgorde van de blokken klopt. Toch is dat de vraag die je omzet bepaalt.
Een mooie pagina met de verkeerde volgorde levert niets op.
Haal je de kleuren weg, dan blijft alleen de structuur over. Dan stelt iedereen vanzelf de vraag of het antwoord voor je bezoeker bovenaan staat.
Beoordeel een schets op de volgorde van je blokken en niet op hoe hij eruitziet.
De vraag is of het antwoord op de vraag van je bezoeker bovenaan staat. Al het andere komt later. Zodra er een huisstijl in zit, praat iedereen over smaak. Zonder kleur gaat het gesprek vanzelf over de structuur.
Waarom maak je een wireframe zonder kleur?
Een wireframe is een schematische schets van een pagina. Je ziet blokken, koppen en knoppen in grijstinten.
Geen kleuren, geen foto’s, geen lettertypes. Alleen waar wat komt en hoe groot het is.
Je bepaalt er de volgorde van je blokken mee, de indeling van je kolommen en welk element het meest opvalt.
Dat laatste is de kern van je pagina.
Het is geen tussenproduct maar een manier om het juiste gesprek te voeren. Zonder kleuren gaat het gesprek vanzelf over de structuur in plaats van over smaak.
Vraag om een schets voordat er kleuren in zitten. Dan gaat het gesprek over de structuur.
Dat is de vraag die je omzet bepaalt. Een mooie pagina met de verkeerde volgorde levert niets op. Je ziet blokken, koppen en knoppen in grijstinten. Geen kleuren, geen foto’s en geen lettertypes. Alleen waar wat komt en hoe groot het is, meer niet. Zo blijft alleen de structuur over om over te praten.
Wat is het verschil tussen een wireframe, een mockup en een prototype?
Het zijn drie stappen die op elkaar voortbouwen.
Een wireframe laat zien waar wat komt, in grijstinten. Een mockup laat zien hoe het eruitziet, met kleur en beeld.
Een prototype laat zien hoe het werkt, want daar kun je in klikken.
Niet elk project heeft alle drie nodig. Bij een bedrijfssite van tien pagina’s kun je de eerste twee samenvoegen.
Bij een webshop of een klantomgeving wil je ze los. Hoe meer schermen en stappen er zijn, hoe meer je aan die eerste stap hebt.
Vraag welke van de drie je krijgt en op welk moment. Bij een kleine site kun je de eerste twee samenvoegen.
Bij een webshop of klantomgeving wil je ze los. Hoe meer schermen en stappen, hoe meer je aan die schetsfase hebt. Een wireframe laat zien waar wat komt, een mockup hoe het eruitziet en een prototype hoe het werkt. Vraag welke van de drie je krijgt en op welk moment.
Wie maakt een wireframe?
Je ontwerper of je bouwer, en jij kijkt mee. Het hoeft niet mooi te zijn.
Ik teken ze soms gewoon op papier. Dat werkt in een gesprek beter dan een net bestand, want je kunt er direct in krassen.
Je maakt ze niet voor elke pagina maar voor de soorten die je hebt. Een homepage, een dienstenpagina, een contactpagina en een overzicht.
De rest volgt dat stramien.
Jouw rol is de belangrijkste van allemaal. Jij weet welke vraag je klanten stellen, en dus of het antwoord op de goede plek staat.
Kijk zelf mee in deze fase en laat je niet buitenspel zetten. Jij kent de vragen van je klanten.
Het hoeft niet mooi te zijn. Een schets op papier werkt in een gesprek vaak beter dan een net bestand. Je maakt ze niet voor elke pagina maar voor de soorten die je hebt. De rest volgt dat stramien. Een homepage, een dienstenpagina, een contactpagina en een overzicht.
Kun je een wireframe overslaan?
Dat kan, en dan verplaats je het gesprek naar een later moment. Meestal naar het moment dat er al gebouwd is.
Dan wordt een structuurwijziging een verbouwing. Een blok verplaatsen in een schets kost twee minuten.
Datzelfde blok verplaatsen in een gebouwde pagina kost een uur, en in een sjabloon soms een dag.
Vraag daarom in je offerte of er een schetsfase in zit en wat je te zien krijgt.
Krijg je meteen een kleurenontwerp, dan is de volgorde al voor je bepaald. Dat kan prima uitpakken, maar dan heb je die keuze niet zelf gemaakt.
Vraag in je offerte of er een schetsfase in zit en wat je te zien krijgt.
Een blok verplaatsen in een schets kost twee minuten. In een gebouwde pagina kost het een uur, en in een sjabloon soms een dag. Sla je die stap over, dan verplaats je het gesprek naar het moment dat er al gebouwd is.
Ga je een nieuwe website laten bouwen en wil je vooraf meedenken over de indeling? Beschrijf je plannen via het formulier hieronder. Ik leg uit hoe zo’n schetsfase werkt en wat je ermee voorkomt. Vermeld je plaats, dan weet ik meteen waar je zit.
