Regras visuais seguras para design de apps

Cores e contraste

Em vez de preto e branco puros, use tons próximos - o preto puro gera contraste desconfortável e o branco puro é brilhante demais. Ao saturar neutros, adicione um pouco da cor da interface (menos de 5% de saturação no sistema HSB) para criar coerência na paleta. Cores de uma paleta devem ter valores de brilho distintos entre si, evitando competição visual. Se saturar neutros, escolha entre tons quentes ou frios, nunca ambos. A diferença de brilho entre fundo e container deve ficar dentro de 12% para interfaces escuras e 7% para claras - baseado em estudo de cerca de 100 sites bem projetados.

Alinhamento, espaçamento e escala

Alinhamento óptico frequentemente supera o alinhamento matemático, pois algumas formas têm centro visual diferente do centro geométrico. Tudo no design deve estar alinhado com algo, e as medidas devem seguir uma escala matemática (como múltiplos de 8). O espaçamento deve ser medido entre pontos de alto contraste, pois nossos olhos identificam bordas de elementos pelo contraste. O padding externo de containers deve ser igual ou maior que o interno, reforçando a relação entre elementos internos. Em botões, o padding horizontal deve ser o dobro do vertical para manter o padrão reconhecível.

Tipografia e legibilidade

Texto de corpo deve ter no mínimo 16px - abaixo disso a leitura fica difícil. O comprimento ideal de linha fica em torno de 70 caracteres (entre 60 e 80 é aceitável). Quanto maior o texto, menor o espaçamento entre letras e entre linhas; quanto menor, maior o espaçamento. Use no máximo duas tipografias - a segunda reforça o conceito do design e adiciona variedade sem confundir visualmente.

Profundidade e containers

Elementos mais próximos do usuário devem ser mais claros, tanto em modo claro quanto escuro. O valor de blur de sombras deve ser o dobro da distância (ex.: 4px de distância = 8px de blur), e a opacidade deve diminuir conforme o elemento se aproxima. Não use sombras em interfaces escuras - não faz sentido visual e é difícil de executar bem. Não misture técnicas de profundidade na mesma interface. Bordas de containers devem contrastar com ambos os lados (container e fundo), não ficar num valor intermediário. Cantos arredondados aninhados devem ter raio interno igual ao raio externo menos a distância entre eles.

Hierarquia e composição

Elementos em série devem ser ordenados por peso visual, do mais pesado ao mais leve, com o mais pesado na borda externa. Coloque simples sobre complexo ou complexo sobre simples - nunca complexo sobre complexo. Não coloque duas divisões rígidas (bordas, transições de fundo) lado a lado, pois criam ruído visual. Ícones pareados com texto devem ter contraste reduzido, pois tendem a parecer visualmente mais pesados que o texto. Acima de tudo, cada decisão no design deve ser deliberada: se alguém apontar para qualquer parte, você deve ter uma explicação.