Brändin tekstuuri: materiaalista oma tunnusilme

Brändin tekstuuri on materiaalituntua kaikessa, mitä brändi laittaa pinnalle: taustan rakeisuutta, paperin karheutta, lasin kiiltoa sekä valon suuntaa ja pehmeyttä. Se erottaa näytöllä olevan värin jonkin materiaalin väristä. Kahdella brändillä voi olla sama paletti ja fontti, mutta jos toinen on hienolla filmirakeella ja toinen puhtaalla lasilla, kukaan ei sekoita niitä.

Tekstuuri on myös niitä harvoja ilmeen osia, jotka vastustavat kopiointia. Kuka tahansa voi lukea heksakoodisi kuvakaappauksesta. Tarkan rakeisuuden, koon, tiheyden ja siihen osuvan valon toistaminen on paljon vaikeampaa. Siksi se sopii vahvasti visuaalisen identiteettisi tunnusmerkiksi.

Mitä tekstuuri tekee brändille

Tekstuuri kantaa mielikuvia, jotka havaitaan heti ennen sanoja. Se vastaa kysymyksiin: onko tämä käsintehtyä vai teknistä, lämmintä vai viileää, arkista vai erityistä?

Mikään ei ole toista parempi. Tärkeää on, että tekstuuri sopii siihen, mitä kerrot itsestäsi. Hitaasta käsityöstä puhuva brändi kiiltävällä lasilla lähettää ristiriitaisen viestin. Brändin persoonallisuus on hyvä lähtökohta, jos et tiedä, mitä omasi pitäisi sanoa.

Rakeisuus, materiaali ja valo: kolme kerrosta

Useimmat rikkaalta tuntuvat tekstuurit rakentuvat kolmesta kerroksesta. Niiden erillinen ajattelu tekee tekstuurista harkitun suunnittelukohteen lopuksi lisättävän suodattimen sijaan.

1. 1

   Materiaali

   Pinnan peruskäyttäytyminen: miten väri virtaa sen yli. Sileitä sekoituksia, pehmeitä taitteita, nestemäisiä muotoja tai teräviä viisteitä.

2. 2

   Valo

   Mistä se tulee ja kuinka kova se on. Pehmeä kulmavalo antaa syvyyttä, tasainen valaistus näyttää lattealta ja digitaaliselta.

3. 3

   Rakeisuus

   Hieno kohina päällä. Pieni määrä tekee pinnasta aidon tuntuisen ja peittää väriporrastumista. Liiallinen määrä näyttää likaiselta ja kilpailee sanojen kanssa.

Verkon rakeisuuskerrokseen riittää pieni taustan päälle asetettu SVG-kohina. Pidä peittävyys matalana: sen pitäisi tuntua enemmän kuin näkyä.

.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Rakeiset liukuvärit antaa lisää reseptejä, ja liukuvärin porrastuminen selittää, miksi kohina on tavallinen korjaus sileiden sekoitusten näkyviin raitoihin.

Näin valitset brändisi tekstuurin

• Aloita yhdestä sanasta. Kirjoita tavoittelemasi tunne, kuten ”käsintehty” tai ”täsmällinen”, ja valitse sitä vastaava perhe.
• Testaa sanojen takana. Tekstuuri elää otsikoiden, hintojen ja päivämäärien alla. Jos se vaikeuttaa lukemista puhelinkoossa, se on liian vahva.
• Tarkista molemmat ääripäät. Katso 1080×1920-tarinaa ja 1050×600-käyntikorttia. Suurena sopiva rae voi puuroutua pienessä koossa.
• Tarkista painettuna. Näytöllä hieno rakeisuus voi näyttää paperilla painovirheeltä. Tulosta yksi A5-esite ennen päätöstä.

Virheet, jotka saavat tekstuurin näyttämään halvalta

Viimeinen kohta yllättää monet brändit. Kun tekstuurikuva venytetään neliöjulkaisusta leveäksi banneriksi, rakeisuuskin venyy ja valo osuu outoon paikkaan. Tekstuuri pitää renderöidä käyttökokoon. Tätä käsittelee myös taustatekstuuri.

Tee tekstuurista omasi

Ilmainen kohinakerros on kaikkien saatavilla, ja siinä on juuri ongelma: mitä suositumpi tekstuuri on, sitä vähemmän se kertoo sinusta. Omistettava tekstuuri tarvitsee täsmällisen yhdistelmän, jota kukaan muu ei käytä.

Tähän Gradiently Mark on rakennettu. Jokainen Mark on värien, enintään kolmen pinotun materiaalin, valon, rakeisuuden ja liikkeen resepti. Sitä verrataan kaikkiin muihin, joten kahta samanlaista ei ole. Se renderöityy elävänä jokaisessa suunnittelukoossa, joten rakeisuus ja valo asettuvat aina oikein. Se rauhoittaa yksityiskohtia sanojesi takana, jotta otsikot pysyvät luettavina. Kun lunastat Markin, vain sinä voit viedä sillä tehtyjä suunnitelmia. Liukuvärimateriaalit selittää materiaalikerrokset tarkemmin.