Layout e composição

Como os elementos são arrumados numa tela pra criar estrutura, hierarquia e clareza.

Hard

O que é

Layout é o arranjo estrutural dos elementos na tela. Composição é a relação entre eles, ou seja, o peso, o espaço e a ordem que comunicam o que vem primeiro e guiam a atenção. Por isso os mesmos elementos, arrumados de outro jeito, podem fazer a tela parecer clara ou caótica.

O objetivo, no fundo, é tirar o esforço de entender. Quando layout e composição funcionam bem, a pessoa nem repara neles: ela acha o que precisa, faz a ação e segue em frente. Quando falham, ela hesita, perde informação ou simplesmente sai.

Alguns princípios dão vocabulário pra avaliar isso com calma. Tem a hierarquia visual, que define o que pesa mais, o grid, que é a estrutura que alinha, o espaço em branco, que é respiro e não desperdício, o fluxo visual, que é o caminho que o olho segue, e a proximidade, em que perto significa relacionado. E hoje tudo isso precisa funcionar de forma responsiva, do celular ao monitor grande.

Em uma frase

O problema do checkout não é o estilo, é a composição: tem coisa demais competindo com o botão principal.

A pergunta que ele responde

Por que essa tela parece confusa se cada elemento dela está bem feito?

Quando usar

Ajuda ao montar qualquer tela e, principalmente, ao diagnosticar por que uma tela parece confusa mesmo com cada elemento bem feito. Muitas vezes o problema não é a peça, é o arranjo.

Como não usar

O cuidado é não caprichar no visual de cada peça e deixar a hierarquia frouxa, com tudo brigando por atenção igual. Quando nada se destaca, a pessoa não sabe por onde começar a olhar.

Na prática

Pense num checkout que converte melhor quando o time tira os elementos que competem com o botão principal e dá respiro à ação central. A mudança não foi de estilo, foi de composição, de reorganizar o peso da tela.

Não confunda com

Vale separar composição de design visual. A composição cuida da estrutura, ou seja, de onde cada coisa fica e em que ordem. O design visual cuida do estilo, como cor, tipo e peso. Um organiza o esqueleto da tela, o outro veste esse esqueleto, e os dois se apoiam.

D

Em inglês

Layout & Composition

Pronúncia

n/a

Também chamado de

layout, composição, arranjo de tela

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre layout e hierarquia visual