Aprenda os Princípios Fundamentais do Design Visual
Bem-vindo ao Mundo do Design!
CRAP é um acrônimo que representa os quatro princípios fundamentais do design visual:
Contraste - Criar diferenças marcantes
Repetição - Manter consistência
Alinhamento - Organizar elementos
Proximidade - Agrupar relacionados
Estes princípios, criados por Robin Williams, transformarão sua capacidade de criar designs visuais eficazes!
🚀 Comece sua Jornada
Explore cada princípio usando o menu acima e descubra como aplicar design profissional em seus projetos!
📌 Sobre o Curso
Duração: Aproximadamente 2 horas para completar todo o conteúdo
Nível: Iniciante a intermediário
Pré-requisitos: Nenhum, apenas vontade de aprender!
Certificado: Disponível após conclusão de todos os módulos e exercícios
🔥 CONTRASTE
Lógica: Diferenças marcantes atraem o olhar e organizam a hierarquia visual. O contraste guia o leitor através do seu design.
❌ Exemplo Incorreto
PALESTRA DE DESIGN Como usar cores eficientemente
Problema: Pouco contraste entre título e subtítulo. Dificulta a leitura e hierarquia.
✅ Exemplo Correto
PALESTRA DE DESIGN
Como usar cores eficientemente
Solução: Forte contraste entre título (preto/amarelo) e subtítulo (branco/preto).
💡 Dicas de Contraste
Tamanho: Use tamanhos muito diferentes (não 12pt e 14pt, mas 12pt e 24pt)
Cor: Combine cores opostas no círculo cromático
Peso: Misture fontes light com bold para criar hierarquia
Forma: Combine formas orgânicas com geométricas para contraste visual
🧠 Qual exemplo demonstra melhor contraste?
A) Título cinza sobre fundo branco
B) Título preto bold sobre fundo amarelo
C) Título azul claro sobre fundo azul
✏️ Exercício Prático
Crie um título com bom contraste para um evento fictício:
🔄 REPETIÇÃO
Lógica: Elementos consistentes criam identidade e unidade. A repetição estabelece uma linguagem visual coesa.
❌ Exemplo Incorreto
Slide 1: Introdução
Slide 2: Conceitos
Slide 3: Exemplos
Problema: Cada slide usa cores e tamanhos diferentes, criando confusão visual.
✅ Exemplo Correto
Slide 1: Introdução
Tópico importante
Outro tópico
Slide 2: Conceitos
Conceito A
Conceito B
Slide 3: Exemplos
Exemplo prático
Caso de estudo
Solução: Mesma cor para títulos, mesmo estilo para bullet points em todos os slides.
💡 Elementos para Repetir
Fontes: Use a mesma família tipográfica em todo o projeto
Cores: Repita a mesma paleta de cores consistentemente
Formas: Use os mesmos ícones e elementos gráficos
Espaçamentos: Mantenha margens e espaçamentos uniformes
🔁 Criando Padrões
Selecione um elemento para repetir em seu design:
📐 ALINHAMENTO
Lógica: Conectar elementos visualmente para evitar "layout bagunçado". Tudo deve ter uma razão visual para estar onde está.
❌ Exemplo Incorreto
Feijoada Completa
R$ 25,00
Strogonoff
R$ 20,00
Problema: Elementos "flutuando" sem conexão visual clara.
✅ Exemplo Correto
Feijoada CompletaR$ 25,00
Strogonoff de FrangoR$ 20,00
Lasanha BolonhesaR$ 18,00
Solução: Pratos e preços alinhados em colunas invisíveis, criando ordem visual.
💡 Tipos de Alinhamento
Esquerda: Mais legível para textos longos em português
Centro: Use com moderação, ideal para títulos e elementos isolados
Direita: Cria tensão visual interessante, bom para elementos de destaque
Justificado: Evite em colunas estreitas, pode criar "rios" de espaço
🧩 Organize os Elementos
Arraste os itens para alinhá-los corretamente:
Item 1
Item 2
Item 3
📍 PROXIMIDADE
Lógica: Itens relacionados devem estar agrupados; itens não relacionados, distantes. Proximidade cria relacionamentos visuais.
❌ Exemplo Incorreto
Maria Silva
11 98765-4321
maria@exemplo.com
Designer Gráfica
Problema: Espaçamentos iguais entre todos os elementos, sem hierarquia clara.
✅ Exemplo Correto
Maria Silva
Designer Gráfica
11 98765-4321
maria@exemplo.com
Solução: Nome e cargo agrupados (identidade), contatos agrupados (comunicação).
💡 Regras de Proximidade
Agrupe relacionados: Informações que "conversam" entre si devem estar próximas
Separe diferentes: Use espaço em branco para separar seções distintas
Hierarquia clara: Títulos devem estar mais próximos do seu conteúdo que de outros títulos
Agrupamento visual: Use bordas ou cores para reforçar agrupamentos
🧩 Organize as Informações
Agrupe os elementos relacionados arrastando-os:
Nome: João Silva
Cargo: Designer
Email: joao@exemplo.com
Telefone: (11) 9876-5432
Endereço: Rua Exemplo, 123
🔤 TIPOGRAFIA
Regra de Ouro: Use no máximo 2 fontes por projeto. Uma para títulos, outra para corpo do texto.
💡 Combinações Eficazes
Clássica: Fonte sem serifa (títulos) + serifada (texto)
Título em Arial Texto em Georgia para leitura confortável
Moderna: Fonte geométrica (títulos) + humanista (texto)
Título em Segoe UI Texto em Segoe UI Light
Contraste: Fonte decorativa (títulos) + simples (texto)
TÍTULO IMPACTANTE Texto em fonte neutra e legível
🧠 Quantas fontes diferentes você deve usar em um projeto?
A) Quantas eu quiser para variedade
B) Máximo 2 fontes diferentes
C) Sempre usar apenas 1 fonte
✍️ Experimente Combinações
Selecione combinações tipográficas:
Título do Documento
Este é um exemplo de parágrafo com texto corrido para demonstrar como a combinação de fontes funciona na prática. O ideal é que o texto do corpo seja legível e confortável para leitura prolongada, enquanto o título deve ter impacto visual suficiente para chamar a atenção.