Mooie website: waarom mooi alleen niet genoeg is

Een mooie website is een website die er verzorgd uitziet én doet waarvoor hij bedoeld is: bezoekers omzetten in klanten. Dat onderscheid is belangrijk, want de mooiste websites uit de inspiratielijstjes zijn vaak gemaakt voor prijzen en portfolio’s, niet voor een MKB-bedrijf dat aanvragen nodig heeft. Esthetiek is een middel, geen doel.

Ik ben webdesigner en online marketeer, en ik kijk daarom naar een ontwerp met twee vragen tegelijk: ziet het er professioneel uit, en snapt een bezoeker binnen enkele seconden wat hij hier moet doen? Hieronder lees je wat een website mooi én effectief maakt, en hoe je van schets naar werkende site komt.

Wat maakt een website mooi?

Als je professionele websites naast elkaar legt, komen steeds dezelfde bouwstenen terug. Niet toevallig, want dit zijn de dingen die het oog rust geven.

• Ruimte. Witruimte rond koppen, knoppen en afbeeldingen. Bijna elke site die rommelig aanvoelt, is simpelweg te vol.
• Een beperkt kleurenpalet. Twee basiskleuren, een neutrale achtergrond en één accentkleur voor knoppen. Meer heb je zelden nodig.
• Consequente typografie. Maximaal twee lettertypen en een vaste set formaten voor H1, H2, H3 en lopende tekst.
• Eigen beeld. Echte foto’s van jou, je team of je werk verslaan generieke stockfoto’s altijd.
• Ritme. Secties die elkaar afwisselen in achtergrond en indeling, zodat de pagina niet één lange brij wordt.
• Rust op mobiel. De meeste bezoekers zien je site op een telefoon, dus daar wordt je ontwerp beoordeeld.

Wat een ontwerp vooral professioneel maakt, is consequentie. Dezelfde knopstijl overal, dezelfde afstanden, dezelfde koppenhiërarchie. Een bezoeker merkt het niet bewust op, maar hij voelt het wel. In mijn artikel over professioneel webdesign ga ik daar dieper op in.

Waarom “mooi” alleen niets oplevert

Dit is mijn stelling en ik houd hem overeind: een mooie website zonder marketing eronder is een dure brochure. Ik zie regelmatig sites met een prachtige animatie op de homepage waar het telefoonnummer drie klikken diep verstopt zit.

Wat er misgaat is bijna altijd hetzelfde rijtje:

• Een grote sfeerafbeelding boven de vouw waar geen enkele boodschap in staat.
• Zwevende teksten waar de bezoeker niet uit opmaakt wat je verkoopt.
• Knoppen met “lees meer” in plaats van “offerte aanvragen”.
• Zware animaties en losse lettertypen die de site traag maken.
• Geen enkele vorm van bewijs: geen reviews, geen voorbeelden, geen cijfers.

Snelheid hoort daar nadrukkelijk bij. Google beschrijft in de documentatie over page experience waarom een trage of onrustige pagina bezoekers kost. Een ontwerp dat er goed uitziet maar drie seconden nodig heeft om te laden, verliest gewoon.

En dan is er nog toegankelijkheid. Lichtgrijze tekst op wit oogt strak, maar is voor een deel van je bezoekers slecht leesbaar. De WCAG-richtlijnen geven concrete contrastwaarden waar je je prima aan kunt houden zonder dat het ontwerp eronder lijdt.

Een website ontwerpen: van schets naar werkende site

Zo loopt het proces bij mij, en zo zou ik het je ook aanraden als je het zelf doet of laat doen.

Stap 1: bepaal per pagina het doel

Wat moet deze pagina bereiken, en wat is de ene actie die je wilt zien? Zonder dat antwoord ontwerp je decoratie: een pagina die er goed uitziet maar nergens toe leidt.

Stap 2: schets de indeling, nog zonder kleur

Blokken op papier of in een simpel wireframe. Welke boodschap staat waar, waar komt de knop, welk bewijs zetten we ernaast. Zwart-wit dwingt je te kijken naar de volgorde in plaats van naar de sfeer.

Stap 3: zet de teksten erin voordat je gaat stylen

Ontwerpen op “lorem ipsum” gaat altijd mis, want echte teksten zijn langer en onregelmatiger dan de dummy. Met de definitieve tekst weet je pas hoeveel ruimte je secties nodig hebben.

Stap 4: bouw eerst het mobiele ontwerp

Begin bij het kleinste scherm en werk omhoog. Dan houd je vanzelf alleen over wat er echt toe doet. Ik heb dat uitgewerkt in mijn stuk over mobile-first design.

Stap 5: bouw en test met echte content

Vul alle pagina’s, test op verschillende schermen en browsers, en controleer de laadtijd voordat je live gaat. Klik je eigen site door alsof je een klant bent die haast heeft.

Stap 6: meten en bijstellen

Een website is nooit af. Na een paar weken zie je in je statistieken waar bezoekers afhaken, en dat is precies waar je vervolgens aan sleutelt.

Kosten van een professionele website laten bouwen

De prijs hangt af van het aantal pagina’s, of het ontwerp op maat is en of er functionaliteit zoals een webshop of boekingssysteem bij hoort. Een eenvoudige zzp-site zit ergens in de lage duizenden; een maatwerksite voor een groter bedrijf loopt daar ver boven.

Wat ik ondernemers meegeef: kijk niet alleen naar de bouwkosten. Een goedkope site die geen aanvragen oplevert is duurder dan een goede site die dat wel doet. Voor een indicatie op basis van jouw wensen kun je de prijscalculator invullen.

Checklist: is jouw website mooi én goed?

• Snapt een vreemde binnen vijf seconden wat je doet en voor wie?
• Staat er boven de vouw een duidelijke knop met een concrete tekst?
• Zijn je contactgegevens vanaf elke pagina binnen één klik bereikbaar?
• Laadt je homepage op mobiel binnen twee tot drie seconden?
• Staat er bewijs op de pagina: reviews, portfolio, logo’s of cijfers?
• Is de tekst leesbaar qua contrast en lettergrootte, ook op een telefoon?
• Gebruik je overal dezelfde knopstijl, koppen en afstanden?

Vink je hier meer dan twee punten niet af, dan zit je grootste winst waarschijnlijk niet in een nieuw ontwerp maar in je bestaande website verbeteren.

Hulp bij een mooie en werkende website

Wil je weten of jouw site vooral mooi is of ook echt iets oplevert? Stuur me de link en ik geef je eerlijk terug waar ik de winst zie. Mailen kan naar stijn@fishermanwebdesign.nl. Wil je eerst zien wat ik maak, kijk dan in mijn portfolio.

Veelgestelde vragen