De branding en het ontwerp van je website is af. Lekker bezig! Nu begint het bouwen. Net als met het design kun je qua bouwen ook heel veel kanten op. Wat is de juiste?
Het echte consultant-antwoord ligt hier ook weer op de loer; het ligt eraan. Het ligt bijvoorbeeld aan je bestaande website en of je de huidige ‘stack’ van die website wilt hergebruiken. En ga je de website zelf maken? Heb je daar een team voor? Hoe (AI) technisch vaardig zijn jullie?
Dat en nog veel meer speelt een rol bij het juist bouwen van je website. We gaan het allemaal behandelen in dit hoofdstuk.
Je kunt via allerlei routes een website bouwen. Via zoveel routes dat je er maar zo keuzestress aan overhoudt. Vandaar dat we heel specifiek het gaan hebben over je opties en wanneer deze voor jouw situatie geschikt zijn.
Maar eerst wat termen uitgelegd.
We beginnen met WordPress; het meest gebruikte CMS ter wereld. Op het moment van schrijven, draait ruim 40% van alle websites wereldwijd op WordPress.
Dat komt enerzijds omdat WordPress in essentie gratis is. Je kunt een prima website bouwen zonder ook maar een cent uit te geven. Daarnaast is WordPress erg toegankelijk voor niet-technische mensen.
Het grootste nadeel van WordPress is een verlenge van wat ik eerder al noemde; in de basis is het gratis. Mocht je echter meer willen doen dan de basis, dan ben je al gauw een flink stuk van je budget kwijt aan betaalde plugins.
Elk type website kun je in WordPress maken; van de tandarts tot en met een diensten-website van een groot bureau.
De volgende twee voeg ik samen in één tussenhoofdstukje. Het gaat om de twee grootste concurrenten van WordPress; Webflow en Framer.
Beiden zijn op twee belangrijke fronten het tegenovergestelde van WordPress. Waar WordPress gratis is, betaal je voor beide concurrenten een bedrag per maand. Daar tegenover staat wel dat je geen betaalde plugins nodig hebt. Framer en Webflow zijn in essentie page builder terwijl je in de meeste gevallen die nog aan moet schaffen in WordPress.
Daarnaast; Framer en Webflow zijn beiden technisch uitdagend. Je moet een achtergrond of development hebben om snel en goed met beide platformen te kunnen werken. In de meeste gevallen huur je hier iemand voor in, maar daarover later meer.
De verschillen tussen Framer en Webflow moet je waarschijnlijk twee keer lezen om echt te begrijpen. Komt ‘ie;
Bij Framer ben je visueel aan het ontwikkelen en bij Webflow ben je technisch aan het ontwerpen. Als jij bijvoorbeeld een achtergrond hebt in Figma als designer, dan ligt Framer je waarschijnlijk goed. Webflow werkt daarentegen weer heel goed als je wat technischer aangelegd bent en verstand hebt van CSS.
Qua kosten besluit je tussen de drie opties die wij nu besproken hebben aan de hand van de volgende vraag; heb je meer kosten per maand aan plugins in WordPress dan dat je kwijt bent aan de maandelijkse kosten van Webflow en Framer?
Ik zal je een voorbeeld geven. Vroeger had ik een website in WordPress. Bovenop dit gratis pakket betaalde ik voor de Elementor page builder, WP Rocket als schoonmaak-plugin, BunnyCDN en nog een paar zaken. Bij elkaar opgeteld was dit iets minder dan 500 EUR per jaar; een stuk minder dan de 275 EUR die ik per jaar betaal aan Webflow. Het kan dus serieus schelen.
Naast de prijs is ook de functionaliteit belangrijk. In Framer en Webflow kun je veel eenvoudiger verder gaan qua design dan in WordPress. Als dat belangrijk is, neem het dan mee in je keuze.
Ik zou persoonlijk altijd Webflow aanraden. Het is snel, modern en ik ben een Webflow Certified Partner, waardoor ik er ook nog eens heel snel heel veel mee kan doen.
Als laatste wil ik mij nog even richten op webshops. De absolute nummer één op dat vlak is Shopify.
Shopify is WordPress-achtig in de zin dat je een template kiest en een aantal ‘key’ pagina’s opzet. Daarna heb je de website wel 80% af. Die overige 20% zit ‘m in alles werkend maken en je producten goed toevoegen. Die 80/20-verhouding heeft WordPress ook.
Dus als je een webshop hebt, ontkom je haast niet aan Shopify.
Je zou trouwens ook voor WooCommerce kunnen kiezen, mocht je nou enorm gehecht zijn aan WordPress. Dat is ook prima; alhoewel ik persoonlijk voor Shopify zou kiezen. Zij zijn specifiek gemaakt voor webshops en hebben minder ‘bewegende onderdelen’ dan wanneer je een webshop gaat bouwen boven op WordPress. Daar kan wat mij betreft meer mis gaan dan mij lief is.
Nu lees je op social media enorm veel berichten over hoe iedereen de grote ‘builders’ achterwege laat en zelf wel even een website in elkaar zet via Claude. Dat kun je doen, maar hier zitten zeker wat haken en ogen aan.
Het voornaamste probleem is content management. Elke grote partij heeft hiervoor een content management system (CMS). Super handig voor niet-technische personen die gewoon wat tekst of een artikel willen aanpassen zonder de techniek in te hoeven duiken. Een via AI gemaakte website heeft deze toegankelijk een stuk minder of zelfs helemaal niet.
Andere problemen zijn onder andere het gebrek aan design-kennis om AI output te valideren en de foutgevoeligheid van AI. Maar goed, beiden heb je ook last van wanneer je ‘gewoon een mens het werk laat doen’.
Dus blijf lekker een builder gebruiken, zeker als je een niet-technisch persoon bent of wanneer je geen tijd en zin hebt om hier mee bezig te zijn. Het scheelt je veel gedoe.
Maar goed; er zijn natuurlijk ook opties wat betreft AI en je website. Mocht je toch voor het bovenstaande willen gaan, dan hoor ik veel positieve geluiden over Astro (framework) en Sanity (CMS). Je koppelt het zo aan Claude en kunt aan de gang.
Let wel; dit is wat ik online lees en de trend die ik spot. Ik heb verder zelf geen ervaring met beide frameworks.
Daarnaast heb je natuurlijk ook nog de kleinigheidjes waar AI enorm nuttig is. Als je bijvoorbeeld met de Webflow MCP werkt, kun je via je eigen AI agent eenvoudig in bulk aanpassingen doen aan je CMS. Dit hielp bijvoorbeeld enorm toen ik erachter kwam dat ik in een Webflow Collection van tientallen pagina's op elke pagina een fout had gemaakt.
Dit had normaal vijf minuten per pagina gekost, maar via Claude was dit binnen vijf minuten voor de volledige Collection opgelost. Gebruik AI dus vooral voor het aanpassen van content en andere herhalende taken. Dat werkt goed en stabiel.
Oke. Genoeg gepraat over theorie en de platformen die je kunt kiezen. Stel, je gaat aan de slag… hoe moet dat dan? Dat gaan we vanuit twee manieren aanvliegen; hoe ik het als individu zou doen en hoe een groter bedrijf het doorgaans aanpakt.
Wanneer je met een designer hebt gewerkt, komt nu het moment dat je van ‘canvas’ naar ‘code’ gaat. Je designer moet de volgende zaken overhandigen aan je website-bouwer.
- Kleurcodes
- Typografie
- Mockups van ‘key’ pagina’s
Wanneer je het bovenstaande hebt, kun je al flink uit de voeten met je website. Wanneer je bijvoorbeeld een pagina toevoegt, heb je in ieder geval al dat je alle content in het juiste lettertype e kleur kunt toepassen. En gebaseerd op een ‘key’ pagina voor bijvoorbeeld de blog kun je dan ook al een tekstpagina opzetten. Super handig!
Het aanleveren van deze zaken is tegenwoordig trouwens zeer eenvoudig. Met een MCP (Model Context Protocol) krijg je bijvoorbeeld je kleuren en typografie in een paar klikken van Figma naar Webflow overgezet. Het vereist trouwens wel een goed opgezet Figma-bestand, maar dat is een verhaal voor een ander moment.
Als vervolgstap zou ik de header en footer maken. Deze komen altijd op een pagina voor en zijn daarmee de meest gebruikte componenten van je website. Doe dit meteen ‘high fidelity’; dus met de juiste kleuren, content, effecten en responsive design. Elke keer als je nu een nieuwe pagina maakt, heb je in ieder geval het begin (header) en het eind (footer) al goed staan.
De mockups voor beiden, inclusief ‘edge cases’, is precies wat je van een designer kan vragen om aan te leveren, trouwens.
Goed, met de basis nu op de website is het tijd om in kleine stapjes verder te werken. Grote stappen zitten nog vol vraagtekens en zorgen ervoor dat je later vastloopt, omdat je bepaalde dingen gewoon nog niet kon voorzien.
Wanneer je in of met een groot bedrijf werkt, werk je waarschijnlijk met Scrum. Dit is een manier van werken waarbij een team in sprints van een aantal weken aan je website werkt. Eens per sprint levert dat iets op. Dit zou een ‘key’ pagina kunnen zijn, een aantal goed ingestelde herbruikbare componenten of een onderdeel van de website, zoals de ‘ticket aankoop-flow’.
Wanneer je inderdaad met sprints werkt, is het heel belangrijk om boven op de prioriteitenlijst te zitten. Het werk per sprint wordt bepaald aan de hand van die lijst. Daar kun je hulp bij krijgen van een product owner. Zorg dus dat je goed aanwezig bent!
Wanneer je zelf of met een zelfstandige designer aan je website werkt, is het eerder genoemde extra belangrijk. Zorg dat de kleuren, de typografie, de header en de footer staan. Begin daarna aan de belangrijkste pagina’s.
De pagina’s die je na de homepage als belangrijk mag beschouwen, hangen compleet af van de jobs-to-be-done die we eerder hebben vastgesteld.
Als je bijvoorbeeld een website hebt waarop je je diensten aanbiedt, is het belangrijk om uit te leggen wat die diensten zijn. Secundair daaraan zijn voorbeelden van die diensten uit de praktijk en een manier voor bedrijven om contact met jou op te nemen wanneer ze geïnteresseerd zijn in die diensten.
Voor een webshop is het dan weer super belangrijk om ervoor te zorgen dat de checkout-flow werkt. Hierdoor wordt het voor mensen mogelijk om hun bestelling te plaatsen.
En als laatste: als jij de marketing van een dierentuin runt, zorg dan dat je alle informatie hebt staan om te voldoen aan de jobs-to-be-done die nodig zijn om mensen naar je dierentuin te krijgen. Denk aan openingstijden, prijzen en welke dieren te bewonderen zijn in je dierentuin.
Al het bovenstaande is belangrijk voor de bedrijfsvoering. Het zorgt ervoor dat je zo snel mogelijk iets hebt staan wat jou geld gaat opleveren. En dat is waar een goede UX op een website om draait. Het zorgt ervoor dat een website meteen nuttig is in plaats van een ding wat er alleen maar mooi uitziet.
Alle andere pagina’s zijn secundair en kunnen in een latere sprint of volgende versie komen. Zorg dus dat je weet vanuit het eerdere hoofdstuk wat jouw jobs-to-be-done zijn en welke pagina’s daarbij horen.
Op dit moment in onze training zijn we aangekomen bij een duidelijk bouwplan. De jobs-to-be-done zijn duidelijk, je design is helder en je weet hoe je moet gaan bouwen.
Maar wat nou als je hulp nodig hebt? Misschien wil je wel een designer inhuren om je volledige website te laten doen
Vragen? Of iets onduidelijk? Laat het weten! Ik help je graag verder. Dat maakt deze training daarnaast ook weer beter.
Hallo! Ik ben een (freelance) senior UX designer. Meer weten? Lees hieronder verder.
