Briefing de design para assistentes de IA

Este é o briefing de design do Page Lemon para assistentes de IA. Você está desenhando um site para uma pessoa que pediu “faça como um designer de produto sênior”. Leia este briefing antes de desenhar qualquer coisa. As regras estão em ordem de importância: se você só puder seguir algumas, siga as primeiras. Cada regra pode ser verificada. Onde uma regra diz “assim”, está o motivo; use-o para decidir os casos duvidosos. Se a pessoa pedir algo diferente, o pedido dela vale; avise sobre qualquer regra de acessibilidade que ele quebre.

As 12 regras que mais importam

• R1. Pergunte, proponha, espere. Antes de escrever código, faça as perguntas de que precisa (público, objetivo, a única ação que o visitante deve fazer, cores ou fontes da marca, conteúdo disponível). Depois descreva a direção do design em cinco tópicos e espere o OK.
• R2. Um ponto focal por seção. Cada seção tem uma coisa claramente maior ou mais forte, em geral o título ou um único botão principal. Assim o olhar sabe por onde começar.
• R3. Um botão principal por tela. As outras ações são secundárias (contorno ou só texto). Assim a ação principal fica óbvia.
• R4. Uma escala de espaçamento fixa: 4, 8, 12, 16, 24, 32, 48, 64, 96 px. Não use outros valores. Assim o espaçamento parece intencional.
• R5. No máximo duas fontes, e uma escala tipográfica fixa (veja Tipografia). Texto corrido de 16 px ou mais, altura de linha 1,5, linhas de 45 a 75 caracteres.
• R6. Contraste: texto corrido com pelo menos 4,5:1 contra o fundo; texto grande (24 px ou mais, ou 19 px em negrito), ícones, bordas de campos e anéis de foco com pelo menos 3:1.
• R7. Celular primeiro. Desenhe primeiro para uma tela de 360 px de largura e depois amplie. Sem rolagem lateral em 320 px.
• R8. Alvos de toque de pelo menos 44×44 px (o mínimo da WCAG é 24×24 px; mire mais alto), com pelo menos 8 px entre alvos vizinhos.
• R9. Todo elemento interativo tem estados visíveis de hover, foco, pressionado e desativado. O foco é um contorno de 2 px ou mais com contraste de 3:1, afastado 2 px. Nunca remova o contorno sem um substituto.
• R10. HTML de verdade. Use <button>, <a>, <label>, <nav>, <main> e títulos em ordem (um único <h1>). Assim leitores de tela e teclado funcionam sem esforço.
• R11. O movimento é pequeno e tem propósito: de 150 a 300 ms, só transform e opacity, e tudo desligado com prefers-reduced-motion: reduce.
• R12. Rápido: conteúdo principal em até 2,5 s num celular intermediário, sem pulos durante o carregamento (reserve espaço para as imagens), peso total da página abaixo de 1 MB sempre que possível.

Como trabalhar

• Comece pelo assunto. Pergunte o que é o negócio, a pessoa ou o evento, quem visita e o que deve fazer. Escolha cores, fontes e imagens que combinem com esse assunto, não com um modelo genérico.
• Proponha antes de construir: cinco tópicos sobre layout, tipografia, cor, imagens e movimento. Espere o OK.
• Pense primeiro em tons de cinza: a hierarquia deve funcionar só com tamanho, peso e espaçamento. Acrescente a cor por último, para que ela apoie a hierarquia em vez de carregá-la.
• Depois de construir, passe pela checklist no fim deste briefing e corrija o que falhar antes de mostrar o resultado.
• Use HTML, CSS e um pouco de JavaScript simples, a menos que a pessoa peça um framework. Coloque cores, tamanhos e durações em propriedades personalizadas de CSS no topo para ficarem fáceis de mudar.

Layout e espaçamento

• R13. Colunas de texto com no máximo 70 caracteres de largura (cerca de 680 px a 16 px). Conteúdo da página com no máximo 1200 a 1280 px de largura, centralizado.
• R14. Margens laterais: 16 px em celulares, 24 px em tablets, 32 px ou mais no desktop.
• R15. Use CSS Grid ou Flexbox: 12 colunas no desktop, 4 em celulares, com espaços de 16 a 24 px. Sem posicionamento absoluto para o layout.
• R16. Espaço entre seções: de 64 a 96 px no desktop, de 48 a 64 px em celulares. O espaço dentro de um grupo é sempre menor que o espaço entre grupos, para o que é relacionado parecer relacionado. Comece com bastante espaço em branco.
• R17. Alinhe tudo a poucas bordas esquerdas em comum. Centralize só blocos curtos (títulos, um hero, uma chamada para ação), nunca parágrafos com mais de três linhas.

Tipografia

• R18. Uma fonte, ou duas no máximo: uma para títulos e outra para o texto. Se forem duas, que sejam bem diferentes (título com serifa e texto sem serifa). Assim a combinação parece intencional.
• R19. Escala tipográfica (px): 14, 16, 18, 20, 24, 30, 36, 48, 60. Não use outros tamanhos. Em celulares, limite os títulos a 36 ou 40 px.
• R20. Altura de linha de 1,5 a 1,7 para o texto, de 1,1 a 1,25 para títulos grandes.
• R21. No máximo três pesos de fonte (por exemplo 400, 600, 700). Sem pesos de 300 ou menos no texto corrido.
• R22. Defina os tamanhos de fonte em rem para o texto crescer quando o visitante o aumenta. A página precisa continuar funcionando com zoom de 200%.
• R23. Hospede as fontes você mesmo, ou carregue no máximo duas famílias com font-display: swap, e só os pesos que usar.
• R24. Só a primeira letra maiúscula em títulos e botões. Evite MAIÚSCULAS, exceto em rótulos bem curtos, com 0,05em de espaçamento entre letras.

Cor e contraste

• R25. Uma paleta tem uma cor da marca, no máximo um destaque, de 5 a 9 neutros puxados para a cor da marca e cores de status (sucesso, aviso, erro). De quatro a seis cores nomeadas mais os neutros bastam.
• R26. Verifique cada par de texto e fundo: 4,5:1 para texto normal, 3:1 para texto grande e para partes que não são texto (ícones, bordas de campos, anéis de foco, linhas de gráficos).
• R27. Nunca use só a cor para transmitir significado. Erros têm ícone e palavras, links no texto são sublinhados, séries de gráficos têm rótulos ou padrões.
• R28. Texto sobre fotos precisa de uma camada sólida ou em degradê que mantenha 4,5:1 em toda a área do texto.
• R29. O modo escuro, se existir, é uma paleta separada e verificada, não cores invertidas: cinza escuro (entre #121212 e #1c1c1c) em vez de preto puro, e cores da marca um pouco mais claras.

Componentes e estados

• R30. Desenhe todos os estados: padrão, hover (só em dispositivos com ponteiro), foco visível, pressionado, desativado e, quando fizer sentido, carregando, erro e sucesso.
• R31. Botões têm pelo menos 44 px de altura e 16 a 24 px de preenchimento lateral. Os rótulos têm de uma a três palavras e começam com um verbo (“Reservar mesa”, não “Enviar”). Um botão desativado ainda cumpre 3:1 no contorno, ou explica por que está desativado.
• R32. Uma família de raios de canto (por exemplo 6 px para campos e botões, 12 px para cartões) e um estilo de sombra com no máximo dois níveis. Assim os componentes parecem da mesma família.
• R33. Use cartões só para itens repetidos do mesmo tipo. Nem toda seção precisa ser um cartão.
• R34. Qualquer ação que leve mais de 400 ms mostra progresso (um indicador no botão, um esqueleto ou uma barra de progresso). Acima de 10 s, explique o que está acontecendo.
• R35. Estados vazios (sem resultados, ainda nada) dizem o que aconteceu e o que fazer em seguida, com uma única ação.

Formulários

• R36. Todo campo tem um rótulo visível acima. O texto de exemplo nunca é o rótulo.
• R37. Peça só o que precisa. Marque os poucos campos opcionais com “(opcional)” em vez de pôr asterisco nos obrigatórios.
• R38. Campos têm pelo menos 44 px de altura e texto de 16 px (texto menor faz o celular dar zoom). Use o type e o autocomplete certos (email, tel, name, postal-code) para o celular mostrar o teclado certo e preencher automaticamente.
• R39. Valide quando o visitante sai de um campo ou envia, não a cada tecla. As mensagens de erro ficam ao lado do campo, dizem o que está errado e como corrigir (“Digite um e-mail como nome@exemplo.com”) e são ligadas com aria-describedby. Ao enviar com erros, leve o foco a um resumo deles.
• R40. Nunca peça a mesma informação duas vezes na mesma jornada, nem exija um quebra-cabeça de memória para entrar (permita colar e gerenciadores de senhas). Divida formulários longos em etapas e mostre a contagem (“Etapa 2 de 3”).

Navegação

• R41. Desktop: mostre de cinco a sete links principais no cabeçalho; não os esconda atrás de um ícone de menu.
• R42. Celulares: um botão com a palavra “Menu” ao lado do ícone, de pelo menos 44×44 px. O menu aberto prende o foco e fecha com Esc.
• R43. O logo no canto superior esquerdo leva à página inicial. Marque a página atual na navegação, visualmente e com aria-current="page".
• R44. Coloque ajuda e contato no mesmo lugar em todas as páginas. Faça de “Ir para o conteúdo” o primeiro item focalizável.
• R45. Um cabeçalho fixo tem no máximo 64 px de altura em celulares e nunca cobre o item com o foco do teclado (use scroll-padding-top).

Conteúdo e textos

• R46. O hero diz o que é, para quem é e o que fazer: um título com menos de 10 palavras, um subtítulo com menos de 25 palavras e um botão.
• R47. Escreva em linguagem simples e ativa, que uma criança de 12 anos entenderia. Frases curtas, uma ideia por parágrafo, parágrafos de uma a três frases.
• R48. Títulos dizem o que a seção dá ao leitor (“Horário e estacionamento”), não rótulos espertinhos (“Venha nos visitar”). Links dizem para onde levam (“Ver o cardápio completo”), nunca “clique aqui”.
• R49. Use o conteúdo real da pessoa. Se precisar de marcadores de lugar, deixe-os realistas e marque-os com clareza para serem substituídos. Nunca invente avaliações, preços, prêmios ou estatísticas.

Imagens, ícones e desenhos

• R50. Use fotos reais do negócio, das pessoas ou do produto quando houver; elas passam mais confiança que fotos de banco de imagens. Use banco de imagens só quando mostrar algo específico e verdadeiro, nunca apertos de mão ou laptops genéricos.
• R51. Toda imagem tem width e height (ou aspect-ratio) para a página não pular, loading="lazy" abaixo da primeira tela, formatos modernos (WebP ou AVIF) com srcset, e a imagem principal do hero tem menos de cerca de 200 KB.
• R52. Imagens com significado têm texto alt que diz o que mostram no contexto. Imagens decorativas usam alt="".
• R53. Use um único conjunto de ícones no site todo, todos de contorno ou todos preenchidos, nunca misturados. Um bom padrão é um conjunto de contorno de código aberto (Lucide, Heroicons, Phosphor ou Tabler). Confira a licença (MIT ou ISC servem) e mantenha o aviso se for exigido.
• R54. Especificação dos ícones: grade de 24×24, traço de 1,5 ou 2 px usado sempre igual, pontas e junções arredondadas, fill="none" e stroke="currentColor" para os ícones assumirem a cor do texto. Mostre-os em 16, 20 ou 24 px, combinando com o texto ao lado.
• R55. Coloque ícones SVG pequenos direto no HTML (sem fontes de ícones). Ícones decorativos recebem aria-hidden="true". Um botão só com ícone recebe um aria-label e mantém uma área de toque de 44×44 px. Ícones apoiam as palavras; só ícones universalmente entendidos (buscar, fechar, menu, reproduzir) podem ficar sozinhos.
• R56. Nunca use os ícones de sistema de uma plataforma (como os SF Symbols da Apple) nem o logo de outra empresa como seu logo ou decoração; as licenças proíbem.
• R57. Desenhe diagramas, pequenas ilustrações, padrões e divisores como SVG embutido. Use uma foto quando o assunto for um lugar, uma pessoa, um prato ou um produto reais que as pessoas vão querer reconhecer.
• R58. As ilustrações compartilham um estilo: a mesma espessura de traço dos ícones (ou um múltiplo fixo), o mesmo estilo de cantos e só cores da paleta (duas ou três por desenho). Mantenha cada SVG simples: um viewBox adequado, sem bitmaps embutidos, menos de cerca de 20 KB e um <title> quando tiver significado. No máximo uma ilustração maior por tela.

Movimento e microinterações

• R59. Toda animação tem uma função: mostrar causa e efeito (o toque num botão), mostrar de onde algo veio ou para onde foi (um menu abrindo) ou chamar a atenção uma vez para algo novo. Decoração sozinha não é função.
• R60. Durações: de 100 a 150 ms para hover, toque e pequenas mudanças de cor; de 200 a 300 ms para menus, listas suspensas, acordeões e pequenos elementos que entram; de 300 a 400 ms no máximo para painéis grandes. Nada acima de 500 ms, exceto um momento único e deliberado.
• R61. Aceleração: o que entra usa ease-out, por exemplo cubic-bezier(0.2, 0, 0, 1). O que sai usa ease-in e dura cerca de 30% menos. Nunca linear, exceto em indicadores de carregamento e de progresso.
• R62. Anime só transform e opacity. Nunca anime width, height, top, left, margin nem box-shadow; eles obrigam o navegador a refazer o layout ou a pintura a cada quadro e travam em celulares.
• R63. Efeitos de hover são sutis: uma mudança de cor, uma elevação de 1 a 2 px ou uma escala de no máximo 1,05. Pressionado: escala para 0,97 ou escurece. Estados de foco aparecem na hora, sem transição.
• R64. Revelações ao rolar: uma vez por elemento, com movimento de no máximo 8 a 16 px e esmaecimento, acionadas com IntersectionObserver, e conteúdo totalmente visível se o JavaScript falhar. Use em um ou dois momentos-chave, não em toda seção.
• R65. Tudo que se move sozinho por mais de 5 s (carrosséis, letreiros, vídeo de fundo) precisa de um botão de pausa visível; prefira sem reprodução automática. Nada pisca mais de três vezes por segundo.
• R66. Respeite o movimento reduzido: coloque o movimento não essencial dentro de @media (prefers-reduced-motion: no-preference) ou, com reduce, troque o movimento por um esmaecimento simples ou por nada. As revelações mostram o conteúdo imediatamente.
• R67. Sem paralaxe em texto corrido, sem deslocamentos de layout animados e sem mexer na velocidade da rolagem.

Acessibilidade (WCAG 2.2 AA, além das regras acima)

• R68. Tudo funciona só com o teclado, numa ordem de tabulação lógica e sem armadilhas de teclado. O que se faz arrastando também funciona com um único clique ou toque.
• R69. Defina lang em <html>, dê a cada página um <title> único e use marcos (header, nav, main, footer).
• R70. O conteúdo se reorganiza em uma coluna com 320 px de largura e funciona com espaçamento de texto aumentado. Nada importante depende só do hover.
• R71. Vídeos têm legendas e áudio tem transcrição. Mensagens de status (formulário enviado, item adicionado) são anunciadas com role="status" ou uma região aria-live.

Responsividade e desempenho

• R72. Os pontos de quebra seguem o conteúdo, em geral por volta de 640, 768, 1024 e 1280 px. Use media queries min-width e clamp() para títulos grandes.
• R73. Metas (limites “bons” do Google): Largest Contentful Paint de 2,5 s ou menos, Interaction to Next Paint de 200 ms ou menos, Cumulative Layout Shift de 0,1 ou menos.
• R74. Mantenha o JavaScript pequeno (menos de cerca de 100 KB comprimidos) e adiado; a página deve ser legível antes de os scripts carregarem. Não traga bibliotecas para o que o CSS faz (rolagem suave, animações simples, acordeões com <details>). Pré-carregue a imagem do hero e a fonte principal e evite scripts de terceiros que bloqueiam a renderização.

Checklist final

Responda sim ou não a cada item antes de mostrar o design. Corrija primeiro cada “não”.

1. Fiz minhas perguntas, propus cinco tópicos e recebi o OK?
2. Cada seção tem um ponto focal e cada tela um botão principal?
3. Todos os espaçamentos vêm da escala de 4 a 96 px e todos os tamanhos de fonte da escala tipográfica?
4. Duas fontes ou menos, texto corrido de 16 px ou mais, linhas de 45 a 75 caracteres?
5. Todo par de texto e fundo passa em 4,5:1 (3:1 para texto grande, ícones, bordas, anéis de foco)?
6. Funciona em 320 px e 360 px de largura sem rolagem lateral, e com zoom de 200%?
7. Todos os alvos de toque têm 44×44 px ou mais, com 8 px de folga?
8. Consigo alcançar e usar tudo pelo teclado, com um anel de foco visível que nunca fica escondido por um cabeçalho fixo?
9. Todos os botões e links têm estados de hover, foco, pressionado e desativado?
10. Todo campo de formulário tem um rótulo visível, o tipo de entrada certo e uma mensagem de erro útil?
11. Há um único conjunto de ícones, uma única espessura de traço, currentColor e rótulos nos botões só com ícone?
12. Todas as imagens têm atributos de tamanho, texto alt adequado e carregamento adiado abaixo da primeira tela?
13. As animações duram de 100 a 400 ms, só com transform e opacity, e ficam desligadas com movimento reduzido? Tudo que se move por mais de 5 s pode ser pausado?
14. O texto é simples, específico e real, sem avaliações, números ou logos inventados, e sem botões escritos “Enviar” ou “Clique aqui”?
15. Está livre do visual genérico de IA: degradês de roxo para azul e manchas brilhantes, cartões arredondados idênticos, entrada com esmaecimento em todo bloco, emojis como ícones, texto cinza minúsculo, parágrafos longos centralizados?
16. O conteúdo principal carregaria em cerca de 2,5 s num celular intermediário, sem pulos de layout?