Soms zijn het de kleine dingen die je website kunnen maken of breken. Denk hierbij aan je navigatie, de indeling van een homepagina, je portfolio of je contactformulieren. In deze maandelijkse rubriek, Design Patterns (ontwerppatronen), knip ik je complete website op en ga ik met de kleinere en vaak vergeten onderdelen aan de slag. Vandaag gaan we het hebben over het De “Hero” en oh, oh, oh, wat is dit een belangrijk onderdeel van je site.

Wat zijn ontwerppatronen of Design Patterns eigenijk?

In wezen zijn patronen structurele en gedragskenmerken die de “bewoonbaarheid” verbeteren Van iets – een gebruikersinterface,
een website, een objectgericht programma of een gebouw.
Ze maken dingen gemakkelijker te begrijpen of mooier; ze maken hulpmiddelen nuttiger en bruikbaar.
– Jenifer Tidwell

Het zijn bewezen patronen die je kunt gebruiken om bijvoorbeeld je website gemakkelijker en begrijpelijker te maken. Het zijn bepaalde “regels” om de bezoeker van je website te helpen bij een bepaald proces. Denk bijvoorbeeld aan de hierarchie van een webshop of de logische indeling en werking van een navigatie. Zo ook de Hero. En in deze blog vertel ik je hoe je dit kunt inzetten om je bezoeker naar binnen te trekken.

Wat is een Hero?

Wat is dat nou, een “Hero”? Een Hero is de grote foto bovenaan je website. Dat is het stuk wat je bezoekers als eerste zien en dat is ook het gedeelte waar je meteen je bezoeker moet raken. Voorheen waren dit “sliders”. Een soort slideshow van grote foto’s met iedere keer een andere tekst, dat automatisch zichzelf verwisseld. Maar het blijkt dat de waarde van een slider flink is gezakt. Men wacht niet meer op het veranderen van een foto en scrollt liever meteen door. Dat betekent dat het dus geen zin heeft om meerdere foto’s hier te plaatsen.

Daarnaast kan een slider een groter probleem geven, namelijk de laadtijd van je website. Hoe meer foto’s en hoe groter deze zijn, hoe langzamer je website laadt. Daar is een aantal jaar geleden iets anders voor in de plaats gekomen: de “hero”.

De hero is 1 grote foto (“de held” van het scherm) waarin een korte en krachtige tekst of call-to-action (een actie) is geplaatst. Met die zeer korte tekst, ga je de websitebezoekers overtuigen meer te willen lezen. Hij moet dus spot-on zijn.

Hoe ziet een Hero er uit?

We zien vaak, wanneer we een website bezoeken, dat er een grote foto bovenaan staat, net onder het menu. Deze foto is over de gehele breedte van het scherm te zien en het komt vaak voor dat hij het hele scherm inneemt van boven tot onder. Het is niet alleen een eyecatcher, het is ook de eerste indruk die je aan je bezoekers geeft.

Kies daarom een goede foto. Het liefst van jezelf en het liefst ook nog kijkend (lachend/vriendelijk) in de richting van de bezoeker óf in de richting van de tekst/call-to-action. Gezichten maken het vriendelijker en een lach kan veel losmaken. We voelen ons meteen gezien (bijna letterlijk). Heb je een heel goede tekst staan of een interessante call-to-action? Dan is het interessant om een foto te kiezen waarbij je naar de tekst kijkt. Dat helpt namelijk om je bezoeker ook die richting op te laten kijken en die call-to-action beter te laten opvallen.

Zorg voor een duidelijk contrast voor de tekst in combinatie met een foto. Tekst is soms lastig te lezen op een foto omdat er meerdere kleuren of lichtinvallen in zitten. Zorg er dus voor dat je tekst leesbaar is. Gebruik daarnaast een super opvallende kleur voor bijvoorbeeld een knop. Denk ook heel goed na over wat je er in zet, de tekst, welke foto, welke kleur etc. Alles moet goed uitgedacht worden. Oh, en vergeet de mobiele versie niet! Ook heel belangrijk dat de hero daar goed werkt.

Hoe doe ik dit?

De meeste templates van WordPress, Joomla, Squarespace, hebben deze functie standaard verwerkt. Is dat nou niet het geval? Dan kun je kijken voor een plugin. Neem bijvoorbeeld de Slider Revolution. Ja, dit is een betaalde plugin. Ik gebruik deze versie ook voor in mijn eigen blog. Deze plugin is zo uitgebreid, dat je er van alles mee kunt doen. Zeker een aanrader.

Het makkelijkst is natuurlijk om gewoon te gaan Googlen of een template te kiezen die deze functie al standaard heeft.

Gebruik je Divi? Gebruik dan de module van Divi, ook hier zitten veel mogelijkheden bij. Check vooral even hun blog hierover.

Het kan ook anders

Wil je iets minder “standaard”  dan gewoon een foto. Speel dan eens met de ruimte die je hebt. Knip jezelf los en speel met lagen (als je handig bent in Photoshop). Speel ook eens met achtergrondkleuren. Of gebruik i.p.v. een grote foto een grafsich beeld van patronen bijvoorbeeld. Wat je ook doet, houd er rekening mee dat je er wel goed over nadenkt wat je wilt doen. Wat wil je uitstralen? Hoe moeten jouw website bezoekers zich voelen als ze jouw website zien? Is het meteen duidelijk in dat eerste beeld wat je doet? Is dit in lijn met de rest van je website?

Dit zijn vragen die je jezelf moet stellen als je je website gaat maken. Maar de hero is zo belangrijk omdat dit het eerste is wat je bezoeker ziet. Het moet dus in een oogopslag duidelijk zijn wat je doet, wie je bent en eventueel waarom men verder moet kijken op de site (zet dit niet letterlijk neer). Het is dus een zeer doordacht onderdeel van je site.

Een paar voorbeelden

Om je een beetje een gevoel te geven hoe het allemaal er uit ziet of er uit kán zien. Deel ik hieronder mijn Pinterest bord vol inspiratie:

Meer tips?

Wil je meer tips ontvangen over websites en personal branding? Volg mij dan op Facebook en schrijf je ook in voor mijn nieuwe maandelijkse nieuwsbrief PreCision to Inspire.

[mailerlite_form form_id=8]

Op de hoogte blijven van alles rondom mij en Cprecision? Vind mij hier: