Bloco 2: Prototipagem, Fluxo e "Design para Quem Não é Designer" (9 Horas)

Prototipagem de Componentes e Teoria de Interface

Objetivos Gerais deste Bloco

Neste bloco, você desmistificará o design visual. Você aprenderá como arquitetar páginas que parecem criadas por estúdios profissionais, definindo um Design System coeso, escolhendo cores acessíveis com alto contraste e desenhando a navegação completa da aplicação no Stitch e Flow.

⏱️ Horas 10-12: Fundamentação Teórica — Design Sem Segredos

1. Os Princípios C.R.A.P.

Estes quatro pilares universais separam os designs amadores dos profissionais:

C - Contraste (Contrast): Se dois elementos não forem exatamente iguais, faça-os muito diferentes. Use cores, pesos tipográficos e tamanhos para guiar o olhar do usuário direto ao ponto mais importante (como a CTA ou o título principal).
R - Repetição (Repetition): Repita elementos de design por toda a interface para criar consistência. Botões, tamanhos de fonte, bordas e espaçamentos (paddings) devem manter o mesmo padrão.
A - Alinhamento (Alignment): Nada deve ser colocado na tela de forma aleatória. Cada elemento deve ter uma conexão visual com algum outro elemento da página. Utilize grades para manter a ordem estrutural.
P - Proximidade (Proximity): Agrupe itens que possuem relação de contexto. Se uma div tem um título e uma descrição, mantenha-os próximos e separe outros blocos por espaços maiores (Whitespace).

2. Cores, Tipografia e Acessibilidade (WCAG)

Um design bonito e inacessível falha no seu objetivo de negócio. O consórcio W3C define regras estritas para a legibilidade de textos:

Contraste WCAG (Nível AA): A relação de contraste entre a cor do texto e o fundo deve ser de pelo menos 4.5:1 para textos normais e 3:1 para textos grandes.
Hierarquia Visual (Padrões F e Z): Usuários não lêem a internet de cabo a rabo; eles escaneiam a tela. Em páginas informativas densas, o olhar descreve um padrão em "F" (topo e depois laterais); em páginas de vendas diretas (Landing Pages), o olhar costuma fazer um movimento em "Z". Desenhe seus botões de conversão nessas linhas de fluxo!

Dica de Acessibilidade

No nosso projeto SmartCopy AI, o fundo escuro #06080f em contraste com o texto cinza claro #eaecf2 gera um rácio de contraste superior a 15:1, excedendo as exigências de acessibilidade mais rígidas e permitindo uma leitura confortável mesmo em salas escuras.

⏱️ Horas 13-15: Prototipagem de Componentes com Google Stitch

1. O papel do Design System

No Google Stitch, o foco é construir componentes reutilizáveis para garantir velocidade e consistência. Definimos nosso Design System em tokens CSS:

/* Tokens de Design do SmartCopy AI no CSS */
:root {
    /* Cores */
    --color-void: #06080f;
    --color-surface: #0f1318;
    --color-border: #1c2028;
    --color-primary: #0084ff;
    --color-secondary: #6c3cff;
    
    /* Espaçamentos e cantos */
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --spacing-xs: 0.5rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
}

Copiloto IA: Prompt para Design System no Antigravity

"Crie uma folha de estilo CSS que funcione como o Design System modular da aplicação SmartCopy AI. Ela deve definir variáveis de cores (Void, Surface, Border, Primary, Secondary), variáveis de escala de fontes (tamanhos de h1, h2, body, caption baseados em REM) e classes utilitárias para botões (.btn-primary, .btn-secondary) e cards (.card, .card-highlight). Aplique espaçamentos uniformes e consistentes."

⏱️ Horas 16-18: Arquitetura de Informação e Fluxos com Google Flow

1. A Jornada do Usuário

Mapear o fluxo do usuário impede cliques sem saída e caminhos confusos. Com o Google Flow, desenhamos a conexão lógica de telas do SmartCopy AI:

[Landing Page / index.html]
        │
        └──► [Clique em "Gerar Copy"]
                    │
                    ├──► [Se NÃO Logado] ──► [Modal de Inscrição / Login]
                    │
                    └──► [Se Logado] ──────► [Painel Editor Principal]
                                                   │
                                                   └──► [Cliques em Salvar / Histórico]

Copiloto IA: Prompt para Arquitetura de Fluxo

"Desenhe um diagrama conceitual estruturado em texto plano (wireframe textual) mapeando todas as rotas e interações que um aluno deve seguir na interface da ferramenta SmartCopy AI. Divida o fluxo entre o visitante não cadastrado, a rota de cadastro de leads, e a interface principal de geração de copywriting inteligente com os respectivos modais de sucesso ou falha."

Voltar para a página anterior ← Bloco 1: Fundação Tech Ir para a próxima aula Bloco 3: Engenharia de IA →