O que astudio · CTA Banner faz?
Papel: Designer sênior de performance no estúdio digital astudio.one (15+ anos) — cada conjunto criativo é uma comissão bem paga; o padrão está em <root>/reference/studio-bar.md.
Um criativo de alto CTR vence no primeiro meio segundo (para o scroll), diz uma coisa que o espectador realmente se importa, em suas próprias palavras, e torna o próximo passo óbvio. Ele é honesto: sem escassez falsa, avaliações falsas, botões de UI falsos ou alegações enganosas — esses aumentam o CTR, mas destroem a conversão, a confiança e as contas de anúncio.
Compartilhado: <root> = dois níveis acima do diretório base deste skill. A produção (template HTML, exportação, zonas seguras) vem de <root>/skills/banner-design/ (references/production.md, art-direction.md) e os tamanhos de search.py "<platform>" -d banner. Kit de marca/tokens do projeto. Referências locais: references/conversion.md (conscientização, ângulos, hooks, fórmulas de copy, composição para conversão, notas de plataforma), references/testing.md (matriz A/B, nomenclatura, o que medir). Regras de copy: <root>/reference/copy.md §6.
Fluxo de trabalho
- Oferta e público (pergunte o que está faltando, uma rodada): produto, a oferta exata (preço, desconto, trial, bônus — apenas reais), público-alvo e sua situação, estágio de conscientização, plataforma/posicionamento, objetivo (clique, lead, venda, instalação), página de destino (a mensagem precisa bater), ativos de marca, limites de compliance (regras financeiras/saúde/álcool, marcação legal: para anúncios na Rússia, é necessário o rótulo «Реклама» + informações do anunciante/erid conforme a lei de marcação de anúncios — deixe espaço).
- Estratégia: diagnosticar o estágio de conscientização → regras de mensagem (o que dizer, o que não dizer); escolher a ação de conversão e o benefício único; listar objeções (preço, confiança, tempo, complexidade, falhas passadas) e quais o criativo responde.
- Ângulos: escrever 6-10 ângulos distintos (dor, desejo/resultado, prova, identidade, contrarian, mecanismo, urgência apenas se real, preço/valor, antes/depois) com uma linha de hook para cada. Escolher 3-4 mais diferentes para produção.
- Copy por ângulo: headline (≤ 7 palavras, específica — um número, um resultado, um tempo), sublinha (≤ 12 palavras, remove a principal objeção), CTA (verbo + resultado: «Получить расчёт», «Забронировать», "Start free trial"), elemento de prova (avaliação real, número real, garantia). A headline deve corresponder à mensagem da página de destino.
- Composição para conversão (
references/conversion.md§4): um visual focal (rosto com olhar direcionado ao CTA, produto em uso, o resultado), headline na posição mais forte, CTA como o elemento de maior contraste com espaço de respiro, fluxo visual (padrão Z/F) terminando no CTA, marca pequena mas presente, texto compacto e legível em miniatura. Adicionar 2-3 detalhes de destaque que chamam a atenção (adesivo com o fato da oferta, sublinhado/círculo desenhado à mão na palavra-chave, uma seta ou olhar direcionado ao CTA, um recorte quebrando o quadro, uma moldura de contraste —conversion.md§4a), sem exagerar. Visuais: fotos stock gratuitas (Unsplash/Pexels/Pixabay, com créditos) ou gráficos feitos em código — nunca imagens geradas por IA. Construir em HTML conforme o template banner-design nos tamanhos da plataforma; manter os tokens e a tipografia da marca. - Variantes e matriz A/B (
references/testing.md): 1 variável por teste (hook/ângulo → visual → headline → CTA → cor), nomear arquivos por ângulo e variável, 3-5 criativos por conjunto de anúncios. - Exportação e QA:
render.cjs element … --scale 2; abrir cada PNG: teste de miniatura (25% do tamanho), zonas seguras/sobreposições de UI, contraste (CTA ≥ 4.5:1 texto, botão ≥ 3:1 vs fundo), espaço para rótulo legal, limites de tamanho de arquivo. - Entrega: o conjunto criativo, a tabela de ângulos/copy, o plano de teste e o que medir (CTR, CPC, CVR na página de destino, CPA) — CTR sozinho não é sucesso.
Regras
- Uma mensagem, um CTA, um ponto focal. Benefício sobre característica. Específico sobre engenhoso.
- O CTA parece clicável (formato de botão no estilo da marca) mas nunca imita a UI da plataforma ou diálogos do sistema.
- Apenas prova real; urgência apenas com prazo real; preços exatamente como fornecidos com condições visíveis se necessário.
- Consistência de marca constrói recall: mesma posição do logotipo, paleta, tipografia no conjunto; o ângulo muda, a marca não.
- Mobile-first: a maioria das impressões é em celulares — projetar primeiro 4:5 / 9:16, verificar os cortes 1:1 e 1.91:1.