Revisão de Design de Página
Visão Geral
Um relatório de design que diz "parece bom" não vale nada. Uma revisão útil nomeia o elemento, o valor medido e o que deveria ser.
Princípio central: cada descoberta carrega um número ou um seletor. Sem adjetivos sem evidência, e o que você não pôde verificar deve ser dito em voz alta.
Ordem das Passagens
Execute nesta ordem. Passagens posteriores são desperdiçadas se uma anterior falhar.
- Estrutura: cada seção existe, na ordem pretendida, com conteúdo vinculado
- Ritmo: lacunas de junção entre seções, alinhamento da grade, alturas dos cards, o sistema de seção
- Responsivo: a matriz de janelas abaixo, mobile e desktop
- Tipografia e cor: contraste, hierarquia, órfãos, overflow, larguras de texto em relação ao design
- Movimento: consulte
animating-web-pagesechoreographing-scroll-stories - Afirmações e conteúdo: consulte
writing-claims-that-hold - Acessibilidade e performance: foco, texto alternativo, LCP, mudança de layout
A Matriz de Janelas
Teste as larguras que a página precisa suportar, não uma representativa. Um conjunto que se sustentou em um lançamento real: desktop em 1024, 1280, 1440, 1920 e 2560, e celulares em 320, 360, 390 e 430.
| Largura | O que verificar |
|---|---|
| 1440 | comprimentos de linha acima de ~75 caracteres, seções que centralizam quando não deveriam |
| 992 | grades de três colunas que deveriam ser duas, elementos fixos que não se movem |
| 768 | o bloco de tablet que ninguém escreveu, então valores de desktop se aplicam na metade da largura |
| 390 | mídia sangrada que não contém mais seu assunto, texto escuro em faixa escura, overflow horizontal |
| 320 | o menor celular: títulos quebrados, botões cortados |
| 2560 | imagens suaves em tela retina, conteúdo perdido no meio de uma tela larga |
A falha mobile que vale a pena nomear: um herói de altura total cuja mídia é apenas cerca de 55% da seção deixa o restante mostrando o fundo da seção. Se o fundo da seção for escuro e a cópia tiver mudado para um tema claro, o texto e os botões ficam invisíveis. Verifique ambos os estados de tema em 390.
Meça, não aperte os olhos
Leia os valores da página ativa em vez de julgar por uma captura de tela. Isso é mais rápido, pega coisas que o olho perde e funciona quando a renderização não está disponível.
// Ritmo da seção: a lacuna importante é a SOMA em cada junção
[...document.querySelectorAll('section')].map(s => {
const c = getComputedStyle(s);
return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
padT: c.paddingTop, padB: c.paddingBottom };
});
// Overflow, o bug invisível mais comum
[...document.querySelectorAll('*')]
.filter(e => e.scrollWidth > e.clientWidth + 1)
.map(e => e.className);
// Overflow horizontal da página
document.documentElement.scrollWidth > document.documentElement.clientWidth;
// Uniformidade de cards dentro de uma grade
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));
tools/page-measure.js neste repositório agrupa esses e as verificações abaixo em um único trecho.
Mais verificações medidas que provaram seu valor:
- Sistema de seção: todo título de seção de conteúdo tem o mesmo tamanho de fonte computado; toda borda esquerda é igual à borda do logotipo da navegação.
- Piso de tamanho de texto: nenhum texto abaixo de 10px.
- Um
h1. Níveis de cabeçalho descem sem pular. - Imagens: cada uma decodifica; proporção de pixel efetiva igual ou abaixo de 1.0 em cada posição de rolagem e proporção de pixel do dispositivo.
- Contraste por cena: cada nó de texto dentro de uma cena fixa tem pelo menos 3:1 (grande) ou 4.5:1 (corpo) contra seu primeiro fundo sólido, no estado final da cena.
- Herói: amostra de quadros por oito segundos. Falha em imagem duplicada, um tile fora do retângulo do herói, uma sobreposição, um tile sob a cópia ou qualquer mudança após a introdução estabilizar.
- Sensação de rolagem: entrada real de roda, consulte
choreographing-scroll-stories. - Console limpo. Script inicia, introdução roda, sem erros pendentes.
Quando você não pode capturar tela
Painéis headless e ocultos pausam a renderização, então as capturas de tela voltam em branco enquanto o DOM está perfeitamente saudável. Isso não é motivo para pular a revisão nem para pedir que o usuário verifique por você.
Verifique numericamente: estilos computados, bounding boxes, scrollWidth, status de busca de ativos
e tipo de conteúdo. Indique claramente em seu relatório quais descobertas foram medidas e
quais foram vistas.
Conteúdo e Afirmações
Uma revisão de design inclui o que a página diz.
- Toda estatística é atribuída, e a atribuição está liberada para uso em marketing
- Logotipos de clientes estão na lista liberada, não apenas "logotipos que temos"
- Texto alternativo descreve a imagem, não é o nome do arquivo, e não está vazio em imagens significativas
- Nenhum texto placeholder em uma lista do CMS; nenhum card vazio atrás de uma animação
- Nenhuma palavra proibida; nenhum travessão eme (—) se o estilo da casa os proíbe
Piso de Acessibilidade
- Anel de foco visível em todo elemento interativo (
:focus-visible, nãooutline: none) - Contraste de texto do corpo pelo menos 4.5:1, texto grande 3:1
- Alvos interativos com pelo menos 44x44 no toque
- Movimento reduzido respeitado: a página está completa e estática
- Sem script: tudo visível
Piso de Performance
- A imagem LCP é carregada com
eager, todo o resto comlazy - A imagem do herói tem aproximadamente 2x sua largura CSS, não 4x
- Nenhuma mudança de layout de imagens sem dimensões ou um wrapper com
aspect-ratio - Vídeo é um arquivo 1x ou leve em celulares, com um poster
Quanto Executar
Um marco recebe a suíte completa. Uma pequena correção recebe apenas a verificação que cobre a mudança, uma publicação em staging e um relatório. Executar a suíte completa após cada ajuste transforma uma correção de uma linha em uma hora. Quando alguém diz "QA completa", execute tudo.
Após a correção, publique em staging e faça QA do staging, não apenas da build local. O que é enviado é o que precisa ser verificado.
Verifique a Execução, Não o Log
Antes de relatar números, confirme que a execução que os produziu terminou: o arquivo de estado é de hoje, o log termina limpo, a janela é a que você pretendia. Um bloco de log desatualizado de uma execução anterior parece exatamente igual a um novo.
O Portão do Revisor a Frio
Seu próprio QA compartilha seus pontos cegos. Para um marco, entregue a um revisor novo que nunca viu o trabalho apenas os artefatos: capturas de tela de página inteira nas larguras da matriz, a planilha de 390, a captura de movimento e o livro de afirmações. Critério: 8 de 10 em cada um dos aspectos de hierarquia, ritmo, movimento, imagens e texto. No máximo três rodadas, um novo revisor a cada rodada. Um piloto disso em um vídeo finalizado obteve 7 no geral e encontrou um gancho estático e um nome de marca tardio que todas as nossas verificações automatizadas haviam aprovado.
Formato de Relatório
Uma tabela. Severidade, localização, valor medido, correção. Classificado do mais severo primeiro.
| Sev | Onde | Medido | Correção |
|---|---|---|---|
| Alto | .hero em 390 | mídia 500px dentro de uma seção de 812px; área de cópia é #0c0c0c | definir fundo da seção por tema |
| Médio | junção prova-informação | 120 + 120 = 240px de branco vazio | reduzir para 80, ou colocar o CTA lá |
Termine com o que você verificou e não encontrou falhas, e uma lista do que você não pôde verificar (por exemplo: "não consigo ouvir áudio", "o rascunho não pode ser pré-visualizado no domínio de produção"). Uma revisão sem uma linha limpa parece inacabada em vez de completa.
Bandeiras Vermelhas
- "Parece bom no mobile" sem largura nomeada
- Relatar uma correção como feita sem remedir
- Pular uma passagem porque a anterior estava limpa
- Pedir ao usuário para verificar algo que você poderia medir
- Relatar números de uma execução que você não confirmou que terminou
- Executar a suíte completa para uma mudança de uma linha