Quando usar
- Para destacar informações na área de conteúdo.
Estrutura
Comportamentos
Boas Práticas
Exemplo
...
O conceito de hierarquia visual desempenha um papel em todas as formas de concepção gráfica. Simplificando, o mais importante conteúdo deve sobressair a mais, e os menos importantes devem destacar-se menos. Títulos devem se comportar como títulos, conteúdos e secundário devem se comportar de modo secundário, em outras palavras, um usuário deve ser capaz de deduzir a estrutura informativa da página do seu layout.
Estrutura
- Texto com estilos disponíveis no CSS (ex: tamanhos e cores).
Boas Práticas
Estes mecanismos podem ajudá-lo a estabelecer uma hierarquia visual:
- Canto superior esquerdo - preferência;
- Espaçamento;
- Contrastes de fontes: o maior e mais escuro, o mais importante é a informação;
- Contrastes de cores;
- Posicionamento, alinhamento;
- Utilizar quando a informação tenha focalidade e necessite de atenção do usuário em relação aos outros objetos e informações na tela.
Exemplo
Sem hierarquia visual
Image Added
Com espaçamento
Image Added
Com tipografia e alinhamento
Image Added
Referências
...
Veja Também