PRINCPIOS DO DESIGN PARA WEB

Proximidade
O ser humano tem a tendncia de reconhecer e agrupar elementos que estiverem prximos uns
dos outros (Gestalt), relacionando-os entre si e buscando um sentido para todo o grupo. Portando
o ideal em uma pgina de web que elementos que tenham algo em comum sejam posicionados
de forma que o leitor reconhea-os como pertencentes a um mesmo grupo. A utilizao de
elementos correspondentes espalhados pela pgina denota desorganizao, criando uma
sensao de desconforto no usurio, dificultando a leitura, a busca pela informao e indicando
um trabalho amador. O agrupamento tambm estabelece uma relao entre elementos nos
grupos e entre grupos, criando uma hierarquizao do contedo (organizao por categorias
seqenciais) e sugerindo uma ordem de leitura, o que facilita o acesso informao.

A organizao auxilia a A desorganizao dificulta e

identificao dos elementos confunde a identificao dos
elementos.

Proximidade de Elementos
http://www.shoppingtaboao.com.br

Desorganizao de Elementos
http://www.web-design.net/index.shtml
Alinhamento
Os elementos ou grupos de elementos de uma pgina web devem ser alinhados de forma
consistente e uniforme em todo o layout e conjunto de pginas. A falta de um alinhamento
constante ou a mistura de diferentes tipos de alinhamento causa desconforto e a sensao de
desorganizao, confuso, dificultando a leitura da informao disponvel. necessrio evitar a
utilizao do alinhamento centralizado, pois dificulta a leitura de textos muito longos, devido falta
de definio das margens laterais, enfraquecendo a composio da pgina. J o alinhamento
esquerda fortalece o layout, facilita a navegao e disponibiliza a informao claramente.

Alinhamento Consistente
http://www.yahoo.com.br

Alinhamento Inconsistente
http://www.riodesign.com.br

Desalinhado (verticalmente)
http://www.usp.br
Equilbrio
A mais importante influencia psicolgica para a percepo visual humana, o equilbrio a
referncia visual mais forte, a base consistente (ou inconsistente) para se avaliar e interpretar os
estmulos visuais. O equilbrio pode ser simtrico (se dividido ao meio, apresentar dois lados
idnticos) ou assimtrico (se dividido ao meio, apresentar dois lados diferentes). A simetria leva a
um layout montono e desinteressante, caractersticas que podem ser modificadas atravs da
utilizao de cores, formas e texturas variadas, modificando a leitura esttica. A assimetria pode
criar um equilbrio dinmico, com elementos de tamanhos e pesos (nfase) diferentes, que se
oponham e se complementem, criando o movimento.
Um layout equilibrado resulta na sensao de conforto e plenitude.

Equilbrio Simtrico
http://www.nbmetal.com.br

Equilbrio Assimtrico
http://www.specialmoderndesign.com

Desequilbrio
http://www.claro.com.br
Contraste
Os elementos contrastantes guiam os olhos do usurio pela tela, criando uma hierarquia de
informaes e destacando-as. O contraste auxilia na nfase de elementos, gerando interesse e
curiosidade, pois dramatiza o significado do contedo, tornando-se um poderoso instrumento de
expresso e intensificao, facilitando e simplificando a comunicao. O contraste desequilibra,
choca, estimula, chama a ateno, sem ele surgir a predominncia do tdio e da neutralidade.
Tipos de contraste:

Contraste de Tom - Claridade x Obscuridade

http://www.arquitec.com.br

Contraste de Cor - Cor x PB, Cores Complementares, Quentes x Frias;

Cor x PB
http://www.u2.com

Cores Complementares
http://www.bronka.com.br
 Quentes x Frias
www.vwgdesign.com.br

Contraste de Forma - Regularidade x Irregularidade, Retas x Curvas;

Regularidade x Irregularidade
http://www.designworks.com.br

Retas x Curvas
http://www.alkimiadesign.com/dg.htm
Contraste de Tamanho - Pequeno x Grande

http://www.pontocorp.com.br

http://www.imagedesign.com.br

Contraste de Escala - Modificao da Relao de Proporo entre Elementos.

http://www.briba.com.br/2004
Ordem, Consistncia e Repetio
Consiste em pr-estabelecer as regras que envolvem a composio do layout, utilizando-as em
todas as pginas, sem alteraes. importante tambm a repetio de elementos especficos
(como botes, cores, estilo, ilustraes, formato, layout, tipografia, etc ) unindo partes dispersas e
auxiliando a integrao dos elementos e pginas no projeto. A utilizao correta de ordem,
consistncia e repetio auxilia na criao de uma identidade visual, que orientar o usurio em
sua navegao.

Identidade Visual
http://www.kmcreative.com

Sem Regras
http://www.geomec.com.br
Simplificao
Consiste na utilizao de uma linguagem visual simples, clara, objetiva e elegante, que facilita a
compreeno, identificao e assimilao do contedo. A sofisticao alcanada atravs da
simplicidade. O ideal apresentar as informaes de forma simples e direta, o menos rebuscada
possvel, pois o exagero desvia a ateno do usurio, e num layout poludo todos os elementos
tentam chamar a ateno, gerando um grande confuso.

Simplicidade
http://www.kbrtec.com.br

Complexidade
http://www.mundocanibal.com.br

Complexidade
http://www.magicwebdesign.com.br
Legibilidade
Textos existem para ser lidos. Luli Radfahrer
A legibilidade uma questo muito importante, principalmente em um meio de comunicao to
dinmico como a Internet, em que o usurio pode desistir de decifrar a informao e buscar novas
fontes. Por isso, os textos devem ser apresentados de forma clara, simplificada e resumida, pois a
leitura da informao no monitor um processo bastante cansativo. As fontes utilizadas devem
ser de fcil leitura e compreenso, privilegiando-se sempre o contedo e no a forma.

Legibilidade
http://www.unit.com.br

Ilegibilidade
http://www.dglnet.com.br/users/rafael/rafael.htm

Ilegibilidade
http://www.opus4.com.br/htm/perfil/perfil.htm
Interao e harmonia
A adequao visual do conjunto de elementos que compem o layout de uma pgina web de
extrema importncia, e deve ser mantida uma coerncia visual entre os elementos, integrando-os
entre si.

Harmonia e Interao
http://www.yahoo.com.br

Desarmonia e sem interao

http://www.esboodesign.com.br/3d.html
Bibliografia
DAMASCENO, Anielle. Webdesign: teoria e prtica. Florianpolis: Visual Books, 2003.

DONDIS, Donis A.. Sintaxe da linguagem visual. So Paulo: Martins Fontes: 1997.

RADFAHRER, Luli. Design/Web/Design:2.

WILLIAMS, Robin; TOLLET, John. Webdesin para no designers: Um guia objetivo para voc
criar, projetar e publicar o seu site na web. Rio de Janeiro: Editora Cincia Moderna, 2001.

Bibliografia Complementar
BRIDGEWATER, Peter. Introduo ao Design Grfico. So Paulo: Estampa, 1999.

WONG, Wucius. Princpios de forma e desenho. So Paulo: Martins Fontes, 1998.