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

[Canonical HTML page](https://gradiently.design/fi/guide/living-brand-identity)

Useimmat identiteetit suunniteltiin paperille ja liimattiin sitten puhelimiin. Elävä brändi suunnitellaan näytöille: se liikkuu hieman, sopii joka muotoon ja tekee tilaa sisällölleen.

## The short version

- Elävä brändi-ilme liikkuu, mukautuu joka muotoon ja reagoi päälle asetettuun sisältöön kiinteänä kuvana pysymisen sijaan.
- Liike auttaa näytöillä, sillä hienovarainen muutos kiinnittää katseen syötteessä ilman videokuvausta.
- Mukautuva luettavuus tarkoittaa, että tausta muuttuu sanojen kohdalla, jotta teksti säilyy luettavana joka kuvassa.
- Eläväkin identiteetti tarvitsee pysyvät säännöt: sama väriperhe, materiaali, kirjasin ja liiketyyppi joka kerta.
- Hyvä elävä brändi kunnioittaa vähennettyä liikettä suosivia ja tarjoaa pysäytetyn version.

**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.

| Toimintatapa | Merkitys | Hyöty |
| --- | --- | --- |
| Liike | Tausta ajelehtii, hengittää tai siirtää valoa hitaasti | Kiinnittää katseen selatessa huutamatta |
| Mukautuminen | Sommittelee itsensä joka kokoon rajautumisen sijaan | Ilmeen paras kohta osuu oikeaan paikkaan joka muodossa |
| Reagointi | Muuttuu sanojen kohdalla niiden pitämiseksi luettavina | Jokainen otsikko erottuu ilman laatikoita, varjoja tai sumennusta |

Liike, mukautuminen ja reagointi muuttavat yhdessä identiteetin kuvasta pinnaksi.

Elävä brändi on sukua [dynaamiselle identiteetille](https://gradiently.design/fi/guide/dynamic-brand-identity), 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](https://gradiently.design/fi/guide/motion-for-still-brands) ja [animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background) käsittelevät toteutusta tarkemmin.

### Vältä

- Nopeaa värien vaihtumista
- Pomppivia tai pyöriviä sanoja
- Eri animaatiotyyliä joka julkaisussa
- Silmukoita, joiden lopussa näkyy hyppy

### Tee näin

- Hidas valon ajelehtiminen pinnalla
- Paikallaan olevat sanat tai yksi rauhallinen sisääntulo
- Yksi liiketunnus koko brändille
- Saumaton silmukka, jonka liitos ei näy

## 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](https://gradiently.design/fi/guide/one-look-every-size) näyttää käytännön toteutuksen.

- Tarina 1080×1920: 1080 × 1920
- Instagram-julkaisu 1080×1350: 1080 × 1350
- Linkin esikatselu 1200×630: 1200 × 630
- LinkedIn-banneri 1584×396: 1584 × 396

Hyvin korkeasta hyvin leveään. Elävä identiteetti sommittelee itsensä joka muotoon yhden kuvan rajaamisen sijaan.

## 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.

Tanssikoulun julkaisu, jossa liukuvärin kirkas alue kulkee suoraan otsikon läpi

Kiinteä tausta: kirkkain alue voi osua suoraan otsikon taakse.

Sama tanssikoulun julkaisu, jossa liukuvärin rauhallinen tumma alue on otsikon takana

Reagoiva tausta: rauhallinen alue siirtyy sanojen taakse ja teksti pysyy terävänä.

Taustalla olevat periaatteet löytyvät [tekstistä liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) sekä [värikontrastista ja saavutettavuudesta](https://gradiently.design/fi/guide/color-contrast-accessibility).

## 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ä](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.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 */
  }
}
```

Hidas liike tummansinisellä, sinisellä ja sinivihreällä pinnalla sekä pysäytetty kuva vähennettyä liikettä suosiville. Lisää [vähennetystä liikkeestä](https://gradiently.design/fi/guide/reduced-motion).

## Aloita elävä brändi rakentamatta kaikkea uudelleen

1. **Säilytä pysyvä ydin** Värit, kirjasimet ja logo pysyvät ennallaan. Elävyys on niiden päälle lisätty toimintatapa.
2. **Tee taustasta liikkuva osa** Se täyttää suurimman tilan ja kantaa vähiten tietoa, joten liike ei vie selkeyttä.
3. **Valitse yksi liiketunnus** Ajelehtiminen, hidas valon hengitys tai hienovarainen kimmellys. Kirjaa se [brändin tyylioppaaseen](https://gradiently.design/fi/guide/brand-style-guide).
4. **Piirrä jokainen muoto erikseen** Tee jokainen koko samasta reseptistä yhden päätiedoston rajaamisen sijaan.
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.

## FAQ

### Mikä on elävä brändi-identiteetti?

Identiteetti, jonka visuaalisuus liikkuu hienovaraisesti, mukautuu joka muotoon ja reagoi päälle asetettuihin sanoihin säilyttäen samat värit, materiaalin ja kirjasimen.

### Onko liikebrändäys vain suurille yrityksille?

Ei. Hitaasti liikkuva tausta paikallaan pysyvien sanojen takana riittää. Se ei vaadi videokuvausta tai animaatiotiimiä.

### Vaikeuttaako liikkuva tausta tekstini lukemista?

Voi vaikeuttaa, jos kirkkaat tai levottomat alueet kulkevat sanojen takana. Pidä liike hitaana ja pinnan rauhallisin osa tekstin takana.

### Miten elävän brändin pitäisi käsitellä vähennetyn liikkeen asetusta?

Näytä saman ilmeen pysäytetty kuva, kun laite pyytää vähennettyä liikettä. Käytä verkossa prefers-reduced-motion-mediakyselyä.