Ultimate Guide to Hero Images [Bästa praxis + exempel]

Oavsett om du inser det eller inte, bedömer du varje webbplats efter dess visuella överklagande. Och det tar bara ungefär 0.05 sekunder att bilda en åsikt. Det betyder att hjältebilden (det första fotot, grafiken eller videon som folk ser) måste vara iögonfallande nog för att folk ska rulla på webbplatsen.

Hjältebilder av hög kvalitet är nyckeln till ett fantastiskt första intryck. Om de görs bra representerar de kärnan i din varumärkesidentitet och det övergripande temat på din webbsida.

Ja, det är mycket vikt för ett visuellt innehåll. Det är därför det är det mest heroiska av alla.

Den här guiden kommer att förklara hur du kan höja din webbplats med den perfekta hjältebilden, från att välja en grafik inspirerad av de senaste designtrenderna till att se till att din bild är i optimal storlek. Vi går också igenom hjältebildsexempel för att få idéer till din egen webbplats. Gör dig redo för lite designögon.

Hjältebild i webbdesign

Om engagerande bilder är strålarna ovanpå alla fantastiska designsystem, är en hjältebild den blanka, röda körsbäret. Det drar ditt öga in och får dig att vilja mer.

I webbdesign är en hjältebild det första foto, grafik, illustration eller video som människor ser på en webbsida. Den innehåller vanligtvis både en bild och en text för att förmedla ett företags kärnbudskap. Hjältebilder sitter ovanför mitten och har ofta en uppmaning till handling (CTA) som uppmuntrar människor att dyka djupare in på webbplatsen. Målet med den här bilden är att lägga till energi och spänning på en sida. Du vill att den ska visa upp ditt varumärkes stil, dela syftet med din webbplats och göra folk glada att utforska.

En bra hjältebild kan höja din trafik och dina konverteringar genom att få människor att interagera med din webbplats. Animering, karuseller och scroll-utlösta effekter är sätt att flexa din kreativitet utöver typiska stockfotografier. Men en dålig bild kan få ner en annars fantastisk design. Grafik utanför märket, stora filer som saktar in laddningshastigheten och meningslös kopiering kan förstöra användarupplevelsen.

Ett vanligt misstag när man utformar en hjältebild är att få rätt filstorlek. För stor, din lasthastighet sjunker. För litet, allt ser pixlat ut. Låt oss gå igenom de olika hjältebildstorlekarna så att du kan skapa en fantastisk bild varje gång.

Hjältebildens mått

Att hitta rätt bildförhållande och beskärning kan bli förvirrande när du dimensionerar en hjältebild. Bannerhjältebilder är inte samma som helskärmsbilder och varje bild måste skala för att passa utrymmet. Du måste också tänka på att ingen surfar på exakt samma sätt. Personligen zoomas min skärm vanligtvis in till 120%, men andra kan ha dussintals flikar öppna som alla har olika storlekar.

Viss bildbeskärning kommer säkert att ske när din hjältebild skalas för att passa en mängd olika skärmar, så det är bäst att tänka på följande dimensioner som riktlinjer, inte styva regler.

1. Helskärms- och bannerbildmått

Den perfekta storleken för en helbilds hjältebild är 1,200 pixlar bred med ett bildförhållande på 16: 9. För en bannerhjältebild är den ideala storleken 1600 x 500 pixlar.

Om du behöver kristallklara bilder eller om din målgrupp surfar på stora skärmar kan du behöva storlek upp till 1,800 XNUMX pixlar. Tänk på att detta kan resultera i en stor filstorlek som saktar ner din webbplats.

Du kan kontrollera din laddningshastighet för stationär och mobil med Googles PageSpeed ​​Insights. Det ger en omfattande titt på vilket webbplatsinnehåll som laddas först och var det finns utrymme för förbättringar. Sikta på en sidens laddningstid på en till två sekunder eftersom du förmodligen kommer att förlora människor om det är mer än fem sekunder.

2. Bildmått för mobilhjälte

Den idealiska storleken för en mobil hjältebild är 800 x 1,200 pixlar.

Även om det är viktigt att överväga hur din hjältebild ser ut på ett skrivbord kan du inte ignorera mobilupplevelsen. Nästan 55% av den globala webbtrafiken år 2021 genereras på en mobiltelefon.

Din hjältebildsdesign måste vara lyhörd och passa vertikal (telefon) och horisontell (surfplatta). Dynamiska hjältebilder, som videor, klarar sig bra på ett skrivbord, men de måste ofta bytas ut mot en statisk bild för mobilen. Videor tar mer tid att ladda, och ingen vill ta en enorm hit i sin dataplan bara för att se din webbplats.

3. Komprimering av hjältebild

Du vill komprimera din hjältebild om du har en stor filstorlek (allt över 1 MB är för stort). Du kan använda webbplatser som TinyJPG, Komprimera JPG, eller Adobes Photoshop-kompressor för att minska storleken utan att kvaliteten minskar. Se bara till att få dimensionerna rätt i förväg, annars kan bilden verka suddig eller sträckt.

När du dimensionerar en hjältebild, kontrollera din Google-analys för att se den typiska skärmupplösningen för dina webbplatsbesökare. Designa sedan med den målgruppen i åtanke. Kom bara ihåg att testa din hjältebild på flera webbläsare, skärmar och telefoner för att se hur den skalas. När du väl har rätt dimensioner är det dags att arbeta in det på din webbsida med HTML och CSS.

Hjältebild HTML

HTML är ett kodningsspråk som består av element som används för att ge struktur till en webbsida. Det skapar ordning och låter dig bädda in innehåll (som hjältebilder) på en webbplats.

Att skapa en hjältebild med HTML säkerställer att ditt visuella syns på en webbsida, medan CSS gör att det ser bra ut på en skärm. Båda kräver kodningsförmåga, så du kan behöva förstärka din HTML- och CSS-kunskap eller anlita hjälp från en utvecklare.

De viktigaste sakerna att tänka på är:

• Hjältebilden måste centreras.
• Texten måste vara lättläst.
• Det måste se bra ut på alla skärmstorlekar.
• Bilden ska täcka hela visningsområdet.

Följ dessa steg för att skapa en iögonfallande hjältebild. Obs! Exemplen nedan innehåller HTML-element och CSS-regler, men jag kommer att förklara skillnaden mellan de två senare.

1. Skapa strukturen.

Ställ in två behållare för din hjältebild med hjälp av kodningskonventionerna på din webbplats. Till exempel använder det första exemplet nedan .hjälte för strukturen och .hjälteinnehåll för bilden, texten och knappen, medan den andra använder .bild-behållare och . inner-container.

Bildkälla

Bildkälla

2. Lägg till ditt innehåll.

När strukturen är på plats är det dags att anpassa din bild. Lägg till en bild, välj ett anpassat teckensnitt, skapa en rubrik och subheader och skapa en knapp med en lockande uppmaning. Om du vill lägga till ett filter i din bakgrundsbild (utan att använda det på texten) rekommenderar DeveloperDrive att du tar med filtret före din .hjälteinnehåll koda.

Bildkälla

Lägg märke till hur bredden och höjden under .hjälte sektionen är inställd på 100vw och 100vh. Detta säkerställer att bilden passar hela visningsområdet, både vertikalt och horisontellt, så det spänner över hela skärmen.

Ingen hjältebild är komplett utan en knapp som får människor att agera. Inkorporera en i din bild med element. Se bara till att inkludera font-family eftersom texten inte automatiskt översätts från .hjälteinnehåll elementet.

3. Centrera innehållet.

Inte alla hjältebilder har centrerad text, men de flesta har en centrerad bild. För att justera din bakgrundsbild kan du skapa en flexbehållare genom att integrera display, motivera-innehåll och ALIGN-objekt under ditt .hjälte elementet.

Bildkälla

För centrerad text, inkludera a .text-align: center regel under ditt kärninnehållselement. I följande exempel är texten kapslad under .hjälteinnehåll koda.

Bildkälla

4. Gör det lyhört.

Du vill att din hjältebild ska se bra ut oavsett skärmstorlek. Genom att ställa in mediefrågor kan du skapa parametrar så att din bild är lyhörd vid en viss skärmbredd.

Bildkälla

5. Testa vyn.

Grattis, din HTML-struktur är inställd! Testa hur bilden, texten, knappen, marginalerna, stoppningen och centreringen ser ut på olika skärmstorlekar. Om något verkar vara avstängt, kamma igenom din kod för att se om du kan hitta problem. För detaljerade instruktioner om hur du skapar och felsöker med HTML, kolla in den här artikeln från DeveloperDrive. Alla ser bra ut? Det är dags att lägga till stil med CSS.

Hjältebild CSS

Medan HTML skapar ordning lägger CSS (Cascading Style Sheets) till känsla. Det är ett regelbaserat språk som kompletterar HTML-elementen genom att använda stilistiska effekter. Till exempel låter CSS dig göra texten i en hjältebildrubrik ljusgul så att den dyker upp mot den lila bakgrunden.

Om du inte inkluderar CSS i din hjältebild, är HTML-elementen som standard de grundläggande webbläsaregenskaperna som exemplet nedan.

Bildkälla

Det är inte den mest attraktiva webbsidan, eller hur?

Genom att inkludera CSS-regler kan du utveckla en bild som drar besökare istället för att skrämma bort dem. Ovanstående HTML-exempel inkluderar CSS-regler, men låt oss gå igenom en grundläggande design så att du kan bearbeta den i din egen bild.

Följande mall beskriver den grundläggande HTML och CSS som behövs för att skapa en helbilds hjältebild. Du kan justera stilen genom att ändra reglerna under .hjälte or .hjältext element, som font-family, färg, gränsen, eller padding-top.

Bildkälla

För mer information och inspiration om sätt att använda CSS för bilder, se till hjälte-bild forum på GitHub. Nu är det dags att kolla in vad bra hjältebildskodning kan göra för ett företags webbsida.

Hjältebildsexempel

Liksom alla kreativa medier påverkas hjältebilder av trender. Kommer du ihåg när clipart var coolt? Vad sägs om när varje nyhetssida träffade dig med en stänksida?

För att skapa en relevant hjältebild idag, titta på dessa designtrender.

1. Parallax och Scrolling Animation

Vi upplever parallax varje dag när vi tittar på bilar som passerar eller går ner på gatan. Det är den optiska illusionen som gör att föremål nära oss verkar röra sig snabbare än föremål längre bort. I webbdesign använder parallax förgrund och bakgrund för att återskapa denna effekt. Resultatet verkar som magi. Se bara till att inte överväldiga besökare genom att använda för många rörliga element. Enkelhet är nyckeln här.

Rullande animation gör deltagande till målet. En bra rullningsanimation uppmuntrar människor att fortsätta rulla innan de erbjuder en unik, engagerande upplevelse. Rullande animationer finns i en mängd olika paket och fungerar bra i ett antal branscher, som detaljhandel, kreativa tjänster, nyhetspublikationer, utbildning och mer.

2. Abstrakta kompositioner

Cirklar, trianglar, ränder och färgblock är tillbaka på modet. Istället för att begränsa rymden och se till att allt är på sin plats, väcker abstrakta hjältebilder en känsla av frihet och kreativitet. Du kan hitta den här trenden som tar över teknikföretag och nystartade företag, som det här exemplet från Zendesk som innehåller video i en abstrakt halvcirkel för att hålla designen lekfull.

3. Mjuka färgscheman

Den genomsnittliga vuxna spenderar nästan åtta timmar per dag med digitala medier - och det kan leda till mycket ögonbelastning. Webbdesigners har noterat och börjar luta sig mot hjältebilder med neutrala, tilltalande färgpaletter. Denna trend dyker upp på webbplatser för detaljhandel, hälsa och medicin för att erbjuda en bekvämare upplevelse som är lätt att se.

Bildkälla

4. Produkter som designelement

Produkter är stjärnan i showen när det gäller hjältebilder. Företag vill visa sina erbjudanden och locka besökare att lära sig mer om funktionerna. För hjältebilder är det vanligt att produkter används som grafiska element eller dekonstrueras så att besökare kan gräva i detaljerna. Teknik- och detaljhandelsföretag använder ofta denna typ av hjältebild, men det kan fungera för alla varumärken som vill sätta sin produkt i framkant.

Bildkälla

Bildkälla

5. Livlig färg

Så långa platta färger, hej fin 3D-skuggning. Denna trend i hjältebild webbdesign handlar om att få människor att känna att de är inne på skärmen. Formgivare skapar dessa realistiska upplevelser med lutningar, skuggor och blandade färger. Även om denna trend sannolikt kommer att förbli inom teknik och appar, är det bra att dra människor till din webbplats.

Bildkälla

6. videoklipp

Forskning från Wyzowl visade att 84% av människorna har varit övertygade om att köpa en produkt eller tjänst av tittar på ett varumärkes video. Detta gör video till det perfekta visuella innehållet för en uppmärksammande hjältebild. Om du bestämmer dig för att använda en video är det bäst att hålla den under 30 sekunder lång och vara på en slinga. Som nämnts ovan vill du stänga av videon för en statisk hjältebild för din mobilwebbplats så att den inte äter upp data eller tar lång tid att ladda.

Hjälpbildens bästa metoder

Trender är bara en del av att skapa en stor hjältebild. Resten av magin bygger på beprövade designstandarder. Även om du inte är utbildad designer kan du följa dessa bästa metoder för en hjältebild som träffar din publik.

1. Storlek

Vi har redan pratat om de bästa dimensionerna för hjältebilder ovan (1,200 16 pixlar och ett bildförhållande på 9: XNUMX), så betrakta detta som en påminnelse om hur viktigt det är att ha rätt storlek. Du vill inte att webbläsarna ska ändra storlek på en bild åt dig eller så kan du sluta med en skraj, sträckt bild som skjuter ut besökare.

Proffstips: Experimentera med PNG- och JPG-filer för att ta reda på vilket resulterar i en snabbare sidladdningshastighet.

2. Harmony

Människor distraheras omedelbart av dålig design och kommer att klicka på din webbplats om din hjältebild inte stämmer överens med resten av din layout. Håll din estetik synkroniserad genom att noggrant välja teckensnitt, storlekar, färger, navigering, grafik och kopia.

Det är bra att referera till din varumärkesidentitet och riktlinjer när man kommer med ett hjältebildskoncept. Du vill inte att folk ska tappa intresset innan de kommer till de bra sakerna.

3. Organisation

En del av att skapa en harmonisk design är att ha utmärkt organisation. Ditt hjältebildinnehåll bör ha en logisk hierarki och flöde, så varje bit bygger på det som kom tidigare. Detta är oerhört viktigt för att para ihop bilder med kopia.

När en relevant bild är ihopkopplad med information kan folk komma ihåg 65% av informationen tre dagar senare. Men bara 10% kommer ihåg från enbart information. Se till att ditt meddelande är tydligt och ansluter till dina bilder. Det är bra att skapa en enkel trådram för hur din hjältebild kommer att organiseras på sidan.

4. Originalitet

Lagerfoton är en viktig del av innehållsmarknadsföring, men de kan skada mer än att hjälpa till när det gäller hjältebilder. Medan 40% av innehållsmarknadsförarna sa original grafik hjälpte dem att uppnå sina marknadsföringsmål, endast 13% av innehållsmarknadsförarna sa samma sak om stockfoton.

Du kan flexa din kreativitet genom att skapa originalhjältebilder med canva eller få inspiration från Behance. Saknar kvalitetsfoton? Bläddra Unsplash or Pexels för en mängd foton av hög kvalitet som kan användas för kommersiella och icke-kommersiella ändamål.

5. Konsistens

Den största kampen för att skapa engagerande bilder? 43% av marknadsförare säg att det producerar dem konsekvent. För att komma på ett fast schema, avsätt tid och resurser du behöver för att skapa grafik - till och med lägga till det i din marknadsföringsbudget.

Om du är knäckt för tiden, överväga att modernisera din gamla grafik. Det är ett smart sätt att spara tid och 51% av företagen har hittat att det är effektivt och effektivt.

Det finns inget värre än att landa på en webbsida som ser ut som om den gjordes i dotcom-bubblan. Det ser skissigt ut och du är rädd att klicka på något om det omdirigerar dig till något slags virus. Å andra sidan, att hälsas av en vacker hjältebild gör att du vill stanna och utforska sidan.

Som den första kontaktpunkten som människor har med ditt varumärke har hjältebilder en stor inverkan på din varumärkesuppfattning, webbplatstrafik och konvertering. Så det är dags att omsätta din nyvunna kunskap i praktiken och utforma en som drar människor in från första blick.

Källa: https://blog.hubspot.com/marketing/hero-image