Design omzetten naar WordPress: zo bouw je het pixel perfect na

Een design omzetten naar WordPress doe je in vaste stappen: het ontwerp controleren op ontbrekende schermen, kleuren en lettertypen vastleggen als globale stijlen, terugkerende onderdelen bouwen als herbruikbare blokken, daarna de pagina's opbouwen en testen op elk schermformaat. Hoe completer het aangeleverde design, hoe dichter de website bij het ontwerp komt.

Design omzetten naar WordPress: zo werkt het

Heb je een ontwerp liggen van je eigen designer of bureau, en wil je dat het er straks in WordPress precies zo uitziet? Dan wil je een design omzetten naar WordPress. Het belangrijkste om te weten: er is geen knop die een ontwerp in één keer omzet naar een website die goed blijft werken. Een developer bouwt het ontwerp opnieuw op in WordPress, met een thema en blokken, zodat het er hetzelfde uitziet en jij het zelf kunt beheren.

Dit artikel is voor bureaus met een eigen designer, en voor ondernemers die een ontwerp hebben laten maken en een bouwer zoeken. Ik bouw veel in WordPress en ben Kadence WP Partner en WordPress Partner. Hieronder lees je wat er in een design moet zitten voordat je gaat bouwen, hoe de omzetting stap voor stap gaat en waar het meestal misgaat.

Het ontwerpprogramma maakt weinig uit. Figma is op dit moment de standaard voor webdesign, en daarom wordt er veel gezocht op "Figma naar WordPress". Maar hetzelfde geldt voor een ontwerp uit een ander programma of zelfs een pdf. Een programma waarin de developer maten, kleuren en lettertypen kan aflezen, scheelt wel veel giswerk. In Figma kan dat via Dev Mode, waarin developers per onderdeel de afmetingen, variabelen en stukjes code zien.

Wat betekent pixel perfect eigenlijk?

Pixel perfect klinkt als een harde belofte, en dat is het ook. Maar het is goed om te weten wat het wel en niet betekent.

Een designer ontwerpt op een paar vaste breedtes, meestal een desktopscherm en een telefoon. Een echte website wordt bekeken op honderden verschillende breedtes. Bovendien geven browsers en besturingssystemen lettertypen een fractie anders weer.

Pixel perfect betekent daarom: op de ontworpen breedtes komt de website exact overeen met het design. Dezelfde afstanden, dezelfde lettergroottes, dezelfde kleuren, dezelfde verhoudingen. Tussen die breedtes in volgt de website vaste afspraken: wanneer kolommen onder elkaar vallen, hoe afbeeldingen meeschalen en wanneer het menu inklapt.

En dan is er nog iets wat een design niet laat zien: echte content. In het ontwerp heeft elke kop precies de goede lengte. In het echt schrijft iemand over een halfjaar een kop die twee keer zo lang is. Een goede omzetting houdt daar rekening mee, zodat het ontwerp niet breekt zodra jij zelf aan de slag gaat.

Wat moet er in het design zitten voordat je gaat bouwen?

Hoe completer het design, hoe minder er tijdens de bouw hoeft te worden bedacht. Controleer vooraf of dit erin zit:

• Desktop en mobiel van elk paginatype. Homepage, dienstpagina, overzichtspagina, artikel, contact. Wijkt tablet sterk af, dan die ook.
• Vastgelegde stijlen. Kleuren, lettertypen, kopgroottes, knoppen en de maximale breedte van de inhoud. In Figma als stijlen of variabelen, zodat het overal hetzelfde is.
• De verschillende toestanden. Hoe ziet een knop eruit als je eroverheen beweegt? Hoe ziet het mobiele menu eruit als het openklapt? Wat zie je bij een foutmelding in een formulier?
• Realistische content. Echte teksten, of in elk geval teksten van een realistische lengte. Geen "lorem ipsum" van drie woorden.
• Bestanden en licenties. Het logo als SVG, foto's in hoge resolutie en lettertypen met een licentie voor webgebruik. Bij Google Fonts zit dat goed; bij betaalde lettertypen is een weblicentie vaak een aparte aankoop.
• Beschreven functies. Wat gebeurt er na een klik op "Boek nu"? Welk boekingssysteem, welk formulier, welke koppeling met je e-mailtool?

Die functies horen eigenlijk al in het wireframe van je website, de schets die aan het design voorafgaat. Is er geen wireframe gemaakt, dan is dit het moment om de functies alsnog op papier te zetten.

Figma naar WordPress in 7 stappen

Zo verloopt het omzetten van een Figma-design of ander ontwerp naar WordPress. Bij Kadence en de meeste goede thema's werkt het in grote lijnen hetzelfde.

1. Design doorlopen en vragen bundelen. Loop het hele ontwerp door voordat je begint, en verzamel alle vragen in één lijst. Ontbrekende schermen, onduidelijke functies, afstanden die per pagina net verschillen. Eén vragenronde aan het begin werkt veel sneller dan tien losse mailtjes tijdens de bouw.
2. Globale stijlen vastleggen. Kleuren, lettertypen, kopgroottes, knopstijlen en de breedte van de inhoud stel je één keer centraal in het thema in. Kadence heeft daar een globaal kleurenpalet en centrale typografie-instellingen voor. Pas je later een kleur aan, dan verandert die overal tegelijk.
3. Header en footer bouwen. Die staan op elke pagina, dus die komen eerst. Inclusief het mobiele menu, want daar zit vaak het meeste werk.
4. Terugkerende onderdelen als blokken bouwen. Een reviewblok, een kaart met een dienst, een call-to-action onderaan: alles wat vaker voorkomt, bouw je één keer als patroon in de blokeditor. Zo blijft het overal gelijk en kun je het later makkelijk hergebruiken.
5. Pagina's opbouwen met echte content. Nu zet je de pagina's in elkaar met de stijlen en patronen uit de vorige stappen, met de echte teksten en foto's. Afbeeldingen verklein je direct, zodat de pagina's snel laden.
6. Functies toevoegen. Formulieren, een boekingsproces, een menukaart, koppelingen met je e-mailtool of CRM. Dit is het deel dat in een design het minst zichtbaar is, maar voor bezoekers het meest uitmaakt.
7. Testen naast het ontwerp. Leg de website op de ontworpen breedtes naast het design en vergelijk afstanden, groottes en kleuren. Test daarna op echte telefoons en in verschillende browsers, en controleer de laadsnelheid, de formulieren en de leesbaarheid.

Bij de oplevering hoort een korte uitleg, zodat je weet hoe je zelf teksten, foto's en pagina's aanpast zonder het ontwerp te beschadigen. Hoe dit past in het hele traject, van doel tot livegang, lees je in hoe een websitetraject stap voor stap verloopt.

Praktijkvoorbeeld: het design van North Orleans nagebouwd in WordPress

North Orleans is een woonconcept met designappartementen en een eigen restaurant, met de sfeer van New Orleans. De oude website bracht die sfeer en het verhaal niet over, en bezoekers konden praktische informatie lastig vinden, zoals het menu van het restaurant of de mogelijkheid om direct te boeken.

Ik kreeg het design aangeleverd en heb dat pixel perfect nagebouwd in WordPress. Daarbovenop bouwde ik extra functies die bezoekers aanzetten tot boeken, met een eenvoudig boekingsproces voor de appartementen. Het menu van het restaurant kwam aantrekkelijk en overzichtelijk in beeld. Daarnaast zette ik Google Ads in voor mensen die in de regio zoeken, en social ads.

Het resultaat: meer online reserveringen, en bezoekers vinden sneller wat ze zoeken. Het design zorgde voor de sfeer, de bouw voor de functies die van bezoekers gasten maken. Je ziet de case terug bij mijn cases.

Waar het meestal misgaat bij een design omzetten

De meeste problemen ontstaan niet tijdens het bouwen, maar ervoor. Dit zijn de valkuilen die je met een goede voorbereiding voorkomt:

• Alleen een desktopontwerp. Dan bepaalt de developer hoe het op mobiel wordt, en dat is waar de meeste bezoekers kijken.
• Afstanden die per pagina verschillen. Hier 40 pixels, daar 44. Voor het oog vaak niet te zien, maar in een website wil je vaste maten. Spreek met de designer af welke maat leidend is.
• Animaties zonder uitleg. Een effect dat in een prototype mooi beweegt, moet ook beschreven zijn: wanneer start het, hoe snel, en wat zie je als iemand bewegingen in zijn instellingen heeft uitgezet?
• Functies die niet zijn uitgewerkt. "Hier komt een boekingsmodule" is geen specificatie. Welk systeem, welke velden, wat krijgt de bezoeker daarna te zien?
• Designer en developer die elkaar niet spreken. Plan minstens één moment waarop de designer de gebouwde versie bekijkt, voordat de website live gaat.

Wat kost een design omzetten naar WordPress?

De prijs hangt vooral af van het aantal verschillende paginatypes en de functies die erbij komen. Vijf paginatypes met een contactformulier is iets anders dan een site met een boekingsproces, meerdere talen en koppelingen.

Bij mij begint een WordPress-website bij € 1.500 eenmalig, met € 50 per maand voor onderhoud. Dat tarief omvat de structuur, het design, de SEO-technische inrichting en een website die snel is, goed werkt op mobiel en die je zelf kunt aanpassen. Wat het omzetten van een aangeleverd design precies kost, hangt af van de omvang. Een overzicht van alle kosten, ook van hosting en onderhoud, staat in wat kost een website laten maken.

Waar je naast het design ook aan moet denken, zoals het thema, de hosting en wie de sleutels van je website heeft, lees je in WordPress website laten maken: 8 dingen om vooraf te checken.

Conclusie: een compleet design is het halve werk

Een design omzetten naar WordPress gaat het best als het ontwerp compleet is: desktop en mobiel, vastgelegde stijlen, alle toestanden en beschreven functies. Daarna bouw je eerst de basis met globale stijlen en herbruikbare blokken, en pas dan de pagina's. Test op de ontworpen breedtes naast het design, en lever op met uitleg, zodat de website mooi blijft als jij er zelf mee werkt.

Wil je weten hoe ik werk, download dan het pitchdeck. Wat een website bij mij kost, staat in de prijslijst.