Varumärkestextur: materialkänslan som gör en look ägbar

Varumärkestextur är materialkänslan hos allt ett varumärke lägger på en yta: kornet i en bakgrund, papperets struktur, glasets sken, ljusets riktning och mjukhet. Det är skillnaden mellan en färg på en skärm och en färg på något. Två varumärken kan dela palett och typsnitt, men om det ena ligger på fint filmkorn och det andra på rent glas förväxlar ingen dem.

Textur är också en av de få delar av en look som motstår kopiering. Vem som helst kan läsa dina hexkoder från en skärmdump. Att återskapa ditt exakta korn, dess storlek, dess täthet och hur ljuset faller över det är mycket svårare, vilket gör det till en stark kandidat för signaturen i din visuella identitet.

Vad textur gör med ett varumärke

Textur bär associationer som folk uppfattar direkt, långt innan de läst ett ord. Den svarar på frågor som: är det här handgjort eller konstruerat, varmt eller kallt, vardagligt eller speciellt?

Ingen av dem är bättre än någon annan. Det som spelar roll är att texturen stämmer med vad du säger om dig själv. Ett varumärke som talar om långsamt hantverk och postar på blankt glas sänder ett blandat budskap. Varumärkespersonlighet är ett bra ställe att börja om du inte är säker på vad din ska säga.

Korn, material och ljus: de tre lagren

De flesta texturer som känns rika är byggda av tre lager. Att tänka på dem var för sig gör textur till något du kan designa med avsikt i stället för ett filter du lägger på på slutet.

1. 1

   Material

   Ytans grundbeteende: hur färg flödar över den. Mjuka övergångar, mjuka veck, flytande former eller skarpa fasetter.

2. 2

   Ljus

   Varifrån det kommer och hur hårt det är. Ett mjukt ljus från ett hörn ger djup; jämnt ljus ser platt och digitalt ut.

3. 3

   Korn

   Det fina bruset ovanpå. Lite får en yta att kännas verklig och döljer banding; för mycket ser smutsigt ut och tävlar med orden.

För kornlagret på webben räcker ett litet SVG-brus lagt över bakgrunden. Håll opaciteten låg; du vill känna det mer än se det.

.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");
}

Kornig gradient har fler kornrecept, och gradientbanding förklarar varför brus också är standardlösningen på synliga ränder i mjuka övergångar.

Så väljer du din varumärkestextur

• Utgå från ett ord. Skriv den enda känsla du vill att folk ska få, som ”hantverksmässig” eller ”precis”, och välj familjen som matchar.
• Testa den bakom ord. Textur ligger under rubriker, priser och datum. Om den gör dem svårare att läsa i mobilstorlek är den för stark.
• Kontrollera den i båda ytterligheterna. Titta på den i en story på 1080×1920 och på ett visitkort på 1050×600. Korn som ser rätt ut stort kan bli sörja litet.
• Kontrollera den i tryck. Korn som sjunger på en skärm kan se ut som ett tryckfel på papper. Skriv ut en A5-flyer innan du bestämmer dig.

Misstag som får textur att se billig ut

Den sista punkten fångar många varumärken. När en texturerad bild sträcks från ett kvadratiskt inlägg till en bred banner sträcks kornet också och ljuset hamnar märkligt. En textur ska renderas i den storlek den används i, vilket också tas upp i bakgrundstextur.

Gör en textur till din

Ett gratis brusöverlägg finns för alla, vilket är precis problemet: ju populärare en textur blir, desto mindre säger den om dig. För att göra textur ägbar måste den vara en specifik kombination som ingen annan använder.

Det är vad en Gradiently-Mark är byggd för. Varje Mark är ett recept av färger, upp till tre staplade material, ljus, korn och rörelse, och var och en kontrolleras mot varje annan så att inga två ser likadana ut. Den renderas live i varje storlek du designar i, så att kornet och ljuset alltid hamnar rätt, och den tonar ner sina detaljer bakom dina ord så att rubrikerna förblir läsbara. När du säkrar en Mark kan bara du exportera med den. Gradientmaterial förklarar materiallagren mer ingående.