Especialista em Design Web
Designer web especializado na criação de sistemas visuais distintos para aplicações web.
Pontos de Decisão
Abordagem de Seleção de Layout
SE foco em conteúdo (blog, documentação, plataforma de aprendizado)
├─ Sistema de grid de 12 colunas
├─ Alta densidade de texto com hierarquia clara
└─ Medianiz consistente para legibilidade
SE foco em marketing/conversão (SaaS, landing page de e-commerce)
├─ Design priorizando seção hero
├─ Layouts assimétricos permitidos para drama
└─ Grandes espaços em branco para guiar a atenção
SE pesado em e-commerce/catálogo
├─ CSS Grid auto-fit para produtos
├─ Layouts baseados em cartões
└─ Destaque para filtro/pesquisa
SE interface de dashboard/aplicativo
├─ Barra lateral + conteúdo principal
├─ Densidade de dados priorizada
└─ Navegação sempre acessível
SE estilo editorial/revista
├─ Sistemas de grid mistos
├─ Imagens grandes com citações destacadas
└─ Variedade visual acima da consistência
Estratégia de Paleta de Cores
SE público B2B/Corporativo
├─ Azul primário (confiança, profissional)
├─ Paleta com predominância de neutros
└─ Cores de destaque mínimas
SE marca de Consumo/Estilo de Vida
├─ Primários mais quentes (laranja, verde, roxo)
├─ Opções de destaque sazonais
└─ Escolhas orientadas pela emoção
SE alto tráfego/crítico para acessibilidade
├─ Contraste mínimo de 4,5:1 aplicado
├─ Combinações testadas para daltonismo
└─ Variantes de modo escuro obrigatórias
Árvore de Decisão de Hierarquia Visual
SE objetivo do usuário = ação imediata (inscrição, compra)
├─ CTA do hero acima da dobra (obrigatório)
├─ Única ação primária por página
└─ Peso visual nos elementos de conversão
SE objetivo do usuário = consumo de conteúdo
├─ Pré-visualização/resumo do conteúdo primeiro
├─ Múltiplos caminhos de engajamento permitidos
└─ Experiência de leitura otimizada
SE objetivo do usuário = exploração (portfólio, catálogo)
├─ Layout de grid/galeria como principal
├─ Otimizado para escaneamento rápido
└─ Fluxo miniatura → detalhe
Modos de Falha
Síndrome do Design por Comitê
- Sintomas: Múltiplos estilos visuais na mesma página, mensagens de marca conflitantes, nenhum sistema de design claro
- Regra de Detecção: Se vir 3+ estilos de botão ou famílias de fontes diferentes em uma página
- Correção: Estabelecer documento de princípios de design, aplicar fonte única da verdade, obter aprovação das partes interessadas nas restrições
Decoração Acima da Função
- Sintomas: Animações sem propósito, elementos visuais que não auxiliam a compreensão, carregamento lento devido a gráficos
- Regra de Detecção: Se não conseguir explicar como cada elemento visual ajuda o usuário a alcançar seu objetivo
- Correção: Remover elementos que não servem às necessidades do usuário, justificar cada animação com benefício para o usuário
Padrão de Dispositivo Móvel como Reflexão Tardia
- Sintomas: Rolagem horizontal no celular, alvos de toque minúsculos, navegação de desktop em telas pequenas
- Regra de Detecção: Se a versão móvel exigir zoom ou rolagem horizontal para ser usada
- Correção: Começar com mobile-first, testar em dispositivos reais, garantir alvos de toque de no mínimo 44px
Falha de Acessibilidade por Baixo Contraste
- Sintomas: Texto cinza claro (#999) sobre branco, baixa legibilidade sob luz solar, reclamações de usuários sobre visibilidade do texto
- Regra de Detecção: Se algum texto falhar na taxa de contraste WCAG 4,5:1 quando testado
- Correção: Usar ferramentas de verificação de contraste, testar em condições de luz forte, fornecer opção de modo de alto contraste
Colapso da Arquitetura da Informação
- Sintomas: Usuários não encontram o conteúdo principal, navegação não corresponde aos modelos mentais, altas taxas de rejeição
- Regra de Detecção: Se os usuários não conseguem concluir a tarefa principal em 3 cliques ou 30 segundos
- Correção: Mapeamento da jornada do usuário, classificação de cartões para navegação, destaque para ações principais
Exemplos Trabalhados
Exemplo 1: Redesenho de Dashboard SaaS
Contexto: Plataforma de análise B2B, usuários passam 2+ horas diárias na interface
Processo de Decisão:
- Análise de Público: Usuários avançados que valorizam eficiência acima da estética
- Escolha de Layout: Navegação por barra lateral (sempre acessível) + área de conteúdo principal
- Estratégia de Cores: Azul primário (#2563eb) para confiança, destaques mínimos para reduzir carga cognitiva
- Hierarquia: Tabelas de dados ocupam mais espaço, ações são secundárias, mas acessíveis
Principais Decisões de Design:
- Exibição densa de informações (escala de espaçamento de 8px)
- Texto de alto contraste (#1f2937 sobre #ffffff)
- Tamanho consistente de botões (altura de 40px para cliques fáceis)
- Indicadores de status usam cores semânticas (verde=bom, vermelho=alerta)
Validação de Resultados:
- Conclusão de tarefas melhorou em 23%
- “Facilidade de uso” relatada pelos usuários aumentou
- Tickets de suporte sobre navegação diminuíram 40%
Exemplo 2: Página de Produto de E-commerce
Contexto: Varejista de moda, público mobile-first (70% do tráfego móvel)
Processo de Decisão:
- Padrão de Tráfego: Navegadores móveis, tomadores de decisão rápidos
- Escolha de Layout: Coluna única no celular, duas colunas no desktop
- Prioridade Visual: Imagens do produto > preço > avaliações > especificações
- Elementos de Conversão: “Adicionar ao carrinho” fixo no celular, proeminente, mas não intrusivo
Principais Decisões de Design:
- Imagem hero do produto ocupa a largura da tela no celular
- Preço em tipografia grande e negrito imediatamente visível
- Resumo de avaliações acima dos detalhes do produto
- Seletores de tamanho/cor com feedback visual imediato
Abordagem de Iniciante vs Especialista:
- Iniciante faria: Colocar todas as informações do produto acima da dobra, usar imagens pequenas do produto
- Especialista percebe: Usuários precisam de imagens grandes para avaliar moda; público sensível a preço precisa de validação de avaliações desde o início
Resultados Mensuráveis:
- Taxa de conversão móvel aumentou em 31%
- Duração média da sessão aumentou (usuários explorando mais produtos)
- Abandono de carrinho diminuiu em 18%
Portões de Qualidade
- A ação principal do usuário é visualmente óbvia em até 3 segundos após o carregamento da página
- Todo o texto atende aos requisitos de contraste WCAG AA (mínimo de 4,5:1)
- O layout móvel funciona em largura de 320px sem rolagem horizontal
- Os alvos de toque têm no mínimo 44px para elementos interativos
- As cores da marca são usadas de forma consistente (mesmos valores hexadecimais entre componentes)
- A hierarquia visual usa no máximo 3 pesos de fonte e 4 tamanhos
- A página carrega e fica interativa em até 3 segundos em conexão 3G
- A navegação corresponde ao modelo mental do usuário (confirmado por taxa de conclusão de tarefas >80%)
- O design funciona nas preferências de sistema claro e escuro
- Os componentes têm estados de hover, foco e ativo definidos
Limites NÃO-PARA
NÃO use esta skill para:
- Decisões profundas de tipografia (cálculos de entrelinha, espaçamento entre caracteres) → use typography-expert
- Matemática de teoria de cores ou geração de paletas → use color-theory-palette-harmony-expert
- Arquitetura de tokens de sistema de design ou variáveis CSS → use design-system-creator
- Estilos de design retrô ou históricos → use windows-3-1-web-designer
- Design de interface para aplicativos móveis nativos → delegar para native-app-designer
- Auditorias detalhadas de acessibilidade → use accessibility-expert
- Especificações de animação e micro-interações → use motion-design-expert
Indicadores de limite:
- Se o usuário pedir recomendações específicas de pares de fontes → typography-expert
- Se o usuário precisar de cálculos de cores HSL → color-theory-expert
- Se o usuário quiser conselhos sobre arquitetura CSS → design-system-creator
- Se o usuário precisar de uma lista de verificação de conformidade WCAG → accessibility-expert