Seis princípios de web design (hierarquia, espaço em branco, contraste, alinhamento, proximidade, áreas de toque), cada um mostrado em um antes e depois ao vivo que você pode alternar, com o CSS por trás da correção.
Um bom web design vem principalmente de seis hábitos: ordenar o conteúdo com uma hierarquia visual clara, deixar espaço em branco suficiente, manter o contraste do texto em 4.5:1 ou mais, alinhar os elementos a bordas comuns, agrupar itens relacionados perto uns dos outros e fazer áreas de toque de pelo menos 24 pixels de lado. Alterne cada demonstração abaixo entre antes e depois para ver a diferença.
Os seis princípios e o CSS que costuma corrigi-los
Artigos sobre princípios de design os descrevem com palavras e fotos de banco de imagens. Aqui cada princípio é um pequeno card de produto ou formulário desenhado duas vezes, com o problema e corrigido, para você alternar entre os dois e ver exatamente o que mudou.
Os que mais importam no dia a dia são hierarquia, espaço em branco, contraste, alinhamento, proximidade e áreas de toque confortáveis. A consistência une todos eles: os mesmos espaçamentos, tamanhos de texto e cores repetidos em todas as páginas.
Hierarquia visual é a ordem em que as pessoas notam as coisas em uma página. Os designers a controlam com tamanho, peso, cor, posição e espaço, para que o título seja visto primeiro, os detalhes de apoio em segundo e a ação principal seja fácil de encontrar.
O critério de sucesso 1.4.3 do WCAG 2.2, nível AA, pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande, que ele define como pelo menos 18 pontos, ou 14 pontos em negrito.
Ele descreve como as pessoas costumam escanear páginas com muito texto: atravessando o topo, atravessando de novo um pouco mais abaixo e depois descendo pelo lado esquerdo. A lição prática é colocar as palavras-chave no início dos títulos e das linhas, e não esconder pontos importantes no meio de um parágrafo.
O critério 2.5.8 do WCAG 2.2, nível AA, define um mínimo de 24 por 24 pixels CSS para áreas de clique, com algumas exceções, como links dentro de uma frase. Muitas equipes de design usam tamanhos maiores nos botões principais para que sejam fáceis de acertar.
Três níveis de texto ordenam o conteúdo, o espaçamento vem de uma escala de 8px e o texto secundário continua escuro o bastante para passar em 4.5:1 sobre branco.
Título, preço e botão têm o mesmo tamanho e peso, então o olho não tem onde pousar.
Tamanho, peso e cor ordenam o conteúdo: título primeiro, preço em segundo, ação em terceiro.
Tudo está espremido de ponta a ponta, o que parece bagunçado e é difícil de escanear.
Paddings e gaps generosos separam os grupos e dão espaço para cada item respirar.
Texto cinza-claro sobre branco fica bem abaixo do mínimo do WCAG para texto normal.
Texto escuro sobre branco passa de 4.5:1, o mínimo do WCAG 2.2 nível AA para texto de tamanho normal.
Linhas centralizadas misturadas com linhas à esquerda criam bordas irregulares que o olho precisa perseguir.
Uma única borda esquerda comum transforma linhas soltas em um bloco legível.
Os rótulos ficam à mesma distância de todos os campos, então não fica claro qual rótulo pertence a qual campo.
Cada rótulo fica colado ao próprio campo e os pares ficam afastados entre si, então o agrupamento é óbvio.
Links minúsculos ficam amontoados e são fáceis de errar com o dedo.
As áreas têm pelo menos 24 por 24 pixels CSS, o mínimo do WCAG 2.2 nível AA, com espaço entre elas.
Princípio
Versão
Antes
Depois
Antes: {text}
Depois: {text}
Pão de fermentação natural
$9, assado todo dia
Peça agora
Horário de funcionamento
Seg. a sex., das 7am às 6pm
Sáb., das 8am às 2pm
Entregamos em até 5 km da loja, todas as manhãs antes das 9.
Cor do texto {hex} sobre branco
Bufê
Bandejas para 10 a 100 pessoas.
Encomende com dois dias de antecedência.
Nome
Telefone
Cardápio
Horários
Pedir
Comece grátis · Sem cartão de crédito