Wil jij je webdesign verbeteren?
Op deze pagina leer je meer over het ontwikkelen van je huisstijl en het ontwerpen van een goede homepagina.
Leer wat de ideale indeling en vormgeving is en hoe je elk onderdeel optimaal toepast.
Hoofdstukken:
Huisstijl
Homepagina
Indeling
Menubalk
Hero-sectie
Voordelen
Producten/diensten/portfolio
Recensies
Footer
Huisstijl
Om je bedrijf herkenbaar te maken, is het belangrijk dat je een huisstijl creëert. Deze moet dan ook overal op je website en andere media consistent (hetzelfde) zijn. Er zijn verschillende manieren waarop je dit kunt aanpakken. Ik adviseer om ze alle drie te combineren, voor de beste resultaten.
Concurrentenanalyse
Zo kun je kijken naar de websites van concurrenten. Bedenkt wat je goed vindt aan hun website en wat niet. Wat wil je overnemen en wat ontbreekt er? Welke kleuren, lettertypen, woorden en schrijfstijl gebruiken zij?
Klantpersona
Daarnaast kun je ook een klant persona maken. Hierbij denk je na over de eigenschappen, levensstijl, behoeften, likes en dislikes van je doelgroep. Je neemt de ideale klant voor je en maakt daar een profiel omheen. Denk o.a. aan leeftijd, geslacht, woonplaats, inkomen, wensen, voorkeuren, behoeften, hobby’s, mediagedrag en consumptiegedrag.
Kleuren op basis van woorden
Een derde optie is het samenstellen van de kleuren van je huisstijl door te bedenken wat jouw bedrijf naar klanten moet uitstralen. Kleuren zijn het meest belangrijke en herkenbare deel van je huisstijl. Maak een lijst met woorden waarvan je wilt dat klanten die met jouw bedrijf en producten/diensten associëren. Kies vervolgens de vijf meest belangrijke woorden uit. Met deze woorden kun je kijken welke kleuren het beste bij je bedrijf passen.
Welke kleuren bij verschillende woorden passen kun je hier bekijken.
Bij het kiezen van de kleuren moet je in gedachte houden dat je contrasterende kleurencombinaties moet gebruiken. Hier zijn drie verschillende opties voor:
- Monogramatisch / kwaliteitscontrast; Verschillende tinten van één kleur. Dit is gemakkelijk te verwerken voor het oog en de hersenen. Het komt strak en minimalistisch over.
- Complementaire kleuren; Twee kleuren die tegenovergesteld van elkaar in het kleurenwiel staan. Bijvoorbeeld geel en paars, rood en groen of blauw en oranje. Deze kleuren hebben een hoog contrast en zijn aangenaam voor het oog.
- Triade kleuren; Drie kleuren die even ver van elkaar in het kleurenwiel staan. Bijvoorbeeld rood, geel en blauw of groen, oranje en paars. Dit heeft een harmonieus effect en is populair bij ontwerpen.
Vervolgens kies je per kleur de tint die je wilt gebruiken. Dit kun je o.a. doen via www.materialui.co/colors en https://color.adobe.com/nl/create. Hier kun je ook de kleurcodes vanuit kopiëren, zodat je overal op je website exact dezelfde kleuren gebruikt.
Gebruik voornamelijk één hoofdkleur, één aanvullende kleur en één complementaire kleur. Je kunt ook per kleur een donkere en lichte tint kiezen. De kleur die het meest opvalt kun je gebruiken voor de call-to-action knoppen (later meer hierover).
Lettertypen
Gebruik niet teveel verschillende lettertypen. Kies maximaal drie lettertypen die je bijvoorbeeld gebruikt voor kopteksten, subkoppen en het normale tekstgedeelte. Bij deze onderdelen moet je dan ook overal op je website hetzelfde lettertype gebruiken. Je mag leuke en originele lettertypen gebruiken, maar zorg ervoor dat deze wel goed leesbaar zijn. De lettertypen moeten ook goed bij elkaar passen en eventueel bij je logo.
Je kunt ook nieuwe lettertypen aan je computer toevoegen. Let er dan wel op dat deze lettertypen gratis en (commercieel) vrij te gebruiken zijn. Lettertypen komen met een licentie die vertelt op welke manier ze gebruikt mogen worden. Je kunt bijvoorbeeld via Google Fonts gratis nieuwe lettertypen downloaden die vrij te gebruiken zijn.
Afbeeldingen
Afbeeldingen zijn een goede aanvulling voor je teksten en wat je met je bedrijf wilt uitstralen. Gebruik afbeeldingen met een hoge kwaliteit. Zorg ervoor dat de afbeeldingen de pagina’s niet domineren, maar juist de tekst aanvullen. Afbeeldingen van je eigen producten of diensten en afbeeldingen waarop klanten (glim)lachen werken goed.
Als je geen afbeeldingen van je eigen bedrijf hebt kun je stock afbeeldingen gebruiken. Maar vermijd dan echter afbeeldingen waarin de persoon overdreven glimlacht of poseert. Dit komt niet echt over en klanten zullen snel zien dat het gewoon een stock afbeelding is. Mensen kijken ook vaak door stock foto’s waarin ‘collega’s’ handen schudden of vergaderen.
Bedrijven die diensten leveren kunnen afbeeldingen gebruiken waarin te zien is hoe iets voor hun dienst eruit zag en daarna.
Online winkels kunnen het best meerdere afbeeldingen voor hun producten gebruiken, waarbij alle kanten van het product te zien is. Hier kan de afbeelding wel dominant op de pagina staan.
Bij sfeerpagina’s en portfolio’s moeten de afbeeldingen ook het middelpunt zijn en moet er weinig tekst omheen hangen.
Homepagina
De homepagina is de pagina die bezoekers meestal als eerst zullen zien. Deze moet dus een goede eerste indruk achterlaten. Je hebt maar 30 seconden om de aandacht van hen te pakken, dus het is belangrijk dat deze er goed en duidelijk uitziet. De bezoekers moeten een duidelijk beeld hebben van wie je bent en wat je doet. Ook moeten zij met zo min mogelijk moeite en nadenken kunnen navigeren.
Bezoekers scannen vaak door een website, zonder te lezen. Het is daarom belangrijk om kopjes te gebruiken. Gebruik ook voldoende visuele content (zoals afbeeldingen en icoontjes) om de aandacht te trekken, je pagina mooier te maken en op te delen en bezoekers duidelijk te laten zien wat je biedt.
Indeling
Uit diverse onderzoeken en ervaringen is gebleken wat de ideale indeling van een homepagina is, om bezoekers vast te houden en te overtuigen. Pas de ideale indeling toe om je webdesign te verbeteren.
De ideale indeling is als volgt:
- Hero-sectie; Dit zien bezoekers als eerst en moet duidelijk vertellen wat jouw bedrijf doet en wat de bezoeker hier aan heeft.
- Voordelen; Drie redenen waarom de klant voor jou moet kiezen.
- Producten/diensten/portfolio; Dit hangt van je bedrijf en website af.
- Recensies; Drie goede recensies van voormalige/huidige klanten.
- Footer; Hier herhaal je de belangrijkste onderdelen en verwijs je naar belangrijke pagina’s.
De ideale indeling:
Menubalk
De menubalk moet maximaal 150 pixels groot zijn. Dit is namelijk niet hetgeen dat de aandacht van bezoekers moet trekken.
Het is ideaal als de menubalk met de pagina mee scrolt, zodat de navigatie voor bezoekers gemakkelijk blijft.
In de menubalk staan je belangrijkste pagina’s (het liefst 4 of 5). Ook staat het logo aan de linkerkant in of boven de menubalk, die naar de homepagina leidt. Dit zijn mensen gewend. Als je hiervan afwijkt wordt de navigatie lastiger en kost dit tijd. Plaats ook logo’s van je sociale media bovenin de pagina of in de menubalk.
Hero-sectie (header)
De hero-sectie is het bovenste deel van de homepagina. Dit zullen bezoekers als eerste zien wanneer ze een website bezoeken. Het is dus een belangrijk deel waar je aandacht aan moet besteden om je webdesign te verbeteren. Je moet bezoekers laten weten waarom zij verder moeten scrollen. In dit deel vertel je drie dingen:
- Wat je bedrijf doet. Vertel welk probleem je van de bezoeker op kan lossen.
- Wat dat voor de bezoeker kan betekenen. Waarom dat het leven van de bezoeker beter kan maken.
- Wat de bezoeker nu moet doen om met je samen te werken.
Koptekst en subkop
De koptekst is het grootst en vertelt vaak wat je doet. De subkop komt daaronder, is iets kleiner en vertelt vaak wat dit voor de bezoeker kan betekenen. Dit kun je echter ook omdraaien, zolang beide onderdelen benoemd worden.
Schrijf vanuit de focus op je klanten, niet alleen vanuit jezelf. Laat zien dat je hun probleem kent en snapt en vertel hoe jij dit oplost. De klant moet zich in de tekst kunnen herkennen en weten dat jij hun probleem kent en kan oplossen. Gebruik verder niet teveel woorden en zinnen. Houdt het concreet en duidelijk. Mensen houden vaak niet van lezen. Gebruik voor de koptekst 1 zin en voor de subkop maximaal 3 zinnen. Daarnaast is het prettiger leesbaar als er niet teveel lege ruimte tussen de koptekst en subkop zit.
Call-to-action knop
Deze knop komt onder je koptekst en subkop. Dit is de belangrijkste call-to-action knop op je homepagina. Met deze knop haal je de bezoeker over om bijvoorbeeld een product of dienst te bekijken, een afspraak in te plannen of een offerte aan te vragen. Deze knop moet duidelijk vertellen waar de bezoeker heen geleidt wordt en vervolgens moet doen. Houdt de tekst van de knop echter kort. Gebruik ook niet teveel call-to-action knoppen in je hero-sectie. 1 Of 2 knoppen is ideaal.
Het is overigens meestal beter om niet direct een ‘koop nu’ of ‘boek nu’ knop te gebruiken, aangezien bezoekers liever eerst meer over je product of dienst willen weten. Maar in plaats daarvan dus een ‘lees meer’ of ‘plan een adviesgesprek’ knop. Dit is een minder grote vraag en kost de bezoeker minder moeite.
Call-to-action knoppen moeten opvallen, dus gebruik hiervoor een goed contrasterende kleur, die niet in de rest van je website terugkomt. Een rode kleur kan bijvoorbeeld urgentie aangeven.
Header afbeelding
De header afbeelding komt achter je koptekst en subkop. Deze moet hier goed bij passen en kan bijvoorbeeld een product of dienst in gebruik laten zien of de eindresultaten ervan. Ook werken afbeeldingen van lachende klanten goed. Gebruik echter geen afbeeldingen van mensen die overdreven lachen of poseren. Bezoekers zien dit als duidelijke stock afbeeldingen, waardoor ze minder betrouwbaar overkomen.
Zorg ervoor dat de afbeelding niet te druk is en de tekst goed leesbaar blijft. Afbeeldingen met lege of onopvallende ruimtes kun je hier goed voor gebruiken. Je kunt ook eventueel een background-overlay toepassen, waarbij de achtergrond voor bijvoorbeeld 50% doorzichtig, wit of zwart wordt.
Het is niet handig om een slider als header te gebruiken, aangezien dit vrij druk en rommelig oogt. Ook zullen de meeste bezoekers niet naar alle slides kijken. Als je toch een slideshow wilt gebruiken, om bijvoorbeeld verschillende soorten producten, diensten of klanten te laten zien, zorg er dan voor dat dit niet te overweldigend wordt. Houdt de afbeeldingen in de slide in dezelfde stijl en laat de afbeeldingen niet te snel wisselen.
Header video
Je kunt ook een video in dit gebied gebruiken, i.p.v. een afbeelding, maar het moet dan wel een goede video zijn. De video moet niet teveel afleiden of teveel jumpcuts hebben. Als je alleen een video gebruikt en geen koptekst of subtekst erboven plaatst, moet je in je video alsnog benoemen wat je bedrijf doet, wat de bezoeker hier aan heeft en wat de bezoeker moet doen.
Een omgevingsvideo die een sfeer levert kan goed werken, maar een video waarin je product of dienst gebruikt worden, of waar resultaten te zien zijn, zijn nog beter.
Zorg ervoor dat de video op Youtube staat en je het hier vanuit laadt. Als de video volledig in de opslagruimte van je eigen website staat, kan het vijf seconden duren voordat hij laadt.
Enkele goede voorbeelden:
Voordelen
Na de hero-sectie benoem je de grote voordelen van een samenwerking met jou. Benoem er drie; dit is het magische getal met het meeste effect en ziet er visueel het beste uit. Bedenk waar jij goed in bent en waarin je jezelf van de concurrent onderscheid. Beschrijf nu wat het voordeel daarvan voor de klant is. Deze voordelen schrijf je ook weer vanuit het oogpunt van de klant. Wat heeft diegene eraan?
Bijvoorbeeld dat je een beter resultaat geeft, 24 uur service biedt, flexibele prijzen of levering op dezelfde dag. ”U krijgt …, zodat u …” of ”Wij bieden …, zodat u …”.
Schrijf de voordelen ook weer zo concreet mogelijk op en maak gebruik van een kopje bij elk. Om het voordeel nog duidelijker en visueler te maken kun je icoontjes gebruiken. Deze kun je bijvoorbeeld toevoegen met de plug-in Font Awesome. Gebruik geen sliders. Bezoekers zullen niet alle slides bekijken en dus voordelen missen.
Producten/diensten/portfolio
Dit deel van de homepagina verschilt per bedrijf en soort website. Als je een product of dienst biedt vertel je hier meer over en laat je enkele afbeeldingen zien. Praat niet teveel over jezelf, maar vertel wat het product of de dienst voor de klant kan betekenen en in hun behoeften kan voorzien. Vertel hoe je hun probleem kan oplossen en dit beter doet dan je concurrenten. Als je een portfolio wilt laten zien, kun je dit hier ook kwijt.
Laat echter niet teveel zien. Plaats hier de belangrijkste producten en diensten en vertel de belangrijkste kenmerken. Als de bezoeker er meer over wilt weten leidt je ze met een call-to-action knop naar een andere pagina die daar volledig aan toegewijd is. Plaats het belangrijkste product of dienst bovenaan.
Laat ook de prijzen van je producten en diensten zien. Bezoekers willen dit weten. Bij onduidelijkheid zullen zij eerder weggaan. Als je drie prijspakketten hebt, plaats dan de duurste bovenaan, zodat de andere pakketten relatief goedkoper lijken. Of plaats de gemiddelde prijs in het midden en maak dit blok iets groter, zodat hij er meer uitspringt en opvalt. Als je dit niet mag weergeven (bijvoorbeeld van fabrikanten), dan kun je wel aangeven wat de prijs van een product of dienst hoger en lager maakt.
Je kunt je producten en diensten in een slider zetten, maar hier riskeer je ook weer dat bezoekers niet alle slides zullen bekijken. Enkele kolommen naast of onder elkaar is beter. Wil je wel een slideshow gebruiken, zet de slides dan in volgorde van belangrijkste product/dienst naar minst belangrijke, zodat de belangrijksten gezien worden.
Recensies
Recensies zijn erg belangrijk. Mensen vertrouwen anderen meer dan de bedrijven zelf. Vooral als zij zichzelf in de beoordelaar kunnen herkennen. Recensies van verschillende doelgroepen of over verschillende diensten kunnen hier handig voor zijn.
Geef in dit deel van je homepagina ook weer drie recensies weer. Kies de beste recensies uit, met de hoogste score, die de klant goed vertellen welke voordelen zij ervaren hebben. Een goede recensie vertelt over de volledige ervaring en transformatie; voor, tijdens en na. Het liefst voldoende tekst dat echt betekenis heeft. Video recensies zijn het beste. Probeer deze te krijgen.
Een recensie komt betrouwbaarder over als de naam en afbeelding van de beoordelaar hier bij staat. Ook kun je bij de recensie aangeven waar deze vandaan komt en er eventueel heen linken. Dit zorgt ook weer voor betrouwbaarheid. Laat verder het aantal sterren visueel zien. Dit is duidelijker.
Je kunt ook doorverwijzen naar je volledige pagina met recensies, als je dit hebt. Hoe meer goede recensies hoe beter. Het helpt ook als je op je website vermeldt hoeveel klanten je al geholpen hebt.
Er bestaan ook plugins die automatisch recensies op je pagina plaatsen. Het nadeel hierbij is dat je niet zelf kan kiezen welke recensies op je pagina komen. Dit kunnen dus ook slechte of nutteloze, korte recensies zijn.
Footer
Ondanks wat sommigen denken, is uit onderzoek gebleken dat de footer van een website erg belangrijk is. Veel bezoekers scannen door een website, waarna zij onderaan de pagina terecht komen. De footer is ook de laatste kans om bezoekers aan te sporen of contactinformatie te verzamelen. Verder is de footer op elke pagina hetzelfde. Het is dus belangrijk dat je hier de juiste informatie in zet. De footer kan voor bezoekers ook als navigatie dienen. Plaats belangrijke pagina’s dus in je footer.
Pas wel op dat je de footer niet te vol maakt. Wat je in je footer plaatst is ook afhankelijk van je bedrijf en soort website. Maak ook gebruik van kopjes en eventueel icoontjes, om je footer duidelijker en visueler te maken.
Lees hier wat er wel en niet in een footer komt.
De volgende stap.
Aan de hand van deze tips kun je jouw webdesign verbeteren.
Vervolgens kun je doorgaan met het verbeteren van de vindbaarheid en SEO van je website.