Os trinta padrões genéricos

Misturar duas cores saturadas na abertura ou em um botão sugere que a paleta não foi definida. O degradê acaba substituindo uma identidade de marca.

#ffffff pode indicar uma ausência de escolha. O papel nunca é perfeitamente branco; uma leve tonalidade faz a página parecer uma superfície.

Dar uma cor a cada recurso impede que as cores tenham significado. Reserve-as para funções específicas.

O destaque de demonstração do Tailwind é índigo e os temas escuros gerados adotam o quase preto. Juntos, viraram o uniforme das páginas de destino de IA.

Ciano elétrico, magenta e verde-limão sobre preto remetem a um modelo de ficção científica. Paletas elaboradas costumam ser menos saturadas que os padrões.

Vários tons claros e pouco saturados remetem a um modelo de aplicativo de bem-estar. Tons pastel precisam de um ponto de apoio escuro.

Essas fontes acompanham os frameworks e viram a escolha automática do modelo. A tipografia é uma forma barata de dar voz à página; manter o padrão desperdiça essa possibilidade.

Um ícone, um título e duas linhas, repetidos três vezes. Esse layout gerado é reconhecido de imediato porque não diz nada específico sobre o produto.

Branco, cinza, branco, cinza: o fundo muda porque o modelo determina, sem uma mudança no conteúdo.

Blocos arredondados de tamanhos variados parecem organizados, mas ocultam a ausência de prioridades. A grade se torna o próprio conteúdo.

Starter, Pro (mais popular), Enterprise: uma estrutura copiada de milhares de páginas sem considerar como o produto realmente é vendido.

O pequeno selo centralizado acima do H1 (“Novo”, “Agora com IA”, “Apoiado por…”) é um reflexo de modelo em vez de um anúncio. A contribuição do Fieldbook para esta lista.

Escolha os ícones pela espessura, forma e adequação ao produto. Aceitar o conjunto padrão sem revisão faz interfaces diferentes parecerem iguais.

Emojis variam entre plataformas e remetem a uma conversa. Como marcadores de seção ou de lista, sugerem a ausência de um sistema de ícones.

A estrela de quatro pontas virou um atalho para “recurso de IA”. Ela não explica o que o recurso faz.

Sombras grandes e difusas sob cada cartão simulam uma profundidade ausente no layout. A profundidade deve vir das superfícies, não do desfoque.

Painéis foscos sobre cores desfocadas precisam de conteúdo que justifique esse efeito. Em uma página lisa, o efeito não tem motivo.

O mesmo raio de 12-16px em botões, cartões, campos e imagens apaga a hierarquia. O arredondamento deve expressar a função.

Círculos coloridos desfocados atrás da abertura criam uma atmosfera padrão na ausência de imagens. Eles decoram a falta de conteúdo visual.

O papel pontilhado atrás das aberturas é outra atmosfera comum. Assim como os orbes, substitui uma escolha de design por uma textura.

Blocos cinza animados simulam velocidade. Muitas vezes, o conteúdo poderia simplesmente ser renderizado no servidor.

Uma seta de rolagem que quica ou desliza ao passar o ponteiro adiciona movimento que um rótulo poderia substituir.

Quando cartões, títulos e imagens sobem ou aumentam ao passar o ponteiro, nada sinaliza interatividade e a página se agita sob o cursor.

Textos gerados usam frequentemente o travessão para unir orações. Pessoas também o usam: esse sinal é fraco quando isolado.

Negar uma afirmação que ninguém fez adiciona preenchimento retórico. Descreva o assunto diretamente.

Uma marca de verificação em cada linha transforma a prosa em tabela de preços. A marca significa “incluído”; reserve-a para essa informação.

Citações inventadas com avatares genéricos são uma mentira na página. Isso é uma falha crítica, nunca diluída na média.

Um site que coleta dados sem página de privacidade nem termos está incompleto. Falha crítica.

Três pontos coloridos acima de um terminal falso são decoração. Mostre o código se ele existir, ou o próprio produto.

Uma página que não mostra o produto descreve uma ideia. Substituir capturas de tela por ilustrações e formas abstratas é uma falha crítica.