# Tunnusilme: näin brändi tunnistetaan vilkaisulla

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

Jotkin brändit tunnistaa huoneen toiselta puolelta tai postimerkin kokoisesta pikkukuvasta. Se on tunnusilme, joka rakentuu muutamasta pitkään säilytetystä päätöksestä.

## The short version

- Tunnusilme on toistettava värin, pinnan, typografian ja asettelun yhdistelmä, jonka ihmiset liittävät yhteen brändiin ennen nimen lukemista.
- Tunnusilme syntyy harvoin yhdestä elementistä: yhdistelmä tekee siitä yksilöllisen ja vaikeasti kopioitavan.
- Penguinin varhaiset pokkarit kolmine vaakavyöhykkeineen ja lajityypin mukaisine väreineen ovat klassinen esimerkki kaukaa tunnistettavasta ilmeestä.
- Ilmeen kirjaaminen viiden tai kuuden päätöksen lyhyeksi reseptiksi auttaa ketä tahansa soveltamaan sitä samalla tavalla.
- Tunnusilme vahvistuu sitä enemmän, mitä pidempään se säilyy muuttumattomana. Vaikeinta on vastustaa uudelleensuunnittelun halua.

**Tunnusilme** on värin, pinnan, typografian ja asettelun yhdistelmä, jonka ihmiset tuntevat omaksesi ennen ensimmäistäkään sanaa. Siksi tunnistat lempilehtesi täydestä hyllystä tai ystävän julkaisun nopeassa selauksessa. Se ei juuri koskaan synny yhdestä nokkelasta elementistä, vaan neljästä tai viidestä tavallisesta päätöksestä, jotka tehdään tietoisesti ja toistetaan kaikessa vuosien ajan.

## Mistä tunnusilme koostuu

Ajattele sitä reseptinä. Jokainen ainesosa on yksin tavallinen, tarkka sekoitus ei. Penguinin ensimmäisissä pokkareissa vuonna 1935 oli kolme vaakavyöhykettä, yksi kirjasin ja kirjatyypin mukainen väri: oranssi kaunokirjallisuudelle, vihreä rikoskirjallisuudelle. Mikään osa ei ollut poikkeava. Yhdessä vuosikymmeniä säilytettyinä ne tekivät Penguinista tunnistettavan kaupan toiselta puolelta.

| Ainesosa | Päätös | Esimerkki |
| --- | --- | --- |
| Pohja | Väri, jonka päälle kaikki rakentuu | Lähes musta, lämmin paperi, syvä vihreä |
| Väriperhe | Kahdesta neljään kumppania ja yksi tehoste | Indigo, violetti, lila, hiillostehoste |
| Materiaali | Miltä pinta tuntuu | Hieno rakeisuus, pehmeä kiilto, paperin karheus |
| Typografinen luonne | Otsikkofontti ja sen asettelu | Tiivis antiikva, normaali kirjainkoko, suuri teksti |
| Asettelutapa | Sanojen ja logon vakiopaikat | Otsikko vasemmalla ylhäällä, logo oikealla alhaalla |
| Liike | Miten se liikkuu, jos liikkuu | Hidas lipuminen, ei koskaan pomppimista |

Kuusi päätöstä luo tunnusilmeen. Kirjaa omasi oikeaan sarakkeeseen, niin suurin osa tyylioppaasta on valmis.

## Väri: ensin pohja, sitten perhe

Useimmat brändit valitsevat päävärin ja lopettavat siihen. Tunnusilme alkaa askelta aiemmin pohjasta: väristä, joka täyttää tilan ja luo tunnelman. Tumma pohja saa tehosteet hehkumaan, vaalea tuntuu painetulta ja rauhalliselta. Lisää pieni läheisten sävyjen perhe syvyyttä varten ja yksi säästeliäästi käytetty tehoste, jotta se huomataan. [Brändivärien valitseminen](https://gradiently.design/fi/guide/how-to-choose-brand-colors) syventyy itse valintaan.

- Metsänvihreä pohja: #0e1a17
- Mänty: #1f3b33
- Salvia: #3f6b5a
- Jäkälä: #c9d6c3
- Meripihkatehoste: #e0a458

Pohja, kolme toisiinsa sopivaa vihreää ja yksi lämmin tehoste. Meripihka näkyy yhdessä pienessä yksityiskohdassa suunnitelmaa kohti, joten se jää mieleen.

## Materiaali: osa, jonka useimmat brändit ohittavat

Kahdella brändillä voi olla sama paletti, mutta täysin eri ilme, jos toinen on siisti ja digitaalinen ja toisessa on painopaperin rakeisuutta. Materiaali on hiljainen ainesosa, joka tekee ilmeestä yksilöllisen. Sitä on vaikea kopioida värivalitsimella. Valitse yksi pinnan ominaisuus ja säilytä se. [Brändin tekstuuri](https://gradiently.design/fi/guide/brand-texture) vertailee pääperheitä.

- Metsän valo, pehmeä: `radial-gradient(circle at 70% 25%, #3f6b5a 0%, #1f3b33 40%, #0e1a17 80%)`
- Metsän valo, suunnattu: `linear-gradient(160deg, #0e1a17 0%, #1f3b33 55%, #3f6b5a 100%)`
- Metsä meripihkahehkulla: `radial-gradient(ellipse at 20% 85%, #e0a458 0%, #1f3b33 35%, #0e1a17 75%)`

Saman perheen kolme ilmaisua. Valitse yksi valon suunta ja säilytä se. Viimeistele hienolla rakeisuuskerroksella, jotta pinta tuntuu materiaalilta.

## Typografia ja asettelu: opitut tavat

Lukijat oppivat, minne katsoa. Jos otsikko on aina samassa paikassa, samassa mittakaavassa ja samalla kirjasimella, ihmiset alkavat lukea julkaisuja muodon kautta ennen sanoja. Valitse yksi otsikko- ja yksi leipätekstifontti, päätä normaali kirjainkoko tai suuraakkoset ja vakioi logon paikka. [Brändifontit](https://gradiently.design/fi/guide/brand-fonts) auttaa parin valinnassa.

Hyödyllinen testi: pienennä yksi suunnitelma profiiliruudukon pikkukuvan kokoon ja katso sitä epätarkasti. Jos pohja, valo ja otsikon muoto kertovat yhä, kenen se on, ilme toimii. Jos se voisi olla kenen tahansa, tarkenna reseptiä.

Kirjakaupan julkaisu perjantain pidennetystä aukiolosta brändin tunnusilmeellä

Sama pohja, sama typografinen luonne, sama otsikon paikka.

Toinen kirjakaupan julkaisu kirjailijavierailusta samalla tunnusilmeellä

Eri viesti, heti tunnistettavasti sama kauppa.

## Määritä tunnusilmeesi iltapäivässä

1. **Kerää jo käyttämäsi aineisto** Ota kuvakaappaukset viimeisistä kahdestakymmenestä julkaisusta ja sivusta. Ympyröi jo toistuvat asiat: ne ovat ehdokkaita.
2. **Valitse pohja** Yksi väri, joka täyttää suurimman osan tilasta. Tumma tai vaalea, päätettynä kerran.
3. **Vakioi perhe ja tehoste** Kahdesta neljään läheistä väriä ja yksi tehoste heksakoodeina kirjattuna.
4. **Nimeä materiaali** Rakeisuus, kiilto, paperi, lasi tai sileä. Yksi, ei useita.
5. **Määritä typografia- ja asettelusäännöt** Otsikkofontti, leipätekstifontti, kirjainkoko, otsikon paikka ja logon paikka.
6. **Kirjaa yhdelle sivulle** Lisää resepti [brändin tyylioppaaseen](https://gradiently.design/fi/guide/brand-style-guide), jotta kuka tahansa, myös sinä kiireessä, soveltaa sitä samoin.

## Pidä tunnusilme tunnistettavana

Tunnusilmeen vihollinen on kyllästyminen, yleensä omistajan. Näet ilmeesi joka päivä ja kyllästyt siihen kauan ennen kuin asiakkaat ovat edes oppineet sen. Vaihda viestiä, kuvia ja tarjouksia niin usein kuin haluat, mutta jätä resepti rauhaan. [Brändin yhtenäisyys](https://gradiently.design/fi/guide/brand-consistency) käsittelee auttavia tapoja.

### Rapauttaa ilmettä

- Uusi malli jokaiseen kampanjaan
- Ytimen korvaavat kausipaletit
- Fonttien vaihto trendien muuttuessa
- Yhden kuvan venyttäminen joka muotoon

### Vahvistaa ilmettä

- Uudet viestit samalla reseptillä
- Ytimeen lisätyt kausitehosteet
- Sama kirjasinpari vuosien ajan
- Ilme renderöitynä oikein joka koossa

Tämän työn Mark tekee Gradientlyssä. Se kokoaa pohjan, väriperheen, enintään kolme materiaalia, valon, rakeisuuden, liikkeen ja typografisen luonteen yhdeksi reseptiksi. Se renderöityy elävänä joka suunnitelman taakse kaikissa ko’oissa ja tekee itse tilaa sanoillesi. Jokaista Markia verrataan kaikkiin muihin, joten valitsemasi ilme on yksilöllinen. Kun lunastat sen, kukaan muu ei voi viedä sillä tehtyjä suunnitelmia.

## FAQ

### Mitä tunnusilme tarkoittaa brändäyksessä?

Toistettavaa värin, pinnan, typografian ja asettelun yhdistelmää, jonka ihmiset tunnistavat yhdeksi brändiksi ennen nimen lukemista.

### Miten luon brändilleni tunnusilmeen?

Valitse pohjaväri, pieni väriperhe yhdellä tehosteella, yksi materiaali, kirjasinpari ja otsikon sekä logon vakiopaikat. Käytä niitä sitten kaikessa.

### Kuinka kauan ilmeen tunnistettavaksi tuleminen kestää?

Kiinteää aikaa ei ole. Tunnistettavuus rakentuu toistuvista kohtaamisista. Mitä johdonmukaisemmin ja useammin ihmiset näkevät ilmeen, sitä nopeammin se jää mieleen.

### Voinko muuttaa tunnusilmettä kampanjaan?

Vaihda viestiä, kuvia ja tehosteita, mutta säilytä pohja, materiaali ja typografia. Ydinreseptin hylkäävä kampanja näyttää toiselta brändiltä.