# Merkevaretekstur: materialet som gir uttrykket særpreg

[Canonical HTML page](https://gradiently.design/nb/guide/brand-texture)

Farge og skrift er lette å hente ut. Tekstur, altså korn, glans og lys på en overflate, er langt vanskeligere å kopiere og formidler mye av merkevarens personlighet.

## The short version

- Merkevaretekstur er materialfølelsen i merkevarens flater, som korn, papirstruktur, glassglans eller mykt lys.
- Tekstur endrer hvordan en farge oppleves: samme fiolett virker som film på korn, teknologi på glass og luksus på silke.
- En tekstur er vanskeligere å kopiere enn en hex-kode fordi den kombinerer materiale, lys og skala fremfor én verdi.
- God merkevaretekstur er rolig nok til å ligge bak ord og konsekvent nok til å gjenkjennes i alle formater.
- Korn skjuler også synlige fargebånd og forbedrer dermed både kvalitet og karakter.

**Merkevaretekstur** er materialfølelsen i alle flater merkevaren bruker: kornet i bakgrunnen, strukturen i papiret, glansen i glasset og lysets retning og mykhet. Det er forskjellen mellom en farge på skjerm og en farge på noe. To merkevarer kan dele palett og font, men hvis den ene har fint filmkorn og den andre rent glass, forveksler ingen dem.

Tekstur er også en av delene som motstår kopiering. Alle kan lese hex-kodene fra et skjermbilde. Å gjenskape kornet nøyaktig, med størrelse, tetthet og hvordan lyset faller over det, er langt vanskeligere. Derfor kan tekstur bli et sterkt signaturtrekk i [den visuelle identiteten](https://gradiently.design/nb/guide/visual-identity).

## Hva tekstur gjør for en merkevare

Tekstur vekker assosiasjoner straks, lenge før noen leser et ord. Den svarer på spørsmål som: håndlaget eller konstruert, varmt eller kjølig, hverdagslig eller spesielt?

| Teksturgruppe | Oppleves som | Passer til |
| --- | --- | --- |
| Fint filmkorn | Analogt, redaksjonelt, gjennomtenkt | Studioer, forlag, fotografer, musikk |
| Papirstruktur | Håndlaget, trykt, rolig | Håndverkere, bakerier, papirvarer, velvære |
| Glassglans | Presist, digitalt, moderne | Programvare, finansteknologi, produktlanseringer |
| Silke- eller satenglys | Mykt, kostbart, sanselig | Skjønnhet, smykker, mote, hoteller |
| Ren, flat farge | Direkte, grafisk, dristig | Kampanjer, sport, ungdomsmerkevarer |

Fem vanlige teksturgrupper og følelsen hver gir. Flat farge er også et teksturvalg: fravær av materiale sier noe.

Ingen er bedre enn de andre. Teksturen må stemme med det du sier om deg selv. En merkevare som snakker om langsomt håndverk, men bruker blankt glass, sender blandede signaler. [Merkevarepersonlighet](https://gradiently.design/nb/guide/brand-personality) er et godt utgangspunkt hvis du er usikker på hva din bør si.

## Korn, materiale og lys: de tre lagene

De fleste fyldige teksturer bygges av tre lag. Vurderer du dem separat, blir tekstur noe du designer bevisst fremfor et filter du legger på til slutt.

1. **Materiale** Overflatens grunnleggende oppførsel: hvordan fargen flyter over den. Jevne blandinger, myke folder, flytende former eller skarpe fasetter.
2. **Lys** Hvor det kommer fra, og hvor hardt det er. Mykt lys fra ett hjørne gir dybde. Jevn belysning virker flat og digital.
3. **Korn** Den fine støyen på toppen. Litt gir materialfølelse og skjuler fargebånd. For mye virker skittent og konkurrerer med teksten.

- Jevnt, uten lyskilde: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Mykt lys øverst til høyre: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Varmt lys nederst til venstre: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Én fargefamilie under tre typer lys. Lyset alene endrer stemningen før noe korn er lagt til.

Til kornlaget på nett holder et lite SVG-støybilde over bakgrunnen. Hold opasiteten lav. Kornet skal merkes mer enn det sees.

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

En belyst gradient med et fint støylag. Øk `baseFrequency` for finere korn, og senk `opacity` for et roligere lag.

[Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har flere oppskrifter. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer hvorfor støy også er standardløsningen mot synlige striper i jevne blandinger.

## Slik velger du merkevarens tekstur

- **Start med ett ord.** Skriv følelsen du vil vekke, som «håndlaget» eller «presis», og velg gruppen som passer.
- **Prøv den bak ord.** Tekstur ligger under overskrifter, priser og datoer. Blir de vanskeligere å lese på telefon, er den for sterk.
- **Sjekk begge ytterpunkter.** Se den på en historie i 1080×1920 og et visittkort i 1050×600. Korn som fungerer stort, kan bli grøtete smått.
- **Sjekk på trykk.** Korn som fungerer fint på skjerm, kan ligne en trykkfeil på papir. Skriv ut én A5-flyer før du bestemmer deg.

Et stående bakeriinnlegg med teksten Surdeigsbrød hver morgen på en mykt teksturert bakgrunn

En mykere flate til bakeriet. Materialet kan si håndlaget før ordene gjør det.

Et stående innlegg for finansteknologi med teksten Betalinger gjort opp på sekunder på en annen teksturert bakgrunn

En annen Mark til et finansteknologiprodukt. Samme oppsett, helt annen merkevare.

## Feil som får tekstur til å virke billig

### Unngå

- Et arkivfoto av papir limt under alt
- Kraftig korn som gjør skriften uklar
- En ny tekstur på hver plattform
- Tekstur bak teksten, flatt overalt ellers
- Å skalere ett teksturbilde til alle størrelser

### Gjør dette

- Bygg teksturen av materiale, lys og korn
- Bruk korn fint nok til å merkes, ikke vekke oppmerksomhet
- Én overflate i innlegg, på nettsiden og på trykk
- Samme overflate i alle flater
- Gjengi teksturen på nytt i hver størrelse

Det siste punktet rammer mange. Når et teksturbilde strekkes fra kvadratisk innlegg til bredt banner, strekkes kornet også, og lyset havner feil. Teksturen bør gjengis i størrelsen den brukes. [Bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture) forklarer dette også.

## Gjør teksturen til din

Et gratis støylag er tilgjengelig for alle. Det er problemet: jo mer populær en tekstur er, desto mindre sier den om deg. For å bli noe du kan eie, må den være en bestemt kombinasjon ingen andre bruker.

Det er dette en Gradiently Mark er laget for. Hver Mark er en oppskrift av farger, opptil tre stablede materialer, lys, korn og bevegelse, og sammenlignes med alle andre slik at ingen ser like ut. Den gjengis levende i hver designstørrelse, med riktig plassert korn og lys. Den demper detaljene bak ordene, så overskriftene er lesbare. Når du sikrer deg en Mark, kan bare du eksportere med den. [Gradientmaterialer](https://gradiently.design/nb/guide/mark-materials-explained) forklarer materiallagene nærmere.

En Mark er tekstur som merkevareelement: materiale, lys og korn i én oppskrift, med én eier om gangen.

## FAQ

### Hva er tekstur i merkevarebygging?

Materialfølelsen i merkevarens visuelle flater, som korn, papir, glans og lys, som former hvordan farger og ord oppleves.

### Hjelper eller skader korntekstur lesbarheten?

Fint korn med lav opasitet skader vanligvis ikke og kan hjelpe ved å skjule fargebånd. Kraftig korn bak liten skrift gjør bokstavene uklare, så hold det dempet der ordene står.

### Kan tekstur være del av en merkevareidentitet?

Ja. En konsekvent tekstur på alle flater blir gjenkjennelig i seg selv, på samme måte som farge og font.

### Hvordan legger jeg korn til en gradient i CSS?

Legg et lite SVG-støybilde over gradienten med et pseudoelement, omtrent 10 til 15 prosent opasitet og blandingsmodusen overlay.