Direção estética
Sem um sistema, os designs derivam para a média de tudo que você já viu: Inter sobre branco, um hero gradiente, três cartões em linha. Combata isso deliberadamente.
Antes de construir
Anote, em algumas linhas:
- Propósito — o problema, o leitor, o momento em que ele vê.
- Tom — escolha um e comprometa-se: brutalmente minimalista, editorial, industrial, acolhedor e doméstico, institucional, lúdico, luxuoso, técnico, arquivístico. Não "moderno e limpo". Essa frase significa que você não decidiu.
- A única coisa — o que alguém lembra uma hora depois. Uma tipografia display em um tamanho irracional, uma única cor saturada contra cinza pedregoso, uma assimetria deliberada, uma regra que atravessa toda a altura da página.
Depois construa tudo a serviço dessas três linhas. Se um elemento não serve ao tom ou à única coisa, corte-o.
A direção está nos detalhes
- A tipografia carrega mais que a cor. Uma face display distinta contra uma face de texto calma faz a maior parte do trabalho. Verifique a combinação nos tamanhos reais que você usará antes de se comprometer.
- Um acento, usado com moderação. Neutros dominantes mais um único acento em saturação total vence cinco cores dessaturadas.
- Composição antes de decoração. Assimetria, sobreposição, margens generosas, um elemento que quebra a grade uma vez. Não texturas aplicadas sobre um layout simétrico.
- Movimento é um momento, não muitos. Uma única entrada escalonada lê-se como artesanato; efeitos de hover dispersos lêem-se como um modelo.
Varie entre projetos
Se duas entregas que você fez recentemente parecem iguais, mude a coisa para a qual você sempre recorre — geralmente a temperatura da paleta, a face display ou a densidade. Escolha de um conjunto pequeno intencionalmente em vez de derivar para a mesma escolha:
- Paletas: osso e tinta · azul marinho profundo e branco quente · cinza pedregoso e vermelho oxidado · floresta e creme · preto e amarelo ácido · areia e terracota.
- Tipografia: serifa display de alto contraste · grotesca com tracking apertado · sem serifa humanista · slab · display condensada · uma única mono usada em todo o projeto.
Diga qual você escolheu e por quê, em uma linha, antes de construir. Essa linha também dá à pessoa algo concreto para reagir.
Diretrizes de segurança
Estas se mantêm independentemente da direção:
- Contraste do corpo 4.5:1, títulos 3:1.
- Texto do corpo com pelo menos 16px na tela, 12pt na impressão, 24px em um slide 1080p.
- Alvos de clique com pelo menos 44px.
- Nada de emoji como iconografia, a menos que a marca já o use.
- Não desenhe fotografias como SVG. Gere-as com as ferramentas FLUX quando disponíveis; caso contrário, use um placeholder e diga o que pertence ali.
Quando a pessoa der uma referência
Siga a lógica da referência, não sua superfície. Se eles compartilharem um site de que gostam, identifique o porquê — o ritmo de espaçamento, a contenção, o peso tipográfico — e aplique essa razão. Copiar a superfície é como você acaba com um design que parece uma versão pior de outra coisa.