Textura de marca: a qualidade material que faz um visual ser teu

A textura de marca é a qualidade material de tudo o que uma marca põe numa superfície: o grão num fundo, a textura de um papel, o brilho do vidro, a direção e a suavidade da luz. É a diferença entre uma cor num ecrã e uma cor em alguma coisa. Duas marcas podem partilhar uma paleta e um tipo de letra, mas se uma assenta num fino grão de película e a outra num vidro limpo, ninguém as confundirá.

A textura é também uma das poucas partes de um visual que resiste à cópia. Qualquer pessoa lê os teus códigos hex numa captura de ecrã. Reproduzir o teu grão exato, o tamanho, a densidade, a forma como a luz cai sobre ele, é muito mais difícil, o que a torna uma forte candidata à assinatura da tua identidade visual.

O que a textura faz a uma marca

A textura transmite associações que as pessoas apanham de imediato, muito antes de lerem uma palavra. Responde a perguntas como: isto é feito à mão ou projetado, quente ou frio, de todos os dias ou especial?

Nenhuma destas é melhor do que outra. O que importa é que a textura condiga com o que dizes de ti. Uma marca que fala de ofício lento e publica em vidro brilhante envia uma mensagem contraditória. A personalidade de marca é um bom ponto de partida se não tens a certeza do que a tua deve dizer.

Grão, material e luz: as três camadas

A maioria das texturas que parecem ricas é construída com três camadas. Pensar nelas em separado faz da textura algo que podes desenhar de propósito, em vez de um filtro aplicado no fim.

1. 1

   Material

   O comportamento de base da superfície: como a cor flui sobre ela. Misturas suaves, dobras macias, formas líquidas ou facetas nítidas.

2. 2

   Luz

   De onde vem e com que força. Uma luz suave vinda de um canto dá profundidade; a iluminação uniforme parece plana e digital.

3. 3

   Grão

   O ruído fino por cima. Um pouco faz a superfície parecer real e esconde as faixas; demasiado parece sujo e luta com as palavras.

Para a camada de grão na web, basta um pequeno ruído SVG por cima do fundo. Mantém a opacidade baixa; queres senti-lo mais do que vê-lo.

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

Gradientes granulados tem mais receitas de grão, e bandas em gradientes explica porque é que o ruído é também a solução habitual para listas visíveis em misturas suaves.

Como escolher a tua textura de marca

• Parte de uma palavra. Escreve a única sensação que queres que as pessoas tenham, como “artesanal” ou “preciso”, e escolhe a família que lhe corresponde.
• Testa-a por trás de palavras. A textura vive sob títulos, preços e datas. Se os torna mais difíceis de ler no tamanho de um telemóvel, é demasiado forte.
• Verifica nos dois extremos. Vê-a num story de 1080×1920 e num cartão de visita de 1050×600. Um grão que fica bem em grande pode virar papa em pequeno.
• Verifica em impressão. Um grão que canta num ecrã pode parecer uma falha de impressão em papel. Imprime um folheto A5 antes de te comprometeres.

Erros que fazem a textura parecer barata

O último ponto apanha muitas marcas de surpresa. Quando uma imagem texturada é esticada de uma publicação quadrada para um banner largo, o grão estica também e a luz cai em sítios estranhos. Uma textura deve ser desenhada ao tamanho em que é usada, o que também se aborda em textura de fundo.

Fazer de uma textura a tua

Uma sobreposição de ruído gratuita está disponível para todos, e esse é exatamente o problema: quanto mais popular uma textura se torna, menos diz sobre ti. Para uma textura poder ser tua, tem de ser uma combinação específica que mais ninguém use.

É para isso que um Mark da Gradiently foi construído. Cada Mark é uma receita de cores, até três materiais sobrepostos, luz, grão e movimento, e cada um é verificado contra todos os outros para que não haja dois iguais. Desenha-se em direto a cada tamanho em que crias, por isso o grão e a luz assentam sempre bem, e suaviza o detalhe por trás das tuas palavras para os títulos continuarem legíveis. Quando reservas um Mark, só tu podes exportar com ele. Materiais de gradiente explica as camadas de material com mais pormenor.