# Brändiääni ja visuaalit: saa ilmeesi kuulostamaan sinulta

[Canonical HTML page](https://gradiently.design/fi/guide/brand-voice-and-visuals)

Rauhallinen viesti äänekkäässä ilmeessä vaikuttaa epäaidolta, ja ihmiset huomaavat sen ennen kuin osaavat sanoa miksi. Tässä on käytännön kartta siitä, miltä kuulostat, siihen, miltä näytät.

## The short version

- Brändiääni on se, miltä brändi kuulostaa sanoissa, ja sen visuaalien pitäisi ilmaista sama luonne värissä, kirjasimessa, tekstuurissa, liikkeessä ja asettelussa.
- Kun ääni ja visuaalit ovat ristiriidassa, kuten lempeä viesti äänekkäässä neonilmeessä, ihmiset aistivat epäsuhdan, vaikka eivät osaisi nimetä sitä.
- Jokainen äänen piirre vastaa konkreettisia visuaalisia valintoja: rauhallinen viittaa pehmeään kontrastiin ja hitaaseen liikkeeseen, rohkea korkeaan kontrastiin ja paksuun kirjasimeen.
- Kirjoita jokainen äänen piirre muotoon ”tämä, ei tuo”, jotta visuaalisilla valinnoilla on sekä suunta että raja.
- Liikkeellä on myös ääni: animaation nopeus ja pehmennys voivat kuulostaa rauhalliselta, rohkealta, leikkisältä tai täsmälliseltä.

**Brändiäänesi** on se, miltä brändisi kuulostaa sanoissa: rauhallinen tai rohkea, leikkisä tai täsmällinen, lämmin tai viileä. Visuaalisi pitäisi sanoa täsmälleen sama asia värissä, kirjasimessa, tekstuurissa, liikkeessä ja asettelussa. Käytännöllinen tapa päästä sinne on ottaa jokainen äänen piirre ja liittää se tiettyihin visuaalisiin valintoihin ja tarkistaa sitten jokainen suunnitelma tätä karttaa vasten. Kun nämä kaksi sopivat yhteen, julkaisu tuntuu vilpittömältä ennen kuin kukaan lukee sen.

Useimmat brändit määrittelevät äänensä tekstinkirjoittajille ja ilmeensä suunnittelijoille erikseen. Siitä syntyy lempeä, rauhoittava kuvateksti huutavalla neontaustalla. Tämä opas yhdistää nämä kaksi. Jos et ole vielä ratkaissut luonnettasi, aloita [brändin persoonasta](https://gradiently.design/fi/guide/brand-personality).

## Miksi brändiäänen ja visuaalien pitää sopia yhteen

Ihmiset omaksuvat julkaisun ilmeen ennen sanoja. Ilme luo odotuksen, ja sanat joko vahvistavat sen tai ovat sen kanssa ristiriidassa. Ristiriita ei aina rekisteröidy tietoisesti, vaan se saa brändin tuntumaan hieman vinolta, kuin ystävä, jonka äänensävy ei vastaa sitä, mitä hän sanoo.

### Ääni ja ilme ovat ristiriidassa

- Hiljainen, harkitseva brändi kylläisessä neonissa ja pomppivassa animaatiossa
- Leikkisä brändi harmaassa, ohuessa kirjasimessa ja tiukoissa ruudukoissa
- Täsmällinen, tekninen brändi käsin piirretyissä fonteissa ja pehmeissä sumennuksissa
- Lämmin, paikallinen brändi kylmässä sinisessä ja yritysmäisissä kuvapankkikuvissa

### Ääni ja ilme sopivat yhteen

- Sama hiljainen brändi syvissä neutraaleissa, hienossa serifissä ja hitaassa ajelehtimisessa
- Leikkisä brändi kirkkaissa, yllättävissä pareissa ja pyöreässä kirjasimessa
- Tekninen brändi selkeässä sansissa, terävässä kontrastissa ja tarkassa välistyksessä
- Lämmin brändi maanläheisissä sävyissä, paperin tekstuurissa ja oikeissa kasvoissa

## Kartta äänen piirteistä visuaalisiin valintoihin

Käytä tätä taulukkoa lähtökohtana, älä lakina. Useimmat brändit ovat kahden tai kolmen piirteen sekoitus. Valitse hallitseva värille ja anna muiden muovata kirjasinta ja liikettä.

| Äänen piirre | Väri | Kirjasin | Tekstuuri ja liike | Asettelu |
| --- | --- | --- | --- | --- |
| Rauhallinen | Pehmeä kontrasti, läheiset sävyt, vaimennettu | Kevyet tai normaalit painot, väljä välistys | Hieno rakeisuus, hidas ajelehtiminen | Paljon tilaa, vähän elementtejä |
| Rohkea | Korkea kontrasti, kylläinen, vähän värejä | Paksut painot, suuret koot, tiivis välistys | Terävät pinnat, nopeat leikkaukset | Suuri kirjasin, reunasta reunaan |
| Leikkisä | Yllättävät parit, kirkkaat pastellit | Pyöreät muodot, sekakoot | Pehmeät materiaalit, pomppiva pehmennys | Löyhä, hieman ruudukon ulkopuolella |
| Täsmällinen | Hillitty, yksi selvä korostus | Selkeä sans, tasainen rytmi | Sileä, minimaalinen tekstuuri, tarkka ajoitus | Tiukka ruudukko, tasatut reunat |
| Lämmin | Maanläheiset ja auringon valaisemat sävyt | Ystävällinen serif tai humanistinen sans | Paperi, rakeisuus, päivänvalo | Runsaat marginaalit, ihmisvalokuvat |

Yksi piirre yleensä johtaa. Muut säätävät yksityiskohtia.

## Neljä ääntä, neljä ilmettä

Tässä on samanlaisia valintoja neljälle eri äänelle. Huomaa, kuinka paljon pelkkä väri jo kertoo ennen kuin sanoja on lisätty.

- Rauhallinen: usva pehmeään siniseen: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Rohkea: punaoranssi keltaiseen: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Leikkisä: pinkki, voi, minttu: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Täsmällinen: muste tummaan laivastoon: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Väri luo äänen ensin. Syvempää taustaa siitä, mitä värit viestivät, löydät oppaasta [värien psykologia](https://gradiently.design/fi/guide/color-psychology).

Pystykuvan julkaisu, jossa sanat Ota aikaa on asetettu pieninä ja kevyinä hiljaiselle taustalle runsaalla tilalla

Rauhallinen: yksi lyhyt rivi, kevyt paino, suurin osa kehyksestä tyhjänä.

Pystykuvan julkaisu, jossa yksittäinen sana Nyt on asetettu hyvin suureksi eloisalle taustalle

Rohkea: yksi valtava sana, mikään muu ei kilpaile sen kanssa.

Neliön muotoinen julkaisu, joka kysyy Mitä sinä tekisit? ystävällisessä asettelussa kirkkaalla taustalla

Leikkisä: kysymys, kutsu, kevyempi ote.

Neliön muotoinen julkaisu otsikolla Kolme muutosta tällä viikolla siistillä tasatulla listalla hillityllä taustalla

Täsmällinen: lista, tasatut reunat, ei koristetta, joka ei ole tietoa.

## Miten löydät visuaalisen äänesi

1. **Kirjoita piirteesi muotoon ”tämä, ei tuo”** ”Itsevarma, ei ylimielinen.” ”Lämmin, ei siirappinen.” Jälkimmäinen puolikas antaa visuaaleille rajan suunnan lisäksi.
2. **Valitse johtava piirre** Päätä, mikä piirre ohjaa väriä. Kaksi vastakkaisiin suuntiin vetävää johtajaa, kuten rauhallinen ja rohkea, tuottavat sekavan ilmeen.
3. **Liitä jokainen piirre valintoihin** Käytä yllä olevaa taulukkoa värin, kirjasimen, tekstuurin, liikkeen ja asettelun valintaan. Kirjoita valinnat jokaisen piirteen viereen.
4. **Aja sama lause kahden ilmeen läpi** Aseta yksi oikea tekstirivisi valitsemaasi ilmeeseen ja sen vastakohtaan. Jos vastakohta tuntuu todemmalta, palaa piirteisiin.
5. **Kirjoita se ylös yhdessä** Laita äänen ja ilmeen säännöt samalle sivulle [brändin tyyliopas](https://gradiently.design/fi/guide/brand-style-guide) -oppaassasi, jotta kirjoittajat ja suunnittelijat työskentelevät yhdestä lähteestä.

## Liikkeelläkin on ääni

Animaation nopeus ja pehmennys kuulostavat joltakin. Pitkä, lempeä ease-out tuntuu rauhalliselta. Lyhyt, terävä liike tuntuu päättäväiseltä. Pieni yliammunta tuntuu leikkisältä. Jos brändisi esiintyy videolla tai verkkosivulla, anna liikkeelle sama ääni kuin sanoille. [Pehmennys](https://gradiently.design/fi/guide/easing) selittää käyrät tarkemmin.

```css
/* Calm: slow, soft landing */
.calm { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Bold: fast and decisive */
.bold { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

/* Playful: a small overshoot past the target */
.playful { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Precise: short, even, no flourish */
.precise { transition: transform 200ms ease-out; }
```

Neljä liikkeen ääntä. Leikkisän käyrän yliammunta johtuu siitä, että toinen ohjauspiste menee yli 1:n.

Sama pätee kirjasimeen. Otsikkofonttisi on visuaalisen äänesi kovaäänisin osa, ja [fonttiparit](https://gradiently.design/fi/guide/font-pairing) ratkaisevat, puhuuko se yksin vai keskustelussa. Gradientlyssä jokainen Mark kantaa kirjasimen äänen värien ja materiaalien rinnalla, joten ilme ja kirjaimet tulevat valmiiksi yhteensovitettuina.

> **Ääneen lukemisen testi** Lue julkaisun sanat ääneen sävyllä, jota suunnitelma ehdottaa. Jos et koskaan sanoisi sitä noin, ilme ja ääni pitää saada takaisin yhteen.

## FAQ

### Mitä brändiääni on?

Brändiääni on johdonmukainen luonne, jonka brändi ilmaisee sanoissaan, kuten rauhallinen, rohkea, leikkisä tai täsmällinen. Sävy mukauttaa tuon äänen tilanteeseen.

### Miten visuaalit ilmaisevat brändiääntä?

Värin, kirjasimen, tekstuurin, liikkeen ja asettelun kautta. Pehmeä kontrasti ja väljä välistys kuulostavat rauhallisilta, korkea kontrasti ja paksu kirjasin rohkeilta.

### Mikä ero on brändiäänellä ja brändin persoonalla?

Persoona on brändin luonne, ääni on se, miten tuo luonne välittyy sanoissa. Visuaalien pitäisi ilmaista sama persoona kuin ääni.

### Voiko brändillä olla useampi kuin yksi äänen piirre?

Kyllä, useimmilla on kaksi tai kolme. Valitse yksi johtamaan väriä ja anna muiden muovata kirjasinta, liikettä ja asettelua.

### Vaikuttaako animaatio brändiääneen?

Kyllä. Hidas, lempeä pehmennys tuntuu rauhalliselta, nopeat liikkeet päättäväisiltä ja pieni yliammunta leikkisältä, joten liikkeen pitäisi vastata sanojen ääntä.