Heldenafbeeldingen zijn wat webmakers vaak gebruiken om bezoekers van hun website in een aantrekkelijk formaat te begroeten.
Als je je ooit hebt afgevraagd " wat is een heldenbeeld? ", U bent op de juiste plaats. In dit artikel zullen we kijken naar het onderwerp en hoe je prachtige heldenafbeeldingen kunt maken met krachtige visuele effecten.
Een heldenafbeelding is de term die door webmakers wordt gebruikt om de extra grote inhoud boven aan een webpagina te beschrijven.
De rol van een heldenbeeld is om uw bezoeker te verwelkomen zodra ze uw bedrijf of bedrijf ontmoeten organisatie. De overvloed aan typen heldenafbeeldingen in de toolkit voor het maken van websites biedt zoveel redenen om een heldenafbeelding in uw website op te nemen.
Laten we de belangrijkste voordelen hiervan begrijpen, en waarom?
Wat is een heldenbeeld?
Hero-afbeeldingen omarmen de deugd van een "goede eerste indruk" en hebben doorgaans een of meer van de volgende kenmerken:
- Een afbeelding van hoge kwaliteit
- Een boeiende video
- Een afbeeldingsschuifregelaar of een multimedia carrousel
- Geanimeerde of statische afbeelding
- Kopteksten en beschrijvingen naast of voor visuele inhoud
Op het gebied van styling zijn veelvoorkomende ontwerpdetails die worden toegepast op heldafbeeldingen:
- Achtergrondafbeeldingen of video's met achtergrondoverlays
- Vaste of plakkerige positionering
- Aanwijzen beïnvloedt de verandering in transparantie of overlay
- Contrastelementen die de afbeelding onderscheiden van de kop erboven of de daaropvolgende inhoud
De nieuwigheid van heldenafbeeldingen in webdesign is dat je aan de ene kant werkt met een zeer specifieke en gedefinieerde ruimte op de webpagina. Aan de andere kant zijn de keuzes van stijl, effecten en technieken die u kunt gebruiken bij het ontwerpen van dit deel van uw pagina-inhoud absoluut eindeloos.
Waarom zou je een heldenafbeelding gebruiken?
Wanneer het ontwerp en de functionaliteit van uw heldenafbeelding van een hoog kaliber zijn, bereikt u automatisch de geloofwaardigheid en het vertrouwen van de gebruiker. Je heldenimago en de omringende heldeninhoud zijn vaak je eerste kans om het unieke verkoopargument van je verhaal door te geven organisatie en het belangrijkste aanspreekpunt van de gebruiker voor de conversie.
Wanneer u bepaald gebruikersgedrag wilt triggeren, is een eersteklas, krachtig heldenimago dat een sterke eerste indruk op uw bezoekers maakt de beste manier om te beginnen.
U kunt een blijvende eerste indruk maken
Eerste indrukken zijn van belang op veel gebieden van het leven, maar vooral als het gaat om hoe gebruikers zich verhouden tot de esthetiek van een website.
De resultaten van experts in mens-machine-interactie (HCI) en visualisatie bij Google Research getuigen van de invloed van heldenafbeeldingen op het succes van een website:
Deze studie, " De rol van visuele complexiteit en prototypicaliteit in de eerste indrukken van een website : werken aan het begrijpen van esthetische oordelen ”, Onderzoekt hoe visuele complexiteit en prototypicaliteit het ontwerp van een website en de eerste indrukken van zijn gebruikers beïnvloeden.
De auteurs toonden 119 daadwerkelijke screenshots van de website aan hun studiedeelnemers en ontdekten dat visuele complexiteit en prototypicaliteit de esthetische perceptie van de gebruiker beïnvloeden in de eerste 50 afbeeldingen van de tentoonstelling, en soms zelfs binnen 17 ms.
Als webmakers is onze conclusie vrij eenvoudig: de heldenafbeelding die we kiezen en de manier waarop we deze op onze pagina presenteren, heeft een grote invloed op het sentiment en het gedrag van gebruikers.
Je haalt het meeste uit je inhoud boven de vouw
Het gedeelte 'boven de vouw' van een webpagina kan in eenvoudige bewoordingen worden gedefinieerd: inhoud die uw scherm vult / verschijnt boven de onderrand van het webbrowservenster nadat uw pagina is geladen. Als de inhoud moet worden geschoven om te worden gezien, betekent dit dat deze zich "onder de vouw" bevindt.
Het concept van "boven de vouw" vindt zijn oorsprong in printontwerp en publicatie, lang voor het tijdperk van digitale media. We weten allemaal hoe het is om meteen iets op te merken op de bovenste helft van een eerste pagina, en het is zelfs veilig om te zeggen dat de inhoud op de eerste pagina ons vaak doet beslissen of we een krant kopen of niet. bij een kiosk.
Dit is precies waarom uw inhoud boven de vouw een grote dealbreaker kan zijn in het succes van uw website.
Wat bedoelen we?
Als een websitebezoeker in de war raakt door uw inhoud en afbeeldingen boven de vouw, zullen ze uw website snel verlaten. Als het imago van je held en zijn omgeving boven de plooi duidelijk, boeiend en goed representatief zijn voor je waardepropositie, zal hij meer geneigd zijn om te blijven hangen.
Uiteindelijk, hoe meer u investeert in het imago en de inhoud van uw heldensectie, hoe kleiner de kans dat gebruikers snel zullen vertrekken.
Vergeet Responsive Design niet
Houd er rekening mee dat de locatie van een schermbocht subjectief is voor de schermgrootte van het apparaat. Dit is een belangrijke overweging bij responsief ontwerp, aangezien de inhoud van de vouw moet worden aangepast en geconfigureerd op een manier die van toepassing is op meerdere apparaatformaten.
Webontwerpers en ontwikkelaars gebruiken vaak apparaatspecifieke breekpunten om deze responsiviteit te garanderen. Dit geeft u volledige controle over het aanpassingsvermogen van uw website-ontwerp aan relevante schermformaten en vermijdt het aangetaste uiterlijk of de impact van uw heldenimago.
Formuleer uw waardepropositie zonder overdaad aan informatie
Misschien ken je het begrip "informatie overloadIn website-ontwerp en de gebruikerservaring : We willen voorkomen dat we te veel inhoud gebruiken, vooral geschreven inhoud, wanneer we ons merk en onze zakelijke waarde vertegenwoordigen.
In die zin zegt het gebruik van een afbeelding, illustratie of video meer dan 1 woorden. Door effectieve branding-afbeeldingen te verfijnen, wordt uw hele verhaal in één visueel medium vastgelegd. In plaats van je verhaal en merkpropositie onder woorden te brengen, kun je de cognitieve belasting van je gebruiker op een eenvoudige en gebruiksvriendelijke manier verlichten.
De bovenstaande schermafbeelding is afkomstig van Millbrook-constructie, een in Perth gevestigd bouwbedrijf dat gespecialiseerd is in "woningbouw met hoogwaardige afwerkingen en aandacht voor detail". Voor hun Elementor-website maakt de heldafbeelding op de startpagina perfect gebruik van de "boven de vouw" -interface. De opvallende, scherpe foto van een gelukkig modern huis en buitenzwembad zorgt voor een positieve, ontspannen sfeer.
Als we nog een stap verder gaan, geven de stijlkeuzes van de achtergrondafbeelding op volledige hoogte en de grootte van een 'deken' aan dat het bedrijf een robuust talent heeft voor het creëren van luxueuze woningen. De waardepropositie is zo duidelijk als zwembadwater en gebruikers nemen comfortabel alle benodigde informatie op.
Je heldenafbeeldingen kunnen helpen om leads te converteren
Aantrekkelijke en zichtbare touchpoints zijn een basisingrediënt voor een conversie-reproductie gebruikersstroom. Dit is de reden waarom de relatie tussen de oproep tot actie van de heldensectie en uw heldenafbeelding zelf uw website-bouwdoelen kan maken of breken.
Laat uw CTA-teksten zeggen " Inscrivez-vous maintenant "," Meer informatie "," Contact », enz., uw heldenimago moet op alle fronten transparant worden gecoördineerd: zichtbaarheid, berichtgeving, kleurenschema, uiterlijk, enz.
Geloofwaardige en effectieve gesprekken met potentiële klanten zijn gebaseerd op een comfortabele en natuurlijke sfeer; visueel aantrekkelijke beelden is de beste manier om dit te bereiken.
Dit is precies wat we zien op de Elementor-website gemaakt door STL-karikatuur, een team van cartoonachtige artiesten die entertainmentdiensten voor evenementen bieden. De geanimeerde titel (heldentekst) toont de tevreden klanten in hun heldenafbeeldingen en laat zien wat de tekenfilmartiesten voor elke persoon bieden.
Dus, als je eenmaal je mouwen hebt opgestroopt en bent begonnen met de praktische zaken, wat komt er kijken bij het beslissen welk type heldenafbeelding moet worden gebruikt?
Laten we eens kijken naar de vier verschillende soorten heldenafbeeldingen en hoe u kunt beoordelen welke het beste is voor uw website.
# 1 Productheld afbeelding
Een product hero afbeelding is een grote hoge afbeelding definitie van het product van het merk. Deze afbeeldingen kunnen statisch of in beweging/in actie worden gepresenteerd, zolang ze het mogelijk maken om de waardepropositie van het product te visualiseren.
Populaire manieren onder webontwerpers om hun productheldafbeeldingen te laten zien en te personaliseren, kunnen zijn:
- Een gedetailleerd / snapshot-voorbeeld van een individueel product, zoals we hierboven zien op de website van het bedrijf Australisch abonnement avo lover.
- Screenshot van een digitale productinterface, zoals een dashboard.
Afbeeldingen van producthelden zijn meestal te vinden op de websites vane-Commerce (maar niet uitsluitend). Potentiële kopers verwachten voorbeelden van daadwerkelijke producten te zien, ter ondersteuning van weloverwogen besluitvorming over de geschiktheid van de winkel voor hun winkelbehoeften.
Avo lover gebruikte Elementor om hun e-commerce website te maken, die hun klanten gebruiken om wekelijkse abonnementen te kopen van verse avocado's die aan hun deur worden bezorgd.
Het klantenbestand van Avo lover is een nichemarkt in een nauw gedefinieerd interessegebied, dus hun keuze voor het imago van een productheld is volkomen logisch. Potentiële abonnees zijn avocado-enthousiastelingen; het zien van een close-up en ingewikkelde foto van de producten is precies wat ze willen zien.
Beste praktijken:
- Investeer in de kwaliteit van achtergrondafbeeldingen
Of uw achtergrondafbeelding nu een foto, video, illustratie, enz. is, het afbeeldingsbestand moet zo licht mogelijk zijn, met een kristalheldere resolutie.
- Let op contrastniveaus
Als je tekst toevoegt voor de afbeelding van je heldensectie (of welk onderdeel dan ook), zorg er dan voor dat het contrast tussen de website-elementen sterk en gemakkelijk te zien is. Dit is waar achtergrondoverlays en filtereffecten uiterst nuttig kunnen zijn.
#2 Afbeelding van de held van de klant
Het volgende type heldenbeeld dat door online bedrijven wordt gebruikt, gebruikt een alternatieve benadering om hun toegevoegde waarde te laten zien: laten zien dat hun klant het product gebruikt. Dit perspectief is een strategische manier om je in te leven in je bezoekers, en bondig aan te tonen dat je hun pijnpunt begrijpt en aan hun behoeften kunt voldoen.
De bovenstaande videoclip is afkomstig van de Elementor-site gemaakt door Alexander Visser, een op Stuggart gebaseerde personal trainer die een scala aan gezondheids- en fitnessgerelateerde diensten biedt.
Het imago van de klantheld van Alexander laat meer zien dan een tevreden klant die geniet van een gezonde en fitte levensstijl. Het heldenbeeld gaat nog een stap verder door een video te tonen waarin zijn klantbinding en contact met dierbaren te zien is.
Beste praktijken:
- Deel uw gebruiksscenario's en klantervaringen
Onderscheid uw product door de meest dominante use case te laten zien. Een afbeelding die uw zakelijke doelen en waarde weergeeft, laat zien hoe de bezoeker zal profiteren van uw unieke aanbod.
- Sluit aan bij je doelgroep
Zorg ervoor dat er rekening wordt gehouden met uw doelgroep bij het selecteren van het type persoon dat in uw afbeelding moet worden weergegeven. Kies een afbeelding die uw begrip van het vakgebied en uw vermogen om uw klanten te verrassen overbrengt.
#3 Afbeelding van de grondlegger
Een oprichtende heldafbeelding is een grote afbeelding van de oprichter van de bedrijfseigenaar, geplaatst in het heldengedeelte om de websitebezoeker te begroeten.
Oprichtende heldenafbeeldingen worden vaak gebruikt in portfoliowebsites voor freelancers, bedrijfseigenaren zoals een psycholoog, visagist of muzikant, zoals weergegeven op de Elementor-website door Jasmine Cain hierboven.
De grootste deugd van het beeld van een grondlegger van een held is dat het een gezicht aan een naam geeft; het verbindt de websitebezoeker met de serviceprovider en creëert een aangename dynamiek tussen de twee individuen.
De keuze van afbeeldingen voor uw oprichtende heldenafbeelding moet met zorg worden behandeld. Met tal van opties om uit te kiezen, wat neerkomt op:
wat zal de boodschap van uw merk op de sterkst mogelijke manier overbrengen?
Is dit een foto van de oprichter die recht in de camera kijkt en glimlacht, of misschien in een andere richting kijkt?
Of zou een openhartige foto van de hardwerkende ondernemer beter passen?
Beste praktijken:
- Let op maatvoering en afmetingen
Gebruik een duidelijke afbeelding (of video) van goed formaat die bezoekers de exacte details laat zien die ze moeten zien. Indien nodig kunt u zich concentreren op grotere delen van uw afbeeldingen door ze bij te snijden en minder belangrijke inhoud te verwijderen.
- Focus op wat uw afbeelding moet uitstralen
De rol van de achtergrond zou moeten zijn om te focussen op de persoon ervoor, niet andersom. De meest impactvolle afbeeldingen van de grondleggers laten de glimlachende bedrijfseigenaar zien, wat zijn passie impliceert om klanten tevreden te houden.
# 4 Niet-contextuele heldenafbeelding
Niet-contextuele heldenafbeeldingen zijn, zoals de naam al doet vermoeden, sequenties die iets weergeven dat schijnbaar 'niet gerelateerd' is aan de eigenaar van het product of bedrijf. Het doel van een niet-contextueel heldenbeeld is om indruk te maken op de bezoeker door middel van visuele associatie of een subliminale boodschap. Het bekijken van de niet-contextuele afbeelding laat de gebruiker zien wat het product of merk is, maar op een indirecte manier.
Deze techniek wordt bijvoorbeeld gebruikt in het bovenstaande voorbeeld van de website van Elementor, gebouwd door het digitale marketingbedrijf AP-technologie, gevestigd in Oklahoma. De website van het bedrijf gebruikt een brede, duidelijke achtergrondafbeelding die een unieke hoek van de wolkenkrabbers van Oklahoma City laat zien.
Deze foto vertegenwoordigt de waardepropositie van het bedrijf, zoals vermeld in de heldentekst van de website: Bouw je bedrijf op en zie het groeien, zo hoog als de hoogste kantoortorens in de stad.
Zodra het menselijk oog de fysieke structuren ziet die de lucht domineren, begrijpt het dat deze marketingprofessionals eraan werken om bedrijven van de grond te krijgen, naar de hoogte.
Beste praktijken:
- Zorg ervoor dat bezoekers begrijpen waarom de afbeelding relevant is
Hoewel u geen direct beeld van uw product zelf weergeeft, moet u ervoor zorgen dat het koppelen van de waarde van uw product aan uw niet-contextuele heldenafbeelding nog steeds gemakkelijk te identificeren is. Gebruikers zouden geen tijd moeten besteden aan het nadenken over de relevantie ervan.
- Maak een duidelijke link tussen de afbeelding van de held en de tekst van de held
De heldentekst die u in combinatie met uw afbeelding plaatst, moet rechtstreeks verband houden met de visuele inhoud. Het is een noodzaak, ook al vereist het meerdere iteraties van uw tekst en de keuze van de formulering.
- Maak een samenhangend ontwerpschema
De kleuren die u kiest voor knopteksten en achtergronden, kopteksten of beschrijvingen moeten overeenkomen met de afbeelding of het artwork van de held. Dit geldt ook voor klikbare accenten op je website:
de elementen van het navigatiemenu, het logo, enz...
We weten allemaal hoe belangrijk een consistente beeldtaal is voor het prestige, de merkaanwezigheid en de professionele geloofwaardigheid van onze website. Dit is waar ontwerpstijlgidsen erg nuttig kunnen zijn, vooral om ervoor te zorgen dat uw heldafbeeldingen zijn uitgelijnd met uw website-ontwerp.
Hoe u uw heldenimago kunt testen: de methoden die we leuk vinden
Als je eenmaal begint te experimenteren met verschillende opties voor je heldenimago, kun je direct beoordelen welke optie de meeste betrokkenheid genereert en inzicht krijgen in het meest effectieve ontwerp - en daar uiteindelijk bij blijven.
Hier zijn enkele onmisbare testmethoden die eenvoudig zijn in te stellen en een schat aan kennis bieden om ervoor te zorgen dat u de best mogelijke heldafbeelding gebruikt.
A / B Test je heldenafbeelding
Bij A/B-testen moet de ontwerper twee of meer opties maken voor de hero-sectie (of het nu gaat om twee versies van de titels en hun kopie, de hero-afbeelding zelf, de lay-outsectie, lettertypegrootte of wat je maar kunt bedenken) - het is helemaal aan jou.
Stel je voor dat je besluit een overvloeimodus te gebruiken wanneer gebruikers de muisaanwijzer op je heldafbeelding plaatsen, maar je weet niet welke modus de gebruikerservaring het meest zal verbeteren.
Voer een A / B-test tussen twee verschillende modusopties (er zijn tenslotte 13 overvloeimodusopties), kunt u meer dan één modus proberen om te zien welke de meeste zweefbewegingen, klikken en uiteindelijk meer betrokkenheid krijgt.
Een van de meest voorkomende en belangrijke stappen bij het A/B-testen van je heldensectie is om ook ten minste twee CTA-knopopties te testen - om te bepalen welke knop de meeste conversies genereert.
Met name het testen van de kleur van een CTA-knop is altijd een nuttige ervaring waarmee u kunt begrijpen welke knopkleur gebruikers het meest aantrekt en aanspreekt. Knopkleur A/B-testen is erg populair onder webdesigners omdat het snel en gemakkelijk uit te voeren is en er nauwelijks extra ontwerpbronnen nodig zijn.
Gebruik heatmap-tools om gebruikersgedrag te ontdekken
Heatmap-tools identificeren en analyseren de plaatsen waar gebruikers op een webpagina klikken. Met deze tools kunnen eigenaren van websites en bestemmingspagina's precies zien hoe gebruikers actief door inhoud navigeren. Dit wordt bereikt zodra de tool identificeert of gebruikers al dan niet interactie hebben met belangrijke elementen (en hoe), zoals links, knoppen, opties en natuurlijk CTA's.
Hier is wat informatie die website-eigenaren kunnen halen uit het gebruik van heatmap-tools:
- Niet-klikbare items leiden gebruikers af.
- Knopgroottes zijn te groot of te klein.
- De kleuren van de knoppen zijn niet zichtbaar.
Wees de held van je website
Websitetrends evolueren voortdurend en voegen nieuwe functies toe aan webdesignmogelijkheden. Het is altijd belangrijk om uw heldensectie in de voorhoede van uw ontwerpoverwegingen te houden - en ervoor te zorgen dat deze altijd zijn potentieel bereikt bij het presenteren van uw website aan de menigte.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat was het voor dit artikel dat je laat zien hoe je een heldenafbeelding maakt. Als u zich zorgen maakt over hoe er te komen flaat het ons weten in de commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
