Iterar e fugir do genérico

Porque é que tudo acaba por se parecer

Abre dez landing pages geradas por IA sem direção: verás dez vezes a mesma página. Gradiente violeta-azul, emoji de foguetão no título, três cartões com sombras suaves, selo «AI-powered». Não é por acaso: um modelo de IA produz o que é estatisticamente provável nos seus dados de treino. Sem restrição, converge para a média de tudo o que viu — e a média, por definição, não se parece com nada de particular.

Compreender este mecanismo muda a tua postura: o genérico não é uma fatalidade da ferramenta, é o resultado por defeito na ausência de direção. Tudo o que construíste neste curso — o briefing com interditos, o design system, as iterações cirúrgicas — é precisamente o conjunto de restrições que força o modelo a sair da sua média. Este último capítulo acrescenta o andar final: a crítica exigente e a audácia assumida.

Há também uma questão de mercado: à medida que toda a gente gera interfaces, o custo do «correto» desmorona-se. O que se torna raro — logo precioso — é a personalidade: um design de que nos lembramos, que atribuímos a uma marca precisa. Para o Studio Mango, é o argumento de venda face aos clientes que poderiam «pedir à IA eles mesmos»: toda a gente pode obter uma página correta; poucos sabem fazê-la subir de gama.

Um feedback que faz avançar

«Não está famoso» não serve para nada — nem a um humano, nem a uma IA. O modelo não sabe o que te desagrada: vai mudar coisas ao acaso, por vezes estragando o que funcionava. O feedback eficaz é cirúrgico: «o contraste título/fundo é demasiado fraco», «o ritmo vertical é irregular entre as secções 2 e 3», «o CTA perde-se no meio de três elementos que gritam tão alto como ele». Quanto mais preciso o feedback, melhor a iteração.

A estrutura que funciona assenta em três tempos, já encontrada no capítulo 3: zona (onde?), problema (o quê, em vocabulário de design?), direção (para onde?). Acrescenta um quarto reflexo para as sessões longas: dizer também o que é preciso preservar. «A hero está perfeita, não lhe toques mais; concentra-te na secção pricing» protege os teus ganhos — sem isso, uma IA que regenera pode «melhorar» o que já estava validado.

A grelha de crítica: cinco perguntas a fazer à tua maquete

Para criticar a tua própria maquete com rigor — e não apenas «por intuição» — passa-a pelo crivo de cinco perguntas. Um: hierarquia — semicerrando os olhos diante da página, o que sobressai em primeiro, segundo, terceiro? É a ordem certa em relação ao objetivo (para a Sereno: título, promessa, CTA)? Dois: percurso — o olho circula naturalmente de cima para baixo, ou tropeça em elementos que disputam a atenção?

Três: coerência — espaçamentos, raios, espessuras seguem o sistema em todo o lado, ou detetas valores órfãos? Quatro: destaque — a cor de destaque guia para a ação, ou está polvilhada ao ponto de já não significar nada? Cinco: personalidade — se taparmos o logo, ainda se consegue adivinhar a marca? Esta última pergunta é a mais dura e a mais importante: é ela que separa o correto do memorável.

O reflexo poderoso: confiar esta grelha à própria IA. Ela é surpreendentemente boa crítica das suas próprias produções quando se lhe dá um quadro de avaliação — é a autocrítica estruturada. Obténs um diagnóstico argumentado, que confrontas com o teu próprio olhar antes de decidir as correções.

Eis a landing Sereno atual [código ou captura anexa]. Critica-a como um diretor artístico exigente, segundo cinco eixos:
1. Hierarquia: o que vê o olho em 1.º, 2.º, 3.º? É a ordem certa para converter para o teste gratuito?
2. Percurso: onde tropeça o olho?
3. Coerência: lista os valores (espaçamentos, raios, tamanhos) que saem do design system.
4. Destaque: a cor de destaque guia para a ação ou está diluída?
5. Personalidade: se taparmos o logo, o que distingue esta página de um template?
Para cada eixo: uma constatação, uma nota de 0 a 10, e UMA correção prioritária. Não proponhas ainda as correções, apenas o diagnóstico.

Os sinais do «template IA»

Eis a lista de controlo dos sintomas do resultado genérico — a que o Studio Mango afixa na parede. Se a tua maquete marcar vários, precisa de uma passagem de personalidade antes de ser mostrada a quem quer que seja:

• Gradientes violeta ou azul-rosa por todo o lado, sem intenção
• Emojis nos títulos para «dar vida»
• Espaçamentos tímidos, está tudo apertado
• Sombras suaves e cantos arredondados genéricos, idênticos em cada cartão
• Tipografia por defeito (a mesma sem serifa mediana de cima a baixo, nenhuma espessura assumida)
• Cor de destaque polvilhada por todo o lado em vez de reservada à ação
• Textos de enchimento intercambiáveis («Aumente a sua produtividade») que poderiam vender qualquer coisa

Se o teu resultado marcar estas casas, pede explicitamente audácia: escolhas tipográficas fortes, uma cor de destaque assumida, contrastes nítidos, generosidade de espaço. Repara num ponto interessante: estes sintomas são o exato negativo do que aprendeste. O aperto viola a escala de espaçamento, o destaque diluído viola o 60-30-10, a tipografia mole viola a escala com rácio. O genérico não é um estilo: é a ausência de sistema.

As alavancas da personalidade

Sair do genérico não exige reinventar tudo — basta acionar duas ou três alavancas com convicção. A primeira e mais poderosa: a tipografia. Uma display assumida nos títulos (uma serifa com carácter, uma espessura extrema, uma largura invulgar) transforma uma página mais do que qualquer outra mudança. É a voz da marca: a Sereno com uma serifa calorosa em 64 px já não se parece com nenhum template.

Segunda alavanca: o destaque disciplinado. Uma única cor de destaque, usada em três sítios no máximo, cria mais impacto do que cinco cores por todo o lado. Terceira alavanca: o espaço generoso — duplicar o espaço à volta da hero é o meio mais barato de parecer premium. Quarta alavanca: um detalhe assinatura — uma forma recorrente, um estilo de ilustração coerente, uma microinteração cuidada — que atravessa a página como um motivo musical. Um único detalhe assinatura bem mantido vale mais do que cinco ideias dispersas.

O método das duas versões: safe vs audaciosa

Quando hesitas sobre o nível de risco, não decidas no abstrato: pede duas versões. Uma versão «safe» — limpa, coerente, sem risco — e uma versão «audaciosa» — tipografia display, destaque franco, disposição menos esperada. O custo marginal é quase nulo (alguns minutos de artifact), e a comparação lado a lado torna a decisão evidente, onde a discussão teórica andava às voltas.

Este método brilha também em apresentação ao cliente: mostrar safe e audaciosa posiciona a conversa em «até onde vamos?» em vez de «gostamos disto?». O cliente projeta-se, compara, escolhe muitas vezes um ponto intermédio — e sente-se ator da direção. O Studio Mango apresentará amanhã as duas: é a marca de um estúdio que domina a sua paleta de risco, não de um estúdio que não sabe escolher.

flowchart LR
  M["Maquete atual"] --> CR["Crítica em 5 eixos"]
  CR --> S["Versão safe: correções dirigidas"]
  CR --> A["Versão audaciosa: tipografia + destaque + espaço"]
  S --> CH["Comparação lado a lado"]
  A --> CH
  CH --> D["Decisão assumida + justificação"]

Microinterações e acabamentos

Os últimos 5 % fazem 50 % da impressão. As microinterações — a transição suave de um hover, uma aparição progressiva no scroll, um campo que confirma a introdução — sinalizam o cuidado. A regra para a Sereno: movimentos curtos (150-250 ms), suaves (curvas de aceleração naturais, sem ressaltos espalhafatosos) e significantes (cada animação comunica algo: «podes clicar», «ficou bem guardado»). Uma animação decorativa que não diz nada é ruído.

Os acabamentos são também os detalhes ingratos: os textos reais no lugar do lorem ipsum (um testemunho credível com nome próprio e profissão vale dez «Produto incrível!»), os estados vazios e as mensagens de erro, o favicon, os atributos alt das imagens. Pede à IA uma «passagem de acabamento» explícita: «relê toda a página como um perfecionista: transições em falta, textos fracos, detalhes negligenciados — lista tudo, depois corrige».

Entregar com confiança

Recapitulemos o caminho percorrido: uma intenção definida em briefing (capítulo 1), um sistema de tokens coerente e acessível (capítulo 2), um protótipo iterado em ciclo curto (capítulo 3), componentes limpos e acessíveis (capítulo 4), e uma passagem de crítica, de audácia e de acabamento (este capítulo). Quando o ritmo, a hierarquia e o destaque estão dominados, entregas um design que tem personalidade — não mais um template. É o que o Studio Mango apresenta com orgulho ao cliente amanhã de manhã.

Última palavra sobre a postura: a IA fez-te ganhar o dia inteiro de execução, mas cada decisão visível nesta página passou pelo teu julgamento. É exatamente a partilha de papéis certa — e é uma competência que ganha valor: saber dirigir a máquina para um resultado que ela nunca teria produzido sozinha. O gosto continua a ser teu; a IA acelera.