Elementos de design

Os blocos visuais básicos de uma interface: linha, forma, cor, textura, espaço, tipografia e imagem.

Hard

O que é

Elementos de design são os componentes visuais com que toda interface é feita. Sozinho, cada um é simples, como uma linha, um bloco de cor, uma fonte ou um espaço, mas, combinados de propósito, eles decidem se a tela parece legível ou poluída, confiável ou caótica.

A lista clássica é linha, forma, cor, textura, espaço, tipografia e imagem, e cada um carrega função, não só aparência. A linha guia o olho, a cor sinaliza estado e marca, o espaço dá ar pros elementos e a tipografia comunica hierarquia e personalidade. A cor, aliás, faz boa parte do trabalho pesado de usabilidade.

Um cuidado prático é que a cor não pode ser o único jeito de comunicar algo. Um erro sinalizado só por borda vermelha some pra quem tem daltonismo, que é cerca de 8% dos homens, e por isso o erro vem com texto e ícone também, e não só com cor.

Em uma frase

Sinalizar o erro só com a borda vermelha não basta, porque quem tem daltonismo não vê, então vamos somar texto e ícone.

A pergunta que ele responde

Quais são os blocos visuais básicos com que eu monto uma interface e como uso cada um de propósito?

Quando usar

Ajuda pra ter vocabulário compartilhado na hora de criticar e construir interface, decidindo cada escolha visual de propósito.

Como não usar

O cuidado é não decorar a lista como taxonomia e parar por aí, porque o valor está no julgamento de usar cada elemento com intenção, e não em recitar os sete.

Na prática

Pense num time que sinaliza campo com erro só pintando a borda de vermelho. Quem tem daltonismo não vê, então a correção adiciona texto e ícone, sem depender da cor sozinha.

Não confunda com

Vale separar elementos de design de princípios de design. Os elementos são a matéria prima, como cor, espaço e tipografia, enquanto os princípios são as regras de como usar bem essa matéria, como contraste, proximidade e hierarquia.

D

Em inglês

Design Elements

Pronúncia

n/a

Também chamado de

elementos de design, design elements

Origem

n/a

Fonte

Saiba mais

Interaction Design Foundation, artigo sobre elements of design