Skapa den perfekta hjältebilden med hjälp av kontrast
Vill du göra ett bra första intryck? Det börjar med webbplatsens rubrik. Den bild som en användare ser lämnar ett visst bra eller dåligt-och bestämmer om den användaren klickar och fortsätter, eller lämnar webbplatsen helt och hållet.
Det är en lång order för en enda bild.
Nyckeln till att skapa en hjältebild som kommer att dra användare in och hålla dem rörliga runt designen är kontrast. (Allvarligt! Allt går tillbaka till designteori 101.) Ett huvud som har kontrastelement i storlek, färg och skala ger rätt mix av visuellt intresse och berättar användarna hur man interagerar med designen. Här är några sätt att maximera kontrast på vägen för att skapa en perfekt hjältebild.
Beskära strategiskt
Hjältebilden behöver inte fylla i "första" skärmen på enheter. Fånga inte i den fällan.
Beskär bilden för påverkan baserat på innehållet däri. Tänk på de andra elementen som är viktiga för användarna när de landar på sidan och gör boende för dem också. Beroende på denna ram kan det betyda att hjältebilden är skalad för att vara större eller mindre än webbläsarfönstret (låt oss bara överväga fler standardupplösningar för argumentets skull).
Innan du stryker vid idén, överväg det en stund.
- En grundbild hjälper till att förhandsgranska annat innehåll.
- En ovanligt djup bild kommer att uppmuntra användare att bläddra för mer.
- Eventuell ovanlig form kommer att dra uppmärksamhet.
Tänk på animering
Du behöver inte skapa en fullständig filmupplevelse för att lägga till rörliga bilder till hjältehuvudet. De minsta rörelserna ger bara tillräckligt kontrast för att fånga ögat.
Subtila rörelser, som planet som flyger över bilden för Bar Z Winery, ger det kontrastelementet utan att vara överväldigande. Det är ett enkelt alternativ till några av de mer prickiga videoskrivarna som blivit populära. Kontrastelementet är dubbelt: Designen är annorlunda att många av de andra som användare utsätts för och den subtila rörelsen är härlig och ganska oväntad.
Å andra sidan kan du gå in med animation eller video för en hjältebild. Rörelsen kan vara särskilt engagerande och är ett populärt alternativ. Använd det på samma sätt som du skulle göra en stillbild när det gäller att lägga till effekter som typografi och uppmaningar till handling.
Tänk fet typografi
Typografi i hjälte bilden ska wow användaren. Det måste vara djärvt, effektfullt och minnesvärt.
Du kan skapa detta med både typsnittval och orden på skärmen. (Inga Arial-rubriker som säger "Hej" här.)
Kombinationen av bokstäver och meddelanden måste ha direkt inverkan och överklagande på användaren. Du har hört att människor har kortare uppmärksamhet spänner än guldfisk; Det är ditt jobb att fånga dem med vacker bokstäver och språk.
När det gäller fetstil är de viktigaste elementen i kontrast färg och storlek.
- Typen måste vara en färg som sticker ut från bakgrunden. Ljus på mörkt eller mörkt på ljus är de bästa alternativen när det gäller läsbarhet.
- Fet är en utjämning från normen. Tänk på över- eller underskriven typografi på hjältehuvudet för påverkan.
- Välj ord med mening. Om det inte är nyckeln till ditt meddelande behöver du inte en paragraf i rubriken. Välj några nyckelord som lockar användare att lära sig mer. (Antalet ord påverkar hur stor eller liten bokstäver kan vara.)
Välj färg noggrant
En hjältebild kanske inte alls är en bild. Det kan vara ett färgblock eller en sval textur.
Välj en färg noggrant som visar den exakta meningen du tänker. En fet hjältehuvud kan imponera användare, men fel färg kan vara en avstängning.
Ljusa, trendiga alternativ är ett bra alternativ. Det fina med det här alternativet är att du kan blanda upp det från tid till annan bara genom att ändra bakgrundsfärgen. En stor färgbakgrund kan också bidra till att förstärka varumärkets identitet - särskilt om den har en stark färgförening - och låter sig läsbarhet på grund av designens enkla natur.
Färg är också en viktig faktor när den används med en annan bild eller video. Från färgad typografi till färgade användargränssnitt är det viktigt att se till att färgval i bilden matchar resten av designen. Mycket av detta går tillbaka till färgteori och en förståelse av färghjulet så att bild- och färgvalen fungerar tillsammans i designen.
Men vad händer om hjältebilden och varumärkesfärgerna inte går ihop? Tänk kreativt om hur man använder delarna i hjältebilden tillsammans. Prova ett färgöverlägg på fotot; betrakta svartvitt för bilden eller texten. Flytta högfärgselement till en navigeringsfält som är vit eller svart för att hålla dem borta från den faktiska bilden. När bilden och de mandatfärgerna inte spelar bra, är det bästa alternativet att eliminera eller skilja färgen.
Tänk om lätta och mörka rum
Redovisning av mörka och lätta utrymmen i en bild kan vara den svåraste uppgiften när du lägger till element för att skapa kontrast i en hjältebild. Speciellt med lyhörda format och brytpunkter kan placering av text eller knappar på en bild ändras och du kan inte alltid hitta en bra plats.
Vad är en designer att göra?
- Välj en annan bild
- välja en annan typ av familj, storlek eller färg;
- lägg till ett färgöverlägg
- gör det bästa av det.
Var och en av ovanstående är ett lönsamt alternativ. Det bästa alternativet kan variera beroende på projekt.
Society Inc. s lösning i hjälte bildreglaget - med stor variation mellan ljus och mörka utrymmen - var att inkludera en logotyp överlagring med vit text i svart form. Det förringar inte bilderna och är mycket mindre påträngande än vad du kanske tror från att höra idén. Logotypen i mitten hjälper också till att skapa varumärke och visuell identitet.
Inkludera ett tydligt uppmaning till handling
Glöm inte CTA!
Vad vill du att användarna ska göra när de tittar på din coola hjältebild? Säg till dem.
Uppmaningen till handling bör vara tydlig, om det är att fylla i ett formulär, bläddra efter mer innehåll eller klicka på en länk till en annan sida. Det bör innehålla tillräckligt med definition och kontrast så att den lätt ses mot bildbakgrunden. (Vad är poängen i en CTA om ingen ser det?)
Färg och storlek är av särskild betydelse här. Knappens färg (en vanlig CTA-kue) ska sticka ut från resten av bilden. Orden som säger att användarna måste göra det extremt läsbart, enkelt och tydligt.
Slutsats
Kontrast är en av de viktigaste teknikerna för någon bra design. Det skapar separation mellan element och hjälper användarna att styra användningen mot önskad åtgärd.
Var försiktig för att skapa tillräckligt kontrast när du utformar en hjältebild så att användarna vet exakt vilka åtgärder som ska vidtas på sidan. Titta på dina mätvärden och om dessa omvandlingar inte händer, ompröva mängden kontrast i designen. Det kan vara dags att förstärka det ännu mer.