Ficha 02 · Cor, tipografia e processo
- Aplicar harmonias de cor
- Garantir acessibilidade
- Escolher tipografia
- Seguir processo
Parte I · Cor
Exercício 1 · Harmonias (15 pts)
Indica a harmonia de cor:
a) Tons da mesma cor com luminosidades diferentes. ___
b) Cores opostas na roda (contraste máximo). ___
c) Cores vizinhas na roda (suave). ___
d) Três cores equidistantes na roda. ___
a) Monocromática. b) Complementar. c) Análoga. d) Tríade.
Exercício 2 · Regra 60-30-10 (10 pts)
Explica a regra 60-30-10 e dá um exemplo de aplicação.
Distribuir as cores numa peça: 60% cor dominante (fundo/grande área), 30% cor secundária (apoio), 10% cor de destaque/acento (botões, chamadas de atenção). Cria equilíbrio e foco.
Ex.: site com 60% branco/cinza claro (fundo), 30% azul-escuro (cabeçalhos/blocos), 10% laranja (botões de ação).
Exercício 3 · Acessibilidade da cor (15 pts)
a) Qual o rácio de contraste mínimo recomendado (WCAG AA) para texto normal? (5 pts)
b) Porque não se deve comunicar só pela cor? Dá um exemplo de solução. (10 pts)
a) 4.5:1 para texto normal (3:1 para texto grande).
b) Cerca de 8% dos homens tem daltonismo: se a informação depende só da cor, eles não a distinguem. Solução: acrescentar outro indicador — ícone, texto ou padrão. Ex.: num formulário, campo com erro não fica apenas vermelho — tem também um ícone de aviso e a mensagem de texto "Email inválido". Num gráfico, usar padrões/etiquetas além da cor.
Parte II · Tipografia
Exercício 4 · Classes (10 pts)
Indica a classe tipográfica adequada:
a) Interface de uma app moderna. ___
b) Título com personalidade num cartaz. ___
c) Mostrar código numa documentação. ___
a) Sem serifa (sans-serif) — limpa, legível em ecrã. b) Display/decorativa — personalidade (só no título). c) Monoespaçada — alinhamento de código.
Exercício 5 · Regras (15 pts)
Critica este texto de design: "Usei 5 tipos de letra diferentes, todo o corpo a MAIÚSCULAS e a 11 px para caber mais."
Três erros graves de tipografia:
- 5 tipos → "circo tipográfico", sem identidade. Regra: 1-2 famílias; variar por peso/tamanho.
- Corpo todo em MAIÚSCULAS → leitura mais lenta e cansativa (perde-se a forma das palavras). Maiúsculas só para títulos curtos/destaques.
- 11 px "para caber mais" → ilegível, mau para acessibilidade. Corpo na web ≥ 16 px; entrelinha ~1.5. É preferível menos conteúdo legível do que muito ilegível.
Parte III · Processo
Exercício 6 · Workflow (15 pts)
Ordena o processo de design (1 a 7):
- ___ Cor e tipografia
- ___ Briefing
- ___ Revisão crítica
- ___ Esboços (thumbnails)
- ___ Pesquisa/moodboard
- ___ Finalização e exportação
- ___ Composição (grelha, hierarquia)
- Briefing
- Pesquisa/moodboard
- Esboços (thumbnails)
- Composição (grelha, hierarquia)
- Cor e tipografia
- Revisão crítica
- Finalização e exportação
Exercício 7 · Caso prático (20 pts)
Vais desenhar um post para Instagram que anuncia o sarau da escola (data, hora, local, "entrada livre").
a) Define briefing resumido (mensagem, público, tom). (6 pts)
b) Decisões de hierarquia, cor (harmonia + 60-30-10) e tipografia. (10 pts)
c) Que verificação de acessibilidade fazes? (4 pts)
a) Briefing: Mensagem = "vem ao sarau, [data]"; público = comunidade escolar (alunos/famílias), jovem; objetivo = atrair público; tom = festivo mas claro; suporte = post 1:1 (1080×1080), consumo no telemóvel.
b) Decisões: - Hierarquia: "SARAU" grande (ponto focal) → data/hora destacadas (cor de acento) → local → "entrada livre" → logo da escola pequeno no rodapé. - Cor: harmonia análoga ou complementar alinhada com as cores da escola; 60-30-10 (fundo dominante, bloco de apoio, acento na data/CTA). - Tipografia: 1 display para "SARAU", 1 sans-serif legível para a informação; contraste por peso/tamanho; texto importante na safe area (não cortado).
c) Acessibilidade: contraste texto/fundo ≥ 4.5:1 (verificar com checker); informação essencial não depende só da cor; tamanho de texto legível no telemóvel; (bónus) texto alternativo na publicação.