# Brändin liike: miten brändi liikkuu ja miltä se näyttää

[Canonical HTML page](https://gradiently.design/fi/guide/motion-branding-guide)

Kaksi brändiä voi jakaa fontin ja värin mutta tuntua täysin erilaisilta liikkeessä. Liike on identiteetin osa, jonka useimmat jättävät sattuman varaan.

## The short version

- Brändin liike on sääntöjoukko sille, miten logo, teksti, taustat ja käyttöliittymä liikkuvat.
- Keskeiset valinnat ovat tahti, liikkeen kiihtyminen ja hidastuminen, suunta sekä osat, jotka saavat ylipäätään liikkua.
- Liikkeen pitää vastata brändin luonnetta: rauhalliset brändit liikkuvat hitaasti ja pehmeästi, energiset nopeammin ja enemmän kohteensa yli.
- Liikesäännöt ovat hyödyllisimmillään muutamana nimettynä kestona ja liikekäyränä, jotka suunnittelijat ja kehittäjät jakavat.
- Hyvä brändin liike sisältää aina vähennetyn liikkeen version ihmisille, jotka pyytävät laitteiltaan vähemmän liikettä.

**Brändin liike** on identiteetin osa, joka kertoo, miten brändi liikkuu: kuinka nopeasti asiat tapahtuvat, miten ne kiihtyvät ja hidastuvat, mihin suuntaan ne kulkevat ja mikä saa ylipäätään liikkua. Paikalleen napsahtava logo kertoo eri asian kuin hitaasti liukuva. Muutamaksi säännöksi kirjattuna liike saa kaikki videot, tarinat, verkkosivut ja sovellukset tuntumaan samalta brändiltä, vaikka värit ja sommittelut muuttuvat.

## Miksi liike kuuluu brändi-identiteettiin

Useimmat brändiohjeet päättyvät logoon, väriin ja typografiaan, koska ne kirjoitettiin painotuotteita varten. Nyt ihmiset kohtaavat brändin usein liikkeessä: Reelissä, animoidussa tarinassa, verkkosivun pääkuvassa tai tuotteen käyttöliittymässä. Jos kukaan ei päätä niiden liikettä, jokainen suunnittelija ja työkalu päättää erikseen. Brändi alkaa käyttäytyä kuin monta eri yritystä.

Myös enimmäkseen paikallaan oleva brändi hyötyy. Yksi sääntö, kuten ”sanat tulevat pehmeästi nousten, eivät koskaan pyörien”, estää paljon brändiin sopimatonta työtä ennen sen alkua. Jos brändisi ei ole koskaan liikkunut, [liikegrafiikka brändeille](https://gradiently.design/fi/guide/motion-for-still-brands) tarjoaa lempeän aloituksen.

## Brändin liikkeen neljä päätöstä

1. **Tahti.** Kuinka kauan asiat kestävät. Lyhyet kestot tuntuvat tehokkailta ja eläviltä, pitkät rauhallisilta, harkituilta tai ylellisiltä.
2. **Liikekäyrä.** Miten liike kiihtyy ja hidastuu. Pehmeä loppuhidastus tuntuu luonnolliselta, pieni ylitys leikkisältä ja tasainen nopeus mekaaniselta. [Liikekäyrät](https://gradiently.design/fi/guide/easing) näyttää käyrät.
3. **Suunta ja käyttäytyminen.** Nousevatko, liukuvatko, skaalautuvatko, häipyvätkö vai paljastuvatko asiat? Valitse kaksi tai kolme tapaa ja käytä niitä johdonmukaisesti.
4. **Liikkuvat osat.** Päätä, mitkä saavat liikkua: tausta, sanat, logo tai valokuvat. Pidättyvyys erottaa laadukkaan ilmeen kiireisestä.

| Luonne | Tahti | Liikekäyrä | Tavallinen käyttäytyminen |
| --- | --- | --- | --- |
| Rauhallinen, laadukas | Hidas, 400-700 ms | Pehmeä loppuhidastus | Häivytykset, hitaat nousut, lipuva väri |
| Itsevarma, toimituksellinen | Keskinopea, 250-400 ms | Jämäkkä loppuhidastus | Pyyhkäisyt, selkeät liu’ut, rytmin mukaiset leikkaukset |
| Leikkisä, ystävällinen | Nopea, 200-350 ms | Loppuhidastus ja pieni ylitys | Ponnahdukset, pomput, sisään skaalautuminen |
| Tekninen, tarkka | Nopea, 150-250 ms | Terävä alku- ja loppuhidastus | Suorat liu’ut, kirjoituskoneanimaatio |

Lähtökohtia käyttöliittymän ja tekstin liikkeelle. Taustan ja tunnelman liike on paljon hitaampaa ja mitataan sekunneissa.

Taustaperiaatteita, kuten ajoitusta, hierarkiaa ja jälkiliikettä, käsittelee [liikesuunnittelun periaatteet](https://gradiently.design/fi/guide/motion-design-principles). Brändin liike tarkoittaa niiden valitsemista ja valintoihin sitoutumista.

## Yhteiset liikesäännöt suunnittelijoille ja kehittäjille

Liikeohjeet epäonnistuvat pelkkinä adjektiiveina. ”Sulava ja itsevarma” tarkoittaa jokaiselle eri asiaa. Nimeä muutama kesto ja liikekäyrä ja anna ne suunnittelijoille sekä kehittäjille samoilla sanoilla. Brändi liikkuu silloin samalla tavalla videoeditorissa ja koodissa.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

Brändin liike tokeneina. Kolme kestoa, yksi taustan tahti ja kolme nimettyä käyrää kattavat lähes kaiken.

Huomaa viimeinen sääntö. Liike häiritsee joitakin ihmisiä tai saa heidät voimaan pahoin, joten he pyytävät laitteeltaan vähemmän liikettä. Kattava liikemäärittely kertoo, mitä silloin tapahtuu, yleensä yksinkertainen häivytys tai ei liikettä lainkaan. [Vähennetty liike](https://gradiently.design/fi/guide/reduced-motion) selittää toteutuksen.

## Liike brändin eri aineistoissa

| Aineisto | Mitä määritellään | Esimerkkisääntö |
| --- | --- | --- |
| Logo | Sisääntulo, lepotila, paikallaan pysymisen kesto | Piirtyy 800 ms:ssa, pysyy paikallaan, ei koskaan toistu |
| Teksti | Yksi tai kaksi sisääntulotapaa | Otsikot nousevat, tukirivit ilmestyvät hetkeä myöhemmin |
| Taustat | Nopeus, suunta ja toistuminen | Väri lipuu hitaasti ja toistuu 12 sekunnin välein |
| Siirtymät | Miten näkymä tai sivu korvaa toisen | Pyyhkäisy lukusuuntaan, ei koskaan pyörähdystä |
| Käyttöliittymä | Osoitus, painallus, avaaminen ja sulkeminen | Paneelit avautuvat peruskestolla ja sulkeutuvat nopeammin |

Yksi rivi aineistoa kohti riittää. Jos sääntö tarvitsee kappaleen selitykseksi, se on luultavasti liian monimutkainen.

Logo saa yleensä eniten huomiota mutta näkyy harvimmin. Taustat ja teksti ovat näytöllä paljon enemmän, joten yhtenäisyys kannattaa niissä. Itse logoa käsittelee [animoitu logo](https://gradiently.design/fi/guide/animated-logo), joka esittelee tärkeimmät lähestymistavat.

Pystysuunnitelma, jossa toimituksellinen otsikko hitaasta tekemisestä on pehmeästi lipuvalla liukuvärillä

Rauhallinen brändi: pitkät kestot, lipuva väri ja pehmeästi ilmestyvät, paikallaan pysyvät sanat.

Pystyjulkaisu uudesta tuotteesta, tekstinä Se on täällä, kirkkaat värit ja rohkea sommittelu

Leikkisä brändi: nopeampi tahti, yli ponnahtavat sanat ja kirkkaampi taustaliike.

## Brändisi tavoin liikkuvat taustat

Useimmissa brändisisällöissä näkyvin liike on taustassa: liikkuva väri tarinan, Reelin tai pääkuvan takana. Taustaliike myös lainataan useimmin kuvapankeista, jolloin se ei kuulu kenellekään. Tausta, jonka värit, valo, rakeisuus ja liike ovat omiasi, rakentaa tunnistettavuutta enemmän kuin kerran nähty monimutkainen logoanimaatio.

Yksi brändin värikenttä: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Tällainen tausta, joka liikkuu hitaasti ja aina samalla tavalla, muuttuu yhtä tunnistettavaksi kuin logo.

Näin Markit toimivat Gradientlyssä. Mark on resepti väreistä, materiaaleista, valosta, rakeisuudesta, liikkeestä ja typografisesta äänestä. Liike kuuluu sen identiteettiin eikä ole lisättävä tehoste. Jokainen sitä käyttävä työ tarinasta diaan liikkuu samalla tavalla. Koska jokainen Mark on ainutlaatuinen ja sillä on yksi omistaja, kenenkään muun sisältö ei liiku aivan kuten sinun. [Brändin liukuvärijärjestelmä](https://gradiently.design/fi/guide/brand-gradient-system) kertoo värien rakentamisesta sen ympärille.

### Brändiin sopimaton liike

- Jokainen suunnittelija valitsee omat siirtymänsä
- Kaikki osat animoituvat kerralla
- Kuvapankkien liikkuvat taustat
- Ohjeissa on vain adjektiiveja
- Ei suunnitelmaa vähennetylle liikkeelle

### Brändin liike

- Kaksi tai kolme nimettyä tapaa kaikkialla
- Yksi asia liikkuu kerrallaan järjestyksessä
- Brändille kuuluva tausta
- Nimetyt kestot ja käyrät yhteisissä tokeneissa
- Määritelty paikallaan oleva tai häivyttyvä varaversio

## FAQ

### Mitä brändin liike tarkoittaa?

Se on sääntöjoukko brändin liikkumiselle: tahti, liikekäyrät, suunta ja liikkuvat osat. Se pitää videot, somejulkaisut, verkkosivut ja sovellukset saman brändin tuntuisina.

### Mitä brändin liikeohjeiden pitää sisältää?

Muutama nimetty kesto ja liikekäyrä, kaksi tai kolme sisääntulotapaa, logon, tekstin, taustojen ja siirtymien säännöt sekä vähennetyn liikkeen toiminta.

### Kuinka nopeita brändianimaatioiden pitäisi olla?

Käyttöliittymän ja tekstin liike kestää yleensä noin 150-700 millisekuntia, energisillä brändeillä nopeammin ja rauhallisilla hitaammin. Taustaliike on paljon hitaampaa ja mitataan sekunneissa.

### Tarvitseeko pieni brändi liikeohjeet?

Lyhyt versio auttaa jokaista videoita tai tarinoita julkaisevaa brändiä. Jo yksi sääntö sanojen sisääntulolle ja yksi liikkuva tausta pitävät sisällön yhtenäisenä.