Design visual (visual design)

São as escolhas de cor, tipografia, layout e espaço que fazem o produto comunicar hierarquia, função e marca.

Hard

O que é

Design visual é a escolha deliberada de como o produto aparece, sempre com o objetivo de fazer ele funcionar melhor pra quem usa. Cobre cor, tipografia, layout, ícone, imagem, espaçamento e a relação entre tudo isso em cada tela.

O mal-entendido comum é achar que se trata só de deixar bonito. Em produto, o visual decide o que a pessoa vê primeiro, o que ela entende como clicável e que impressão de confiança ela forma. Por isso um produto lindo com hierarquia confusa frustra, enquanto um produto sóbrio que comunica claro retém.

O trabalho se sustenta em alguns princípios: hierarquia, pra mostrar o que vem primeiro, contraste, pra destacar o que importa, consistência, pra dar o mesmo tratamento ao mesmo tipo de coisa, proximidade, pra que o que está perto se leia como relacionado, e equilíbrio.

Em uma frase

No design visual desses dois botões falta hierarquia, então a ação principal não está saltando como deveria.

A pergunta que ele responde

Como eu uso cor, tipografia e espaço pra pessoa entender o que ver e clicar primeiro?

Quando usar

Use na hora de definir a camada de apresentação, ou seja, tokens de cor, escala tipográfica, espaçamento e a hierarquia entre as telas.

Como não usar

O cuidado é não tratar o visual como um verniz aplicado no fim do projeto. Visual sem hierarquia não é só estética ruim, é usabilidade ruim, porque a pessoa não sabe pra onde olhar.

Na prática

Pense em dois botões na mesma tela que competem porque têm o mesmo peso visual. O ajuste de hierarquia faz a ação principal saltar e a secundária recuar, e a pessoa entende na hora o que fazer primeiro.

Não confunda com

Vale separar design visual de design gráfico. O design gráfico entrega uma peça estática, como um cartaz ou uma identidade, enquanto o visual de produto vive dentro de um sistema interativo, com estados e tamanhos de tela que mudam. É o mesmo cuidado estético aplicado a contextos bem diferentes.

D

Em inglês

Visual Design

Pronúncia

ví-ju- al di-zain

Também chamado de

visual design, design visual, camada visual

Origem

n/a

Fonte

Saiba mais

Alan Hashimoto e Mike Clayton, Visual Design Fundamentals