WPLounge
Home » WordPress Algemeen » Gebruik wireframes voor je website ontwerp

Gebruik wireframes voor je website ontwerp

Een wireframe is een hulpmiddel voor het ontwerpen van een WordPress website. De basisstructuur van een pagina kan met behulp van wireframes worden vast gesteld en zo is het de bouwtekening van een nieuwe website. In deze korte handleiding leer je hoe je gebruik maakt van een wireframe.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Door gebruik te maken van een vaste basisstructuur is het ontwerpen van een website een stuk eenvoudiger. Zeker als het gaat om een logische indeling van de website, met alle visuele elementen op de juiste plaats, is het gebruik van wireframes eigenlijk een must.

Wat is een website wireframe?

Een website wireframe is de eerste schets van een nieuwe website. Hiermee geef je aan hoe het website ontwerp eruit komt te zien. Wireframing is een cruciaal eerste proces en bevat alle elementen die de webpagina zal bevatten. In wezen vereist ieder element die je website zal bevatten, een fase in het ontwerpproces die zich richt op de grootte, opmaak en omliggende elementen op de webpagina.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Waarom je een website zou moeten wireframen

Een groot voordeel van wireframen is dat het ontwerp veel duidelijkheid biedt over hoe content op het scherm wordt gepresenteerd. Dit wordt ook wel de informatie-architectuur van de pagina genoemd. Het gebruik van een website wireframe stelt je in staat om:

  • Visualisatie van het website ontwerp
  • Bespaar tijd en moeite in het ontwerpproces
  • Testen van gebruikersproblemen
  • Ontvang feedback over het ontwerp
  • Eenvoudig de navigatie en opmaak verbeteren

Het website ontwerp verbeteren met wireframes

Het c bestaat uit meerdere stappen en kan soms erg ingewikkeld zijn. Door gebruik te maken van wireframes is het mogelijk om meerdere opmaak opties voor de webpagina te visualiseren. Schuif met de elementen om zo tot de optimale layout te komen.

Maak meerdere wireframes van één webpagina en toon de verschillende opmaakmogelijkheden. Vervolgens vraag je feedback van klanten of gebruikers om te bepalen welke versie het beste werkt. Hiermee verkort je het ontwerpproces omdat ieder segment zo uitgebreid getest is.

Maak testen eenvoudiger met wireframes

Als iets niet werkt met wireframes, is de kans groot dat het ook niet werkt in het ontwerp. Maak je echter geen gebruik van wireframes en begin je toch aan het ontwerp, dan kom je later eventueel in de problemen terwijl je al veel verder in het ontwerpproces zit. Dit kan erg frustrerend zijn en zou betekenen dat je iedere keer weer opnieuw moet beginnen. Zorg dus voor een solide fundament van het websiteontwerp. Wanneer je de kernelementen via een wireframe definieert dan maak je het jezelf een stuk makkelijker later in het ontwerpproces.

Het gebruik van wireframes is een groot voordeel voor opdrachtgevers

Tijdens het ontwerpproces van een project geven klanten vaak feedback over het ontwerp en veranderingen die ze in het ontwerp terug willen zien zoals:

  • Grootte van buttons
  • Gebruik van fonts
  • Kolomindeling
  • Menutype – dropdown, hamburger etc.

Tijdens het ontwerpproces hebben webdesigners veel contact met de opdrachtgever over de voortgang van de website. Een groot deel hiervan gaat over ontwerpbeslissingen. Dit proces wordt een stuk eenvoudiger met het gebruik van wireframes waarbij je eenvoudig de aanpassingen kunt laten zien.

Breng de behoefte van de klant in beeld met wireframes

De belangrijkste fase in een project zijn ontwerpbeslissingen waarbij de opdrachtgever goedkeuring moet geven. Omdat tijdens deze wireframe fase het visuele ontwerpproces nog niet is bereikt, hebben deze beslissingen vooral betrekking tot de content strategie.

Een voorbeeld hierbij is waarin de klant een ontwerpbeslissing moet goedkeuren tijdens het bouwen van een WooCommerce webshop. De opdrachtgever heeft wellicht een voorkeur om bezoekers verder te laten winkelen nadat er een artikel in de winkelwagen is toegevoegd. In dat geval ziet de informatiehiërarchie er ongeveer als volgt uit:

webshop tekst

De primaire actie is om door te gaan naar de webshop en de optie “Afrekenen” is minder prominent aanwezig. Wanneer de opdrachtgever juist de klant wil aanmoedigen om naar de afrekenpagina te gaan kan het er meer als volgt uitzien:

webshop tekst

Het maken van deze twee opties is niet erg veel werk. Maar het presenteren van beide opties ziet er professioneel uit en laat zien dat je de potentiële doelen van de klant begrijpt.

Website Wireframe template

Er zijn erg veel Wireframe templates te vinden op Envato zoals deze:

wireframe kit via Envato
Wireframe Kit via Envato

📣 Bekijk de Wireframe Template op Envato

Een WordPress website wireframen

De stap van een wireframe naar een WordPress website kan een behoorlijk complex proces zijn. Laten we in het kort de basis bekijken om een wireframe te maken voor een WordPress website.

Voorbeeld Wireframe
Voorbeeld Wireframe

Eén van de methoden om een wireframe te maken is dus om gebruik te maken van één van de wireframe templates die op Envato te vinden zijn. De meeste templates zullen componenten bevatten die in bovenstaande afbeelding getoond worden. Zoals je ziet is ieder ontwerpelement in zwart-wit zonder enig ontwerpdetail. Het is een eenvoudige tekening die zich alleen richt op de structuur en opmaak. Bij het maken van een wireframe dien je rekening te houden met de volgende punten:

  • Bij het plaatsen van een nieuw element in het ontwerp is het handig om alvast te bepalen welke pagebuilder (zoals Elementor) widget geschikt is voor het element.
  • Bepaal de juiste afmetingen van de website. Elk element moet een consistentie grootte hebben.
  • Wireframes zijn het moment om de structuur van de website te ontwerpen. Als dat eenmaal op zijn plaats staat, begin je na te denken over visuals.
  • Wireframes bevatten geen kleur, lettertypekeuzes, logo’s of echte ontwerpelementen.

Tot slot

Wireframes stellen je in staat om een basisstructuur van een nieuwe website aan klanten te laten zien als het gaat om het eerste ontwerp, navigatie en de belangrijkste pagina’s. Na goedkeuring van deze basisstructuur bouw je verder aan de visuals van de website met een ontwerp waar je klanten tevreden over zijn. Hiermee besparen wireframes op de lange termijn enorm veel tijd en geld!

Beoordeel dit artikel

Mark Hagendijk

Mark biedt technische ondersteuning voor WordPress. Zo nu en dan maakt hij graag tijd vrij om een bijdrage te leveren aan WPLounge.

Reageer