Lag det perfekte helten bildet ved hjelp av kontrast
Vil du gjøre et godt førsteinntrykk? Det starter med nettstedets overskrift. Bildet som en bruker ser, vil gi et godt eller dårlig inntrykk - og avgjøre om brukeren klikker og fortsetter, eller forlater nettstedet helt.
Det er en høy ordre for et enkelt bilde.
Nøkkelelementet til å skape et heltbilde som vil trekke brukere inn og holde dem beveger seg rundt design er kontrast. (Alvorlig! Alt går tilbake til designteori 101.) Et hode som har kontrastelementer i størrelse, farge og skala, gir den rette blandingen av visuell interesse og forteller brukerne hvordan de skal samhandle med designet. Her er noen måter å maksimere kontrast på banen til å skape et perfekt heltbilde.
Beskjære strategisk
Hero-bildet trenger ikke å fylle "første" skjermen på enheter. Ikke bli fanget i den fellen.
Beskjær bildet for påvirkning basert på innholdet deri. Tenk på de andre elementene som er viktige for brukerne når de lander på siden og gjør innkvartering for dem også. Avhengig av dette rammeverket, kan det bety at heltenes bilde skaleres til å være større eller mindre enn nettleservinduet (la oss bare vurdere flere standardoppløsninger for argumentets skyld).
Før du drar på ideen, bør du vurdere det for et øyeblikk.
- Et grunt bilde vil bidra til å forhåndsvise annet innhold.
- Et uvanlig dypt bilde vil oppfordre brukere til å rulle etter mer.
- Enhver uvanlig form vil trekke oppmerksomheten.
Vurder Animasjon
Du trenger ikke å lage en fullverdig kinematografisk opplevelse for å legge til bevegelige bilder til heltens topptekst. Den minste berøringen av bevegelse skaper akkurat nok kontrast for å få tak i øyet.
Subtile bevegelser, som flyet som flyr over bildet for Bar Z Winery, gir det elementet i kontrast uten å være overveldende. Det er et enkelt alternativ til noen av de mer prangende videooverskriftene som har blitt populære. Kontrastelementet er todelt: Designet er annerledes at mange av de andre brukerne blir utsatt for og den subtile bevegelsen er herlig og ganske uventet.
På den annen side kan du gå alt med animasjon eller video for et heltbilde. Bevegelsen kan være spesielt engasjerende og er et populært alternativ. Bruk den på samme måter som du ville et stillbilde når det gjelder å legge til effekter som typografi og oppfordringer.
Tenk fet skrift
Typografi i heltenes bilde skal wow brukeren. Det må være dristig, effektfull og minneverdig.
Du kan opprette dette med både skrifttypevalg og ordene på skjermen. (Ingen Arial overskrifter som sier "Hei" her.)
Kombinasjonen av brevstil og meldinger må ha direkte innvirkning og appell på brukeren. Du har hørt at folk har kortere oppmerksomhet spenner enn gullfisk; Det er din jobb å fange dem med vakker bokstaver og språk.
Når det gjelder fet skrift, er de viktigste elementene i kontrast farge og størrelse.
- Typen må være en farge som skiller seg ut fra bakgrunnen. Lys på mørkt eller mørkt på lys er de beste alternativene når det gjelder lesbarhet.
- Fet er en utjevning fra normen. Vurder over- eller undersized typografi på heltenes header for innvirkning.
- Velg ord med mening. Med mindre det er nøkkelen til meldingen, trenger du ikke et avsnitt i overskriften. Velg noen få nøkkelord som lokker brukerne til å lære mer. (Antall ord vil påvirke hvor stor eller liten bokstaver kan være.)
Velg Farge forsiktig
Et heltbilde er kanskje ikke et bilde i det hele tatt. Det kan være en fargeblokk eller kult tekstur.
Velg en farge nøye som skildrer den nøyaktige betydningen du har til hensikt. En dristig fargehelteboks kan imponere brukere, men feil farge kan være en avslag.
Lyse, trendy alternativer er et godt alternativ. Den fine tingen om dette alternativet er at du kan blande det fra tid til annen bare ved å endre bakgrunnsfargen. En stor fargebaggrunn kan også bidra til å forsterke merkeidentitet - spesielt hvis den har en sterk fargeklassifisering - og gir seg lesbarhet på grunn av designens enkle natur.
Farge er også et viktig hensyn når det brukes med et annet bilde eller en video. Fra farget typografi til fargede brukergrensesnittelementer, er det viktig å sørge for at fargevalg i bildet samsvarer med resten av designet. Mye av dette går tilbake til fargeteori og forståelse av fargeskiven, slik at bildet og fargevalgene samarbeider i design.
Men hva om heltenes bilde og merkevarefarger ikke maskerer? Tenk kreativt om hvordan du bruker delene i heltenes bilde sammen. Prøv et fargeoverlegg på bildet; vurdere svart og hvitt for bildet eller teksten. Flytt høyfargeelementer til en navigeringslinje som er hvit eller svart for å holde dem utenfor selve bildet. Når bildet og de merkede fargene ikke spiller bra, er det beste alternativet å eliminere eller skille fargen.
Tenk om lys og mørke rom
Regnskap for mørke og lette mellomrom i et bilde kan være den vanskeligste oppgaven når du legger til elementer for å skape kontrast i et heltbilde. Spesielt med responsive formater og bruddpunkter, kan plasseringen av tekst eller knapper på et bilde endres, og du kan ikke alltid finne en flott beliggenhet.
Hva er en designer å gjøre?
- Velg et annet bilde;
- Velg en annen type familie, størrelse eller farge;
- legg til et fargeoverlegg
- gjøre det beste ut av det.
Hver av de ovennevnte er et levedyktig alternativ. Det beste alternativet kan variere etter prosjekt.
The Society Inc. 's løsning i helten bilde skyvekontrollen - med stor variasjon mellom lyse og mørke mellomrom - var å inkludere en logo overlegg med hvit tekst i svart form. Det forringer ikke bildene og er mye mindre påtrengende enn du kanskje tror fra å høre ideen. Logoen i sentrum bidrar også til å etablere merkevare og visuell identitet.
Ta med et klart anrop til handling
Ikke glem CTA!
Hva vil du at brukerne skal gjøre etter at de ser på ditt kule heltbilde? Fortelle dem.
Anropet til handling bør være klart, om det er å fylle ut et skjema, bla for mer innhold eller å klikke en kobling til en annen side. Den skal inneholde nok definisjon og kontrast slik at den lett kan ses mot bildebakgrunnen. (Hva er poenget i en CTA hvis ingen ser det?)
Farge og størrelse er av særlig betydning her. Fargene på knappen (en vanlig CTA-kø) skal skille seg ut fra resten av bildet. Ordene som forteller brukerne hva de skal gjøre, må være eksepsjonelt lesbare, enkle og klare.
Konklusjon
Kontrast er en av de viktigste teknikkene for enhver god design. Det skaper separasjon mellom elementer og hjelper brukerne til å motvirke ønsket handling.
Vær spesielt forsiktig med å skape nok kontrast når du utformer et heltbilde, slik at brukerne vet nøyaktig hvilke tiltak som skal tas på siden. Kik på dine beregninger, og hvis disse konverteringene ikke skjer, må du tenke på mengden av kontrast i designet. Det kan være på tide å øke det enda mer.