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.

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á

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.

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

Dentro deste artigo: + 1 manual relacionado+ 2 Categorias relacionadas

Informe de Luciano MorenoURL: http://www.htmlweb.net/

Acrescentar um comentário do artigo

Manuais relacionados com este artigoDentro de Curso prático de Web Design Seguinte: Teoria da cor. IntroduçãoAnterior: O design equilibrado. O equilíbrio entre conteúdos< Índice de Curso prático de Web DesignCategorias relacionadasAtravé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

Dentro deste artigo: + 1 manual relacionado+ 2 Categorias relacionadas

Informe de Luciano MorenoURL: http://www.htmlweb.net/

Acrescentar um comentário do artigo

Manuais relacionados com este artigoDentro de Curso prático de Web Design Seguinte: Teoria da cor. IntroduçãoAnterior: O design equilibrado. O equilíbrio entre conteúdos< Índice de Curso prático de Web DesignCategorias relacionadasAtravé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