Textura

A qualidade de superficie de um elemento, que da profundidade e carater a interface.

Hard

O que é

Textura e a qualidade percebida da superficie de um elemento. Num produto fisico, ela e sentida tanto quanto vista. Ja no digital ela e puramente visual: a superficie e apenas sugerida por imagem, padrao, gradiente, ruido ou simulacao de material.

A funcao da textura e dar carater e profundidade a superficies que, sem ela, seriam chapadas. Um card com grao sutil parece mais solido do que um branco liso, e um fundo com ruido fino tem um calor que a cor solida nao tem. Curiosamente, a pessoa raramente repara na textura boa; ela repara no efeito, ou seja, na sensacao de que a interface esta cuidada, premium, quente.

A historia da textura oscila bastante. O skeuomorfismo usou textura ao extremo, com couro, madeira e feltro, ate que o flat design zerou quase tudo. Hoje ela voltou de forma sutil, em grao e ruido, e tambem em simulacao de material como o glassmorphism, aquele vidro fosco que cria hierarquia por transparencia e desfoque.

Em uma frase

Vamos trocar o fundo branco liso por um grao bem sutil, so pra dar calor sem virar enfeite.

A pergunta que ele responde

Como dou calor e carater de marca pra interface sem deixar a tela chapada?

Quando usar

Faz sentido pra dar carater de marca a superficies, sempre com cuidado de contraste pra nao prejudicar a leitura.

Como não usar

O cuidado e nao carregar a mao no padrao a ponto de derrubar o contraste do texto, e nao pesar a pagina com imagem pesada de textura.

Na prática

Pense num time que troca o fundo branco liso por um grao quase imperceptivel. A tela ganha calor sem virar enfeite, porque a textura ficou no lugar de apoio, nao de protagonista.

Não confunda com

Vale separar a textura digital da textura fisica. No digital nao da pra tocar nada: tudo e cue visual, construido a partir de imagem, padrao ou simulacao de material. A sensacao de superficie e uma ilusao bem feita, nao algo tatil de verdade.

D

Em inglês

Texture

Pronúncia

n/a

Também chamado de

textura, grain, noise, glassmorphism

Origem

n/a

Fonte

Saiba mais

Interaction Design Foundation, artigo sobre Texture in UI Design