Hjältebilder är vad webbskapare ofta använder för att hälsa besökare på deras webbplats i ett attraktivt format.

Om du någonsin undrat " vad är en hjältebild? ", Du är på rätt plats. I den här artikeln tar vi en titt på ämnet och hur du kan skapa vackra hjältebilder med kraftfulla visuella effekter.

En hjältebild är termen som används av webbskapare för att beskriva det stora innehållet högst upp på en webbsida.

En hjältebilds roll är att välkomna din besökare så fort de träffar ditt företag eller organisation. Överflödet av hjältebildstyper i verktygslådan för webbförfattare ger så många anledningar att inkludera en hjältebild på din webbplats.

Låt oss förstå de största fördelarna med att göra detta, och varför?

Vad är en hjältebild?

Omfattar dygden av ett "gott första intryck" har hjältebilder vanligtvis en eller flera av följande egenskaper:

  • En högkvalitativ bild
  • En fängslande video
  • En bildreglage eller en multimediekarusell
  • Animerad eller statisk illustration
  • Rubriker och beskrivningar bredvid eller framför visuellt innehåll

När det gäller stil, vanliga designdetaljer som du ser tillämpas på hjältebilder inkluderar:

  • Bakgrundsbilder eller videor med bakgrundsöverlagringar
  • Fast eller klibbig positionering
  • Pekande påverkar förändringen i transparens eller överlagring
  • Element av kontrast som skiljer bilden från rubriken ovan eller efterföljande innehåll

Nyheten med hjältebilder i webbdesign är att du å ena sidan arbetar med ett mycket specifikt och definierat utrymme på webbsidan. Å andra sidan är valet av stil, effekter och tekniker att använda när du utformar den här delen av ditt sidinnehåll helt oändligt.

Varför ska du använda en hjältebild?

När designen och funktionaliteten hos din hjältebild har en hög kaliber uppnår du automatiskt användarnas trovärdighet och förtroende. Din hjältebild och dess omgivande hjälteinnehåll representerar ofta din första möjlighet att förmedla din unika försäljningsargument organisation och den huvudsakliga användarkontaktpunkten för konverteringen.

När du vill utlösa vissa användarnas beteenden är en förstklassig, kraftfull hjältebild som ger ett starkt första intryck på dina besökare det bästa sättet att börja.

Du kan göra ett bestående första intryck

Första intrycken spelar roll på många områden i livet, men särskilt när det gäller hur användarna relaterar till webbplatsens estetik.

Resultaten av experter på interaktion mellan människor och människor (HCI) och visualisering vid Google Research intyga att hjältebilder påverkar framgången för en webbplats:

Den här studien, " Rollen av visuell komplexitet och prototypikalitet i webbplatsens första intryck : arbeta med att förstå estetiska bedömningar ”, Studerar hur visuell komplexitet och prototypikalitet påverkar utformningen av en webbplats och de första intrycken av dess användare.

Författarna visade 119 faktiska skärmdumpar från webbplatsen till sina studiedeltagare och fann att visuell komplexitet och prototypikalitet påverkar användarens estetiska uppfattning i de första 50 bilderna på utställningen, och ibland även inom 17 ms.

Som webbskapare är vår slutsats ganska enkel: Hjältebilden vi väljer och hur vi presenterar den på vår sida påverkar användarnas känslor och beteende på ett stort sätt.

Du får ut det mesta av ditt innehåll ovanför mitten

ovanför vik webbdesign
Hämtad från: crazyegg.com

Avsnittet "ovanför vikningen" på en webbsida kan definieras i enkla termer: innehåll som fyller din skärm / visas ovanför den nedre kanten av webbläsarfönstret efter att din sida har laddats. Om innehållet kräver rullning för att kunna ses, betyder det att det ligger ”under vikningen”.

Begreppet ”ovanför mitten” har sitt ursprung i tryckdesign och publicering, långt före tiden för digitala medier. Vi vet alla hur det är att omedelbart märka något på den övre halvan av en första sida, och det är till och med säkert att säga att innehållet på första sidan ofta är det som får oss att välja om vi vill köpa eller inte. En tidning eller bara sluta i en tidningskiosk.

Det är just därför ditt innehåll ovanför mitten kan vara en stor affärsbrytare för din webbplats framgång.

Vad menar vi?

Om en webbplatsbesökare är förvirrad av ditt innehåll och bilder ovanför mitten, kommer de snabbt att lämna din webbplats. Om din hjältebild och hans miljö ovanför mitten är tydlig, engagerande och väl representativ för ditt värdeförslag, kommer han att vara mer benägen att hålla fast vid.

I slutändan, ju mer du investerar i bilden och innehållet i din hjälteavdelning, desto mindre är det troligt att användare går ut snabbt.

Glöm inte Responsive Design

Tänk på att platsen för en skärmböj är subjektiv för enhetens skärmstorlek. Detta är ett viktigt övervägande i responsiv design, eftersom ovan bör vikningsinnehållet anpassas och konfigureras på ett sätt som är tillämpligt på flera enhetsstorlekar.

Webbdesigners och utvecklare använder ofta enhetsspecifika brytpunkter för att garantera denna lyhördhet. Detta ger dig fullständig kontroll över anpassningen av din webbdesign till relevanta skärmstorlekar och undviker kompromiss med utseendet eller effekten av din hjältebild.

Ange ditt värdeförslag utan överbelastning av information

hur man skapar en hjältebild

Du kanske känner till begreppet "information överbelastningInom webbdesign och användarupplevelsen : Vi vill undvika att använda för mycket innehåll, särskilt skriftligt innehåll, när vi representerar vårt varumärke och vårt affärsvärde.

I den meningen är användningen av en bild, illustration eller video värd 1 ord. Finjustering av effektiva varumärkesbilder fångar hela din historia i ett visuellt medium. Istället för att uttrycka din berättelse och ditt varumärkesförslag kan du kanske minska kognitiv belastning på din användare på ett enkelt och användarvänligt sätt.

Skärmdumpen ovan är tagen från Millbrook Construction, ett Perth-baserat byggföretag som specialiserat sig på "bostadsbyggande med avancerade ytor och uppmärksamhet på detaljer". För deras Elementor-webbplats använder hjältebilden på hemsidan perfekt gränssnittet "ovanför mitten". Det iögonfallande, skarpa fotografiet av ett lyckligt modernt hem och en utomhuspool ger positiva, avkopplande vibbar.

Med ett steg längre indikerar stilvalet för bakgrundsbilden i full höjd och storleken på en "filt" företagets robusta skick för att skapa lyxiga bostadsfastigheter. Värdeförslaget är lika tydligt som poolvatten och användare absorberar bekvämt all nödvändig information.

Dina hjältebilder kan hjälpa till att konvertera leads

hur man skapar en hjältebild

Attraktiva och synliga beröringspunkter är en grundläggande ingrediens för ett användarflöde för omvandlingsreproduktion. Det är därför som förhållandet mellan hjälteavdelningens uppmaning till handling och din hjältebild i sig kan göra eller bryta dina mål för webbplatsbyggnad.

Låt dina CTA-texter säga " Registrera dig nu "" Läsa mera "" Kontakta oss »Osv., Din hjältebild måste samordnas transparent på alla fronter: synlighet, meddelanden, färgschema, utseende etc.

Trovärdiga och effektiva samtal med potentiella kunder baseras på en bekväm och naturlig atmosfär. visuellt tilltalande bilder är det bästa sättet att uppnå detta.

Detta är precis vad vi ser på Elementors webbplats skapad av STL-karikatyr, ett team av tecknade artister som tillhandahåller evenemangsunderhållningstjänster. Den animerade titeln (hjältetext) visar de glada kunderna i deras hjältebilder och visar vad tecknadskonstnärerna tillhandahåller för varje person.

Så när du väl har rullat upp ärmarna och börjat komma in i det praktiska, vad går in i processen för att bestämma vilken typ av hjältebild som ska användas?

Låt oss utforska de fyra olika typerna av hjältebilder och hur vi bedömer vilken som passar bäst för din webbplats.

# 1 Produkthjältebild

hur man skapar en hjältebild

En produkthjältebild är en stor högbild definition av varumärkets produkt. Dessa bilder kan presenteras i statisk eller i rörelse/in action, så länge de tillåter att visualisera produktens värdeförslag.

Populära sätt bland webbdesigners att visa upp och anpassa sina produkthjältebilder kan inkludera:

  • Ett detaljerat / ögonblicksbild av en enskild produkt, som vi ser ovan på företagets webbplats Australiskt Avo Lover-abonnemang.
  • Skärmdump av ett digitalt produktgränssnitt, till exempel en instrumentpanel.

Produkthjältebilder finns vanligtvis på webbplatserna före-handel (men inte uteslutande). Potentiella shoppare förväntar sig att se exempel på faktiska produkter, vilket stöder välgrundat beslutsfattande om butikens lämplighet för deras shoppingbehov.

Avo lover använde Elementor för att skapa sin e-handelswebbplats, som deras kunder använder för att köpa prenumerationer varje vecka på färska avokado som levereras till deras tröskel.

Avo lovers kundbas är en nischmarknad inom ett snävt definierat intresseområde, så deras val av produkthjältebild är perfekt. Potentiella abonnenter är avokadoentusiaster; att se ett nära och intrikat fotografi av produkterna är exakt vad de vill se.

Bästa praxis:

  • Investera i kvaliteten på bakgrundsbilder

Oavsett om din bakgrundsbild är ett fotografi, video, illustration, etc., bör bildfilen vara så ljus som möjligt med kristallklar upplösning.

  • Var uppmärksam på kontrastnivåer

Om du lägger till text framför din hjältesektionsbild (eller komponent av något slag), se till att kontrasten mellan webbplatselementen är stark och lätt att se. Det är här bakgrundsöverlagringar och filtereffekter kan vara extremt användbara.

# 2 Bild av klienthjälten

Följande typ av hjältebild som används av onlineföretag tar ett alternativt sätt att visa deras mervärde: att visa sina kunder som använder produkten. Detta perspektiv är ett strategiskt sätt att empati med dina besökare och visar kortfattat att du förstår deras smärtpunkt och kan tillgodose deras behov.

Ovanstående videoklipp är hämtade från Elementors webbplats skapad av Alexander Fisher, en Stuggart-baserad personlig tränare som tillhandahåller en rad hälso- och fitnessrelaterade tjänster.

Alexanders kundhjältebild visar mer än en nöjd kund som njuter av en hälsosam och fit livsstil. Hjältebilden tar det ett steg längre genom att presentera en video som visar hans klients bonding och kontakt med sina nära och kära.

Bästa praxis:

  • Dela dina användningsfall och kundupplevelse

Differentiera din produkt genom att visa dess mest dominerande användningsfall. En bild som förmedlar dina affärsmål och värde visar hur besökaren kommer att dra nytta av ditt unika erbjudande.

  • Förhålla dig till din målgrupp

Se till att din målgrupp redovisas när du väljer vilken typ av person som ska visas i din bild. Välj en bild som kommunicerar din förståelse för fältet och din förmåga att glädja dina kunder.

# 3 Bild av den grundande hjälten

hur man skapar en hjältebild

En grundande hjältebild är en stor bild av grundaren av företagets ägare, placerad i hjälteavsnittet för att hälsa besökaren på webbplatsen.

Grundande hjältebilder används ofta i portföljwebbplatser för frilansare, företagare som en psykolog, makeupartist eller musiker som visas på Elementors webbplats av Jasmine Cain ovan.

Den största dygden hos en grundande hjältebild är att den sätter ett namn i ansiktet; den ansluter webbplatsbesökaren till tjänsteleverantören och skapar en trevlig dynamik mellan de två individerna.

Valet av bilder för din grundande hjältebild ska hanteras med försiktighet. Med många alternativ att välja mellan, vilket sammanfattar:

vad kommer att förmedla ditt varumärkes budskap på det starkaste möjliga sättet?

Är detta ett foto av grundaren som tittar rakt på kameran och ler, eller kanske tittar i en annan riktning?

Eller skulle ett uppriktigt foto av den hårt arbetande företagsägaren passa bättre?

Bästa praxis:

  • Var uppmärksam på dimensionering och mått

Använd en tydlig, välstor bild (eller video) som visar besökarna de exakta detaljerna de behöver se. Om det behövs kan du fokusera på större delar av dina bilder genom att beskära dem och ta bort mindre viktigt innehåll.

  • Fokusera på vad din bild ska förmedla

Bakgrundens roll bör vara att fokusera på personen framför den, inte tvärtom. De mest effektfulla grundläggande hjältebilderna kommer att visa den leende företagsägaren, vilket innebär hans passion för att hålla kunderna nöjda.

# 4 Icke-kontextuell hjältebild

hur man skapar en hjältebild

Icke-kontextuella hjältebilder är, som namnet antyder, sekvenser som visar något som verkar '' inte relaterat '' till ägaren av produkten eller företaget. Syftet med en icke-kontextuell hjältebild är att göra intryck på besökaren genom visuell association eller ett sublimint meddelande. Att visa den icke-kontextuella bilden visar användaren vad produkten eller varumärket är, men på ett indirekt sätt.

Denna teknik används till exempel i exemplet ovan från Elementors webbplats byggd av det digitala marknadsföringsföretaget AP-teknik, baserad i Oklahoma. Företagets webbplats använder en bred, tydlig bakgrundsbild som visar en unik vinkel för Oklahoma Citys skyskrapor.

Det här fotografiet representerar företagets värdeförslag, som anges i webbplatsens hjältext: Bygg ditt företag och se det växa, lika högt som de högsta kontortornen i staden.

Så snart det mänskliga ögat ser de fysiska strukturerna som dominerar himlen förstår det att dessa marknadsföringspersonal arbetar för att få företag från marken, till höjden.

Bästa praxis:

  • Se till att besökarna förstår varför bilden är relevant

Medan du inte visar en direkt visuell bild av själva produkten, se till att det fortfarande är lätt att identifiera att ansluta produktens värde till din hjältebild som inte är kontextuell. Användare behöver inte spendera tid på att tänka på dess relevans.

  • Skapa en tydlig länk mellan hjältebilden och hjältetexten

Hjältetexten som du placerar i samband med din bild ska relatera direkt till dess visuella innehåll. Det är en nödvändighet, även om det kräver flera iterationer av din text och valet av formuleringen.

  • Skapa ett sammanhängande designschema

De färger du väljer för knapptexter och bakgrunder, rubriker eller beskrivningar ska samordna med hjältebilden eller teckningen. Detta gäller även klickbara accenter på din webbplats:

elementen i navigeringsmenyn, logotypen osv ...

Vi vet alla hur viktigt ett konsekvent visuellt språk är för vår webbplats prestige, varumärkesnärvaro och professionella trovärdighet. Det är här designstilguider kan vara till stor hjälp, särskilt för att se till att dina hjältebilder är anpassade till din webbdesign.

Hur man testar din hjältebild: de metoder vi gillar

När du har börjat experimentera med flera alternativ för din hjältebild kan du omedelbart bedöma vilket alternativ som genererar mest engagemang och få inblick i den mest effektiva designen - och i slutändan hålla fast vid den.

Här är några måste-testmetoder som är lätta att installera och ger en mängd kunskap för att se till att du använder den bästa hjältebilden.

A / B Testa din hjältebild

A / B-testning kräver att designern skapar två eller flera alternativ för hjälteavsnittet (oavsett om det är två versioner av titlarna och deras kopia, hjältebilden, layoutavsnittet, storlek på teckensnitt eller vad du än kan tänka dig) - det är helt upp till dig.

Tänk dig att du bestämde dig för att använda ett blandningsläge när användare svävar över din hjältebild, men du vet inte vilket läge som kommer att förbättra användarupplevelsen mest.

Utför en A / B-test mellan två olika lägesalternativ (det finns trots allt 13 blandningsalternativ), kan du prova mer än ett läge för att se vilket som får flest svävar, klick och i slutändan mer engagemang.

Ett av de vanligaste och viktigaste stegen i A / B-testning av din hjältesektion är att också testa minst två CTA-knappalternativ - för att identifiera vilken knapp som får flest konverteringar.

Specifikt är att testa färgen på en CTA-knapp alltid en användbar upplevelse som låter dig förstå vilken knappfärg som lockar och engagerar användare mest. Knappfärg A / B-testning är mycket populärt bland webbdesigners eftersom det är snabbt och enkelt att utföra och knappast kräver ytterligare designresurser.

Använd värmekartverktyg för att upptäcka användarnas beteende

Heatmap -verktyg identifierar och analyserar de platser där användare klickar på en webbsida. Dessa verktyg gör att webbplats- och målsidesägare kan se exakt hur användarna aktivt navigerar i innehåll. Detta uppnås när verktyget identifierar om användare interagerar med viktiga element (och hur), till exempel länkar, knappar, alternativ och naturligtvis CTA.

Här är lite information som webbplatsägare kan hämta med hjälp av värmekartverktyg:

  • Icke-klickbara objekt distraherar användare.
  • Knappstorlekarna är för stora eller för små.
  • Knapparnas färger syns inte.

Var hjälten på din webbplats

Att designa din hjälteavdelning och dess hjältebild är ett av de mest avgörande och inflytelserika besluten i din webbdesignprocess. Webbskapare hänvisar ofta till hjältesektionen på en webbplats som "inledande handling" för din webbplatspresentation, i huvudsak din välkomstgest.

Webbplatstrender utvecklas ständigt och ger nya funktioner till möjligheterna till webbdesign. Det är alltid viktigt att hålla din hjälteavdelning i spetsen för dina designhänsyn - se till att den alltid når sin potential när den presenterar din webbplats för publiken.

Skaffa Elementor Pro nu!

Slutsats

Här! Det är det för den här artikeln som visar hur man skapar en hjältebild. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.