Heltebilder er det nettskapere ofte bruker for å hilse besøkende på nettstedet deres i et attraktivt format.
Hvis du noen gang har lurt på " hva er et heltbilde? ", Du er på rett sted. I denne artikkelen vil vi ta en titt på emnet og hvordan du kan lage vakre heltebilder med kraftige visuelle effekter.
Et heltebilde er begrepet som brukes av nettskapere for å beskrive det store innholdet øverst på en webside.
Rollen til et heltebilde er å ønske besøkende velkommen så snart de møter din bedrift eller organisasjonen. Overfloden av heltebildetyper i nettforfatterverktøysettet gir så mange grunner til å inkludere et heltebilde på nettstedet ditt.
La oss forstå de viktigste fordelene ved å gjøre dette, og hvorfor?
Hva er et heltbilde?
Heltbilder som har et godt førsteinntrykk, har vanligvis en eller flere av følgende egenskaper:
- Et bilde av høy kvalitet
- En fengende video
- En bildeglidebryter eller en multimediekarusell
- Animert eller statisk illustrasjon
- Overskrifter og beskrivelser ved siden av eller foran visuelt innhold
Når det gjelder styling, inkluderer vanlige designdetaljer du ser brukt på heltebilder:
- Bakgrunnsbilder eller videoer med bakgrunnsoverlegg
- Fast eller klebrig posisjonering
- Peking påvirker endringen i gjennomsiktighet eller overlegg
- Elementer av kontrast som skiller bildet fra overskriften over eller påfølgende innhold
Nyheten med heltebilder i webdesign er at du på den ene siden jobber med et veldig spesifikt og definert rom på websiden. På den annen side er valg av stil, effekter og teknikker som skal brukes når du designer denne delen av sideinnholdet ditt, uendelige.
Hvorfor skal du bruke et heltbilde?
Når designet og funksjonaliteten til heltebildet ditt har et høyt kaliber, oppnår du automatisk brukerens troverdighet og tillit. Heltebildet ditt og dets omkringliggende helteinnhold representerer ofte din første mulighet til å videreformidle det unike salgsargumentet ditt organisasjonen og hovedbrukerens kontaktpunkt for konverteringen.
Når du ønsker å utløse bestemte brukeratferd, er det beste, kraftige heltebildet som gir et sterkt førsteinntrykk på de besøkende den beste måten å starte.
Du kan gjøre et varig førsteinntrykk
Første inntrykk har betydning i mange områder av livet, men spesielt når det gjelder hvordan brukere forholder seg til nettstedets estetikk.
Resultatene fra eksperter i menneske-maskin-interaksjon (HCI) og visualisering ved Google Research vitner om innflytelsen av heltebilder på suksessen til et nettsted:
Denne studien, " Rollen til visuell kompleksitet og prototypikalitet i nettstedets første inntrykk : arbeide med å forstå estetiske vurderinger ”, Studerer hvordan visuell kompleksitet og prototypikalitet påvirker utformingen av et nettsted og det første inntrykket av brukerne.
Forfatterne viste 119 faktiske skjermbilder fra nettstedet til deltakerne i studien og fant at visuell kompleksitet og prototypikalitet påvirker brukerens estetiske oppfatning i de første 50 bildene av utstillingen, og noen ganger til og med innen 17 ms.
Som webskapere er konklusjonen vår ganske enkel: Heltebildet vi velger, og måten vi presenterer det på siden vår, påvirker brukerstemning og atferd på en stor måte.
Du får mest mulig ut av innholdet ditt over folden
Avsnittet "over brett" på en webside kan defineres med enkle ord: innhold som fyller skjermen / vises over den nedre kanten av nettleservinduet etter at siden er lastet inn. Hvis innholdet krever rulling for å bli sett, betyr det at det ligger "under folden".
Konseptet "over fold" har sitt utspring i trykkdesign og publisering, lenge før tiden med digitale medier. Vi vet alle hvordan det er å umiddelbart legge merke til noe på den øverste halvdelen av en første side, og det er til og med trygt å si at innholdet på den første siden ofte er det som får oss til å bestemme oss for om vi vil kjøpe eller ikke. En avis, eller bare stoppe på en aviskiosk.
Dette er nøyaktig hvorfor innholdet ditt over folden kan være en viktig avbryter for nettsteds suksess.
Hva mener vi?
Hvis en besøkende på nettstedet er forvirret av innholdet ditt og bildene over folden, vil de raskt forlate nettstedet ditt. Hvis heltebildet ditt og miljøet hans over folden er tydelige, engasjerende og godt representativt for ditt verdiproposisjon, vil han være mer tilbøyelig til å holde fast.
Til syvende og sist, jo mer du investerer i bildet og innholdet i helteseksjonen, desto mindre sannsynlig er det at brukerne går raskt ut.
Ikke glem Responsive Design
Husk at plasseringen av en skjermkrone er subjektiv for skjermstørrelsen på enheten. Dette er en viktig faktor i responsiv design, som ovenfor, bør foldinnholdet tilpasses og konfigureres på en måte som gjelder for flere enhetsstørrelser.
Nettdesignere og utviklere bruker ofte enhetsspesifikke bruddpunkter for å garantere denne responsen. Dette gir deg full kontroll over tilpasningsevnen til nettstedsdesignet ditt til relevante skjermstørrelser og unngår det kompromitterte utseendet eller effekten av heltebildet ditt.
Oppgi verdiproposisjonen uten overbelastning av informasjon
Du kan være kjent med begrepet "for mye informasjonI nettsteddesign og brukeropplevelsen : Vi ønsker å unngå å bruke for mye innhold, spesielt skriftlig innhold, når vi representerer vårt merke og vår forretningsverdi.
Slik sett er bruken av et bilde, illustrasjon eller video verdt 1 ord. Finjustering av effektive merkevarebilder vil fange hele historien din i ett visuelt medium. I stedet for å verbalisere historien din og merkevareproposisjonen, kan du kanskje lette den kognitive belastningen på brukeren din på en enkel og brukervennlig måte.
Skjermbildet over er hentet fra Millbrook Construction, et Perth-basert byggefirma som spesialiserer seg på "boligbygging med high-end finish og oppmerksomhet på detaljer". For deres Elementor-nettsted benytter heltebildet på hjemmesiden perfekt av "over fold" -grensesnittet. Det iøynefallende, skarpe fotografiet av et lykkelig moderne hjem og utendørsbasseng gir positive, avslappende vibber.
Når du tar det et skritt videre, indikerer stilvalgene for bakgrunnsbildet i full høyde og størrelsen på et "teppe" firmaets robuste evne til å skape luksuriøse boligeiendommer. Verdiproposisjonen er like klar som bassengvann, og brukerne absorberer komfortabelt all nødvendig informasjon.
Heltebildene dine kan hjelpe deg med å konvertere potensielle kunder
Attraktive og synlige berøringspunkter er en grunnleggende ingrediens for en brukerstrøm for konvertering-reproduksjon. Dette er grunnen til at forholdet mellom helteseksjonens oppfordring til handling og selve heltebildet ditt kan gjøre eller ødelegge nettstedsbyggingsmålene dine.
La CTA-tekstene dine si " Registrer deg nå "" Les mer "" Kontakt oss »Osv., Heltebildet ditt må koordineres transparent på alle fronter: synlighet, meldinger, fargevalg, utseende osv.
Troverdige og effektive samtaler med potensielle kunder er basert på en behagelig og naturlig atmosfære; visuelt tiltalende bilder er den beste måten å oppnå dette på.
Dette er akkurat det vi ser på Elementors nettsted opprettet av STL-karikatur, et team av tegneserieartister som tilbyr tjenester for underholdning av arrangementer. Den animerte tittelen (heltetekst) viser de lykkelige kundene i heltebildene sine, og viser hva tegneseriekunstnerne gir for hver person.
Så når du har brettet opp ermene og begynt å komme inn på det praktiske, hva går inn i prosessen med å bestemme hvilken type heltebilde som skal brukes?
La oss utforske de fire forskjellige typene av heltebilder og hvordan vi vurderer hvilken som passer best for nettstedet ditt.
# 1 Produktheltbilde
Et produktheltebilde er et stort høyt bilde definisjon av merkets produkt. Disse bildene kan presenteres i statisk eller i bevegelse/i handling, så lenge de tillater å visualisere verdien av produktet.
Populære måter blant webdesignere å vise frem og tilpasse produktheltenes bilder kan omfatte:
- Et detaljert / øyeblikksbildeeksempel på et enkelt produkt, som vi ser ovenfor på selskapets nettside Australsk Avo Lover-abonnement.
- Skjermbilde av et digitalt produktgrensesnitt, for eksempel et dashbord.
Produktheltebilder finnes vanligvis på nettsidene tile-handel (men ikke utelukkende). Potensielle kjøpere forventer å se eksempler på faktiske produkter, som støtter informert beslutningstaking om butikkens egnethet for deres shoppingbehov.
Avo lover brukte Elementor til å lage sitt netthandelsnettsted, som kundene bruker for å kjøpe ukentlige abonnementer på ferske avokado levert til døren.
Avo lover's kundebase er et nisjemarked i et snevrt definert interesseområde, så deres valg av produktheltbilde gir perfekt mening. Potensielle abonnenter er avokadoentusiaster; å se et nærbilde og intrikat fotografi av produktene er akkurat det de ønsker å se.
Beste praksis:
- Invester i kvaliteten på bakgrunnsbilder
Enten bakgrunnsbildet ditt er et fotografi, video, illustrasjon osv., Bør bildefilen være så lett som mulig, med krystallklar oppløsning.
- Vær oppmerksom på kontrastnivåer
Hvis du legger til tekst foran heltebildet ditt (eller en hvilken som helst komponent), må du sørge for at kontrasten mellom nettstedelementene er sterk og lett å se. Det er her bakgrunnsoverlegg og filtereffekter kan være ekstremt nyttige.
# 2 Bilde av klientens helt
Følgende type heltebilde som brukes av online virksomheter, tar en alternativ tilnærming til å vise sin merverdi: å vise kunden sin ved hjelp av produktet. Dette perspektivet er en strategisk måte å empati med de besøkende, og viser kort og godt at du forstår deres smertepunkt og kan dekke deres behov.
Ovennevnte videoklipp er hentet fra Elementor-nettstedet opprettet av Alexander Fisher, en Stuggart-basert personlig trener som tilbyr en rekke helse- og treningsrelaterte tjenester.
Alexanders kundeheltbilde viser mer enn en fornøyd kunde som nyter en sunn og fit livsstil. Heltebildet tar det et skritt videre ved å ha en video som inneholder klientens binding og kontakt med sine kjære.
Beste praksis:
- Del brukssaker og kundeopplevelse
Differensier produktet ved å vise det mest dominerende bruksfallet. Et bilde som formidler dine forretningsmål og verdi viser hvordan den besøkende vil ha nytte av ditt unike tilbud.
- Forhold deg til målgruppen din
Forsikre deg om at målgruppen blir gjort rede for når du velger hvilken type person som skal vises i bildet ditt. Velg et bilde som formidler din forståelse av feltet og din evne til å glede kundene dine.
# 3 Bilde av grunnleggerens helt
Et grunnleggende heltebilde er et stort bilde av grunnleggeren av bedriftseieren, plassert i helteseksjonen for å hilse på den besøkende på nettstedet.
Grunnleggende heltebilder brukes ofte på porteføljesider for frilansere, bedriftseiere som en psykolog, makeupartist eller musiker som vist på Elementors nettsted av Jasmine Cain ovenfor.
Den største dyden til et grunnleggende heltebilde er at det setter et ansikt mot et navn; det kobler besøkende til nettstedet til tjenesteleverandøren, og skaper en hyggelig dynamikk mellom de to individene.
Valget av bilder for det grunnleggende heltebildet ditt skal håndteres med forsiktighet. Med mange alternativer å velge mellom, som koker ned til:
hva vil formidle merkevarens budskap på en sterkest mulig måte?
Er dette et bilde av grunnleggeren som ser rett på kameraet og smiler, eller kanskje ser i en annen retning?
Eller ville et ærlig bilde av den hardtarbeidende bedriftseieren være bedre egnet?
Beste praksis:
- Ta hensyn til dimensjoner og dimensjoner
Bruk et tydelig, godt størrelse bilde (eller video) som viser besøkende de nøyaktige detaljene de trenger å se. Om nødvendig kan du fokusere på større områder av bildene dine ved å beskjære dem og fjerne mindre viktig innhold.
- Fokuser på hva bildet ditt skal formidle
Bakgrunnens rolle bør være å fokusere på personen foran den, ikke omvendt. De mest virkningsfulle grunnleggende heltebildene vil vise den smilende bedriftseieren, noe som innebærer hans lidenskap for å holde kundene fornøyde.
# 4 Ikke-kontekstuelt heltebilde
Ikke-kontekstuelle heltebilder er, som navnet antyder, sekvenser som viser noe tilsynelatende 'ikke relatert' til eieren av produktet eller virksomheten. Hensikten med et ikke-kontekstuelt heltebilde er å gjøre inntrykk på den besøkende gjennom visuell tilknytning eller en subliminal melding. Å se det ikke-kontekstuelle bildet viser brukeren hva produktet eller merket er, men på en indirekte måte.
Denne teknikken brukes for eksempel i eksemplet ovenfor fra Elementors nettsted bygget av det digitale markedsføringsselskapet AP-teknologi, basert i Oklahoma. Selskapets nettside bruker et bredt, klart bakgrunnsbilde som viser en unik vinkel på Oklahoma Citys skyskrapere.
Dette fotografiet representerer selskapets verdiforslag, som det står i nettstedets heltetekst: Bygg virksomheten din og se den vokse, så høy som de høyeste kontortårnene i byen.
Så snart det menneskelige øye ser de fysiske strukturene som dominerer himmelen, forstår det at disse markedsføringsfagfolk jobber for å få bedrifter fra bakken, til høyden.
Beste praksis:
- Sørg for at besøkende forstår hvorfor bildet er relevant
Selv om du ikke viser et direkte visuelt bilde av selve produktet, må du sørge for at det fortsatt er enkelt å koble produktets verdi til det ikke-kontekstuelle heltebildet ditt. Brukere trenger ikke å bruke tid på å tenke på relevansen.
- Lag en klar kobling mellom heltebildet og helteteksten
Helteksten du plasserer i forbindelse med bildet ditt, skal være direkte knyttet til det visuelle innholdet. Det er en nødvendighet, selv om det krever flere gjentakelser av teksten din og valg av ordlyden.
- Lag et sammenhengende designskjema
Fargene du velger for knappetekster og bakgrunner, overskrifter eller beskrivelser skal samordne med heltebildet eller kunstverket. Dette gjelder også klikkbare aksenter på nettstedet ditt:
elementene i navigasjonsmenyen, logoen osv ...
Vi vet alle hvor viktig et konsistent visuelt språk er for nettstedenes prestisje, merkevaretilstedeværelse og profesjonelle troverdighet. Dette er hvor designstilguider kan være veldig nyttige, spesielt for å sikre at heltebildene dine er tilpasset nettstedsdesignet ditt.
Hvordan teste heltebildet ditt: metodene vi liker
Når du begynner å eksperimentere med flere alternativer for heltebildet ditt, kan du umiddelbart vurdere hvilket alternativ som genererer mest engasjement og få innsikt i det mest effektive designet - og til slutt holde fast ved det.
Her er noen må-ha-testmetoder som er enkle å sette opp og gir et vell av kunnskap for å sikre at du bruker et best mulig heltebilde.
A / B Test heltebildet ditt
A / B-testing krever at designeren lager to eller flere alternativer for helteseksjonen (enten det er to versjoner av titlene og deres kopi, selve heltebildet, layoutdelen, skriftstørrelse eller hva du ellers kan tenke deg) - det er helt opp til deg.
Tenk deg at du bestemte deg for å bruke en blandingsmodus når brukerne holder markøren over heltebildet ditt, men du vet ikke hvilken modus som vil forbedre brukeropplevelsen mest.
Utfør en A / B-test mellom to forskjellige modusalternativer (det er tross alt 13 blandingsmodusalternativer), lar deg prøve mer enn én modus for å se hvilken som får flest svinger, klikk og til slutt mer engasjement.
Et av de vanligste og viktigste trinnene i A / B-testing av helteseksjonen din er å også teste minst to CTA-knappalternativer - for å identifisere hvilken knapp som får flest konverteringer.
Spesielt å teste fargen på en CTA-knapp er alltid en nyttig opplevelse som lar deg forstå hvilken knappefarge som tiltrekker seg og engasjerer brukerne mest. Knappefarge A / B-testing er veldig populær blant webdesignere fordi den er rask og enkel å utføre og nesten ikke krever ekstra designressurser.
Bruk varmekartverktøy for å oppdage brukeratferd
Heatmap -verktøy identifiserer og analyserer stedene hvor brukerne klikker på en webside. Disse verktøyene lar eiere av nettsteder og destinasjonssider se nøyaktig hvordan brukerne aktivt navigerer i innhold. Dette oppnås når verktøyet identifiserer om brukerne samhandler med viktige elementer (og hvordan), for eksempel lenker, knapper, alternativer og selvfølgelig CTAer.
Her er litt informasjon som eiere av nettsteder kan hente ved å bruke varmekartverktøy:
- Ikke-klikkbare elementer distraherer brukere.
- Knappestørrelser er for store eller for små.
- Fargene på knappene er ikke synlige.
Vær helten på nettstedet ditt
Nettstedstrender utvikler seg kontinuerlig, og legger til nye funksjoner til mulighetene for webdesign. Det er alltid viktig å holde helteseksjonen i forkant av designhensynet - sørg for at det alltid når sitt potensial når det gjelder å presentere nettstedet ditt for folkemengdene.
Få Elementor Pro nå!
konklusjonen
Her! Det er det for denne artikkelen som viser deg hvordan du lager et heltbilde. Hvis du er bekymret for hvordan du kommer dit fgi oss beskjed i commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
