Design thinking

Quando Usar

Use esta habilidade quando precisar de direção e intenção para o design de frontend. Use com design ao definir propósito, tom, domínio, paleta de cores e barra de revisão; inclui uma lente interdomínio de cinema, arquitetura, marketing, UX, automotivo, design industrial.

Aplique com a habilidade design em todas as tarefas de design. Faça isso antes de codificar.

Design thinking (antes de codificar)

• Propósito: Que problema esta interface resolve? Quem a usa?
• Tom: Escolha um extremo e execute com intenção — por exemplo, brutalmente minimalista, maximalista, retrofuturista, orgânico/natural, luxuoso/refinado, divertido/brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário.
• Restrições: Framework, performance, acessibilidade.
• Diferenciação: Uma coisa que o torna inesquecível.

Comprometa-se com uma direção ousada. Intencionalidade acima de intensidade.

Reserve o impacto para pontuação (use com moderação para efeito)

Dispositivos de alto impacto — mídia em tela cheia, movimento dramático, tipografia oversized, um acento saturado, parallax — perdem sua força no momento em que se tornam o padrão. Se cada seção for um vídeo em tela cheia, nenhuma delas terá impacto. Escolha 1-2 momentos para ser grandioso (o herói, o clímax) e deixe todo o resto quieto e contido, para que os grandes momentos sejam lidos como pontuação deliberada em vez de ruído. A contenção é o que dá força ao raro momento em tela cheia; a intensidade de ponta a ponta soa plana. Este é o luxo da redução — um único gesto ousado em um generoso espaço negativo supera o maximalismo. Aplica-se igualmente à escala, cor (um acento, não cinco) e movimento (um movimento de assinatura, não animação constante).

Domínio e cor

• Domínio: 5+ conceitos, metáforas ou vocabulário do mundo do produto (território, não funcionalidades).
• Paleta de cores: 5+ cores que "pertencem" a esse mundo — o que você veria se este produto fosse um espaço físico. Não "quente" ou "frio"; nomeie cores reais desse domínio.
• Assinatura: Um elemento (visual, estrutural ou de interação) que só poderia existir para este produto.

Barra de revisão

Pergunte: "Eu colocaria meu nome nisso?" Revisão liderada por design significa: não "funciona?", mas "isso é inconfundivelmente intencional e bem elaborado?".

Invariantes de artesanato não negociáveis (uma única falha reprova na revisão):

• Nunca use pop-in de fonte. Jamais. O texto de título/exibição nunca deve piscar uma fonte de fallback ou refazer o layout enquanto a fonte da web carrega. Controle isso em document.fonts.ready e fade in. Veja design-system → Nunca deixe fontes darem pop-in.
• Primeiro visto, primeiro carregado. Tudo o que estiver na viewport inicial (texto do herói, mídia do herói, marca da marca) deve ser priorizado para ser pintado completo e correto antes que qualquer coisa abaixo da dobra carregue. Veja design-system → Ordem de carregamento.

Lente interdomínio

Ao definir a direção, escolha quais disciplinas se encaixam no produto e aplique 2-3 princípios de cada uma. Exemplos: dashboard → UX + automotivo; campanha de marca → cinema + marketing; aplicativo → UX + design industrial.

Cinema

• Enquadramento e composição: Viewport como quadro; regra dos terços, linhas guias, profundidade de primeiro plano/meio/fundo. O que está em foco = hierarquia primária.
• Ritmo e cadência: Sequência de revelações (como edição). Um carregamento ou batida de rolagem bem orquestrado supera o movimento disperso.
• Cor e humor: Graduação de cor = humor; paleta consistente como "visual".
• Foco e profundidade: Plano focal e profundidade de campo → hierarquia visual e camadas (desfoque, opacidade, escala).

Arquitetura

• Escala e proporção: Escala humana, ritmo de colunas/grade, proporção de elementos para a viewport.
• Orientação: O usuário sempre sabe onde está e para onde pode ir (orientação, navegação, breadcrumbs).
• Material e luz: Textura e sombra criam profundidade; a direção da luz implica elevação e ênfase.
• Espaço negativo: Vazio intencional; espaço como estrutura, não sobra.
• Limiares: Momentos de entrada e transição (landing → app, modal aberto) como "travessias" deliberadas.

Marketing

• Uma mensagem principal: Proposta de valor única ou takeaway acima da dobra; hierarquia da mensagem, não lista de recursos.
• Emocional vs. racional: Decida se a primeira batida é um apelo emocional ou clareza racional; alinhe layout e cópia.
• Destaque do CTA: Ação primária inconfundível; ações secundárias presentes, mas não competindo.
• Adequação ao público: Tom e imagem correspondem a quem se destina; evite "usuário genérico".
• Consistência da marca: Um sistema visual e voz coerente em todo o artefato.

UX

…