O documento discute a importância de estabelecer uma hierarquia visual em composições gráficas, como páginas da web, para guiar o usuário de forma organizada e lógica. Isso pode ser feito posicionando elementos, usando contraste de cores e tamanhos de texto. Abusar de elementos visuais chamativos deve ser evitado, para manter o foco nos conteúdos essenciais.

1. O design equilibrado. A hierarquia visual
A organização guia ao usuário na contemplação de uma página web.
Em toda composição gráfica deve-se criar uma hierarquia visual adequada, com o
objetivo de que os elementos mais importantes da mesma se mostrem
devidamente acentuados.
Mediante um design adequado, pode-se estabelecer um caminho visual que
conduza o olho do espectador e que vá mostrando a informação contida na
composição de forma organizada, lógica e confiável, que dirija sua percepção pela
rota mais ideal.
A pessoa que contempla uma obra gráfica aprecia em primeiro lugar um conjunto
completo de formas e cores, com os elementos situados em primeiro plano
contrastando com o fundo da composição. Só depois desta primeira observação
global, e se sua curiosidade tiver sido despertada, o espectador começará a analisar
as partes individuais do todo, começando pelos elementos gráficos puros, e
continuando logo com os elementos textuais, mais difíceis de interpretar, já que há
que lê-los palavra por palavra.

2. Nos países ocidentais, lemos os documentos da esquerda à direita e desde a parte
superior à inferior. Esta forma de proceder se estendeu à todas aquelas atividades
nas que necessitamos visualizar algo (quando observamos a uma pessoa,
geralmente começamos pela parte esquerda de sua cabeça).
Isto pode ser aproveitado para organizar o conteúdo de uma composição
logicamente, situando nela os elementos mais importantes na zona superior
esquerda da mesma, as seguintes em importância na lateral esquerda, as seguintes
no corpo central e as menos relevantes na parte inferior.
Esta forma de proceder é comum não só em folhetos, documentos ou cartazes
publicitários criados com um design clássico, assim como nas páginas web, que
seguem esta estrutura hierárquica em 95% dos sites, que, ademais, são os que
melhor aceitação tem pelo público.
Hierarquia visual por posicionamento em página web
Outro sistema de estabelecer uma hierarquia nos conteúdos é o uso de cores.
Podemos enfatizar certas zonas da composição usando nelas cores primárias muito
saturadas, que atraem de forma irresistível a atenção dos espectadores, tendo
sempre cuidado de que os textos nelas contidos contrastem de forma clara com o
fundo, para que possam ser lidos com comodidade. Neste caso, há que ter cuidado
com não abusar destas cores "fortes", destinando-as somente à pequenas zonas
especiais, já que sobrecarregam em excesso a vista, sobretudo o amarelo.
Para as zonas de segunda ordem, podemos usar as cores menos saturadas,
secundárias ou terciárias, sendo uma boa opção aquelas presentes na natureza, já

3. que são mais naturais e melhor aceitas pelos espectadores. Por último, as zonas
menos importantes podemos não colori-las ou fazê-lo muito sutilmente, para que
não atraia em excesso o olhar.
Esta variação cromática não é única, já que se pode usar qualquer jogo de cores
que consiga estabelecer uma hierarquia visual adequada.
Também podemos percorrer na hora de estabelecer categorias de importância
visual aos contrastes. Se situarmos próximas ou sobrepostas duas zonas de cores
complementares ou que contrastem muito, a importância de ambas na composição
se reforça, sobretudo se as zonas de contraste não forem muitas.
Hierarquia visual por contrastes de cores (azul, laranja e branco)
Sendo ao contrário, se as zonas são de cores análogas, pertencentes a uma mesma
gama, a importância de ambas se diminui mesmo sendo cores vivas, já que se
distinguirá uma zona de atração, porém seus elementos aparecerão esfumados,
pouco relevantes.
Quanto aos elementos textuais, aos que também são aplicáveis os métodos de cor
e contraste, podemos estabelecer uma hierarquia neles mediante os tamanhos
relativos dos mesmos. Os títulos de página, os cabeçalhos ou os titulares de uma
notícia ou seção podem ser destacados aumentando seu tamanho segundo sua
importância na composição ou página web. Este método é sempre aconselhável, já
que organiza de forma lógica o conteúdo textual e rompe a monotonia intrínseca
dos textos.

4. Hierarquia visual em elementos textuais
Um elemento a evitar sempre em uma composição, salvo que nos convenha seu
uso, são os enfeites gráficos visualmente impactantes, como zonas de cor intensa
sem sentido, ícones que destaquem em excesso, linhas horizontais escandalosas,
animações que tragam pouca informação, etc. Sua presença atrai a vista do
espectador, sem lhe oferecer nada em troca e desvia seu interesse dos elementos
textuais e gráficos que sim trazem verdadeira informação.
Isto não quer dizer que não possam se empregar. São às vezes muito úteis para
romper a monotonia de uma composição introduzindo nela elementos que
proporcionem frescor visual, porém devem ser usados sempre com moderação.
Os tamanhos excessivamente grandes nos textos é também um fator a ter em
conta. Um cabeçalho de página ou de seção deve destacar o suficiente sobre o
resto do conteúdo textual, porém nunca devem ser desproporcionadas nem atrair
em excesso a atenção do usuário. Quanto à abundância deles, há que ter sempre
em conta que um par de cabeçalhos de maior tamanho estabelece uns níveis de
importância convenientes, porém uma multidão de textos de grande tamanho
acrescenta confusão a uma composição, já que o usuário perde as referências sobre
o que é importante na mesma.
Resumindo: É muito importante estabelecer uma organização hierárquica dos
conteúdos de nossa composição, podendo-se usar para isso diferentes técnicas de
design, porém tendo em conta que o mal uso ou o abuso delas pode converter a
composição em algo que não desperta interesse do usuário ou transforma-se em
uma "palhaçada", onde tudo é escandaloso e nada se destaca de forma clara.
Autoria e outras referências sobre este artigo

5. Dentro deste artigo:
+ 1 manual relacionado
+ 2 Categorias relacionadas
Informe de Luciano Moreno
URL: http://www.htmlweb.net/
Acrescentar um comentário do artigo
Manuais relacionados com este artigo
Dentro de Curso prático de Web Design
Seguinte: Teoria da cor. Introdução
Anterior: O design equilibrado. O equilíbrio entre conteúdos
< Índice de Curso prático de Web Design
Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados
com este artigo:
+ Entrar em Design
+ Entrar em Guias de desenho

6. Dentro deste artigo:
+ 1 manual relacionado
+ 2 Categorias relacionadas
Informe de Luciano Moreno
URL: http://www.htmlweb.net/
Acrescentar um comentário do artigo
Manuais relacionados com este artigo
Dentro de Curso prático de Web Design
Seguinte: Teoria da cor. Introdução
Anterior: O design equilibrado. O equilíbrio entre conteúdos
< Índice de Curso prático de Web Design
Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados
com este artigo:
+ Entrar em Design
+ Entrar em Guias de desenho