Lav det perfekte heltebillede ved hjælp af kontrast
Vil du lave et godt første indtryk? Det starter med dit websteds overskrift. Billedet, som en bruger ser, vil efterlade et visnings-godt eller dårligt - og afgøre, om den bruger klikker og fortsætter eller forlader webstedet helt.
Det er en høj ordre for et enkelt billede.
Nøgleelementet til at skabe et helt-billede, der vil trække brugere ind og holde dem bevæger sig omkring designet er kontrast. (Alvorligt! Alt går tilbage til designteori 101.) Et hoved med kontrastelementer i størrelse, farve og skala giver den rette blanding af visuel interesse og fortæller brugerne, hvordan man interagerer med designet. Her er et par måder at maksimere kontrast på vejen til at skabe et perfekt helt-billede.
Beskær strategisk
Heltens billede behøver ikke at udfylde den "første" skærm på enheder. Bliv ikke fanget i den fælde.
Beskær billedet for påvirkning baseret på indholdet deri. Overvej de andre elementer, der er vigtige for brugerne, når de lander på siden og gør indkvartering for dem også. Afhængigt af denne ramme kan det betyde, at heltenes billede skaleres til at være større eller mindre end browservinduet (lad os bare overveje flere standardopløsninger for argumentets skyld).
Før du drømmer på ideen, overvej det et øjeblik.
- Et lavt billede vil hjælpe med at forhåndsvise andet indhold.
- Et usædvanligt dybt billede vil opfordre brugerne til at rulle for mere.
- Enhver usædvanlig form vil henlede opmærksomheden.
Overvej Animation
Du behøver ikke at lave en fuldfilm-filmoplevelse for at tilføje bevægelige billeder til heltens hovedtekst. De mindste bevægelsesbevægelser skaber lige nok kontrast til at få fat i øjet.
Subtile bevægelser, som flyet, der flyver over billedet til Bar Z Winery, giver det element af kontrast uden at være overvældende. Det er et simpelt alternativ til nogle af de mere prangende videohoveder, der er blevet populære. Kontrastelementet er to gange: Designet er anderledes, at mange af de andre, som brugerne udsættes for, og den subtile bevægelse er dejlig og temmelig uventet.
På den anden side kan du gå alt sammen med animation eller video til et helt-billede. Bevægelsen kan være særlig engagerende og er en populær mulighed. Brug det på samme måder som et stillbillede, når det kommer til at tilføje effekter som typografi og opkald til handling.
Tænk fed skriftografi
Typografi i helten billede skal wow brugeren. Det skal være dristigt, effektfuldt og mindeværdigt.
Du kan oprette dette med både skrifttypevalg og ordene på skærmen. (Ingen Arial overskrifter, der siger "Hej" her.)
Kombinationen af bogstaver stil og messaging skal have direkte indflydelse og appel på brugeren. Du har hørt, at folk har kortere opmærksomhed spænder end guldfisk; Det er dit job at fange dem med smuk bogstaver og sprog.
Når det kommer til fed skrift, er de vigtigste elementer i kontrast farve og størrelse.
- Typen skal være en farve, der skiller sig ud fra baggrunden. Lys på mørkt eller mørkt på lys er de bedste muligheder, når det kommer til læsbarhed.
- Fed er en uddybning fra normen. Overvej over- eller undersized typografi på helten header for indvirkning.
- Vælg ord med mening. Medmindre det er nøglen til din besked, behøver du ikke et afsnit i overskriften. Vælg nogle få nøgleord, der lokker brugerne til at lære mere. (Antallet af ord påvirker, hvor stor eller lille bogstaver der kan være.)
Vælg farve forsigtigt
Et helt billede er måske ikke et billede overhovedet. Det kunne være en farveblok eller en kølig tekstur.
Vælg en farve omhyggeligt, der skildrer den nøjagtige betydning, du har til hensigt. En fed helt header kan imponere brugere, men den forkerte farve kan være en slukning.
Lyse, trendy muligheder er et godt alternativ. Det gode ved denne mulighed er, at du kan blande det op fra tid til anden bare ved at ændre baggrundsfarven. En stor farve baggrund kan også bidrage til at styrke brandidentiteten - især hvis den har en stærk farveforening - og gør sig til læsbarhed på grund af designets enkle karakter.
Farve er også en vigtig overvejelse, når den bruges sammen med et andet billede eller en video. Fra farvet typografi til farvede brugergrænsefladeelementer er det vigtigt at sikre, at farvevalg i billedet passer til resten af designet. Meget af dette går tilbage til farve teori og en forståelse af farvehjulet, så billed- og farvevalgene samarbejder i designet.
Men hvad nu hvis helten billed og mærke farver ikke mesh? Tænk kreativt på, hvordan du bruger delene i heltenes billede sammen. Prøv et farveoverlay på billedet; overveje sort og hvid til billedet eller teksten. Flyt højfargeelementer til en navigationslinje, der er hvid eller sort for at holde dem væk fra det faktiske billede. Når billedet og de mandat farver ikke spiller godt, er den bedste mulighed at fjerne eller adskille farven.
Tænk over lys og mørke rum
Regnskaber for mørke og lette mellemrum i et billede kan være den vanskeligste opgave, når du tilføjer elementer for at skabe kontrast i et helt-billede. Specielt med lydhør formater og breakpoints kan placeringen af tekst eller knapper på et billede ændres, og du kan ikke altid finde en god placering.
Hvad er en designer at gøre?
- Vælg et andet billede;
- vælge en anden type familie, størrelse eller farve;
- Tilføj et farveoverlay
- gøre det bedste ud af det.
Hver af ovenstående er en levedygtig mulighed. Den bedste løsning kan variere efter projekt.
Society Inc. s løsning i helten billed skyderen - med masser af variation mellem lyse og mørke rum - skulle indeholde et logo overlay med hvid tekst i sort form. Det forringer ikke billederne og er meget mindre påtrengende end du måske tror på at høre ideen. Logoet i centrum hjælper også med at etablere brand og visuel identitet.
Medtag et særskilt opkald til handling
Glem ikke CTA!
Hvad vil du have, brugerne skal gøre, når de ser på dit sejede heltebillede? Fortæl dem.
Opkaldet til handling skal være klart, om det er at udfylde en formular, rulle for mere indhold eller at klikke på et link til en anden side. Det skal indeholde tilstrækkelig definition og kontrast, så det let ses imod billedbakgrunden. (Hvad er pointen i en CTA, hvis ingen ser det?)
Farve og størrelse er af særlig betydning her. Knappenes farve (en fælles CTA-cue) skal skille sig ud fra resten af billedet. Ordene der fortæller brugerne, hvad de skal gøre, skal være usædvanligt læsbare, enkle og klare.
Konklusion
Kontrast er en af de vigtigste teknikker til ethvert godt design. Det skaber adskillelse mellem elementer og hjælper med at guide brugerne mod den ønskede handling.
Vær særlig opmærksom på at skabe nok kontrast, når du designer et heltbillede, så brugerne ved præcis, hvilke handlinger der skal foregå på siden. Kig på dine beregninger, og hvis disse konverteringer ikke sker, skal du tænke over mængden af kontrast i designet. Det kan være tid til at forstærke det endnu mere.