# Merktextuur: de materiële kwaliteit die een look van jou maakt

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

Kleur en letters zijn makkelijk te samplen. Textuur, de korrel, glans en het licht op een oppervlak, is veel moeilijker te kopiëren en vertelt verrassend veel over een merk.

## The short version

- Merktextuur is de materiële kwaliteit van de oppervlakken van een merk, zoals korrel, papiertand, glasachtige glans of zacht licht.
- Textuur verandert hoe een kleur voelt: hetzelfde violet leest als film op korrel, als technologie op glas en als luxe op zijde.
- Een textuur is moeilijker te kopiëren dan een hexcode, omdat het een combinatie van materiaal, licht en schaal is en geen enkele waarde.
- Goede merktextuur is rustig genoeg om achter woorden te zitten en consistent genoeg om op elk formaat herkend te worden.
- Korrel verbergt ook kleurbanding, dus het verbetert zowel de kwaliteit als het karakter.

**Merktextuur** is de materiële kwaliteit van alles wat een merk op een oppervlak zet: de korrel in een achtergrond, de tand van papier, de glans van glas, de richting en zachtheid van licht. Het is het verschil tussen een kleur op een scherm en een kleur op iets. Twee merken kunnen een palet en een lettertype delen, maar als het ene op fijne filmkorrel staat en het andere op strak glas, verwart niemand ze.

Textuur is ook een van de weinige onderdelen van een look die zich tegen kopiëren verzet. Iedereen kan je hexcodes uit een screenshot lezen. Je exacte korrel namaken, de grootte, de dichtheid, de manier waarop het licht erover valt, is veel moeilijker, wat het een sterke kandidaat maakt voor de handtekening van je [visuele identiteit](https://gradiently.design/nl/guide/visual-identity).

## Wat textuur met een merk doet

Textuur draagt associaties die mensen direct oppikken, lang voordat ze een woord lezen. Het beantwoordt vragen als: is dit handgemaakt of ontworpen, warm of koel, alledaags of bijzonder?

| Textuurfamilie | Leest als | Past bij |
| --- | --- | --- |
| Fijne filmkorrel | Analoog, redactioneel, doordacht | Studio’s, uitgevers, fotografen, muziek |
| Papiertand | Ambachtelijk, gedrukt, rustig | Makers, bakkerijen, schrijfwaren, wellness |
| Glasachtige glans | Precies, digitaal, modern | Software, fintech, productlanceringen |
| Zijde- of satijnlicht | Zacht, duur, zinnelijk | Beauty, juwelen, mode, hotels |
| Schone vlakke kleur | Direct, grafisch, gedurfd | Campagnes, sport, jongerenmerken |

Vijf gangbare textuurfamilies en het gevoel dat elk brengt. Vlakke kleur is ook een textuurkeuze: de afwezigheid van materiaal zegt iets.

Geen van deze is beter dan een ander. Wat telt is dat de textuur past bij wat je over jezelf zegt. Een merk dat praat over langzaam ambacht en post op glanzend glas, stuurt een gemengde boodschap. [Merkpersoonlijkheid](https://gradiently.design/nl/guide/brand-personality) is een goede plek om te beginnen als je niet zeker weet wat die van jou moet zeggen.

## Korrel, materiaal en licht: de drie lagen

De meeste texturen die rijk aanvoelen, zijn opgebouwd uit drie lagen. Als je ze apart bekijkt, wordt textuur iets wat je met opzet kunt ontwerpen in plaats van een filter dat je aan het eind toepast.

1. **Materiaal** Het basisgedrag van het oppervlak: hoe kleur erover stroomt. Zachte overgangen, zachte plooien, vloeibare vormen of scherpe facetten.
2. **Licht** Waar het vandaan komt en hoe hard het is. Zacht licht uit één hoek geeft diepte; gelijkmatige verlichting ziet er plat en digitaal uit.
3. **Korrel** De fijne ruis erbovenop. Een beetje maakt een oppervlak echt en verbergt banding; te veel ziet er vuil uit en botst met de woorden.

- Gelijkmatig, geen lichtbron: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Zacht licht, rechtsboven: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Warm licht, linksonder: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Eén kleurfamilie onder drie soorten licht. Licht alleen verandert de sfeer al voordat er korrel bij komt.

Voor de korrellaag op het web is een piepkleine SVG-ruis over de achtergrond genoeg. Houd de dekking laag; je wilt het eerder voelen dan zien.

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

Een verlicht verloop met een fijne ruislaag erbovenop. Verhoog `baseFrequency` voor fijnere korrel, verlaag `opacity` voor een rustigere.

[Korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft meer korrelrecepten, en [gradiëntbanding](https://gradiently.design/nl/guide/gradient-banding) legt uit waarom ruis ook de standaardoplossing is voor zichtbare strepen in zachte overgangen.

## Zo kies je je merktextuur

- **Begin bij één woord.** Schrijf het ene gevoel op dat je mensen wilt geven, zoals ‘ambachtelijk’ of ‘precies’, en kies de familie die erbij past.
- **Test hem achter woorden.** Textuur zit onder koppen, prijzen en data. Als hij ze op telefoonformaat moeilijker leesbaar maakt, is hij te sterk.
- **Controleer hem aan beide uitersten.** Bekijk hem op een story van 1080×1920 en op een visitekaartje van 1050×600. Korrel die groot goed oogt, kan klein tot brij worden.
- **Controleer hem in print.** Korrel die op een scherm zingt, kan op papier op een drukfout lijken. Print één A5-flyer voordat je kiest.

Een staande bakkerijpost met de tekst Zuurdesem, elke ochtend, op een zacht getextureerde achtergrond

Een zachter oppervlak voor een bakkerij: het materiaal kan handgemaakt zeggen voordat de woorden dat doen.

Een staande fintechpost met de tekst Betalingen, in seconden verwerkt, op een andere getextureerde achtergrond

Een andere Mark voor een fintechproduct. Dezelfde opmaak, een compleet ander merk.

## Fouten waardoor textuur goedkoop oogt

### Vermijd

- Een stockfoto van papier onder alles geplakt
- Zware korrel die letters wazig maakt
- Op elk platform een andere textuur
- Textuur achter woorden, overal elders vlak
- Eén getextureerd beeld naar elk formaat schalen

### Doe

- Een textuur opgebouwd uit materiaal, licht en korrel
- Korrel die fijn genoeg is om te voelen, niet om op te merken
- Eén oppervlak over feed, site en print
- Hetzelfde oppervlak op elk beeld
- Render de textuur opnieuw op elk formaat

Het laatste punt overvalt veel merken. Als een getextureerd beeld van een vierkante post naar een brede banner wordt uitgerekt, rekt de korrel mee en landt het licht op een vreemde plek. Een textuur moet worden weergegeven op het formaat waarin hij wordt gebruikt, wat ook aan bod komt bij [achtergrondtextuur](https://gradiently.design/nl/guide/background-texture).

## Een textuur van jou maken

Een gratis ruisoverlay is voor iedereen beschikbaar, en dat is precies het probleem: hoe populairder een textuur wordt, hoe minder hij over jou zegt. Om textuur van jou te maken, moet het een specifieke combinatie zijn die niemand anders gebruikt.

Daar is een Mark van Gradiently voor gemaakt. Elke Mark is een recept van kleuren, tot drie gestapelde materialen, licht, korrel en beweging, en elke Mark wordt tegen alle andere gecontroleerd zodat er geen twee op elkaar lijken. Hij wordt live weergegeven op elk formaat waarin je ontwerpt, zodat korrel en licht altijd goed zitten, en hij vermindert zijn detail achter je woorden zodat koppen leesbaar blijven. Als je een Mark claimt, kan alleen jij ermee exporteren. [Verloopmaterialen](https://gradiently.design/nl/guide/mark-materials-explained) legt de materiaallagen uitgebreider uit.

Een Mark is textuur als merkbezit: materiaal, licht en korrel in één recept, met op elk moment één eigenaar.

## FAQ

### Wat is textuur in branding?

Het is de materiële kwaliteit van de visuele oppervlakken van een merk, zoals korrel, papier, glans of licht, die bepaalt hoe kleuren en woorden aanvoelen.

### Helpt of schaadt korreltextuur de leesbaarheid?

Fijne korrel met lage dekking schaadt meestal niet en helpt vaak door banding te verbergen. Zware korrel achter kleine letters maakt ze wazig, dus houd hem subtiel waar woorden staan.

### Kan textuur onderdeel zijn van een merkidentiteit?

Ja. Een consistente textuur op elk oppervlak wordt zelf herkenbaar, op dezelfde manier als een kleur of lettertype.

### Hoe voeg ik korrel toe aan een verloop in CSS?

Leg met een pseudo-element een kleine SVG-ruisafbeelding over het verloop, met ongeveer 10 tot 15 procent dekking en een overlay-menging.
