Hoe Ontwerp je een Oogverblindende Homepage Hero (+25 Voorbeelden)

Als je wilt dat nieuwe bezoekers je website blijven bekijken, moet je snel hun aandacht trekken. Zonder boeiende inhoud boven de vouw kunnen gebruikers verveeld raken voordat ze je producten kunnen bekijken of je blogposts kunnen lezen.

Gelukkig kun je een heldenafbeelding gebruiken als het eerste visuele element op je website. Wanneer je unieke lettertypen en een gepolijste lay-out toevoegt aan foto’s van hoge kwaliteit, kun je bezoekers een fantastische eerste indruk geven.

In deze post leggen we uit wat een hero image is en hoe je er een kunt ontwerpen voor je website. Vervolgens laten we je 25 voorbeelden zien om wat inspiratie op te doen. Laten we beginnen!

Wat Is Een Held?

Een hero is een grotere banner die bovenaan een website wordt weergegeven boven de vouw. Dit is het eerste element dat bezoekers boven de vouw zullen zien. Het bevat meestal een foto, video, grafiek of illustratie samen met een uitspraak of CTA om bezoekers onmiddellijk te boeien.

Hero-afbeeldingen zijn een geweldige manier om aandacht te trekken. In de eerste cruciale seconden van het bezoeken van je website willen gebruikers betrokken worden bij hoogwaardig webdesign. Helden kunnen meteen een positieve indruk van je bedrijf of blog achterlaten.

Omdat ze bovenaan de homepage verschijnen, kunnen hero-secties een grote impact hebben op je website. Wanneer correct gebruikt, kunnen ze alles overbrengen wat bezoekers moeten weten over je merk. Dit kan voorkomen dat nieuwe bezoekers meteen te veel informatie krijgen.

In een hero-sectie kun je een call to action (CTA) opnemen om gebruikers te motiveren om een andere pagina op je site te bezoeken. Interactieve heroes kunnen ook carrousels, sliders en andere animaties bevatten. Uiteindelijk streven hero-afbeeldingen ernaar aantrekkelijk, boeiend en in het oog springend te zijn.

Hoe Ontwerp Je Een Opvallende Homepage Hero

Nu je weet wat hero-afbeeldingen zijn, laten we enkele beste praktijken bespreken voor het maken ervan. Op deze manier kun je hero headers ontwerpen die gebruikers naar je website trekken.

1. Vind Hoogwaardige Afbeeldingen

De heldenafbeelding zal het eerste zijn wat bezoekers zien op je homepage, dus je moet een foto van hoge kwaliteit vinden. Als de afbeelding te korrelig is of niet gecomprimeerd voor snel laden, kan dit de gebruikerservaring (UX) op je site schaden.

Om afbeeldingen te vinden, kun je gebruikmaken van stockfoto’s op websites zoals Unsplash. Dit platform biedt gratis foto’s in hoge resolutie zonder auteursrechtbescherming:

Houd er rekening mee dat je ook grafische ontwerpen en video’s kunt gebruiken in plaats van statische foto’s. Dit kan je website helpen zich te onderscheiden van je concurrenten.

Naast stockfoto’s heeft Pexels veel gratis video’s die je kunt bekijken. Net als bij afbeeldingen kun je de grootte aanpassen voordat je ze downloadt:

Voor grafische ontwerpen raden we aan om een flexibele tool zoals Canva te gebruiken. Dit komt met duizenden starttemplates voor hero banners:

Tot slot biedt WordPress vooraf ontworpen kopteksten in zijn Block Pattern Library. Bij het ontwerpen van je homepage kun je gemakkelijk deze volledige breedte hero-secties invoegen. Als je besluit om deze handmatig te creëren, moet je in plaats daarvan HTML-containers gebruiken:

Houd er rekening mee dat als je zoekt naar afbeeldingen, je jouw website branding wilt onthouden. Zelfs als je een foto van hoge kwaliteit vindt, zorg ervoor dat het relevant is voor jouw niche.

Daarnaast, overweeg of je een emotie wilt oproepen, een product wilt promoten, of een ander specifiek doel wilt bereiken. En natuurlijk, als het passend is en je budget het toelaat, kun je overwegen een professionele fotograaf in te huren om afbeeldingen van je producten of diensten te maken.

2. Voeg Overtuigende en Informatieve Tekst Toe

Veel websites bevatten niet alleen een afbeelding in de hero-sectie. Om nieuwe leads te genereren en conversies te behalen, voegen ze vaak een tekstoverlay toe. Door productpromoties en oproepen tot actie te includeren, kan een hero dezelfde doelen bereiken als een landingspagina.

Hoewel je heldentekst moet variëren afhankelijk van je doelen, zijn hier enkele dingen om te overwegen bij het schrijven van je tekst:

• Houd Het Kort: In een hero-sectie wil je lezers niet overladen met informatie.
• Gebruik leesbare lettertypen: Hoewel je misschien een opvallend lettertype wilt gebruiken, zorg ervoor dat het makkelijk te lezen is.
• Denk Aan Je Doelgroep: Het is het beste om te evalueren wat nieuwe bezoekers zoeken op je website en welke klantpersona je target.
• Gebruik Niet Te Veel Modewoorden: Als je advertentie clichés zoals ‘handel snel’ opneemt, kan dit je betrouwbaarheid verminderen en bezoekers wegjagen.

Het is ook een goed idee om een oproep tot actie toe te voegen. Gecombineerd met CTA-knoppen en leadgeneratieformulieren, kun je je hero-afbeelding gebruiken om conversies te verhogen.

3. Optimaliseer Je Hero-Afbeelding

Nadat je de hero-afbeelding die je wilt hebt gedownload, is het een goed idee om deze te optimaliseren voor je website. Net zoals elke afbeelding op je site, moet je deze comprimeren. Anders kan de foto te zwaar zijn en zorgen voor lange laadtijden.

Over het algemeen moeten je afbeeldingen minder dan 1MB zijn. Om ze kleiner te maken zonder kwaliteitsverlies, kun je een afbeeldingscompressietool zoals TinyPNG gebruiken. Dit zal de grootte van je WebP, PNG of JPEG bestand verkleinen met slimme verliesgevende compressie:

Afmeting is een andere belangrijke factor bij het optimaliseren van een hero-afbeelding. Meestal is het het beste als afbeeldingen ten minste 1.200 pixels zijn en een beeldverhouding van 16:9 hebben. Banner hero-afbeeldingen moeten 1600 x 500 pixels zijn, en je kunt tot 1.800 pixels gaan voor grotere schermen.

25 Voorbeelden Van Hoofdpagina Helden Om Je Te Inspireren

Als je nog steeds hulp nodig hebt bij het ontwerpen van je eerste hero-afbeelding, maak je geen zorgen. We hebben enkele van de beste website hero-afbeeldingen samengesteld om je wat inspiratie te geven!

1. Tesla

Wat maakt dit een goede homepage held?

• Tesla’s homepage toont een strakke, professionele hero-afbeelding van zijn Model Y elektrische auto.
• Er zijn duidelijke CTA-knoppen die bezoekers in staat stellen om bestellingen te plaatsen, de voorraad te bekijken of testritten in te plannen.
• Omdat deze homepage hero een minimalistisch ontwerp heeft, overweldigt het bezoekers niet met onnodige informatie.

2. De Betere Vis

Wat maakt dit een goede homepageheld?

• Het heldensectie van Better Fish scheidt de afbeelding van het eten en de hoofdtekst. Dit maakt het zeer gemakkelijk om te lezen.
• De oranje knop trekt de aandacht naar de CTA, die bezoekers vertelt om ‘Barramundi te proberen’.
• Bovendien is de hoofdtekst eenvoudig, maar geeft duidelijk de branding van het bedrijf aan en wat het onderscheidend maakt.

3. Koskela

Wat Maakt Dit Een Goede Homepage Hero?

• Koskela is een innovatief meubelbedrijf, dat wordt uitgedragen met een unieke grafische weergave van verspreide houtstukken.
• Het hero-gedeelte vat de doelen van het bedrijf samen in één zin.
• Hoewel het kleurenschema milder is, is de ‘Shop Nu’ CTA ontworpen in fel geel om de aandacht te trekken.

4. Het Art Institute van Chicago

Wat maakt dit een goede homepageheld?

• In plaats van een statische afbeelding, beschikt deze held over een video die automatisch afspeelt wanneer je de site bezoekt.
• Het Art Institute of Chicago koos ervoor om een specifieke tentoonstelling uit te lichten, wat online gebruikers aanmoedigt om persoonlijk te komen bezoeken.
• Wanneer je op de held klikt, word je doorgestuurd naar een online artikel over de kunsttentoonstelling.

5. Surfrider Foundation

Wat maakt dit een goede homepageheld?

• Surfrider Foundation spreekt tot de emoties van bezoekers, waardoor ze gemotiveerd worden om bij te dragen aan de bescherming van de oceaan.
• Het beeld van iemand die een strand opruimt, zegt alles wat je moet weten over deze stichting.
• Deze website maakt het gemakkelijk om te beginnen met doneren of vrijwilligen.

6. Daily Harvest

Wat maakt dit een goede homepage hero?

• Daily Harvest gebruikt meerdere bijgesneden afbeeldingen die de verscheidenheid aan voedsel laten zien die het bedrijf aanbiedt.
• Lezers kunnen snel begrijpen dat het bedrijf streeft naar biologisch, hoogwaardig en onderhoudsvriendelijk.
• De hoofdkop heeft een eenvoudige boodschap en een gemakkelijk te lezen lettertype.
• In contrast met de zwart-witte achtergrond, benadrukt Daily Harvest zijn kleurrijke voedingsmiddelen.

7. Versed

Wat maakt dit een goede homepageheld?

• Versed promoot zijn producten in een geanimeerde inhoudschuifregelaar. Hiermee worden huidige kortingen, bestsellers en vakantiesets getoond.
• Het zachte, pastelkleurige palet komt overeen met de verpakking van de huidverzorgingsproducten.
• Op elke slider hero pagina zijn er korte oproepen tot actie voor specifieke aanbiedingen.

8. Dromen met Jeff

Wat maakt dit een goede homepageheld?

• Omdat deze website slaaptapes promoot, gebruikt de heldenafbeelding een nachtelijk stadslandschap.
• Je kunt direct beginnen met het luisteren naar het album vanuit de heldensectie.
• Het dunne, hellende lettertype draagt bij aan de enigszins griezelige en duistere sfeer van de hele website.

9. Ditto

Wat maakt dit een goede homepage-held?

• Ditto’s heldenafbeelding toont een heldere en goed ontworpen woonkamer. Dit adverteert op de juiste wijze zijn diensten voor vastgoedontwikkeling.
• Er is een geanimeerde slogan die automatisch verandert van ‘Beter Wonen’ naar ‘Gelukkiger Wonen’ en ‘Gezonder’.
• Bezoekers kunnen direct beginnen met het zoeken naar huur- en koopwoningen.

10. Kindeo

Wat maakt dit een goede homepage hero?

• Kindeo gebruikt korte clips om zijn digitale groepskaarten in actie te tonen.
• Op deze heldenpagina kunnen gebruikers ook de interface van de app zien en hoe makkelijk het is om te gebruiken.
• Er is een goede hoeveelheid witruimte die het heldenbeeld scheidt van de inhoud onder de vouw.

11. Pastini

Wat maakt dit een goede homepage hero?

• Pastini koos ervoor om meerdere pastagerechten te tonen om zijn cateringservices te adverteren.
• De kop ‘Goed nieuws over pasta en wijn’ verwelkomt bezoekers en voegt persoonlijkheid toe aan de website.
• Er is een CTA die gebruikers aanmoedigt om door te scrollen onder de hero afbeelding.

12. Sunshine Caramel Bedrijf

Wat maakt dit een goede homepage hero?

• De hero-sectie van Sunshine Caramel Company heeft een geanimeerde zon die aansluit bij de branding en bedrijfsnaam.
• Er zijn close-up afbeeldingen van de karamels, die de bezoekers de productkwaliteit tonen.
• De CTA-knop is ontworpen met een felgele achtergrond, wat past bij de persoonlijkheid van het bedrijf en de aandacht trekt.

13. The Vault

Wat maakt dit een goede homepageheld?

• De tekst is eenvoudig en duidelijk en beschrijft wat het restaurant maakt en waar het zich bevindt.
• Om zich te onderscheiden van concurrenten, toont de hoofdafbeelding een pizza die in een houtoven wordt gebakken.
• The Vault maakt het gemakkelijk om direct het menu te bekijken of een reservering te maken.

14. RoverPass

Wat maakt dit een goede homepage held?

• In tegenstelling tot andere helden, stelt RoverPass gebruikers in staat om naar RV-parken en campings te zoeken met behulp van een zoekbalk.
• De afbeelding van een pittoreske camping maakt dat bezoekers willen beginnen met reizen.
• RoverPass bevat ook een manier om nabijgelegen campings en RV’s direct vanaf de startpagina te vinden.

15. Zeldzaam Apparaat

Wat maakt dit een goede homepage hero?

• Deze startpagina held bevat een afbeeldingenschuifregelaar die een verscheidenheid aan Rare Device producten toont.
• Net als de rest van de website is de heldenafbeelding gevuld met felle kleuren.
• Elke schuifregelaarpagina heeft CTA-knoppen voor unieke productcollecties.

16. Nomz

Wat maakt dit een goede homepageheld?

• Nomz’s website heeft een hero-video die toont hoe hun biologische snacks worden gegeten. Dit maakt ze aantrekkelijker voor nieuwe bezoekers.
• Er is een tab aan de zijkant van de hero waar gebruikers productbeoordelingen kunnen vinden.
• De CTA leidt gebruikers duidelijk naar het beginnen met winkelen.

17. Detour Koffie

Wat maakt dit een goede homepage-held?

• Zoals veel van de opties in deze lijst, bevat Detour Coffee een automatisch afspelende inhoudsschuifregelaar om meerdere producten te adverteren.
• Elke dia linkt naar productpagina’s voor verschillende koffiesmaken en maandelijkse abonnementsboxen.
• De achtergrondkleuren van de held integreren naadloos met het kleurenschema van de site.

18. Allbirds

Wat maakt dit een goede homepageheld?

• Allbirds gebruikt meerdere afbeeldingen om de held te laten lijken op een collage.
• Er is een eenvoudige en duidelijke oproep tot actie die de huidige seizoen weerspiegelt.
• Bezoekers kunnen snel de winkelpagina’s voor zowel heren- als damesschoenen bereiken.

19. Lunarbot Studio

Wat maakt dit een goede homepage hero?

• Om de webontwerpdiensten te benadrukken, heeft Lunarbot Studio een boeiende grafiek als zijn hero gemaakt.
• Het hoofdlettertype is futuristisch, wat goed past bij het doel van het bedrijf.
• Je krijgt ook een korte samenvatting van het bedrijf, wat het doet en waar het gevestigd is.

20. Heco

Wat maakt dit een goede homepage held?

• Heco’s held heeft een rollende animatie die direct de aandacht trekt wanneer je de website opent.
• Er wordt veel witruimte gebruikt om de hoofdtekst van de held te benadrukken.
• De neerwaartse pijl moedigt bezoekers aan om door te blijven scrollen op de homepage.

21. Charbonnel Towns

Wat maakt dit een goede homepageheld?

• Nieuwe bezoekers kunnen een video bekijken die de moderne stadswoningen van Charbonnel artistiek weergeeft.
• Het bedrijf benadrukt dat er nog maar enkele woningen beschikbaar zijn, dus bezoekers moeten zich zo snel mogelijk registreren.
• Met een verticale witte zijbalk weerspiegelt de held de stijlvolle en moderne uitstraling van het bedrijf.

22. Campos Coffee

Wat maakt dit een goede homepage-held?

• De slogan ‘Day made’ is een eenvoudige manier om bezoekers te vertellen over zijn hoogwaardige koffie.
• Campos Coffee laat potentiële klanten precies zien wat ze kunnen kopen van zijn online winkel.
• Dezelfde schaduw van groen wordt gebruikt voor de productverpakking, bedrijfslogo en CTA-knoppen.

23. Roeisteiger

Wat maakt dit een goede homepageheld?

• In een paar woorden legt het bedrijf uit waar Rowing Dock zich bevindt en wat het aanbiedt.
• Deze held heeft een video waarin een verscheidenheid aan mensen te zien is die gebruik maken van de kajakverhuurservice.
• Door stellen, gezinnen en huisdieren in de video op te nemen, laat Rowing Dock zien dat het ervaringen biedt voor iedereen.

24. Moss Botanicals

Wat Maakt Dit Een Goede Homepage Held?

• Met bloemige beelden vangt deze held prachtig de essentie van Moss Botanicals parfum.
• Ondanks dat er niet veel tekst is, begrijpen bezoekers snel wat het bedrijf verkoopt.
• De donkere achtergrond van de held contrasteert goed met de witte tekst en actieknop.

25. Seastreak

Wat maakt dit een goede homepageheld?

• Seastreak’s hero spreekt perfect aan bij zijn doelgroep, die iedereen is die op zoek is naar een luxe veerboottocht.
• De slogan ‘De meest beschaafde manier om er te komen’ roept een gevoel van luxe op.
• Bovendien speelt de hero automatisch video’s af die enkele van Seastreak’s boten en bezochte bezienswaardigheden tonen.

Ontwerp Aantrekkelijke Bovenaan-de-vouw Visuals

Het ontwerp van je homepage kan je website maken of breken. Door een goed ontworpen hero-image toe te voegen, kun je onmiddellijk de aandacht van je bezoekers grijpen en ze op je site houden. Dit kan uiteindelijk de conversies verhogen en je bounce rate verlagen.

Om te herzien, hier zijn enkele manieren om een opvallende hoofdpagina held te ontwerpen:

1. Zoek afbeeldingen van hoge kwaliteit.
2. Voeg overtuigende en informatieve tekst toe.
3. Comprimeer je hero-afbeeldingen met TinyPNG.

Omdat een slecht webontwerp kan leiden tot een slechte indruk, wil je het misschien overlaten aan de professionals. Door gebruik te maken van de op maat gemaakte webdesign diensten van DreamHost, kun je een 100% unieke website ontvangen met een in het oog springende hero-afbeelding!