Trabalho de interface
A maioria das interfaces não falha nas ideias. Elas falham na execução — espaçamento que é quase consistente, hierarquia que é quase clara, tipografia que é quase correta.
Diagnosticar antes de reformular
Pergunte para que a tela serve. Uma ação primária, no máximo uma secundária. Se você não consegue nomear a ação primária, o problema de layout é um problema de produto e nenhuma quantidade de estilo resolve.
As coisas que realmente se destacam como qualidade
Hierarquia. Um espectador deve saber para onde olhar antes de ler qualquer coisa. Alcance isso com tamanho, peso e espaço — nessa ordem. Cor é a ferramenta de hierarquia mais fraca e a mais usada em excesso.
Ritmo de espaçamento. Coisas relacionadas ficam mais próximas do que coisas não relacionadas, e os espaços vêm de uma escala. Espaçamento inconsistente é o defeito que as pessoas sentem, mas não conseguem nomear. Acertar a proximidade faz com que um layout simples pareça projetado.
Tipografia. Uma família para a interface, no máximo duas na página. Defina uma escala real e use seus passos em vez de inventar tamanhos. O texto do corpo quer uma medida confortável — aproximadamente 60–75 caracteres — e uma altura de linha que cresce à medida que a medida se alarga.
Moderação nas superfícies. Bordas, sombras e preenchimentos separam as coisas. Escolha um por limite. Empilhar todos os três é o motivo pelo qual as interfaces parecem carregadas na densidade normal.
Alinhamento. Tudo se alinha com algo. Um elemento alinhado a nada parece um erro mesmo quando é intencional.
Densidade é uma decisão
Uma ferramenta com alta densidade de informação e uma página de marketing querem tratamentos opostos. Decida qual é esta e comprometa-se — o meio-termo desconfortável, onde uma tabela de dados tem o espaçamento de uma landing page, não atende a nenhuma.
Finalize os estados
Carregamento, vazio, erro e sobrecarga são onde os produtos parecem inacabados. Um estado vazio é uma oportunidade de design; um spinner sem contexto é uma admissão. Strings longas, listas longas e telas pequenas precisam ser tratadas, não apenas ter esperanças.
Modo escuro é uma paleta, não uma inversão
Inverter um tema claro produz o modo escuro ruim característico: fundos pretos puros, texto branco puro e sombras que não fazem nada.
- Use um cinza muito escuro em vez de preto puro, e um branco levemente escurecido em vez de branco puro. O contraste máximo entre os dois causa halos e é genuinamente cansativo de ler.
- A elevação se inverte: em temas claros, superfícies elevadas projetam sombras; em temas escuros, elas ficam mais claras. Sombras sozinhas não transmitem nada em um fundo escuro.
- Cores saturadas que funcionavam no branco vibrarão no escuro. Dessature e clareie as cores de acento para a paleta escura em vez de reutilizá-las.
- Defina ambas as paletas juntas, no nível do token, desde o início. Retrofit significa auditar cada superfície.
Piso de acessibilidade
Estes não são itens de polimento — abaixo deles, algumas pessoas não conseguem usar a interface.
- Contraste de texto atendendo à proporção padrão em relação ao seu fundo real, incluindo texto sobre imagens e dentro de botões coloridos.
- Nunca transmita significado apenas pela cor. Uma borda vermelha indicando um erro precisa de texto ou de um ícone também.
- Todo elemento interativo deve ser acessível pelo teclado, em uma ordem sensata, com um estado de foco visível.
- Alvos de toque grandes o suficiente para serem acionados de forma confiável, com espaçamento entre alvos adjacentes.
- Respeite a preferência de movimento reduzido: animações que não podem ser desativadas causam sintomas reais para alguns usuários.
- Elementos semânticos reais — botões que são botões, cabeçalhos em ordem. Uma div estilizada é invisível para a tecnologia assistiva.
Nunca
- Adicione peso visual para corrigir um problema de hierarquia causado por muitos elementos iguais. Remova em vez disso.
- Centralize o texto do corpo.
- Envie um estado de hover sem o estado de foco correspondente.