Criar páginas web com visual uniforme e fáceis de usar para todos

## Fazer a mensagem principal e o próximo passo aparecerem primeiro Use o peso visual para deixar a importância evidente antes de refinar a decoração. Uma página deve ajudar as pessoas a identificar seu propósito, compreender o valor principal e reconhecer a próxima ação em poucos segundos. - Dê a cada tela ou seção uma mensagem principal. - Mantenha a hierarquia central em um título de página, títulos de seção e corpo do texto; acrescente níveis mais profundos somente quando necessário. - Dê mais destaque ao conteúdo mais importante por meio de tamanho, contraste, posição e espaço ao redor. - Coloque a conclusão antes dos detalhes de apoio quando a leitura rápida for importante. - Reserve o tratamento visual mais forte para a ação ou decisão principal. - Evite deixar todos os elementos grandes, em negrito, coloridos ou com alto contraste. - Faça um teste de cinco segundos: uma pessoa que vê a página pela primeira vez consegue explicar a página e o próximo passo pretendido? ## Organizar os elementos com uma grade e espaçamentos comuns O espaçamento comunica relações. Use uma escala e uma grade compartilhadas para que itens relacionados pareçam conectados, grupos separados permaneçam distintos e os layouts possam mudar sem perder o ritmo. - Comece com uma escala de espaçamento de 8 pixels; permita uma subdivisão de 4 pixels quando for necessário um controle mais preciso. - Use uma grade responsiva simples, como uma coluna em celulares, duas em tablets e até doze em telas largas. - Mantenha o espaço dentro de um grupo menor do que o espaço entre grupos. - Alinhe componentes repetidos a colunas, bordas e linhas de base comuns. - Defina a altura de linha do corpo perto de 1.6 e os intervalos entre parágrafos em torno de 1.5 a 2 alturas de linha como pontos de partida. - Use tokens para valores de espaçamento em vez de inventar medidas quase duplicadas. - Inspecione o ritmo vertical entre seções e componentes em todas as larguras compatíveis. ## Manter clara a ordem de leitura do celular às telas largas Organize o conteúdo na ordem em que as pessoas precisam dele e deixe o layout visual reforçar essa sequência. O design responsivo deve preservar o significado, em vez de apenas caber em telas menores. - Projete primeiro a ordem do conteúdo para dispositivos móveis e depois aprimore o layout para telas mais largas. - Quando for viável, mantenha as linhas do corpo em japonês com cerca de 35 a 45 caracteres e as de textos em alfabeto latino com cerca de 45 a 75 caracteres. - Separe parágrafos na web com espaço, em vez de depender do recuo da primeira linha. - Coloque o ponto principal de cada seção antes das evidências e a ação pertinente depois delas. - Faça com que a sequência de títulos seja compreensível mesmo quando lida sem o corpo do texto. - Preserve a ordem lógica da fonte quando colunas forem recolhidas ou elementos forem movidos. - Teste zoom, aumento de texto, larguras estreitas, rótulos longos, datas, preços e sistemas de escrita mistos. ## Definir tamanhos de letra e entrelinhas fáceis de ler A tipografia estabelece hierarquia, legibilidade e confiança. Use uma escala tipográfica limitada e altura de linha suficiente para que o texto permaneça confortável em telas pequenas e estável entre variações de conteúdo. - Comece com cerca de 28 a 36 pixels para H1, 22 a 28 para H2, 18 a 20 para H3 e 16 a 18 para o corpo do texto. - Use altura de linha do corpo próxima de 1.6 e altura de linha dos títulos em torno de 1.25 a 1.4. - Não dependa de texto do corpo com 13 a 14 pixels ou menos em dispositivos móveis. - Limite as famílias e os pesos de fonte; crie distinção pela hierarquia antes de adicionar mais tipos de letra. - Mantenha o espaçamento normal entre letras em japonês e use um ajuste sutil do espaçamento somente para texto de destaque em alfabeto latino, quando necessário. - Limite a ênfase em negrito às poucas expressões que realmente orientam a leitura rápida. - Teste algarismos, símbolos, sequências de texto multilíngues, texto gerado por usuários e glifos ausentes. ## Usar poucas cores e contraste suficiente para ler o texto A cor deve comunicar prioridade, estado e identidade sem se tornar o único meio de transmitir significado. Uma paleta contida facilita o reconhecimento da ação principal e de mudanças importantes de estado. - Use um fundo dominante, uma faixa complementar de cores para texto ou superfícies e uma pequena proporção de cor de destaque. - Comece com cerca de três cores funcionais, além de cores neutras e uma cor de destaque principal. - Atribua cores de sucesso, aviso, perigo e informação de forma consistente. - Busque contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. - Dê à ação principal uma combinação distinta de cor, forma, rótulo e posicionamento. - Associe estados codificados por cor a texto, ícones, padrões ou outros sinais não baseados em cor. - Verifique cada par de primeiro plano e fundo, incluindo estados desativado, de passagem do ponteiro, de foco e de sobreposição em imagem. ## Transformar botões e peças repetidas em componentes compartilhados A consistência reduz o custo de aprendizado para os usuários e o custo de manutenção para as equipes. Converta decisões visuais recorrentes em tokens e componentes compartilhados, em vez de corrigir páginas isoladas. - Defina tokens para cor, espaçamento, tipografia, raio, borda, sombra e movimento. - Crie botões, cartões, navegação, formulários, caixas de diálogo, emblemas e elementos de resposta reutilizáveis. - Defina estados padrão, de passagem do ponteiro, ativo, desativado, de carregamento, de erro e de foco quando aplicável. - Nomeie as variantes pelo propósito ou função, e não pela aparência temporária. - Mantenha a mesma função visualmente e comportamentalmente consistente em todo o produto. - Documente as variantes permitidas, regras de conteúdo, requisitos de acessibilidade e comportamento responsivo. - Altere o componente compartilhado quando o padrão mudar; evite divergências específicas de página. ## Usar imagens e ícones para explicar, não só para enfeitar Imagens, ícones e diagramas devem explicar, orientar ou reforçar a confiança. A padronização do tratamento desses recursos melhora a qualidade percebida e evita que a decoração obscureça a mensagem. - Atribua proporções de aspecto consistentes a funções recorrentes dos recursos, como áreas de destaque e cartões. - Redimensione as imagens para as dimensões em que serão exibidas e prefira formatos modernos e eficientes. - Forneça versões responsivas das imagens e adie o carregamento de imagens fora da tela quando isso não ocultar conteúdo crítico. - Escreva texto alternativo que comunique o propósito da imagem, e não apenas sua aparência. - Mantenha traço, canto, preenchimento e tamanho óptico dos ícones consistentes dentro de um conjunto. - Organize diagramas como explicação, modelo visual e conclusão concisa, com uma legenda clara. - Verifique o contraste do texto sobre imagens e forneça um tratamento de fundo estável quando necessário. ## Responder rápido e com discrição ao clicar ou digitar O design de interação deve revelar o que pode ser usado, reconhecer entradas, mostrar o progresso e confirmar resultados. O movimento deve esclarecer mudanças de estado sem atrasar o trabalho nem causar desconforto. - Forneça uma resposta visível à entrada principal em cerca de 100 milissegundos, quando possível. - Use durações curtas para passagem do ponteiro e transições, geralmente em torno de 120 a 200 milissegundos. - Defina retornos de pressionamento, carregamento, sucesso, erro, desativação e foco para os controles pertinentes. - Use indicadores de progresso ou estruturas provisórias quando a conclusão não for imediata. - Use direção e curvas de aceleração para explicar mudanças espaciais ou de camada, em vez de apenas decorá-las. - Evite animações que disputem atenção com o conteúdo, retenham a atenção ou bloqueiem a entrada. - Respeite as preferências de movimento reduzido e não reproduza automaticamente mídias de fundo que causem distração. ## Permitir concluir tarefas com teclado e leitor de tela A acessibilidade é um requisito central de interação, não uma auditoria visual final. As pessoas devem conseguir perceber o estado, compreender os controles, navegar, recuperar-se de erros e concluir o fluxo principal por diferentes modos de entrada e saída. - Preserve um indicador de foco visível e uma ordem lógica de navegação pelo teclado. - Faça com que os alvos interativos tenham pelo menos 44 por 44 pixels quando viável. - Dê às imagens alternativas significativas, aos controles nomes acessíveis e aos campos de formulário rótulos explícitos. - Garanta que os erros identifiquem o campo, expliquem o problema e indiquem como corrigi-lo. - Forneça legendas ou transcrições para áudio e vídeo significativos. - Verifique todo o fluxo crítico usando apenas um teclado e a saída de um leitor de tela. - Teste contraste, zoom, redimensionamento de texto, movimento reduzido e diferenças comuns na percepção de cores. ## Antes de publicar, verificar a velocidade e o básico para buscadores Desempenho, capacidade de descoberta e facilidade de manutenção fazem parte da experiência projetada. Defina verificações mensuráveis para o lançamento e preserve as decisões para que as melhorias resistam a mudanças rotineiras de conteúdo e componentes. - Use imagens responsivas e compactadas e carregue recursos não críticos somente quando necessário. - Use subconjuntos de fontes, permita renderização alternativa, minimize estilos que bloqueiam a exibição e adie scripts não essenciais. - Dê a cada página um H1 significativo, além de título, descrição e prévia social distintos. - Use LCP abaixo de 2.5 segundos e CLS abaixo de 0.1 como objetivos iniciais e depois aplique os padrões atuais de desempenho. - Teste velocidade e abandono no fluxo mais importante de cadastro, compra ou solicitação. - Revise hierarquia, espaçamento, tipografia, cor, estados, recursos, acessibilidade e desempenho antes do lançamento. - Registre as decisões de design e implemente mudanças por meio de componentes e tokens compartilhados. - Monitore os resultados de usuários reais e revise os limites quando as evidências indicarem um padrão melhor.