Heltebilleder er, hvad webskabere ofte bruger til at hilse besøgende på deres hjemmeside i et attraktivt format.
Hvis du nogensinde har spekuleret på " hvad er et heltbillede? ", Du er på det rette sted. I denne artikel vil vi se på emnet, og hvordan du kan skabe smukke heltebilleder med kraftige visuelle effekter.
Et heltbillede er det udtryk, der bruges af webskabere til at beskrive det store indhold øverst på en webside.
Et heltebilledes rolle er at byde din besøgende velkommen, så snart de møder din virksomhed eller organisation. Overfloden af heltebilledtyper i webforfatterværktøjssættet giver så mange grunde til at inkludere et heltebillede på dit websted.
Lad os forstå de største fordele ved at gøre dette, og hvorfor?
Hvad er et heltbillede?
Ved at omfavne dyden af et "godt første indtryk" har heltebilleder typisk en eller flere af følgende egenskaber:
- Et højkvalitetsbillede
- En fængslende video
- En billedskyder eller en multimediekarrusel
- Animeret eller statisk illustration
- Overskrifter og beskrivelser ved siden af eller foran det visuelle indhold
Med hensyn til stil inkluderer almindelige designdetaljer, der vises anvendt på heltebilleder:
- Baggrundsbilleder eller videoer med baggrundsoverlejringer
- Fast eller klæbrig positionering
- Pege påvirker ændringen i gennemsigtighed eller overlay
- Elementer af kontrast, der adskiller billedet fra overskriften over eller efterfølgende indhold
Nyheden ved heltebilleder i webdesign er, at du på den ene side arbejder med et meget specifikt og defineret rum på websiden. På den anden side er valg af stil, effekter og teknikker, der skal bruges til at designe denne del af dit sideindhold, absolut uendelige.
Hvorfor skal du bruge et heltbillede?
Når designet og funktionaliteten af dit heltebillede har en høj kaliber, opnår du automatisk brugernes troværdighed og tillid. Dit heltebillede og dets omgivende helteindhold repræsenterer ofte din første mulighed for at videregive dit unikke salgsargument organisation og det primære brugerkontaktpunkt for konverteringen.
Når man ønsker at udløse bestemte brugeradfærd, er det bedste, stærke heltbillede, der giver et stærkt første indtryk på dine besøgende, den bedste måde at starte på.
Du kan lave et varigt første indtryk
Førstehåndsindtryk betyder noget på mange områder af livet, men især når det kommer til, hvordan brugerne forholder sig til websides æstetik.
Resultaterne af eksperter i interaktion mellem mennesker og mennesker (HCI) og visualisering ved Google Research vidner om indflydelse af heltebilleder på succesen af et websted:
Dette studie, " Rollen som visuel kompleksitet og prototypikalitet i hjemmesidens første indtryk : arbejde på at forstå æstetiske vurderinger ”, Undersøger hvordan visuel kompleksitet og prototypikalitet påvirker design af et websted og de første indtryk af dets brugere.
Forfatterne viste 119 faktiske skærmbilleder fra webstedet til deres undersøgelsesdeltagere og fandt ud af, at visuel kompleksitet og prototypicalitet påvirker brugerens æstetiske opfattelse i de første 50 billeder af udstillingen, og nogle gange endda inden for 17 ms.
Som webskabere er vores konklusion ret enkel: Heltbilledet, vi vælger, og den måde, vi præsenterer det på vores side på, påvirker brugerstemning og adfærd på en større måde.
Du får mest muligt ud af dit indhold over folden
Afsnittet "over folden" på en webside kan defineres i enkle termer: indhold, der fylder din skærm / vises over den nederste kant af webbrowservinduet, når din side er indlæst. Hvis indholdet kræver rulning for at blive set, betyder det, at det er placeret "under folden".
Begrebet "over folden" stammer fra printdesign og udgivelse længe før de digitale mediers æra. Vi ved alle, hvordan det er at straks bemærke noget på den øverste halvdel af en første side, og det er endda sikkert at sige, at indholdet på den første side ofte er, hvad der får os til at beslutte, om vi vil købe eller ikke. på en aviskiosk.
Dette er præcis, hvorfor dit indhold over folden kan være en vigtig deal breaker i dit websteds succes.
Hvad mener vi?
Hvis en besøgende på webstedet er forvirret af dit indhold og dine billeder over folden, forlader de hurtigt dit websted. Hvis dit heltebillede og hans miljø over folden er klare, engagerende og godt repræsentative for dit værdiforslag, vil han være mere tilbøjelig til at holde fast.
I sidste ende, jo mere du investerer i billedet og indholdet af din heltesektion, desto mindre sandsynligt er brugerne at foretage en hurtig exit.
Glem ikke Responsive Design
Husk, at placeringen af en skærmbøjning er subjektiv for enhedens skærmstørrelse. Dette er en vigtig overvejelse i responsivt design, da foldindholdet ovenfor skal tilpasses og konfigureres på en måde, der gælder for flere enhedsstørrelser.
Webdesignere og udviklere bruger ofte enhedsspecifikke breakpoints for at garantere denne lydhørhed. Dette giver dig fuld kontrol over tilpasningsevnen af dit webstedsdesign til relevante skærmstørrelser og undgår det kompromitterede udseende eller virkningen af dit heltebillede.
Angiv dit værdiforslag uden overbelastning af oplysninger
Du er måske bekendt med begrebet "for megen informationI webstedsdesign og brugeroplevelsen : Vi vil undgå at bruge for meget indhold, især skriftligt indhold, når vi repræsenterer vores brand og vores forretningsværdi.
I denne forstand er brugen af et billede, en illustration eller en video værd 1 ord. Finjustering af effektive branding-billeder optager hele din historie i et visuelt medium. I stedet for at tale din historie og dit branding-forslag, kan du muligvis lette den kognitive belastning på din bruger på en enkel og brugervenlig måde.
Skærmbilledet ovenfor er taget fra Millbrook Construction, et Perth-baseret byggefirma med speciale i "boligbyggeri med avancerede finish og opmærksomhed på detaljer". Til deres Elementor-websted gør heltebilledet på hjemmesiden perfekt brug af dets "over fold" -grænsefladen. Det iøjnefaldende, skarpe fotografi af et lykkeligt moderne hjem og en udendørs pool giver positive, afslappende vibes.
Ved at tage det et skridt videre indikerer stilvalgene af baggrundsbilledet i fuld højde og størrelsen på et 'tæppe' firmaets robuste evne til at skabe luksuriøse boligejendomme. Værdipropositionen er lige så klar som vand i swimmingpoolen, og brugerne absorberer komfortabelt alle de nødvendige oplysninger.
Dine heltebilleder kan hjælpe med at konvertere kundeemner
Attraktive og synlige berøringspunkter er en grundlæggende ingrediens i en brugerflow for konvertering-reproduktion. Dette er grunden til, at forholdet mellem heltesektionens opfordring til handling og dit heltbillede i sig selv kan skabe eller bryde dit websteds byggemål.
Lad dine CTA-tekster sige " Inscrivez-vous vedligeholdelse "" Læs mere "" Kontakt os »Osv. Skal dit heltebillede koordineres gennemsigtigt på alle fronter: synlighed, beskeder, farveskema, udseende osv.
Troværdige og effektive samtaler med potentielle kunder er baseret på en behagelig og naturlig atmosfære; visuelt tiltalende billeder er den bedste måde at opnå dette på.
Dette er præcis, hvad vi ser på Elementor-webstedet oprettet af STL-karikatur, et team af tegneserie-kunstnere, der leverer underholdningstjenester til begivenheder. Den animerede titel (heltetekst) skildrer de glade kunder i deres heltebilleder og viser, hvad tegneseriekunstnerne leverer til hver person.
Så når du først har rullet ærmerne op og er begyndt at komme ind i det praktiske, hvad går der i processen med at beslutte, hvilken type heltebillede der skal bruges?
Lad os undersøge de fire forskellige typer heltebilleder, og hvordan vi vurderer, hvilken der er bedst for dit websted.
# 1 Produktheltbillede
Et produktheltebillede er et stort højt billede definition af mærkets produkt. Disse billeder kan præsenteres i statisk eller i bevægelse/i handling, så længe de giver mulighed for at visualisere værdien af produktet.
Populære måder blandt webdesignere at fremvise og personliggøre deres produktheltbilleder kan omfatte:
- Et detaljeret / øjebliksbillede af et enkelt produkt, som vi ser ovenfor på virksomhedens hjemmeside australsk abonnement avo lover.
- Skærmbillede af en digital produktgrænseflade, såsom et instrumentbræt.
Produktheltebilleder findes normalt på hjemmesiderne fore-handel (men ikke udelukkende). Potentielle shoppere forventer at se eksempler på faktiske produkter, der understøtter informeret beslutningstagning om butikkens egnethed til deres indkøbsbehov.
Avo lover brugte Elementor til at oprette deres e-handelswebsted, som deres kunder bruger til at købe ugentlige abonnementer på friske avocadoer leveret til deres dørtrin.
Avo elskers kundebase er et nichemarked i et snævert defineret interesseområde, så deres valg af produktheltbillede giver perfekt mening. Potentielle abonnenter er avocado-entusiaster; at se et nærbillede og indviklet fotografi af produkterne er nøjagtigt hvad de ønsker at se.
Bedste praksis:
- Invester i kvaliteten af baggrundsbilleder
Uanset om dit baggrundsbillede er et fotografi, video, illustration osv., Skal billedfilen være så lys som muligt med en krystalklar opløsning.
- Vær opmærksom på kontrastniveauer
Hvis du tilføjer tekst foran dit heltesektionsbillede (eller komponent af enhver art), skal du sørge for, at kontrasten mellem webstedselementerne er stærk og let ses. Det er her baggrundsoverlejringer og filtereffekter kan være ekstremt nyttige.
# 2 Billede af klientens helt
Den følgende type heltebillede, der bruges af online-virksomheder, tager en alternativ tilgang til at vise deres merværdi: at vise deres kunde ved hjælp af produktet. Dette perspektiv er en strategisk måde at føle med dine besøgende på, og kortfattet viser, at du forstår deres smertepunkt og kan opfylde deres behov.
Ovenstående videoklip er taget fra Elementor-webstedet oprettet af Alexander Fisher, en Stuggart-baseret personlig træner, der leverer en række sundheds- og fitnessrelaterede tjenester.
Alexanders kundeheltbillede viser mere end en tilfreds kunde, der nyder en sund og fit livsstil. Heltebilledet tager det et skridt videre ved at præsentere en video, der indeholder hans klients binding og forbindelse med sine kære.
Bedste praksis:
- Del dine brugssager og kundeoplevelse
Differentier dit produkt ved at vise dets mest dominerende brugssag. Et billede, der formidler dine forretningsmål og værdi, viser, hvordan den besøgende vil få gavn af dit unikke tilbud.
- Forhold dig til din målgruppe
Sørg for, at der tages højde for din målgruppe, når du vælger den type person, der skal vises i dit billede. Vælg et billede, der kommunikerer din forståelse af marken og din evne til at glæde dine kunder.
# 3 Billede af den grundlæggende helt
Et grundlæggende heltbillede er et stort billede af grundlæggeren af virksomhedsejeren, placeret i heltesektionen for at hilse på besøgende på websitet.
Grundlæggende heltebilleder bruges ofte i porteføljewebsteder for freelancere, virksomhedsejere som en psykolog, makeupartist eller musiker som vist på Elementors websted af Jasmine Cain ovenfor.
Den største dyd ved et grundlæggende heltebillede er, at det sætter et navn ansigt; det forbinder besøgende på websitet med tjenesteudbyderen og skaber en behagelig dynamik mellem de to personer.
Valget af billeder til dit grundlæggende heltebillede skal håndteres med forsigtighed. Med masser af muligheder at vælge imellem, som koger ned til:
hvad vil formidle dit brands budskab på den stærkest mulige måde?
Er dette et billede af grundlæggeren, der ser lige på kameraet og smiler, eller måske ser i en anden retning?
Eller ville et ærligt billede af den hårdtarbejdende virksomhedsejer være bedre egnet?
Bedste praksis:
- Vær opmærksom på størrelse og dimensioner
Brug et klart, godt billede (eller video), der viser besøgende de nøjagtige detaljer, de har brug for at se. Hvis det er nødvendigt, kan du fokusere på større områder af dine billeder ved at beskære dem og fjerne mindre vigtigt indhold.
- Fokuser på, hvad dit image skal formidle
Baggrundens rolle bør være at fokusere på personen foran den, ikke omvendt. De mest indflydelsesrige stiftende heltbilleder viser den smilende virksomhedsejer, hvilket indebærer hans passion for at holde kunderne glade.
# 4 Heltbillede uden kontekst
Ikke-kontekstuelle heltebilleder er, som navnet antyder, sekvenser, der viser noget tilsyneladende 'uafhængigt' til ejeren af produktet eller virksomheden. Formålet med et ikke-kontekstuelt heltebillede er at gøre indtryk på den besøgende gennem visuel tilknytning eller en subliminal besked. Visning af det ikke-kontekstuelle billede viser brugeren, hvad produktet eller mærket er, men på en indirekte måde.
Denne teknik bruges for eksempel i eksemplet ovenfor fra Elementors hjemmeside bygget af det digitale marketingfirma AP-teknologi, baseret i Oklahoma. Virksomhedens websted bruger et bredt, klart baggrundsbillede, der viser en unik vinkel på Oklahoma Citys skyskrabere.
Dette fotografi repræsenterer virksomhedens værdiproposition, som det fremgår af hjemmesidens heltetekst: Byg din virksomhed og se den vokse, lige så høj som de højeste kontortårne i byen.
Så snart det menneskelige øje ser de fysiske strukturer, der dominerer himlen, forstår det, at disse marketingfolk arbejder på at få virksomheder fra jorden til højden.
Bedste praksis:
- Sørg for, at besøgende forstår, hvorfor billedet er relevant
Selvom du ikke viser et direkte billede af selve dit produkt, skal du sørge for at forbinde dit produkts værdi med dit ikke-kontekstuelle heltbillede stadig er let at identificere. Brugere skal ikke bruge tid på at tænke på dets relevans.
- Lav en klar sammenhæng mellem heltebilledet og helteteksten
Den heltetekst, du placerer i forbindelse med dit billede, skal relateres direkte til dets visuelle indhold. Det er en nødvendighed, selvom det kræver flere gentagelser af din tekst og valg af ordlyden.
- Opret et sammenhængende designskema
De farver, du vælger til knaptekster og baggrunde, overskrifter eller beskrivelser, skal koordinere med heltebilledet eller kunstværket. Dette gælder også for klikbare accenter på dit websted:
elementerne i navigationsmenuen, logoet osv ...
Vi ved alle, hvor vigtigt et konsekvent visuelt sprog er for vores websides prestige, vores brandtilstedeværelse og professionelle troværdighed. Dette er hvor designstilguider kan være virkelig nyttige, især for at sikre, at dine heltebilleder er tilpasset dit webstedsdesign.
Sådan tester du dit heltebillede: de metoder, vi kan lide
Når du begynder at eksperimentere med flere muligheder for dit heltebillede, kan du straks vurdere, hvilken mulighed der genererer mest engagement og få indsigt i det mest effektive design - og i sidste ende holde fast ved det.
Her er nogle must-have testmetoder, der er nemme at konfigurere og giver et væld af viden for at sikre, at du bruger det bedst mulige heltbillede.
A / B Test dit heltebillede
A / B-test kræver, at designeren opretter to eller flere muligheder for helteafsnittet (hvad enten det er to versioner af titlerne og deres kopi, selve heltebilledet, layoutafsnittet, størrelsen på skrifttypen eller hvad du ellers kan tænke dig) - det er helt op til dig.
Forestil dig, at du besluttede at bruge en blandingstilstand, når brugerne svæver over dit heltebillede, men du ved ikke, hvilken tilstand der forbedrer brugeroplevelsen mest.
Udfør en A / B-test mellem to forskellige tilstandsindstillinger (der er trods alt 13 muligheder for blandingstilstand), lader dig prøve mere end én tilstand for at se, hvilken der får flest svæver, klik og i sidste ende mere engagement.
Et af de mest almindelige og vigtige trin i A / B-test af din heltesektion er også at teste mindst to CTA-knapindstillinger - for at identificere, hvilken knap der får flest konverteringer.
Specifikt er det altid en nyttig oplevelse at teste farven på en CTA-knap, der giver dig mulighed for at forstå, hvilken knapfarve der tiltrækker og engagerer brugerne mest. Knapfarve A / B-test er meget populær blandt webdesignere, fordi den er hurtig og nem at udføre og næppe kræver yderligere designressourcer.
Brug varmekortværktøjer til at opdage brugeradfærd
Heatmap -værktøjer identificerer og analyserer de steder, hvor brugerne klikker på en webside. Disse værktøjer giver ejere af websteder og landingssider mulighed for at se præcis, hvordan brugerne aktivt navigerer i indhold. Dette opnås, når værktøjet identificerer, om brugerne interagerer med centrale elementer (og hvordan), f.eks. Links, knapper, muligheder og selvfølgelig CTA'er.
Her er nogle oplysninger, som webstedsejere kan hente ved at bruge varmekortværktøjer:
- Ikke-klikbare emner distraherer brugere.
- Knappestørrelserne er for store eller for små.
- Knappernes farver er ikke synlige.
Vær helten på dit websted
Webstedsudviklinger udvikler sig konstant og tilføjer nye funktioner til mulighederne for webdesign. Det er altid vigtigt at holde din heltesektion i spidsen for dine designovervejelser - sørg for at den altid når sit potentiale i at præsentere dit websted for folkemængderne.
Hent Elementor Pro nu!
Konklusion
Her ! Det er det for denne artikel, der viser dig, hvordan du laver et heltbillede. Hvis du er bekymret for, hvordan du kommer dertil flad os vide det i kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
