Formas básicas

Círculo, quadrado, triângulo e linha: os blocos de construção de qualquer interface e ícone.

Hard

O que é

Formas básicas são os blocos de construção do visual, como círculo, quadrado, retângulo, triângulo e linha. São elas que formam ícone, botão, card e a base de componentes mais complexos, e por isso dominar como usá-las é o primeiro passo pra criar tela clara e equilibrada.

A forma também comunica e guia a atenção. Um círculo vira ponto de notificação, um retângulo arredondado vira campo ou card e reduz a carga mental por ser familiar, ou seja, a escolha da forma não é só estética, já que ela orienta o olho e estrutura a informação.

Além disso, a forma carrega associação. O círculo parece amigável, o triângulo sugere direção ou alerta e o quadrado passa estabilidade. E quando a forma reforça o sentido junto da cor, como um triângulo mais vermelho pra erro, a mensagem chega até pra quem não distingue cor.

Em uma frase

No ícone de erro vamos usar um triângulo além do vermelho, porque a forma comunica o alerta até pra quem não distingue a cor.

A pergunta que ele responde

Como uso as formas geométricas pra construir interface e passar significado sem depender só da cor?

Quando usar

Ajuda na hora de construir ícone, componente, layout e qualquer base visual, e também pra reforçar significado junto da cor.

Como não usar

O cuidado é não confiar só na cor pra passar significado, nem usar forma sem pensar na associação que ela carrega, como um triângulo de alerta onde não existe alerta nenhum.

Na prática

Pense num ícone de erro que usa um triângulo além da cor vermelha. Assim, quem não distingue o vermelho ainda entende o alerta pela própria forma.

Não confunda com

Vale separar forma de ícone, que costuma ser confundido com ela. A forma é o bloco geométrico cru, enquanto o ícone é o símbolo com significado construído a partir dessas formas. Uma é o material, o outro é o que você faz com ele.

Design

Em inglês

Basic Shapes

Pronúncia

n/a

Também chamado de

formas básicas, formas geométricas, basic shapes

Origem

n/a

Fonte

Saiba mais

Interaction Design Foundation, material sobre gestalt e o significado das formas