Destaque é uma relação entre elementos
Hierarquia visual é a diferença de importância percebida entre partes de uma composição. Quando título, informação de apoio e chamada usam o mesmo peso, a pessoa precisa descobrir sozinha por onde começar. Quando tudo é grande, colorido e destacado, os elementos competem entre si.
Defina primeiro a mensagem principal. Depois organize o apoio e a ação que a peça permite. Tamanho, peso tipográfico, posição e espaço podem estabelecer diferenças. Proximidade ajuda a reunir informações relacionadas: uma legenda distante da imagem pode parecer pertencer a outro bloco. Repetir um padrão visual ajuda a reconhecer funções semelhantes.
Tamanho, peso e espaço reorganizam a mesma informação. O título apresenta a proposta; data e local formam um grupo; a chamada tem posição própria.
Diagrama original Checkmenot · Ampliar diagrama ↗Limites e fontes do diagrama
- Oficina fictícia, sem inscrição, evento ou resultado de conversão anunciado.
- A comparação ilustra hierarquia, não comprova uma solução universal nem uma auditoria de acessibilidade.
Composição vetorial criada para este projeto, com formas e texto próprios. As referências fundamentam os conceitos; suas imagens, logos e interfaces não foram reproduzidos. Não atribui endosso das instituições citadas nem declara licença de redistribuição do acervo pago.
Exemplo: um cartaz de oficina
Em um cartaz fictício de oficina de cerâmica, “Modele sua primeira tigela” comunica a proposta principal. Data e local formam um segundo grupo. “Veja vagas e condições” aparece como chamada. O logotipo identifica quem oferece, sem precisar ocupar a maior área da página.
Uma revisão possível é aumentar o título, aproximar data de local e afastar esse conjunto da chamada. A diferença não exige adicionar mais cores. Se a fotografia tiver muitos detalhes, uma área de fundo estável pode preservar a leitura do texto. Teste o cartaz no tamanho em que será realmente visto, não apenas ampliado no editor.
Cor orienta, mas não deve carregar o sentido sozinha
Um aviso importante não pode depender apenas de estar vermelho: acrescente um rótulo ou símbolo compreensível. Texto e fundo precisam de contraste suficiente. Na web, use também títulos semanticamente corretos; letras grandes, sozinhas, não criam uma estrutura navegável para leitores de tela.
Essa organização é um ponto de partida, não uma fórmula universal de conversão. Público, conteúdo e suporte mudam a solução. Conferir contraste não equivale a uma auditoria completa de acessibilidade, e uma composição bonita não corrige uma oferta confusa ou uma informação ausente.
Fontes e limites
As explicações e os exemplos deste guia são editoriais. As fontes abaixo permitem conferir as bases e continuar a consulta. Atualização editorial não significa revisão especializada nem resultado garantido.
- W3C WAI — Contraste, cor, agrupamento e espaçamento Consultada em
- W3C WAI — Estrutura de página e títulos Consultada em