Sistema de Design Frontend
Filosofia: Cada pixel tem um propósito. Moderação é luxo. A psicologia do usuário impulsiona as decisões. Princípio Central: PENSE, não memorize. PERGUNTE, não suponha.
🎯 Regra de Leitura Seletiva (OBRIGATÓRIA)
Leia os arquivos OBRIGATÓRIOS sempre, os OPCIONAIS apenas quando necessário:
| Arquivo | Status | Quando Ler |
|---|---|---|
| ux-psychology.md | 🔴 OBRIGATÓRIO | Leia sempre primeiro! |
| color-system.md | ⚪ Opcional | Decisões de cor/paleta |
| typography-system.md | ⚪ Opcional | Seleção/emparelhamento de fontes |
| visual-effects.md | ⚪ Opcional | Glassmorphism, sombras, gradientes |
| animation-guide.md | ⚪ Opcional | Animação necessária |
| motion-graphics.md | ⚪ Opcional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Opcional | Modelos de contexto |
🔴 ux-psychology.md = LEIA SEMPRE. Outros = apenas se relevante.
🔧 Scripts em Tempo de Execução
Execute estes para auditorias (não leia, apenas execute):
| Script | Finalidade | Uso |
|---|---|---|
scripts/ux_audit.py | Auditoria de Psicologia UX e Acessibilidade | python scripts/ux_audit.py <caminho_do_projeto> |
⚠️ CRÍTICO: PERGUNTE ANTES DE ASSUMIR (OBRIGATÓRIO)
PARE! Se a solicitação do usuário for aberta, NÃO recorra aos seus favoritos.
Quando a Solicitação do Usuário é Vaga, PERGUNTE:
Cor não especificada? Pergunte:
"Qual paleta de cores você prefere? (azul/verde/laranja/neutro/outro?)"
Estilo não especificado? Pergunte:
"Qual estilo você está buscando? (minimalista/ousado/retrô/futurista/orgânico?)"
Layout não especificado? Pergunte:
"Você tem preferência de layout? (coluna única/grid/assimétrico/largura total?)"
⛔ TENDÊNCIAS PADRÃO A EVITAR (ANTI-PORTO SEGURO):
| Tendência Padrão de IA | Por Que é Ruim | Pense em Vez Disso |
|---|---|---|
| Grids Bento (Clichê Moderno) | Usado em todo design de IA | Por que este conteúdo PRECISA de um grid? |
| Hero Split (Esquerda/Direita) | Previsível e entediante | Que tal tipografia massiva ou narrativa vertical? |
| Gradientes Mesh/Aurora | O fundo "novo" preguiçoso | Qual é uma combinação radical de cores? |
| Glassmorphism | A ideia de IA de "premium" | Que tal flat sólido e de alto contraste? |
| Ciano Escuro / Azul Fintech | Porto seguro da proibição de roxo | Por que não Vermelho, Preto ou Verde Neon? |
| "Orquestrar / Capacitar" | Cópia gerada por IA | Como um humano diria isso? |
| Fundo escuro + brilho neon | Exagerado, "estilo IA" | O que a MARCA realmente precisa? |
| Tudo arredondado | Genérico/Seguro | Onde posso usar arestas vivas e brutalistas? |
🔴 "Cada estrutura 'segura' que você escolhe te aproxima um passo de um template genérico. ASSUMA RISCOS."
1. Análise de Restrições (SEMPRE PRIMEIRO)
Antes de qualquer trabalho de design, RESPONDA ESTAS ou PERGUNTE AO USUÁRIO:
| Restrição | Pergunta | Por Que é Importante |
|---|---|---|
| Prazo | Quanto tempo? | Determina a complexidade |
| Conteúdo | Pronto ou placeholder? | Afeta a flexibilidade do layout |
| Marca | Diretrizes existentes? | Pode ditar cores/fontes |
| Tecnologia | Qual stack? | Afeta as capacidades |
| Público | Quem exatamente? | Direciona todas as decisões visuais |
Público → Abordagem de Design
| Público | Pense em |
|---|---|
| Geração Z | Ousado, rápido, mobile-first, autêntico |
| Millennials | Limpo, minimalista, orientado a valor |
| Geração X | Familiar, confiável, claro |
| Boomers | Legível, alto contraste, simples |
| B2B | Profissional, focado em dados, confiança |
| Luxo | Elegância comedida, espaço em branco |
2. Princípios de Psicologia UX
Leis Fundamentais (Internalize Estas)
| Lei | Princípio | Aplicação |
|---|---|---|
| Lei de Hick | Mais opções = decisões mais lentas | Limite opções, use divulgação progressiva |
| Lei de Fitts | Maior + mais próximo = mais fácil de clicar | Dimensione CTAs adequadamente |
| Lei de Miller | ~7 itens na memória de trabalho | Agrupe conteúdo em blocos |
| Von Restorff | Diferente = memorável | Torne CTAs visualmente distintos |
| Posição Serial | Primeiro/último são mais lembrados | Informações chave no início/fim |
Níveis de Design Emocional
VISCERAL (instantâneo) → Primeira impressão: cores, imagens, sensação geral
COMPORTAMENTAL (uso) → Usando: velocidade, feedback, eficiência
REFLEXIVO (memória) → Depois: "Gosto do que isso diz sobre mim"
Construção de Confiança
- Indicadores de segurança em ações sensíveis
- Prova social onde relevante
- Acesso claro a contato/suporte
- Design consistente e profissional
- Políticas transparentes
3. Princípios de Layout
Proporção Áurea (φ = 1.618)
Use para harmonia proporcional:
├── Conteúdo : Barra lateral = aproximadamente 62% : 38%
├── Cada tamanho de título = anterior × 1.618 (para escala dramática)
├── Espaçamento pode seguir: sm → md → lg (cada × 1.618)
Conceito de Grid de 8 Pontos
Todo espaçamento e tamanho em múltiplos de 8:
├── Apertado: 4px (meio passo para micro)
├── Pequeno: 8px
├── Médio: 16px
├── Grande: 24px, 32px
├── Extra Grande: 48px, 64px, 80px
└── Ajuste com base na densidade do conteúdo
Princípios Chave de Dimensionamento
| Elemento | Consideração |
|---|---|
| Alvos de toque | Tamanho mínimo confortável para toque |
| Botões | Altura baseada na hierarquia de importância |
| Campos de entrada | Altura do botão correspondente para alinhamento |
| Cartões | Padding consistente, respirável |
| Largura de leitura | 45-75 caracteres ideal |
4. Princípios de Cor
Regra 60-30-10
60% → Primário/Fundo (base calma e neutra)
30% → Secundário (áreas de suporte)
10% → Destaque (CTAs, realces, atenção)
Psicologia das Cores (Para Tomada de Decisão)
| Se Você Precisar de... | Considere Matizes | Evite |
|---|---|---|
| Confiança, calma | Família azul | Vermelhos agressivos |
| Crescimento, natureza | Família verde | Cinzas industriais |
| Energia, urgência | Laranja, vermelho | Azuis passivos |
| Luxo, criatividade | Verde Musgo Escuro, Dourado, Esmeralda | Tons vivos que parecem baratos |
| Limpo, minimalista | Neutros | Cor opressora |
Processo de Seleção
- Qual é o setor? (restringe opções)
- Qual é a emoção? (escolhe a primária)
- Modo claro ou escuro? (define a base)
- PERGUNTE AO USUÁRIO se não especificado
Para teoria de cores detalhada: color-system.md
5. Princípios de Tipografia
Seleção de Escala
| Tipo de Conteúdo | Proporção de Escala | Sensação |
|---|---|---|
| UI densa | 1.125-1.2 | Compacto, eficiente |
| Web geral | 1.25 | Equilibrado (mais comum) |
| Editorial | 1.333 | Legível, espaçoso |
| Hero/display | 1.5-1.618 | Impacto dramático |
Conceito de Emparelhamento
Contraste + Harmonia:
├── DIFERENTE o suficiente para hierarquia
├── SEMELHANTE o suficiente para coesão
└── Geralmente: display + neutro, ou serifa + sem serifa
Regras de Legibilidade
- Comprimento da linha: 45-75 caracteres ideal
- Altura da linha: 1.4-1.6 para corpo de texto
- Contraste: Verifique requisitos WCAG
- Tamanho: 16px+ para corpo na web
Para tipografia detalhada: typography-system.md
6. Princípios de Efeitos Visuais
Glassmorphism (Quando Apropriado)
Propriedades chave:
├── Fundo semitransparente
├── Desfoque de fundo
├── Borda sutil para definição
└── ⚠️ **AVISO:** Glassmorphism azul/branco padrão é um clichê moderno. Use radicalmente ou nem use.
Hierarquia de Sombras
Conceito de elevação:
├── Elementos mais altos = sombras maiores
├── Deslocamento-Y > Deslocamento-X (luz vindo de cima)
├── Múltiplas camadas = mais realista
└── Modo escuro: pode precisar de brilho em vez disso
Uso de Gradientes
Gradientes harmoniosos:
├── Cores adjacentes no círculo cromático (análogas)
├── OU mesmo matiz, luminosidade diferente
├── Evite pares complementares agressivos
├── 🚫 **NENHUM Gradiente Mesh/Aurora** (bolhas flutuantes)
└── VARIE radicalmente de projeto para projeto
Para guia completo de efeitos: visual-effects.md
7. Princípios de Animação
Conceito de Timing
Duração baseada em:
├── Distância (mais longe = mais longo)
├── Tamanho (maior = mais lento)
├── Importância (crítico = claro)
└── Contexto (urgente = rápido, luxo = lento)
Seleção de Easings
| Ação | Easing | Por Quê |
|---|---|---|
| Entrando | Ease-out | Desacelera, estabiliza |
| Saindo | Ease-in | Acelera, sai |
| Ênfase | Ease-in-out | Suave, deliberado |
| Lúdico | Bounce | Divertido, energético |
Performance
- Anime apenas transform e opacity
- Respeite a preferência de movimento reduzido
- Teste em dispositivos de baixo desempenho
Para padrões de animação: animation-guide.md, para avançado: motion-graphics.md
8. Checklist "Fator Uau"
Indicadores Premium
- Espaço em branco generoso (luxo = espaço para respirar)
- Profundidade e dimensão sutis
- Animações suaves e com propósito
- Atenção aos detalhes (alinhamento, consistência)
- Ritmo visual coeso
- Elementos personalizados (nem todos padrões)
Construtores de Confiança
- Sinais de segurança onde apropriado
- Prova social / depoimentos
- Proposta de valor clara
- Imagens profissionais
- Linguagem de design consistente
Gatilhos Emocionais
- Hero que evoca a emoção pretendida
- Elementos humanos (rostos, histórias)
- Indicadores de progresso/realização
- Momentos de encantamento
9. Anti-Padrões (O que NÃO Fazer)
❌ Indicadores de Design Preguiçoso
- Fontes padrão do sistema sem consideração
- Imagens de banco que não combinam
- Espaçamento inconsistente
- Muitas cores concorrentes
- Paredes de texto sem hierarquia
- Contraste inacessível
❌ Padrões de Tendência de IA (EVITAR!)
- Mesmas cores em todo projeto
- Escuro + neon como padrão
- Roxo/violeta em tudo (PROIBIÇÃO DE ROXO ✅)
- Grids Bento para landing pages simples
- Gradientes Mesh e Efeitos de Brilho
- Mesma estrutura de layout / clone Vercel
- Não perguntar preferências do usuário
❌ Padrões Escuros (Antiéticos)
- Custos ocultos
- Urgência falsa
- Ações forçadas
- IU enganosa
- Confirmshaming
10. Resumo do Processo de Decisão
Para CADA tarefa de design:
1. RESTRIÇÕES
└── Qual é o prazo, marca, tecnologia, público?
└── Se não estiver claro → PERGUNTE
2. CONTEÚDO
└── Que conteúdo existe?
└── Qual é a hierarquia?
3. DIREÇÃO DE ESTILO
└── O que é apropriado para o contexto?
└── Se não estiver claro → PERGUNTE (não use o padrão!)
4. EXECUÇÃO
└── Aplique os princípios acima
└── Verifique anti-padrões
5. REVISÃO
└── "Isso serve ao usuário?"
└── "Isso é diferente dos meus padrões?"
└── "Eu me orgulharia disso?"
Arquivos de Referência
Para orientação mais aprofundada em áreas específicas:
- color-system.md - Teoria das cores e processo de seleção
- typography-system.md - Emparelhamento de fontes e decisões de escala
- visual-effects.md - Princípios e técnicas de efeitos
- animation-guide.md - Princípios de design de movimento
- motion-graphics.md - Avançado: Lottie, GSAP, SVG, 3D, Partículas
- decision-trees.md - Modelos específicos de contexto
- ux-psychology.md - Aprofundamento em psicologia do usuário
Skills Relacionadas
| Skill | Quando Usar |
|---|---|
| frontend-design (esta) | Antes de codificar - Aprenda princípios de design (cor, tipografia, psicologia UX) |
| web-design-guidelines | Após codificar - Audite acessibilidade, performance e melhores práticas |
Fluxo de Trabalho Pós-Design
Após implementar seu design, execute a auditoria:
1. DESIGN → Leia princípios de frontend-design ← VOCÊ ESTÁ AQUI
2. CÓDIGO → Implemente o design
3. AUDITORIA → Execute a revisão de web-design-guidelines
4. CORREÇÃO → Aborde os resultados da auditoria
Próximo Passo: Após codificar, use a skill
web-design-guidelinespara auditar sua implementação quanto a acessibilidade, estados de foco, animações e problemas de performance.
Lembre-se: Design é PENSAR, não copiar. Cada projeto merece uma consideração fresca baseada em seu contexto e usuários únicos. Evite o Porto Seguro Moderno de SaaS!