Elävä brändi-ilme: liikkuva ja mukautuva identiteetti

Elävä brändi-ilme on näytöille suunniteltu identiteetti: sen visuaalisuus liikkuu hienovaraisesti, sommittelee itsensä eri muotoihin ja reagoi päälle asetettuun sisältöön, jotta sanat erottuvat aina. Useimmat brändi-ilmeet piirrettiin kiinteinä kuvina ja rajattiin sitten puhelimiin, bannereihin ja tarinoihin. Elävä brändi pitää samat värit, materiaalin ja kirjasimen, mutta käyttäytyy enemmän pintana kuin kuvana. Se on luonteva seuraava askel pääasiassa syötteissä eläville brändeille.

Mikä tekee brändi-identiteetistä elävän

Kolme toimintatapaa erottaa elävän identiteetin staattisesta. Et tarvitse kaikkia heti, mutta jokainen auttaa brändiä tuntumaan kotoisalta siellä, missä ihmiset sen näkevät.

Elävä brändi on sukua dynaamiselle identiteetille, mutta painotus on eri. Dynaaminen identiteetti vaihtaa muotoaan tarkoituksella työstä toiseen. Elävä identiteetti voi näyttää samalta joka työssä. Muuttuva asia on sen toiminta työn sisällä: liikkuminen, sopiminen ja tilan tekeminen.

Liike: pieni, hidas ja aina samaa lajia

Liike on elävän brändin näkyvin osa ja helpoin liioitella. Tavoite on elävältä tuntuva tausta, joka ei kilpaile viestin kanssa. Pidä sanat paikallaan, anna pinnan liikkua hitaasti ja käytä kaikkialla samaa liikettä, jotta siitä tulee osa ilmettä. Liike staattisille brändeille ja animoidut liukuväritaustat käsittelevät toteutusta tarkemmin.

Mukautuminen: yksi ilme joka muotoon

Brändi voi tarvita viikossa tarinan, syötejulkaisun, linkkikuvan ja LinkedIn-bannerin. Kaikkiin rajattu kiinteä kuva menettää parhaat kohtansa ainakin yhdessä. Elävä identiteetti piirtyy joka muotoon, joten valo ja rauhalliset alueet asettuvat järkevästi aina. Yksi ilme joka kokoon näyttää käytännön toteutuksen.

Reagointi: taustat, jotka tekevät sanoille tilaa

Liukuvärillä tai liikkuvalla pinnalla kontrasti vaihtuu kuvan eri kohdissa ja ajan myötä. Yhtenä sekuntina erottuva otsikko voi seuraavana upota kirkkaaseen läikkään. Tavalliset korjaukset, tekstilaatikko, varjo tai sumennus, kilpailevat kaikki taustan kanssa. Reagoiva identiteetti ratkaisee asian alkulähteellä: pinnan rauhallisin osa asettuu sanojen taakse ja kirjainten lähellä värit syvenevät tai vaalenevat.

Taustalla olevat periaatteet löytyvät tekstistä liukuvärillä sekä värikontrastista ja saavutettavuudesta.

Kunnioita vähennettyä liikettä

Jotkut ottavat laitteen asetuksista vähennetyn liikkeen käyttöön, koska animaatio aiheuttaa pahoinvointia tai häiritsee. Verkossa elävän brändin pitäisi kunnioittaa valintaa ja näyttää saman ilmeen pysäytetty versio. Siihen riittää muutama CSS-rivi, jotka on dokumentoitu MDN:ssä.

.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}

Aloita elävä brändi rakentamatta kaikkea uudelleen

1. 1

   Säilytä pysyvä ydin

   Värit, kirjasimet ja logo pysyvät ennallaan. Elävyys on niiden päälle lisätty toimintatapa.

2. 2

   Tee taustasta liikkuva osa

   Se täyttää suurimman tilan ja kantaa vähiten tietoa, joten liike ei vie selkeyttä.

3. 3

   Valitse yksi liiketunnus

   Ajelehtiminen, hidas valon hengitys tai hienovarainen kimmellys. Kirjaa se brändin tyylioppaaseen.

4. 4

   Piirrä jokainen muoto erikseen

   Tee jokainen koko samasta reseptistä yhden päätiedoston rajaamisen sijaan.

5. 5

   Tarkista jokainen tekstirivi

   Jokaisessa kuvassa ja muodossa sanojen pitäisi erottua ilman laatikkoa takana.

Gradiently on rakennettu juuri tätä varten. Mark on elävä tausta: värien, materiaalien, valon, rakeisuuden, liikkeen ja typografisen äänen resepti, joka piirtyy reaaliajassa suunnitelmien taakse. Se sommittelee itsensä joka kokoon ja siirtää rauhallisimman alueensa sanojesi taakse. Automaattinen muste valitsee vaalean tai tumman tekstin rivikohtaisesti Markin omasta paletista. Sanat voivat tulla sisään yksinkertaisilla animaatioilla, kuten nousulla tai pyyhkäisyllä. Prolla viet suunnitelman liikkuvana GIF:nä tai MP4- ja WebM-muodossa selaimen tukiessa tallennusta.