Homepage-ontwerp: hoe maak je van je homepage een succes

8 Min.
Tips voor homepage-ontwerp

De startpagina of homepage is voor velen het heiligdom van een website. Het moet talrijke doeleinden dienen en verschillende doelgroepen bedienen. En het beste van alles, op hetzelfde moment. Hoe zien een goed adres en een doelgericht homepage-ontwerp eruit? Hier zijn de belangrijkste tips in een overzicht.

Ik heb het hieronder over bedrijven, maar de principes zijn in veel opzichten ook van toepassing op een eenvoudige blog, je special interest site, of de site van je band. De homepage moet:

  • Laat het bedrijf, het bureau of de dienst van de beste kant zien
  • Gelijktijdig in kaart brengen van alle gebieden van bedrijfsactiviteiten
  • Laat zien dat het bedrijf up-to-date is, door nieuws en het verbinden van Facebook, Instagram, enz.
  • Maar ook de storytelling met het verhaal van de oprichters moet passen
  • Het abonnement op de nieuwsbrief moet te allen tijde zichtbaar zijn

Evenzo wilt u meestal nieuwe vacatures, routebeschrijvingen, uw adres, alle telefoonnummers met contacten in kaart brengen. En zo verder.

afbeeldingen homepage optimaliseren
Een homepage volgens het motto: Een beeld zegt meer dan duizend woorden

Je kunt zien waar dit heen gaat: De startpagina kan en moet niet alles doen, alstublieft. U moet de zaak conceptueel en strategisch benaderen en nadenken over wat er precies moet komen te staan en waarom. Mijn aanpak is zeker niet de enige, en misschien niet eens de beste voor uw bedrijf. Maar ik zal proberen om eventuele aanwijzingen te rechtvaardigen. Andere meningen en suggesties zijn echter ook welkom in de commentaren.

De startpagina is een landingspagina

Zoals alle pagina's op uw website, is de homepage een landingspagina. Zie onze post over hoe je het beste landingspagina's ontwerpt. Als je je dat realiseert, heb je al veel bereikt. Omdat je dan aan het heroverwegen bent.

In het ideale geval hebt u zelfs gegevens over uw homepage verzameld. Waar komen de mensen vandaan die op uw homepage terechtkomen? Wat willen ze bereiken? Hoe kun je hen daarbij helpen? Welk doel heeft de landingspagina eigenlijk voor jou? Welke informatie wil je overbrengen?

Analyse van uw website

Het verzamelen van cijfers over uw homepage en uw andere subpagina's is uiterst belangrijk. Het is per slot van rekening de enige manier om erachter te komen of uw inhoud en ontwerp werken. Lees onze gidsen over content KPI's, content hub, en content testing.

Waar komen uw bezoekers vandaan?

In de meeste gevallen komen gebruikers via Google, via uw marketingactiviteiten (dit kan bijvoorbeeld een visitekaartje zijn) of via de sociale mediaprofielen op uw homepage. Deze bezoekers weten misschien niet echt wat uw bedrijf doet. Maar zij zijn duidelijk op zoek naar een bedrijf dat uw diensten of informatie aanbiedt. Anders zouden ze niet de moeite nemen om uw homepage te bezoeken.

In veel gevallen lezen ze een artikel op je website dat je bijvoorbeeld op Instagram hebt gedeeld, en gaan ze vervolgens naar de homepage. Om te zien wat het bedrijf eigenlijk doet. Nu moet je iets bieden aan de gebruikers! En het eerste ding is om de vraag te beantwoorden:

Wat doet de website of het bedrijf eigenlijk?

Jammer genoeg wordt dit vaak vergeten. Het eerste wat een homepage voor zijn bezoekers moet beantwoorden is: "Ben ik hier op de juiste plaats? Omdat ze ergens vandaan komen, op je pagina landen - en nog niets weten. Zij moeten meteen aan het begin de bevestiging krijgen dat zij op de juiste pagina zijn beland. Het is als een snoepje om hun gebruikerservaring (UX) mee te beginnen:

Je bent naar de juiste plaats gekomen. U kunt rustig ademhalen en ontspannen uw informatie krijgen!

Mijn suggestie hier is: Drie tot vier zinnen die kort maar accuraat uitleggen wat u aanbiedt. Met een link eronder als je meer wilt weten. Daar is het internet voor, om met één klik meer informatie te krijgen.

Homepage Basistekst
De homepage van een praktijk met sobere inleidende tekst

Dit is waar ik vaak de meeste tegenwind krijg: Je moet mensen eerst emotioneel betrokken krijgen, zodat ze blijven. Zoals, "We zetten een grote foto op de homepage en dan laten we het nieuws binnenrollen via een slider. Zodat ze kunnen zien wat een geweldig wereldwijd bedrijf we zijn.

Over de grote schuivers: Ze werken niet. Velen hebben hier al over geschreven. De pagina Moet ik een carrousel gebruiken? is een goed begin. Ook de uitspraak "dit is belangrijk, we zetten het in de zijbalk!" werkt niet meer, want de zijbalk is gewoon niet up to date - en past niet goed bij responsive webdesign.

Emotionele aantrekkingskracht

Ik zeg volmondig "ja" tegen het aanspreken van de doelgroep op een emotioneel niveau. Dit bindt uw klanten niet alleen op een feitelijk niveau, het spreekt ook de hersenen op een heel andere manier aan. Naar mijn mening moet de eerste boodschap echter nog steeds zijn "Wat doe je eigenlijk?". Hoe kan het niveau van emoties ook worden ingebracht?

Dit is een strategische beslissing die gebaseerd moet zijn op de bedrijfsidentiteit (CI) van uw bedrijf. Uw CI omvat de manier waarop u uw doelgroep aanspreekt. Er zijn in principe drie mogelijkheden:

  • Over de tekst
  • Over het ontwerp
  • Over foto's of video's

Toespraak over de tekst

Mensen gebruiken een website heel verschillend. Dit betekent dat u niet weet hoe ze iets op uw website vinden. Bijvoorbeeld, het eerste wat ze gebruiken is het menu, zoeken, en dan de koppen of links op uw pagina scannen. Het meest voorkomende eerste ankerpunt waarop zij zich fixeren is echter de eerste tekst op de pagina die u informatie geeft. Talrijke studies hebben aangetoond dat dit het geval is. Je kunt deze tekst heel anders "vormgeven" met behulp van het adres en de tonaliteit.

"Ik ben Phillip Roth, ik maak een website voor uw bedrijf" klinkt anders dan "Hey, ik ben een webdesign influencer die uw gekke UX optimaliseert voor top stijgende KPI's!" Kijk goed naar je doelpubliek en pas je tone of voice daarop aan. Het is net zo goed een onderdeel van uw huisstijl als uw ontwerp.

Aanpak via het ontwerp

Een aantrekkelijk ontwerp straalt niet alleen professionaliteit uit, het raakt ook emotioneel. Zie ons artikel over de basisprincipes voor een harmonieus webdesign. Kleuren, letterkeuze, ontwerpelementen - al deze elementen kunnen vertrouwen, vreugde, coolheid, gekte en vele andere emoties overbrengen op bezoekers. Corporate design maakt deel uit van de algemene boodschap die uw bedrijf wil overbrengen. Vertrouwenwekkende elementen zoals certificaten kunnen nog extra bonuspunten opleveren.

Homepage Afbeeldingen Emoties
Startpagina met emotionele aantrekkingskracht en inleidende tekst

Foto's of video's

Het imago van uw bedrijf wordt ook bepaald door de beeldtaal. Bent u een wereldwijd bedrijf met 600 werknemers en koele wolkenkrabbers in Shanghai of een kleine fabriek met een mooie werkplaats? Bent u een coach met mooie workshopruimtes of een arts met een chique praktijk? Dat is wat uw bezoekers willen weten en zien. Ze willen weten: "Kan ik me er op mijn gemak voelen?", "Spreekt het product me aan?", "Is dit een bedrijf waar ik zou kunnen solliciteren?", "Werken er normale mensen?" "Zijn ze aardig?".

Dit alles kan in milliseconden worden overgebracht met één of meer prachtige beelden. Maar daarvoor moeten de beelden authentiek zijn. Want wat je van jezelf en je team laat zien, moet tegenwoordig echt zijn. Anders voelen mensen zich niet serieus genomen. Niemand wil nog de stockfoto zien met de vreemde blonde telefoniste. Net zo weinig als een vreemde vergaderzaal vol lachende maar "nep" mensen.

Misschien heb je zelfs een goede explainer video die je diensten in 30 seconden samenvat. Of misschien heeft u een video op de achtergrond die uw chique hotel en het prachtige omringende landschap laat zien. Alles wat uw huisstijl en de bijbehorende boodschap ondersteunt, is goed!

Homepage Kleurenconcept
Homepage met aansprekende foto's en uniform kleurenconcept

Wat nu?

Dus nu hebben we de aandacht van de bezoekers. Zij weten nu: "Ik ben op de juiste plaats, ik voel me op mijn gemak. Wat nu volgt is een strategische beslissing: Nu kunt u de informatie die u hier slechts kort hebt aangestipt, verder uitdiepen. Nu kunt u - naast de eerste indruk - uw tweede doel nastreven.

Op dit punt is het zinvol om na te denken over wat dit doel eigenlijk is. Zie ook de bijbehorende inhoudsstrategie. Want als de bezoekers niet gefixeerd zijn op uw menu of het zoeken van informatie, dan beginnen ze te scrollen. Dus wat bied je ze nu aan?

De mogelijkheden zijn legio:

  • Vertel een verhaal
  • Verdiep de informatie over uw dienstenaanbod
  • Toon grote evenementen, verlovingen of nieuws
  • Bied een tool aan om afspraken te maken, dan bellen ze je niet altijd direct
  • Ik persoonlijk verkoop het meest via mijn nieuwsbrief, ik bied het op verschillende plaatsen op de website aan
  • Link naar uw vacaturepagina als u op zoek bent naar nieuwe werknemers
  • Laat goede beoordelingen zien

Zoals u kunt zien, zijn er nu honderden manieren om de startpagina verder vorm te geven. En er is zeker geen standaardrecept om uw klanten naar de gewenste conclusie te leiden. Je moet het uitproberen. Houd er echter rekening mee dat uw homepage of landingspagina niet oneindig veel aandacht krijgt. Heel zelden scrollt iemand 27 meter - en neemt toch alle informatie in zich op.

Homepage Getuigenissen
De startpagina met een offerte en de aangeboden diensten

Voor dit concept maak ik graag gebruik van zogenaamde wireframes of mockups. Dat wil zeggen, u sorteert in eenvoudige rechthoeken met grijze kaders de inhoud van de home page. Zonder echte inhoud, zonder ontwerp. U kunt dit doen op een vel papier of met programma's als Adobe XD, Sketch, Photoshop, InDesign of zelfs in Powerpoint. Zoals ik al zei, laat het ontwerp hier nu buiten. Op dit punt, wil je weten, bijvoorbeeld:

  • Wat moet er zeker op de home page?
  • Wat hoeft daar niet heen te gaan?
  • Wordt het allemaal te veel?
  • Kan het doel worden bereikt met de beschikbare ruimte?
  • Zien de bezoekers de oproep tot actie vroeg genoeg?
Mockup Wireframes Adobe XD
Wireframes in Adobe XD

Kom terzake!

Nu u uw secundaire doel hebt vastgesteld en de gebruikers alle informatie hebt gegeven die in de beperkte ruimte past, moet u uw doel verduidelijken. De beste plaats om dit te doen is onderaan de pagina. Zoals ik al zei: daar kunt u de belangrijkste informatie benadrukken, de oproep tot actie plaatsen of de gebruiker uitnodigen contact met u op te nemen met een foto van uzelf - naast uw contactgegevens. Wat je tweede doel van de pagina ook is: Nu kun je het plaatsen voordat je footer komt. Uw startpagina is - zoals ik in het begin al zei - een landingspagina.

De voettekst kan weer als secundaire navigatie fungeren, bijvoorbeeld als u daar meer informatie wilt aanbieden. Velen kijken ook graag naar uw imprint, of u een serieuze aanbieder bent. Maar wees voorzichtig! Te veel elementen in je voettekst kunnen afleiden van je eigenlijke doel. Als bijvoorbeeld de inschrijving voor de nieuwsbrief erin staat, maar u schrijft maar één keer per jaar een nieuwsbrief, dan is dat misschien minder doelgericht.

Conclusie

Beschouw uw homepage als een landingspagina. Geef uw bezoekers het gevoel dat ze op de juiste pagina zijn beland. Versterk dit gevoel met een doelgroepgerichte adressering, een chique vormgeving en ondersteunende, authentieke beelden.

Definieer je secundaire doel nauwkeurig. Leid de bezoekers erheen. Controleer zo mogelijk met analytics en A/B-tests of dit werkt. En wat nog beter werkt. Naar mijn mening kun je een homepage niet veel perfecter maken dan dat.

Zoals je kunt zien aan de pagina's die ik heb gemaakt (zie screenshots) in deze post, leidde zelfs mijn advies niet altijd tot het resultaat dat ik wilde :-; Ik ben blij om nieuwe inzichten van jou te horen, in de comments, alleen om die reden! Misschien heeft u de perfecte formule gevonden voor uw startpagina?

Uw vragen over de post

Heb je vragen voor Phillip? Of een tip voor het ontwerp van de homepage? We kijken uit naar uw commentaar. Wilt u op de hoogte blijven van nieuwe artikelen over WordPress en webdesign? Volg dan RAIDBOXES op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Phillip is een freelance ontwerper uit Keulen en bedenkt, ontwerpt, creëert en onderhoudt vanaf 2011 toegankelijke WordPress websites voor zijn klanten. Gedurende vele jaren was hij mede-organisator van WordCamp Europe en andere lokale WordCamps. Als communicatiedesigner ontwerpt Phillip ook graag logo's, bedrijfsuitrusting en reclamemateriaal, waaronder beursstands.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.