Haluatko tehdä hyvän ensivaikutelman? Se alkaa sivustosi otsikosta. Käyttäjän näkee kuvan, joka jättää vaikutelman - hyvä tai huono - ja määrittää, onko käyttäjä klikkaa ja jatkaa tai jättää sivuston kokonaan.

Se on korkea järjestys yksittäiselle kuvaksi.

Keskeinen elementti sellaisen sankakuvan luomiseksi, joka vetää käyttäjiä sisään ja pitää heidät liikkeelle suunnassa, on kontrasti. (Vakavasti! Kaikki palaa suunnitteluteoriaan 101.) Pään, jossa on vastakkaisia ​​elementtejä koossa, väreissä ja mittakaavassa, tarjoaa oikean sekoitus visuaalista kiinnostusta ja kertoo käyttäjille, miten vuorovaikutuksessa mallin kanssa. Seuraavassa on muutamia tapoja maksimoida kontrasti polulla täydellisen sankakuvan luomiseen.

Rajaa strategisesti

Sankakuvan ei tarvitse täyttää laitteiden "ensimmäinen" -näyttöä. Älä jää kiinni siihen ansaan.

Rajaa vaikutuskuvan vaikutus sisällön perusteella. Harkitse muut elementit, jotka ovat tärkeitä käyttäjille, kun he sijoittuvat sivulle ja tekevät majoitusta myös niille. Riippuen tästä kehyksestä, tämä saattaisi tarkoittaa sitä, että sankarikuva on skaalattu suuremmaksi tai pienemmäksi kuin selainikkuna (harkitsemme vain normaaleja päätöslauselmia argumentin vuoksi).

Ennen kuin lopetat ajatuksen, harkitse sitä hetkeksi.

  • Matala kuva auttaa esikatselemaan muuta sisältöä.
  • Epätavallisen syvä kuva kannustaa käyttäjiä selata enemmän.
  • Kaikki epätavallinen muoto kiinnittää huomiota.
mukautuva

Harkitse animaatiota

Sinun ei tarvitse luoda täydellistä elokuvakokemusta lisätäksesi liikkuvia kuvia sankarin otsikkoon. Pienimmät liikkeet tekevät juuri tarpeeksi kontrastia silmän tarttumiseen.

Alhaiset liikkeet, kuten lentokone, joka lentää kuvan Bar Z -viinitorissa, antavat tämän kontrastin ilman ylivoimaa. Se on yksinkertainen vaihtoehto joillekin näyttävimmistä katsottavista videon otsikoista. Kontrastin elementti on kaksinkertainen: muotoilu on erilainen kuin monet muut käyttäjät, joille käyttäjä altistuu, ja hienovarainen liike on ihana ja melko odottamaton.

Toisaalta voit mennä kaikkiin animaatioon tai videon sankakuvaan. Liike voi olla erityisen mielenkiintoinen ja suosittu vaihtoehto. Käytä sitä samalla tavalla kuin pysäytyskuvaksi, kun lisäät efektit, kuten typografia ja toiminnot.

bar-z

Think Bold Typography

Sankarikuvan tyypinäytöllä pitäisi olla käyttäjä. Sen on oltava rohkea, vaikuttava ja ikimuistoinen.

Voit luoda tämän käyttämällä sekä kirjasintyypin valintaa että ruudulla olevia sanoja. (Ei Arial-otsikoita, jotka sanovat "Hello" täällä.)

Kirjoitustyylien ja viestien yhdistämisellä on oltava suora vaikutus ja valitus käyttäjälle. Olet kuullut, että ihmisillä on lyhyempi huomiota kuin kultakala; Sinun tehtäväsi on saada ne kauniilla kirjaimilla ja kielellä.

Kun kyseessä on lihavoitu tyyppi, kontrastin keskeiset elementit ovat väri ja koko.

  • Tyypin on oltava taustalla erottuva väri. Valo on tumma tai tumma valossa ovat parhaita vaihtoehtoja, kun on luettavuutta.
  • Lihavoitu on normaalilta poistuminen. Harkitse yli- tai alamittaista typografiaa sankarin otsikossa törmäyksessä.
  • Valitse sanat, joilla on merkitys. Ellei viestiä ole avainasemassa, et tarvitse otsikkoa koskevaa kappaletta. Valita muutamia avainsanoja, jotka houkuttelevat käyttäjiä oppimaan lisää. (Sanojen määrä vaikuttaa siihen, kuinka suuri tai pieni kirjain voi olla.)
tiny-jättiläinen

Valitse Väri huolellisesti

Sankarikuva ei välttämättä ole ollenkaan kuva. Se voi olla värilohko tai viileä rakenne.

Valitse väri, joka kuvaa tarkkaa tarkoitusta. Rohkainen väripainon otsikko voi vaikuttaa käyttäjiin, mutta väärä väri voi olla sammuttaminen.

Valoiset, trendikkäät vaihtoehdot ovat hyvä vaihtoehto. Mukava asia tässä vaihtoehdossa on, että voit sekoittaa sen aika ajoin vain vaihtamalla taustavärin. Suuri värillinen tausta voi myös auttaa vahvistamaan brändin identiteettiä - etenkin jos sillä on vahva väriyhdistys - ja se kykenee luettavuuteen yksinkertaisen luonteen vuoksi.

Väri on myös tärkeä asia, kun sitä käytetään toisen kuvan tai videon kanssa. Värillisestä typografiasta värillisiin käyttöliittymäelementteihin on tärkeää varmistaa, että kuvan värivalinnat sopivat muuhun muotoon. Suuri osa tästä johtuu väriteorian ymmärtämisestä värirenkaaseen niin, että kuva ja värivalinnat toimivat yhdessä suunnittelussa.

Mutta entä jos sankarikuva ja brändin värit eivät silmällä? Ajattele luovasti siitä, miten osia sankari kuvassa yhdessä. Kokeile värisäiliötä valokuvassa. katsele mustavalkoista kuvaa tai tekstiä. Siirrä korkealaatuisia elementtejä navigointipalkkiin, joka on valkoinen tai musta, jotta ne eivät pysy todellisesta kuvasta. Kun kuva ja valtuutetut värit eivät toimi hyvin, paras vaihtoehto on poistaa tai erottaa väri.

deskpass

Ajattele valoa ja tummia tiloja

Kuvan tummien ja kevyiden tilojen kirjanpito voi olla vaikein tehtävä, kun lisäät elementtejä kontrastin luomiseksi sankakuvaan. Erityisesti reagoivilla muodoilla ja raja-arvoilla tekstin tai painikkeiden sijoittaminen kuvaan voi muuttua eikä aina ole hyvä sijainti.

Mikä suunnittelija tekee?

  • Valitse toinen kuva;
  • valita erilainen tyyppinen perhe, koko tai väri;
  • lisätä värisävyä;
  • tehdä parhaansa.

Jokainen yllä olevasta on elinkelpoinen vaihtoehto. Paras vaihtoehto voi vaihdella projektin mukaan.

The Society Inc. sankakuva-liukusäätimen ratkaisu - jossa oli runsaasti varianssiä vaaleiden ja tummien välilyöntien välillä - oli sisällyttää logon päällys valkoisella tekstillä mustana. Se ei heikennä kuvia ja se on paljon vähemmän häiritsevä kuin voisi ajatella kuulemasta ajatusta. Keskuksen logo auttaa myös luomaan tuotemerkin ja visuaalisen identiteetin.

yhteiskunta

Sisällytä erillinen toiminto

Älä unohda CTA: ta!

Mitä haluat käyttäjien tekevän, kun he katsovat viileää sankarikuvaa? Kerro heille.

Toimintotoiminnon on oltava selkeä, täytetäänkö lomake, vieritä lisää sisältöä tai napsauta linkkiä toiseen sivuun. Sen pitäisi sisältää tarpeeksi määritelmää ja kontrastia niin, että se on helppo nähdä kuvan taustalla. (Mikä on CTA: n kohta, jos kukaan ei näe sitä?)

Väri ja koko ovat tässä erityisen tärkeitä. Painikkeen väri (tavallinen CTA-merkki) tulee erottaa muusta kuvasta. Sanat, jotka kertovat käyttäjille, mitä on tehtävä, on oltava poikkeuksellisen luettavissa, yksinkertaisia ​​ja selkeitä.

blue-polttarit

johtopäätös

Kontrasti on yksi hyvien mallien avaintekniikoista. Se luo elementtien välisen erotuksen ja auttaa käyttäjiä kohti haluttua toimintaa.

Ole erityisen varovainen luomalla tarpeeksi kontrastia suunniteltaessa sankarikuvaa niin, että käyttäjät tietävät tarkalleen, mitä toimintoja sivulle otetaan. Tarkastele mittareitasi ja jos niitä ei tapahdu, tarkista kontrastin määrä suunnittelussa. Saattaa olla aika lisätä sitä vielä enemmän.