Een website laten bouwen is een vreemde aankoop. Je betaalt vooraf voor iets wat je pas achteraf ziet. Bij een keuken loop je door een showroom, bij een auto maak je een proefrit. Bij een website krijg je een offerte en een belofte.
Een mockup vult dat gat. Het is de showroom van je toekomstige site.
Ik maak er daarom altijd een voordat er een regel code wordt geschreven. Niet omdat het hoort, maar omdat het gesprek dan over de juiste dingen gaat.
Je klant ziet zijn eigen kleuren, zijn eigen woorden en zijn eigen indeling. Dat levert andere opmerkingen op dan een schets met blokjes.
Een mockup laat zien hoe het wordt, voordat het gebouwd is.
Wat is een mockup?
Een mockup is een visuele weergave van een pagina met echte kleuren, typografie en beeld. Het ziet eruit als een schermafbeelding van een bestaande site.
Alleen werkt hij niet. Je kunt er niet in klikken en er gebeurt niets als je op een knop drukt.
Wireframe, mockup en prototype
Die drie worden vaak door elkaar gehaald. Ze horen bij verschillende momenten in een project.
Een wireframe is een schets met grijze blokken. Daarin bespreek je alleen de indeling: wat staat waar en in welke volgorde.
Een mockup voegt de vormgeving toe. Kleuren, lettertypen, foto’s en knoppen zoals ze straks zijn.
Een prototype is klikbaar. Je drukt op een knop en gaat naar de volgende pagina.
Waarom je er een maakt
Omdat verbouwen drie keer zoveel kost als vooraf tekenen. Dat is de kortste samenvatting.
In een mockup kost een wijziging vijf minuten. In een gebouwde site kost dezelfde wijziging soms een dag, omdat alles eromheen meeschuift.
Wat je erin ziet dat je anders mist
Of je kop past in de ruimte die ervoor is.
Of je kleuren genoeg contrast geven op je knoppen.
Of de volgorde klopt met wat je bezoeker zoekt.
Of er te veel op een pagina staat.
Die laatste is de belangrijkste. In een ontwerp durf je te schrappen. Is iets eenmaal gebouwd, dan blijft het staan omdat het er nu eenmaal is.
Gebruik je echte teksten
Ja, en dat is het advies waar je het meest aan hebt. Een indeling die klopt met Latijnse opvultekst valt om zodra je eigen woorden erin staan.
Ook een ruwe versie is genoeg. Meer daarover lees je bij lorem ipsum.
Vraag ook om een mobiele versie. Een mockup die alleen op desktop is gemaakt, vertelt maar de helft van het verhaal, zie breakpoint.
Feedback geven
Bij het feedback geven vraag ik klanten om te beschrijven wat er niet klopt. Dus niet wat de oplossing is.
Niet: maak die knop groter. Wel: ik zie niet waar ik moet klikken. Het eerste is een opdracht, het tweede is informatie.
Verzamel je opmerkingen bovendien in een ronde. Losse berichten door de week heen leiden ertoe dat wijziging drie de eerste weer ongedaan maakt.
Van mockup naar site
Er bestaan knoppen die beloven een ontwerp om te zetten naar werkende code. Ik gebruik ze niet, want die code is zwaar en slecht aanpasbaar.
Ik neem het ontwerp als leidraad. Kleuren, typografie en afstanden komen als vaste waarden in het design system. De opbouw maak ik daarna met de hand, zodat jij er later zelf bij kunt. Meer over het gereedschap lees je bij Figma.
Vraag om een mobiele versie
Een mockup die alleen op desktop is gemaakt, vertelt de helft van het verhaal. Bij de meeste bedrijven komt zestig tot tachtig procent van het bezoek via een telefoon.
Vraag dus om minstens twee versies per pagina, met een aparte hero voor mobiel. Wat op een groot scherm elegant oogt, kan op een klein scherm benauwd worden.
Beoordeel niet alleen de smaak
De verleiding is groot om vooral naar kleuren en foto’s te kijken. Dat is het makkelijkst te beoordelen en het minst belangrijk.
Kijk liever of de volgorde klopt met wat je klant zoekt. Staat het antwoord op zijn eerste vraag bovenaan, of staat daar jouw bedrijfsverhaal?
Wat je bewaart
Vraag om toegang tot het ontwerpbestand zelf en niet alleen om een afbeelding. Bij een uitbreiding over een jaar wil je verder kunnen bouwen op wat er ligt.
Zonder dat bestand begint een volgende ontwerper opnieuw, en dat merk je in de offerte.
Meer vragen over Mockup
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een mockup?
Wat is het verschil tussen een wireframe, mockup en prototype?
Waarom maak je eerst een mockup?
Hoe geef je goed feedback op een mockup?
Kun je een mockup omzetten naar een website?
Wat kost het maken van een mockup?
Wat is een mockup?
Die drie horen bij verschillende momenten in een project.
Een wireframe is een schets met grijze blokken. Daarin bespreek je alleen de indeling: wat staat waar en in welke volgorde. Geen kleuren, geen foto’s.
Een mockup voegt de vormgeving toe. Kleuren, lettertypen, foto’s en knoppen zoals ze straks zijn. Hij ziet er af uit maar doet niets.
Een prototype is klikbaar. Je drukt op een knop en gaat naar de volgende pagina. Je menu klapt open, je formulier gaat naar een bedankscherm.
Dat laatste verschil is groter dan het klinkt. In een prototype merk je dat je menu onlogisch is ingedeeld. Op een stilstaand beeld zie je dat niet. Meer daarover lees je bij Figma.
Weet welke van de drie je krijgt voordat je akkoord geeft. Een wireframe en een prototype schelen een wereld in wat je kunt beoordelen. Vraag welke van de drie je krijgt en op welk moment in het traject.
Wat is het verschil tussen een wireframe, mockup en prototype?
Een mockup is een visuele weergave van een pagina met echte kleuren, typografie en beeld. Het ziet eruit als een schermafbeelding van een bestaande website.
Alleen werkt hij niet. Je kunt er niet in klikken en er gebeurt niets als je op een knop drukt.
Het nut zit in het moment. Een website laten bouwen is een vreemde aankoop: je betaalt vooraf voor iets wat je pas achteraf ziet.
Bij een keuken loop je door een showroom, bij een auto maak je een proefrit. Bij een website krijg je een offerte en een belofte.
Een mockup vult dat gat. Je klant ziet zijn eigen kleuren, zijn eigen woorden en zijn eigen indeling. Dat levert andere opmerkingen op dan een schets met blokjes.
Vraag bij een offerte altijd of er een ontwerpfase in zit. Zonder mockup koop je een belofte, en dat is bij een website een dure manier van werken.
Waarom maak je eerst een mockup?
Omdat verbouwen drie keer zoveel kost als vooraf tekenen.
In een mockup kost een wijziging vijf minuten. In een gebouwde site kost dezelfde wijziging soms een dag, omdat alles eromheen meeschuift.
Je ziet er bovendien vier dingen die je anders mist. Of je kop past in de ruimte die ervoor is. Of je kleuren genoeg contrast geven op je knoppen.
Of de volgorde klopt met wat je bezoeker zoekt. En of er te veel op een pagina staat.
Die laatste is de belangrijkste. In een ontwerp durf je te schrappen. Is iets eenmaal gebouwd, dan blijft het staan omdat het er nu eenmaal is. Zo raken pagina’s vol met onderdelen die niemand meer kan verantwoorden.
Gebruik de ontwerpfase om te schrappen. Dat is het enige moment waarop weglaten nog niets kost, en het is precies het moment waarop niemand eraan denkt. Elke wijziging kost daar vijf minuten in plaats van een dag.
Hoe geef je goed feedback op een mockup?
Beschrijf wat er niet klopt, niet wat de oplossing is. Dat is de belangrijkste omkering en hij voelt in het begin onwennig.
Dus niet: maak die knop groter. Maar: ik zie niet waar ik moet klikken. Het eerste is een opdracht, het tweede is informatie.
Met informatie kan een ontwerper een betere oplossing bedenken dan de eerste die opkomt. Misschien is de knop niet te klein, maar staat er te veel omheen.
Verzamel je opmerkingen bovendien in een ronde. Losse berichten door de week heen leiden ertoe dat wijziging drie de eerste weer ongedaan maakt.
Geef ook aan wat je wel goed vindt. Anders haalt een ontwerper in ronde twee per ongeluk het onderdeel weg waar je juist blij mee was.
Verzamel je opmerkingen in een ronde in plaats van in losse berichten. Anders maakt wijziging drie de eerste wijziging weer ongedaan. Geef ook aan wat je juist wel goed vindt, anders verdwijnt dat in ronde twee.
Kun je een mockup omzetten naar een website?
Er bestaan knoppen die dat beloven, en ik gebruik ze niet.
De code die daaruit komt is vaak onleesbaar, zwaar en slecht aanpasbaar. Je krijgt een site die er goed uitziet maar die niemand later nog fatsoenlijk kan wijzigen.
Ik neem het ontwerp daarom als leidraad en niet als bron. Kleuren, typografie en afstanden komen als vaste waarden in het stijlbestand.
De opbouw maak ik daarna met de hand. Dat kost meer tijd, maar je houdt een site over waar je zelf bij kunt.
Vraag bij een offerte altijd om leesbare code en om toegang tot je eigen ontwerpbestand. Zonder die twee zit je vast aan de partij die het gemaakt heeft. Meer daarover lees je bij design system.
Vraag om toegang tot het ontwerpbestand zelf en niet alleen om een afbeelding. Bij een uitbreiding over een jaar scheelt dat je een nieuwe ontwerpronde. Leg die afspraak vast in je offerte, dan is er achteraf geen discussie.
Ga je binnenkort een website laten maken en wil je vooraf zien wat je krijgt? Beschrijf je plannen via het formulier hieronder. Ik leg uit hoe een ontwerpfase eruitziet, wat je erin te zien krijgt en wat het je oplevert aan zekerheid. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Ontwerpvoorbeeld, visueel ontwerp, designvoorstel
