Webdesign-inspiratie: waar je die vindt en hoe je hem vertaalt naar je eigen site

Goede webdesign-inspiratie vind je bij vakgenoten, bij websites buiten je branche die je zelf prettig vindt werken, en in galerijen met goed ontwerp. Schrijf bij elk voorbeeld op wat je erin aanspreekt en vertaal dat naar wat jouw bezoekers moeten kunnen doen. Dan wordt inspiratie een site die aanvragen oplevert.

Een bekroonde site is lang niet altijd een goed voorbeeld voor een installatiebedrijf of een praktijk. Vaak leer je meer van een eenvoudige site die precies laat zien wat iemand doet en hoe je contact opneemt.

Waar je inspiratie vindt

Combineer een paar bronnen, dan voorkom je dat je site lijkt op die van iedereen in je vak, of juist zo afwijkt dat klanten zich niet herkennen.

Bron	Goed voor	Let op
Vakgenoten elders in het land	Zien wat klanten in jouw branche verwachten: welke informatie, welke foto’s, welke knoppen	Neem de opbouw als vertrekpunt, kopieer niets
Bedrijven buiten je branche	Frisse ideeën, bijvoorbeeld hoe een webshop prijzen helder toont of een hotel de beschikbaarheid laat zien	Vertaal het idee naar jouw situatie
Galerijen met bekroonde sites, zoals Awwwards en CSS Design Awards	Gevoel voor kleur, typografie en vernieuwende vormgeving	Vaak experimenteel en zwaar, zelden geschikt om één op één over te nemen
Ontwerpplatforms als Dribbble en Behance	Losse ideeën voor kleur, iconen en opmaak	Veel concepten en schermontwerpen, lang niet alles is als echte website gebouwd
Verzamelingen per soort pagina, zoals One Page Love	Voorbeelden van compacte sites en losse landingspagina’s	Minder bruikbaar voor sites met veel pagina’s
Je eigen bedrijf	Logo, bedrijfsbus, winkelinrichting, drukwerk, foto’s van je werk	Dit is je huisstijl, en die weegt zwaarder dan elk voorbeeld

Lijstjes met tientallen inspiratiesites raken snel verouderd. Een paar bronnen die je regelmatig bekijkt, leveren meer op dan een lange lijst die je één keer doorklikt.

Zo verzamel je inspiratie die je echt gebruikt

Na een avond scrollen heb je al snel veertig schermafbeeldingen en geen idee meer waarom je ze mooi vond. Werk daarom met een eenvoudig moodboard.

1. Maak per voorbeeld een schermafbeelding alleen van het deel dat je aanspreekt.
2. Schrijf er één zin bij. “De diensten staan als blokken met een foto en een prijs vanaf.” “De kop zegt in vijf woorden wat ze doen.”
3. Orden per onderwerp. Bijvoorbeeld kleur en sfeer, de opbouw van de homepage, de manier waarop diensten worden getoond, het contactformulier en het soort foto’s.
4. Voeg ook tegenvoorbeelden toe. Een of twee sites die je juist niet wilt, zeggen een webdesigner soms meer dan tien voorbeelden die je wel mooi vindt.
5. Houd het klein. Vijf tot tien voorbeelden met een duidelijke toelichting zijn genoeg.

Van moodboard naar briefing

Wat je mooi vindt, kun je vaak lastig in vaktermen uitleggen. Dat hoeft ook niet. Het helpt wel om te weten wat er meestal achter een gevoel zit.

Wat je zegt	Wat het meestal betekent	Wat je vraagt
“Het voelt rustig”	Veel witruimte, weinig kleuren, korte teksten per blok	Een sober ontwerp met één accentkleur
“Het ziet er duur uit”	Grote foto’s van hoge kwaliteit, een verfijnd lettertype, weinig elementen per scherm	Investeren in fotografie en een strakke typografie
“Ik zie meteen wat ze doen”	Een kop die de dienst benoemt, een duidelijke knop bovenaan	Een homepage die in één zin zegt wat je doet en voor wie
“Het is persoonlijk”	Foto’s van de mensen zelf, teksten in de je-vorm, een eigen verhaal	Eigen foto’s in plaats van stockbeelden
“Het is overzichtelijk”	Een kort menu, logische volgorde, herkenbare knoppen	Een beperkt aantal pagina’s met een vaste opbouw

Neem je moodboard mee naar het eerste gesprek met je webdesigner. Een goede ontwerper vertaalt het naar een eigen ontwerp in jouw huisstijl, en vertelt je ook eerlijk als iets mooi is maar je bezoekers niet helpt. Wil je alles op één plek vastleggen, gebruik dan de websitebriefing.

Leg je voorbeelden ook eens naast je huidige site. Is het verschil groot, dan merken je bezoekers dat ook, en vergelijken ze je met de concurrent die er al zo uitziet. De gratis website-check maakt dat verschil meetbaar, met een score, drie adviezen en de prijs van iets nieuws.

Ontwerpkeuzes die lang meegaan

Sommige keuzes zie je terug in websites die na jaren nog goed werken. Ze vallen minder op dan een trend en verouderen nauwelijks.

Leesbare tekst. Voldoende groot, met genoeg contrast tussen tekst en achtergrond. De internationale richtlijn voor toegankelijkheid (WCAG) noemt een contrast van minimaal 4,5 op 1 voor gewone tekst en 3 op 1 voor grote tekst. Lichtgrijze tekst op wit haalt dat vaak niet.

Eén duidelijke actie per scherm. Bellen, een offerte aanvragen of een afspraak maken. Als elke knop een andere kleur en een andere boodschap heeft, kiest de bezoeker niets.

Echte foto’s. Foto’s van je eigen werk, team of locatie maken een site geloofwaardiger dan beelden die ook op duizend andere sites staan.

Ontworpen voor de telefoon. Een groot deel van je bezoekers kijkt waarschijnlijk op een telefoon. In je statistieken zie je hoe dat bij jou zit. Lees meer in responsive webdesign.

Snelle pagina’s. Een prachtige pagina die traag laadt, wordt minder gezien. Grote video’s en zware animaties zijn de bekendste boosdoeners, zie website sneller maken.

Over webdesigntrends

Trendlijstjes verschijnen steeds opnieuw, en veel ideeën keren terug in een iets andere vorm. Hieronder staan opvallende keuzes die je regelmatig tegenkomt, met de situaties waarin ze werken.

Ontwerpkeuze	Kan werken voor	Risico
Video als achtergrond bovenaan	Horeca, recreatie, evenementen: sfeer laten zien	Trage pagina, onrustig op mobiel, tekst slecht leesbaar
Veel bewegende elementen bij het scrollen	Creatieve bureaus, merken die willen opvallen	Afleiding, lastig voor mensen die gevoelig zijn voor beweging
Een slider met wisselende foto’s	Een paar sterke projectfoto’s tonen	Latere foto’s worden vaak niet gezien
Heel grote, eigenzinnige letters	Een sterk merk met weinig tekst	Slecht leesbaar bij langere teksten
Donkere vormgeving	Fotografie, nachtleven, techniek	Lange teksten lezen minder prettig, contrast vraagt aandacht
Illustraties of AI-beelden in plaats van foto’s	Diensten die moeilijk te fotograferen zijn	Afstandelijk of onecht als het om vakwerk of mensen gaat

Een trend gebruiken is prima, zolang hij iets doet voor je bezoeker. Vraag je bij elk opvallend element af wat het bijdraagt aan de actie die je wilt.

Inspiratie per soort bedrijf

Wat werkt, verschilt per branche. Drie soorten bedrijven met elk een eigen accent.

Een timmerbedrijf wint vertrouwen met foto’s van eigen projecten, het werkgebied en een snelle manier om een foto van de klus mee te sturen. Inspiratie vind je eerder bij vakgenoten in andere regio’s dan in designgalerijen.

Een fysiotherapiepraktijk heeft baat bij rust: een heldere indeling van behandelingen, praktische informatie over vergoeding en parkeren, en de gezichten van de therapeuten. Websites van hotels en tandartsen laten vaak goed zien hoe je zakelijke informatie vriendelijk brengt.

Een adviesbureau verkoopt kennis. Hier werkt een strakke vormgeving met heldere teksten, voorbeelden van vraagstukken en een duidelijke contactknop. Kijk eens hoe goede vakbladen hun artikelen opmaken.

Meer voorbeelden van soorten sites vind je bij de WordPress-websitevoorbeelden en op onze pagina met voorbeelden.

Wat je ermee doet als je een site laat maken

Je moodboard is het beste vertrekpunt voor een gesprek over het ontwerp. Goed vertaald levert het een site op die aansluit op je bus, je visitekaartje en je drukwerk, en die in één oogopslag laat zien wat je doet en hoe klanten je bellen.

Bij een maatwerk website wordt het ontwerp vanaf de basis op jouw voorbeelden en huisstijl afgestemd; in WordPress betaal je daarvoor €450 bij maximaal vijf pagina’s, €750 bij maximaal tien. Zoek je een compacte, verzorgde site, dan wordt een AI-website in jouw kleuren en met jouw beelden opgebouwd, vanaf €99, en staat hij een dag na aanlevering online. Heb je je voorbeelden klaar, vraag dan een offerte aan en stuur je moodboard mee. Voor een losse campagnepagina vind je ideeën bij de landingspagina.