Guia de Design

Oito princípios para layouts claros.

Cada projeto do estúdio parte destas oito decisões. Aqui está cada uma delas, de forma curta e com uma dica para aplicar hoje mesmo.

Os 8 princípios

Do esqueleto ao clima do layout.

Os três primeiros organizam, os três seguintes chamam atenção e os dois últimos criam atmosfera.

01 · Organização

Alinhamento

Alinhar é criar uma linha invisível que o olhar consegue seguir. Margens compartilhadas deixam tudo limpo.

Dica: Use guias e grades em vez de ajustar “no olho”.

02 · Organização

Proximidade

Itens que têm relação ficam perto; itens diferentes ganham distância.

Dica: Mantenha título e legenda juntos.

03 · Organização

Hierarquia

Nem tudo pode gritar ao mesmo tempo. Tamanho, posição e destaque mostram o que vem primeiro.

Dica: Feche os olhos até ver só manchas: a mensagem principal ainda se destaca?

04 · Atenção

Contraste

Opostos chamam atenção e garantem que o texto seja legível.

Dica: Para texto normal, use contraste de pelo menos 4,5:1.

05 · Atenção

Repetição

Repetir cores, fontes e formas cria identidade e faz a marca ser lembrada.

Dica: Defina duas fontes e poucas cores.

06 · Atenção

Equilíbrio

Distribuir o peso visual dá estabilidade, seja simétrico ou assimétrico.

Dica: Um elemento grande de um lado pede vários pequenos do outro.

07 · Atmosfera

Cores

As cores comunicam emoção antes das palavras.

Dica: Escolha uma cor dominante, uma de apoio e uma de destaque.

08 · Atmosfera

Espaço negativo

O espaço vazio também é design: dá respiro e valoriza o que importa.

Dica: Na dúvida, aumente as margens antes de acrescentar elementos.

Na prática

Como o Traço Vivo aplica os princípios.

Paleta

Sete cores, cada uma com função.

Creme#FAF6EF
Tinta#17151F
Índigo#2E2A9C
Magenta#C71F5D
Amarelo#FFC933
Rosa claro#F3DDE4
Cinza#5A5666

Repetição e contraste em ação: fundo creme, texto em tinta e três cores fortes para destacar.

Tipografia

Duas famílias, três papéis.

Aa
Manrope 800 · títulos
Texto corrido legível
Manrope 400 · parágrafos
RÓTULO 01
Fira Code · rótulos e números

Quer aplicar isso no seu projeto?

Conte a sua ideia e vamos pensar juntos a melhor forma de dar visual a ela.