In 2014 richtte ik samen met Rembrant van der Mijnsbrugge het MOTE bureau op. Wij zijn gespecialiseerd in e-commerce en werken samen met klanten in elke fase van hun merktraject, van de initiële markstrategie en merkidentiteit tot ontwerp, ontwikkeling en marketing, altijd met een focus op duurzame groei. Gedurende mijn 15 jaar ervaring in e-commerce webdesign heb ik de strategieën van klanten vormgegeven, variërend van onafhankelijke merken tot Fortune 500 bedrijven. Ik ben enthousiast om de webdesign tips en adviezen te delen die ik gedurende mijn carrière heb verzameld.
Het bewerken van een kant-en-klaar website thema is eenvoudig. Als je wilt zien hoe je website eruitziet met vier producten per rij in plaats van twee, kun je dat in enkele seconden bekijken. Maar bij een volledig op maat gemaakte website kan het aanpassen van de code tijdrovend en kostbaar zijn. Daarom maken ontwerpers website mockups voordat ze naar de ontwikkelingsfase gaan.
In dit artikel leer je meer over website mockups, evenals de tools en beste praktijken voor het maken van je eigen website mockup.
Wat is een website mockup?
Een website mockup is een statische visuele preview van hoe een website eruit zal zien. Het biedt een indruk van het uiteindelijke ontwerp en de lay-out van de site, maar het is nog niet functioneel met de backend code die de site interactief en klaar voor publicatie zou maken. Webontwerpers gebruiken website mockups om verschillende ontwerpmogelijkheden te verkennen voordat ze een webdesign overdragen aan ontwikkeling voor codering. Zodra een website in code is gebouwd, is het moeilijker om aanpassingen te doen, dus een mockup met hoge precisie (die zo dicht mogelijk bij het eindproduct ligt) kan tijd en geld besparen.
Website mockups vs. wireframes vs. prototypes
Wireframes, mockups en prototypes zijn verschillende manieren om een ontwerpidee te visualiseren. Hier is wanneer je elk van deze moet gebruiken:
Wireframes
Wireframes zijn diagrammen die de lay-out en structuur van een website tonen zonder ontwerp elementen. Je kunt een wireframe zien als een blauwdruk voor je website ontwerp.
Een wireframe kan een eenvoudige schets op papier zijn, dus het is een nuttig hulpmiddel voor niet-ontwerpers die hun visie willen communiceren. Wireframes kunnen ook ontwerpers helpen die werken aan websites met een nieuw of diepgaand interactief element. Dat komt omdat wireframes je in staat stellen om de basisstructuur en functionaliteit van de site te bepalen voordat je je verliest in ontwerp en code.
Zelfs als je een eenvoudigere e-commerce site bouwt, kan een wireframe je helpen om de algehele verkoopfunnel en klantbeleving die je wilt creëren, te verduidelijken. Omdat wireframes zo eenvoudig zijn, zijn ze een geweldige manier om ervoor te zorgen dat iedereen op dezelfde lijn zit voordat het ontwerp begint.
Mockups
Mockups zijn gedetailleerde, statische representaties die de beoogde website lay-out met toegepaste brandingbeslissingen illustreren. In tegenstelling tot wireframes bevatten mockups kunstzinnige richting, typografie, en het gebruik van kleur.
Mockups geven een realistische preview van hoe de uiteindelijke website eruit zal zien voor een gebruiker, maar ze zijn nog niet interactief. Mockups zijn essentieel bij het bouwen van een op maat gemaakte website omdat ze je in staat stellen om wijzigingen aan te brengen in je ontwerp voordat de codering begint.
Prototypes
Prototypes zijn de meest gedetailleerde optie voor het previewen van een website. Dit zijn interactieve modellen die previewlinks gebruiken om de gebruikerservaring te simuleren en het websiteontwerp tot leven te brengen.
Voor projecten die het testen van verschillende interactieve elementen vereisen voordat de ontwikkeling begint, kan een prototype zeer nuttig zijn. Voor eenvoudigere projecten kun je misschien direct van een mockup naar de ontwikkeling gaan.
Hoe maak je een website mockup
- Bepaal hoe je het merk presenteert
- Creëer een lineair verhaal
- Verzamel merkelementen
- Ontwerp sjablonen voor elk type pagina
- Voeg betekenisvolle tijdelijke teksten toe
- Vraag om feedback
Of je nu zelf iets ontwerpt of samenwerkt met een ontwerper, de fundamentele elementen om te overwegen tijdens het ontwerpproces zijn hetzelfde.
1. Bepaal hoe je het merk presenteert
De eerste stap bij het ontwerpen van een website is om een stap terug te doen en na te denken over hoe je het merk presenteert. Als je met een ontwerper werkt, kun je het proces starten met een creatief brief. Dat helpt hen om meer te leren over jouw merk, doelgroep en inspiratie.
Het is natuurlijk om je te concentreren op specifieke functies, maar voordat je je laat meeslepen door technische details, probeer eerst uit te zoomen: Denk na over het algehele verhaal dat je wilt vertellen met de lay-out van je website.
Bijvoorbeeld, je zou kunnen beginnen met het doel om gebruikers aan te moedigen meer tijd door te brengen op je homepage. De homepage is vaak het eerste contactpunt voor een merk. Het heeft ook vaak de hoogste bounce rates. Maar in plaats van te beginnen vanuit een perspectief van functies of conversieoptimalisatie, vraag jezelf af: “Hoe kunnen we een diepere verbinding tot stand brengen met bezoekers van de homepage?”
De oplossing kan zo eenvoudig zijn als het schrijven van een inleiding van één zin over jouw merk boven de vouw. Als jouw merkwaarden centraal staan in jouw bedrijf, is dit een geweldige kans om die waarden direct op de homepage te tonen. Bijvoorbeeld, het demonstreren van waarden zoals duurzaamheid of inclusiviteit kan resoneren met jouw doelgroep, waardoor ze langer op jouw site blijven.
2. Creëer een lineair verhaal
Je website moet een lineair verhaal volgen, wat betekent dat elke sectie en pagina logisch voortbouwt op de vorige. Een succesvol verhaal zorgt ervoor dat wanneer iemand op jouw homepage landt, ze een duidelijk beeld hebben van jouw merk en productaanbod. Terwijl ze door de site navigeren, moet je meer details en functies bieden die hen helpen de juiste producten te vinden.
In een traditionele e-commerce website is jouw lineaire verhaal de verkoopfunnel: Een gebruiker landt op de homepage, die jouw merk introduceert. Van daaruit vinden ze jouw productcollectiepagina's, die meer details geven dan jouw homepage—de belangrijkste informatie eerst, met secundaire en tertiaire informatie binnen handbereik. In een succesvolle narratieve flow zal de gebruiker vervolgens producten selecteren, naar de winkelwagentjespagina gaan en uiteindelijk het afrekenproces voltooien.
3. Verzamel merkelementen
Als je hebt nagedacht over hoe je het verhaal voor de website wilt vormgeven, verzamel dan de merkelementen die in het ontwerp zullen worden gebruikt.
Als je merkrichtlijnen hebt, kun je die delen met jouw ontwerper (of ze zelf raadplegen). Als dat niet het geval is, moet je beslissen over merkelementen zoals typografie, graphics en kleuren voordat je een mockup maakt. De gridlay-out van de website zal gebaseerd zijn op de lijnhoogtes en letterafstand van jouw merkfonts, dus het is belangrijk om die merkelementen te bepalen voordat je jouw website mockup opstelt. Zodra je een gridlay-out hebt, kun je mockups maken met jouw ontwerpassets en creatieve brief.
4. Ontwerp sjablonen voor elk type pagina
Wanneer je een website mockup ontwerpt, maak je geen mockup voor elke afzonderlijke webpagina. In plaats daarvan maak je mockup-sjablonen voor verschillende soorten pagina's, zoals een sjabloon voor een collectiepagina en een productpagina-sjabloon.
Terwijl je elk van die sjablonen ontwerpt, neem dan een stap terug en vraag: “Wat maakt de ervaring het meest succesvol?” Bijvoorbeeld, als je een zorgvuldig samengestelde selectie van zes producten of minder hebt, moet jouw collectiepagina elk van die producten tonen en een beetje context toevoegen voordat je naar de gedetailleerde productpagina's gaat.
Als je echter een voorraad hebt van tientallen, honderden of zelfs duizenden producten, moet je een website ontwerpen met meer geavanceerde productfiltering. Dat helpt ervoor te zorgen dat iemand die op een collectiepagina landt de resultaten kan verfijnen naar de producten die het meest relevant voor hen zijn.
5. Voeg betekenisvolle tijdelijke teksten toe
Aangezien een mockup een preview is van hoe jouw website er uiteindelijk uit zal zien, is het mogelijk dat je nog content voor de site genereert terwijl de mockup in behandeling is. Als dat het geval is, kun je een betekenisvolle tijdelijke tekst gebruiken.
Zelfs als de afbeeldingen en teksten die in de mockup worden gebruikt tijdelijk zijn, moeten ze zo dicht mogelijk bij het einddoel liggen. Op die manier krijg je bij het bekijken van de mockups echt een gevoel van de beoogde richting voor de site. In plaats van “lorem ipsum” tijdelijke tekst te gebruiken, kun je wat voorbeeldteksten opstellen die merkgericht zijn.
6. Vraag om feedback
Als jouw mockup klaar is, is het tijd om deze aan belanghebbenden voor te leggen en feedback te krijgen. Het belangrijkste voordeel van het maken van een website mockup is dat je revisies kunt aanbrengen zonder de code te wijzigen, dus gebruik deze kans om ervoor te zorgen dat alle belanghebbenden vertrouwen hebben in de mockup voordat je deze in productie neemt.
Tools voor website mockups
Er zijn veel ontwerptools die je kunt gebruiken om een website mockup te maken, maar enkele van de meest populaire zijn:
Sketch
Sketch is een webdesign-app die snelle iteratie mogelijk maakt. Het is in 2010 speciaal ontwikkeld voor UI-ontwerp en kan zowel mockups als interactieve prototypes maken. Een standaard abonnement begint bij €12 per maand.
Figma
Figma is een ontwerptool die realtime samenwerking mogelijk maakt. Als je met meerdere mensen tegelijkertijd aan een mockup werkt, kan Figma een goede optie zijn. Je kunt je gratis aanmelden voor Figma, maar als je alle functies wilt gebruiken, beginnen de plannen bij €15 per maand.
Adobe XD
Ontwerpers die werken met de volledige Adobe ontwerpsuite (apps zoals Photoshop, Illustrator, InDesign en Lightroom) zijn dol op Adobe XD vanwege de naadloze integratie met andere Adobe-applicaties. Adobe verkoopt XD niet langer als een op zichzelf staand product, maar je kunt het verkrijgen via een abonnement op Adobe Creative Cloud voor € 59,99 per maand.
Veelgestelde vragen over website mockups
Hoe maak je gratis een website mockup?
Om een website mockup te maken, heb je een ontwerptool nodig, wat geld kost. Gelukkig bieden veel ontwerptools, zoals Figma, een gratis proefperiode of een gratis versie met minder functies die je als startpunt kunt gebruiken. Canva is een andere gratis tool die je kunt gebruiken om een gratis website mockup te maken.
Wanneer moet je een website mockup maken?
Een website mockup is nuttig bij het bouwen van een volledig op maat gemaakte website omdat het je een gevoel geeft van hoe een site eruit zal zien en aanvoelen voordat je verder gaat met de ontwikkeling. Het biedt iets dat je kunt delen, refereren en itereren terwijl je een site ontwerpt. Afhankelijk van het project kun je een website mockup maken na het schetsen van een wireframe, of je kunt het wireframe overslaan en direct naar de mockup gaan nadat je de projectvereisten hebt bepaald.
Zijn website mockups noodzakelijk?
Afhankelijk van het specifieke project heb je misschien geen website mockups nodig. Als je bijvoorbeeld jouw site maakt met een Shopify-thema, kun je de mockup overslaan en de sjabloon gebruiken als een interactieve prototype. Dat gezegd hebbende, veel van de principes voor het maken van een goede mockup zijn nog steeds van toepassing op die aanpak.
