Flat design

Estilo visual que corta textura, sombra e relevo, e aposta em tipografia, cor e layout limpo.

Hard

O que é

Flat design é o estilo que tira o enfeite. Nada de gradiente pesado, efeito 3D ou sombra dramática. O peso da composição vai pra tipografia, espaçamento e cor. Ele surgiu no começo dos anos 2010, com o Metro da Microsoft e depois o iOS 7, como uma virada rumo ao minimalismo digital.

Em design, esse estilo reduz o ruído visual, porque a interface passa a guiar pela hierarquia e pelo contraste, e não por textura. Em produto, ele ainda escala bem entre dispositivos e costuma ser mais leve de construir.

O problema conhecido é que ele pode acabar matando a affordance. Um botão sem sombra ou borda pode simplesmente não parecer clicável. Foi daí que veio o flat 2.0, que mantém a limpeza mas devolve pistas sutis, como sombra leve, camada e movimento.

Em uma frase

O flat puro tá matando a affordance, vamos pro flat 2.0 e devolver uma sombra leve no botão.

A pergunta que ele responde

Por que minha interface limpa e sem sombra está com gente que não percebe os botões?

Quando usar

Ajuda quando você busca clareza, leveza e consistência entre plataformas, com a hierarquia bem resolvida pra compensar a falta de ornamento.

Como não usar

O cuidado é não achatar tanto que a affordance suma, deixando um elemento interativo sem nenhuma pista de que é clicável.

Na prática

Pense num time que adota flat puro e percebe que os cliques no botão caem, porque ninguém entende que aquilo é botão. A solução foi migrar pro flat 2.0, devolvendo uma sombra leve só pra dar a pista.

Não confunda com

Vale separar flat design de minimalismo. O flat é um estilo visual específico, definido por não ter ornamento. O minimalismo é um princípio mais amplo, o de tirar o que não serve, e ele pode aparecer dentro de vários estilos diferentes. Um é uma escolha estética, o outro é uma postura de projeto.

D

Em inglês

Flat Design

Pronúncia

flét di-záin

Também chamado de

flat design, design plano, flat 2.0

Origem

Popularizado pelo Metro (Microsoft) e pelo iOS 7 (Apple).

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre flat design e affordance de clique