Natureza & André Cury — Site com IA generativa

Site real, publicado, de um curso preparatório de Ciências da Natureza para ENEM e vestibulares. O objetivo era apresentar a oferta com clareza e converter visitas em contato, principalmente por WhatsApp, o canal natural do público no Brasil.

O projeto serve de exemplo de como uso IA generativa no fluxo de design: da estrutura e redação até a montagem das seções, sempre com revisão e decisões de design feitas por mim.

O conceito é "confiança com energia": azul-marinho para autoridade acadêmica e laranja para ação e motivação. Fotografia dos professores e indicadores de resultado reforçam credibilidade.

A página segue um funil simples: promessa clara (H1), prova social, oferta, diferenciais, depoimento e chamada final para contato.

A paleta é quase complementar: azul-marinho (~235°) e laranja (~23°) ficam em lados opostos do círculo cromático, o que cria contraste de matiz e destaque natural para o laranja, usado só em CTAs e números. O azul transmite seriedade e confiança; o laranja, energia, entusiasmo e urgência, adequados a quem está se preparando para uma prova.

• #303675Azul-marinhoCartão principal, confiança e autoridade
• #E7630ALaranjaCTAs, destaques e indicadores
• #FFFFFFBrancoFundo e respiro
• #E1B091PêssegoApoio em ilustração e fotos

Leitura crítica: o texto branco sobre o laranja dos botões fica em torno de 3,4:1, aceitável só para texto grande. Para texto pequeno, um laranja um pouco mais escuro como #C55409 chegaria a 4,5:1 sem perder identidade.

Hex amostrados da arte final publicada; podem diferir levemente dos tokens originais do Figma.

Títulos em fonte display larga e pesada, que dá personalidade e peso aos números de destaque, combinada com uma sans-serif geométrica leve para o texto corrido, mantendo leitura confortável.

• Hero em duas colunas: à esquerda promessa, texto e CTA; à direita cartão azul com a oferta principal (Ciências da Natureza), seguindo o padrão em Z.
• Indicadores de prova social logo abaixo do CTA, em tamanho grande e cor de destaque.
• Cartões de benefícios em blocos de mesmo formato (similaridade) e diferenciados por cor para destacar os dois principais.
• Etiquetas (chips) para disciplinas e modalidades: filtros de leitura rápida.
• CTA repetido no cabeçalho, no hero e no final, com atalho para WhatsApp.

• Redução de atrito: contato por WhatsApp e formulário curto (nome, WhatsApp e e-mail).
• Correspondência com o mundo real: linguagem do público (aprovação, simulados, monitorias).
• Visibilidade e clareza: um H1 e uma ação principal por tela.
• Responsividade: layout que se reorganiza para celular, onde está a maior parte do público.

• Substituir os emojis dos cartões por um conjunto de ícones em SVG, que renderiza igual em todos os sistemas.
• Ajustar o contraste do texto branco sobre laranja (veja a tabela).
• Adicionar texto alternativo nas fotos e rótulos nos campos do formulário.
• Medir conversão (cliques no WhatsApp e envios do formulário) para orientar testes A/B.