Fer nando Ant oni o Dal Pi er o

R e c i f e P E
16 d e d e z e mb r o d e 19 9 7

Vi t r i a ES
0 2 d e s e t e mb r o d e 20 0 0


S r i e: Gui a d e
Est i l o s pa r a We b
2 v er s o 20 0 0















S r i e: Gui a d e Est i l o s pa r a
We b
2 v er s o 20 0 0
4
Gui a d e Est i l o s pa r a Web 2
v er s o 20 0 0

Dal Piero Assessoria em Estratgia &
Posicionamento & Professor Dal Piero, Fernando
Antonio.

Contedo tcnico: Equipe de implantao:
Fernando A. Dal Piero Fernando A. Dal Piero
Fabrizzio B. Dal Piero Fabrizzio B. Dal Piero

Capa: Figura representativa da faixa de raios
infravermelhos e ultravioleta alcanada pela
vista humana (700 nm para infravermelhos e
400 nm para ultravioleta).



Fabrizzio B. Dal Piero
5
Sobre os autores

Fernando Antonio Dal Piero professor de
Sistemas de Informao, Geopoltica e Jogos de
Empresas em vrias Universidades brasileiras.

Fabrizzio B. Dal Piero escritor de instrues
militares com artigos publicados em Internet em
todo o mundo.


Editorao:
Fabrizzio B. Dal Piero
Fernando A. Dal Piero

Reviso:
Alina da Silva Bonella

Consultoria de servios.

Dal Piero Assessoria em Estratgia &
Posicionamento
Telefone: (27) 337 25 81
FAX: (27) 347 1510
e-mail: fpiero@zaz.com.br
dpiero@zaz.com.br

6

Ag r ad ec i ment o s

Os autores desejam, agradecer
de maneira especial aos artistas
que inspiraram muitas das
observaes e recomendaes
que esto transcritas nesta
obra.

Agradecemos tambm
industria de software e
hardware que nos mantiveram
atualizados com relao a
programas e equipamentos.

Por fim, agradecemos
Vanessa Correa, da Editco
Comercial Ltda. (iEditora),
que se disps a comercializar
esta obra.

7
Sumr i o
Apresentao_______________________ 10
Consi deraes______________________ 13
Recomendaes_____________________ 16
Hi erarqui a de I nformao _________ 22
Foco e nfase______________________ 25
Estrutura e Equi l bri o _____________ 27
Rel aci onamento de El ementos _____ 31
Uni dade e I ntegrao______________ 32
Observaes i mportantes sobre
hi erarqui a da i nformao__________ 34
Cor _________________________________ 37
Consi deraes sobre a cor__________ 40
Branco ________________________ 53
Preto _________________________ 54
Cinza _________________________ 55
Vermelho ______________________ 55
Amarelo _______________________ 57
Verde_________________________ 59
Azul _________________________ 60
Violceas ______________________ 61
Laranja _______________________ 62
Marrom, ocre e terras _____________ 63
8
Percepo e Efei tos da Cor_________ 64
Recomendaes __________________ 64
Observaes________________________ 68
Recomendaes __________________ 69
Observaes i mportantes___________ 77
F undo______________________________ 80
Consi deraes______________________ 80
Recomendaes _____________________ 81
Observaes________________________ 83
F ontes______________________________ 84
Consi deraes______________________ 84
Esquema de F ontes_________________ 96
Recomendaes _____________________ 96
Observaes_______________________ 100
Texto ______________________________ 102
Consideraes _____________________ 102
Recomendaes ____________________ 103
Observaes_______________________ 104
cones _____________________________ 107
Exempl os de cones _______________ 120
Consideraes ___________________ 124
9
Recomendaes ____________________ 125
Observaes _______________________ 131
Como uti l i zar esta obra ___________ 134
Gl ossri o__________________________ 135
Refernci as bi bl i ogrfi cas ________ 139

10
Apr esent ao
O uso comercial da Internet hoje uma
alternativa real e economicamente vivel.
Cada vez mais as empresas, instituies e
pessoas apresentam os seus produtos por
meio da exposio em sites e pginas WEB.
No entanto, quando fazemos tal opo,
preciso encarar o fato de que at hoje no
existia um guia de estudos sobre como
compor pginas para a Internet. O presente
trabalho visa a atender a essa demanda, qual
seja, permitir aos criadores e gestores dos
meios de comunicao, especialmente de
pginas Web, tomarem conhecimento dos
princpios que lhes permitiro criar
ambientes grficos, amigveis e agradveis
de se ver e navegar. Oferece-se um
roteiro para que cada
apresentador/ expositor possa, se o seguir,
11
assegurar que o usurio/ assistente
interativo ter o entendimento perfeito da
proposta do site ou pgina, seja comercial
ou destinado Educao a Distncia
(EAD).

Portanto, a funo deste guia reunir a
informao pertinente ao tema de natureza
documentria que tambm ser distribudo
em formato de slides para palestra/ curso
com durao de duas horas. Ao todo,
apresentamos, em uma linguagem clara e
concisa, perto de uma centena de sugestes
e recomendaes, que proporcionam a quem
pretende iniciar-se na arte de compor ou
reengenharizar sites e pginas na WEB
todas as bases necessrias para comear a
trabalhar.

12
A terminologia contida neste documento
procura seguir sempre a orientao
cientfica, no entanto reconhecemos que,
em determinados momentos, as mximas da
cincia no so suficientes para lidar com
fenmenos associados transio de
paradigmas e, ento, escrevemos baseados
nos resultados de vrios anos de
observaes.

Ratificamos o compromisso, como j vimos
fazendo, de manter o ritmo de atualizao e
disseminao deste contedo de maneira
suficientemente ilustrada e rica em
sugestes prticas.


Fernando Antonio Dal Piero
13
Consider aes

O projeto visual de uma pgina na Web
uma ferramenta importante para a
comunicao humana. Esse tipo de projeto,
por empregar a viso, um dos principais
sentidos humanos, como meio de
estabelecer a compreenso e a percepo,
permite contemplar, observar, reconhecer,
visualizar, examinar, ler, admirar e mirar,
isso s para mencionar alguns dos seus
atributos.

Devemos ressaltar, ainda, o carter
universal da informao visual, pois um
meio natural, que no se necessita aprender.
No precisamos ser visualmente cultos para
emitir ou entender imagens visuais. Essas
capacidades so intrnsecas aos seres vivos
14
humanos. O olho tambm capaz de
informar a distncia, a direo e a forma
dos objetos. Entretanto, ainda que o
processo de ver requeira pouca energia, a
maneira pela qual ns enxergamos e aquilo
que vemos influencia como sentimos e
tambm o que entendemos.

Nos tempos modernos, como a comunicao
muito rpida, surge a necessidade de
recuperar as formas pr-verbais e visuais da
comunicao, enfatizando o uso dos
recursos, que podem expressar funes e
operaes. Tambm por isso cresce a
importncia de se dispor organizadamente a
informao numa pgina, especialmente na
WEB. A sua disposio pode fazer a
diferena entre comunicar uma mensagem
ou deixar o usurio/ leitor perplexo e
sobrecarregado. No bastasse, no caso da
15
Internet, at mesmo a funcionalidade da
pgina pode ser afetada, se ela no tiver
uma apresentao bem projetada.

De maneira geral podemos dizer que um
bom layout depende do contexto em que est
inserido e cumpre uma proposta maior do
que decorativa, pois todos os elementos
visuais influenciam uns aos outros. Sendo
assim, deve-se privilegiar o uso da esttica,
dos cones e das letras, j que a informao
visual comunica de modo no-verbal e, para
isso pode incluir sinais emocionais que
motivem, dirijam ou distraiam.
16
Recomendaes
Segundo muitos autores, a percepo e o
poder de organizar a informao visual
depende de mecanismos naturais, das
necessidades e propenses do sistema
nervoso humano, tanto quanto de fatores
tcnicos. No que toca aos fatores tcnicos,
para uso em Internet, uma recomendao
que deve ser observada no que diz
respeito aos frames. Use frames com cuidado.
O uso de frames pode ajudar a orientar o
usurio a navegar no site, mas cuidado com
o momento da impresso para no criar
facilidades que permitam imprimir o frame
errado. Por outro lado, deve-se considerar
que os seres humanos organizam o que lem
e o que pensam sobre uma informao,
agrupando-a espacialmente. Isto :
17
enxergamos como pensamos. O todo
percebido de maneira distinta da soma das
caractersticas de seus componentes.

Uma pessoa, quando completa uma figura,
no est apenas adivinhando por inferncia
de experincia passada, mas realmente v a
figura completa. Um exemplo pode ser visto
quando nos lembramos da figura de pontos
em crculo.

Os oito pontos (no ilustrados neste
trabalho) so percebidos como um crculo e
no como dois quadrados entrecortados.

Da mesma forma, podemos ver nas figuras a
seguir exemplos dos fenmenos de
percepo de fechamento e agrupamento.
18

Proximidade Similaridade Continuidade Fechamento rea Simetria

Assim, para facilitar, na construo de
mensagens visuais, deve-se agrupar cada
item de informao em poucas categorias.
No mximo sete (Mullet e Sano, 1995).

Precisa-se ainda considerar que o processo
de ver simples. Os mecanismos
fisiolgicos so automticos no sistema
nervoso humano, como se pode constatar da
descrio sucinta apresentada por Arnheim
para o processo visual.
19
Segundo Arnheim (1995) ver
essencialmente um meio de orientao
prtica e pode ser resumido assim: a luz
emitida ou refletida pelos objetos do
ambiente. As lentes dos olhos projetam as
imagens desses objetos nas retinas que
transmitem a mensagem ao crebro em
forma de imagens e cores.

Fig. 1 olho humano: corte
longitudinal

Fig. 2 esquema da
retina onde se
desencadeia o
processo de
visibilidade
cromtica
Farina (1990, p.14) diz que conhecer as
propriedades da viso de fundamental
importncia aos que se valem da imagem
20
para transmitir mensagens. Todo o
conhecimento humano relativo a formas e
cores adquirido pela viso. Vale, ento,
mencionar que a viso sempre atrada por
elementos coloridos antes dos elementos em
preto e branco e por desenhos antes do
texto. Portanto, se desejamos atrair a
ateno, devemos usar cores e cones em
lugar de textos.
Por outro lado, ao se usar textos, deve-se
sempre respeitar as convenes de layout de
leitura da informao.
Em pases ocidentais isso significa dispor os
textos da esquerda para a direita e de cima
para baixo. As informaes mais
importantes devem estar localizadas no
canto superior esquerdo (OSF/ Motif,
1990). Mas ateno: quando a informao
posicionada verticalmente, os links devem
21
estar alinhados por suas extremidades
esquerdas, em pases ocidentais (Schriver,
1997). Isso facilita a compreenso da
informao pelo usurio.
Alm disso, para todos que pretendem
projetar a organizao e a composio de
elementos visuais em pginas na Web,
recomenda-se respeitar os seguintes
princpios: hierarquia de informao, foco e
nfase, estrutura e equilbrio, relao de
unidade de integrao e elementos, todos
temas que dos quais passamos a seguir a
descrever os princpios e a importncia.
22
Hier ar quia de Inf or mao
Esse princpio diz respeito disposio da
informao, no caso, dentro de uma pgina
na Web, baseada em sua importncia relativa
com os outros elementos visuais. O
resultado dessa disposio afeta todos os
outros princpios de organizao e
composio de um layout e determina que
informao o usurio v e o que ele
encorajado a fazer primeiro. Para utilizar
esse princpio, responda a estas perguntas:

Qual informao mais
importante para o usurio? (Em
outras palavras, quais so as
prioridades de um usurio
quando encontrar o site?).
O que o usurio quer ou precisa
ver em primeiro, segundo,
23
terceiro lugares e assim por
diante? (O que o usurio v
primeiro deve corresponder sua
prioridade).
Nesse sentido, os autores Meyers &
Reynolds, tanto quanto Sant'ana, relacionam
o conceito de idias e imagem na memria e
afirmam que uma combinao de estmulos
pode produzir outras idias e assim
sucessivamente, de tal maneira que se pode
prender a ateno de uma pessoa por longos
perodos de tempo. Os autores citam quatro
leis bsicas para a associao de idias, que
teriam sido estabelecidas pelos gregos:
a) contigidade, quando a idia
representada pela proximidade
existente entre duas imagens. Por
exemplo, mar-navio, pena-pssaro;
24
b) sucesso: quando uma idia segue
outra. Como trovo-tempestade,
veneno-morte;
c) contraste: quando as idias so
antagnicas. Por exemplo: amor-dio;
d) semelhana: quando duas ou mais
imagens se superpem: gado-tigre-leo.
Essas leis para associao de idias podem
ser aplicadas tanto na criao de peas
publicitrias tradicionais (cartazes, peas
para televiso ou rdio) como para a
construo de pginas WEB.
25
Foco e nf ase
O princpio do foco e nfase auxilia o
usurio na colocao de itens prioritrios.
Determinar o foco envolve identificar a
idia central, ou o ponto focal do objeto
(campo visual), no caso uma pgina na
WEB. Para determinar a nfase, escolhem-
se os elementos que devem ser
proeminentes, isolando-os de outros ou
fazendo com que eles se sobressaiam. Para
facilitar alcanar esse resultado,
consideramos que onde o usurio navega
primeiro, procurando por informao, uma
importante sinalizao de qual ser o foco
da sua navegao. Entretanto, as decises
do projeto de uma pgina na Web podem
governar esse princpio. Por exemplo:
acreditamos que as pessoas de culturas
ocidentais procuram, no canto superior
26
esquerdo da tela de um monitor de vdeo, as
informaes mais importantes. Alis, todos
os seres humanos inclinam-se para terem
como referncia primria a relao vertical-
horizontal, pois diz respeito ao seu bem-
estar e equilbrio. Nesse sentido,
consideramos extremamente importante o
estudo dos interesses e dos aspectos
culturais do pblico alvo para somente
ento idealizar uma pgina ou site na WEB.
27
Est r ut ur a e Equil br io
O equilbrio em uma composio visual
uma combinao certa de potenciais
elementos de todas as direes. O equilbrio
impe a estabilidade pela anulao mtua de
foras opostas. Quando existe equilbrio, h
nfase harmonia, caso contrrio, sobressai
uma sensao de desagrado. O princpio de
estrutura e equilbrio um dos mais
importantes de um projeto visual, perdendo
apenas para o contraste. Sem uma estrutura
que sirva de base e sem equilbrio desses
elementos, h falta de ordem e de
significado, e isto afeta todas as outras
partes do projeto visual. O mais importante
que a falta de estrutura e equilbrio torna
uma pgina na Web mais difcil de ser
entendida pelo usurio.
28

O equilbrio pode ser obtido em uma
composio de duas maneiras: simtrica ou
assimtrica.

O equilbrio simtrico ocorre quando os
elementos esto simetricamente distribudos
em ambos os lados de um eixo imaginrio
fixado pela vista. perfeitamente lgico e
simples de se criar, mas, pode resultar
esttico e at aborrecido. A maioria das
vezes carece de ao, e no sendo dinmico,
leva ao desinteresse severo e repousado.

J o equilbrio assimtrico, considerado
pelos gregos como um mau equilbrio,
obtido variando-se elementos e posies, de
maneira que se equilibrem os pesos. Ainda
que as mltiplas tenses provocadas pela
inexistncia de um centro definido
29
requeiram considerveis habilidades do
designer, o resultado mais cheio de graa,
tem mais ao e resulta interessante e rico
em variedades, sendo, portanto, um alvo a
ser perseguido.

Co nt r ast e

O contraste a justaposio de elementos
desiguais que permite atrair e reter a
ateno imediatamente. Aplicar com bons
resultados os princpios bsicos do
contraste requer tempo e prtica. Podemos
dizer que os principais recursos que o
contraste oferece so de peso, de
tamanho, de posio.

30
$9, 9 9

Neste exemplo,
vemos a maneira
pela qual se pode
fazer um ttulo
comum ficar bem
especial, apenas
variando a
dimenso de uma
letra. uma
utilizao da
tcnica de
contraste de
tamanho.


O uso mais comum do
contraste simplesmente
aquele que estabelece
diferenas de tamanho e to
nalidades.

Entretanto, expandindo-se
o leque de gradaes,
introduzindo-se sombras
reais de cinza num
documento preto e branco,
por exemplo, consegue-se
a mgica de criar cores.

Contraste de posio se
obtm quando se dispe
um texto ou figura em
ngulos diferentes ao
predominante e usual.

Acima de tudo devemos considerar que
qualquer tipo de contraste deve ser aplicado
quando existe uma boa razo para isso.
31
Rel acionament o de
El ement os
O princpio do relacionamento de elementos
refora o anterior. Para que uma
composio seja eficiente, precisa
apresentar o predomnio de um ou mais
elementos sobre o conjunto. Se todo o
conjunto tiver o mesmo valor, a ateno
ser leve e dispersa. O destaque pode ser
determinado pelo peso, tamanho, posio ou
cor de um determinado elemento em relao
aos demais. Por isso a colocao de um
elemento visual pode ajudar a comunicar
uma relao/ conexo especfica de uma
pgina com o site da qual ela faz parte.
32
Unidade e Int egr ao
A unidade verificada na composio
quando no existem elementos discordantes,
assegurando subordinao a um motivo
principal. A unidade e a integrao refletem
como avaliar uma dada pgina na Web em
relao ao site ao qual ela pertence. Quando
uma pgina na Web visualmente unificada
com o site (endereo), o usurio acha mais
fcil navegar porque ela oferece um
ambiente consistente, previsvel e permite a
sensao de tudo ser um objeto nico. Para
implementar esse princpio, considere o
seguinte:

Como as diferentes pginas do
site funcionam visualmente?
33
Como o projeto visual da pgina
se relaciona com as outras
pginas do site ou de outros sites
em que usado?
34
Obser vaes
impor t ant es sobr e
hier ar quia da
inf or mao
Quando se deseja priorizar ou mesmo
hierarquizar uma informao alguns itens
devem ser observados:
1. uma pgina na Web precisa funcionar
intuitivamente ela deve parecer do
modo como funciona e funcionar do
modo como parece;
2. a estrutura visual importante para
comunicar a proposta dos elementos
exibidos em uma pgina na Web;
35
3. cuidado com o tamanho, o
espaamento e a colocao da
informao para que o ambiente seja
visualmente consistente e previsvel;
4. vale usar cores para agrupar assuntos
correlatos;
5. considere sempre que o incio ou a
base da tela so os melhores locais
para mostrar informao sobre
orientaes, as quais devem estar
sempre visveis;
6. portanto, instale as reas para
entrada de texto e resposta perto da
base da tela. Pense que a maioria dos
usurios no so exmios datilgrafos
e precisam olhar para o teclado;
7. da mesma forma, para minimizar o
movimento dos olhos, o usurio deve
sempre ser inquirido a responder em
36
uma rea diretamente adjacente
questo;
8. outras orientaes para o usurio
podem ser colocadas em reas fixas ou
mveis, ou apresentando-as em menus
pop-ups disponveis sobre requisio do
usurio ou do prprio erro;
9. entretanto, use sempre o alinhamento
adjacente para links que formam um
grupo de opes de assuntos
exclusivos;
10. considere que o uso de texto deve ser
o mnimo, suficiente apenas para
comunicar a informao.
37
Cor
A cor ao mesmo tempo simples e
complexa, entretanto sempre uma
importante propriedade esttica em uma
pgina na Web. Nenhuma cor vista do
mesmo modo por duas pessoas. Significa
coisas diferentes para pessoas diferentes
em diferentes culturas. A cor pessoal e
universal, transmite mensagens repletas de
infinitas variaes. Cada cor tem numerosos
significados associativos e simblicos. A
cor no s tem um significado
universalmente compartido atravs da
experincia, como tambm, um valor
informativo independente, atravs dos
significados que descrevem simbolicamente
(Dondis, 1988; p. 69).


38
Alm do significado cromtico
transmissvel, o autor cita ainda a
existncia, de preferncias de cor pessoais e
subjetivas. Farina (1990) acrescenta que os
costumes sociais, a cultura, so fatores que
intervm na escolha das cores (vestido de
noiva branco, enxoval de menina rosa...).
Por outro lado, algumas experincias
psicolgicas tm provado que h uma reao
fsica do indivduo cor. O vermelho ser
excitante; o azul, refrescante.

A luz colorida seria capaz de estimular a
circulao sangunea e agir sobre a
musculatura aumentando a sua fora numa
seqncia que vai do azul, passando pelo
amarelo e laranja, culminando no vermelho.

Importante ressaltar que o sistema de
leitura ocular humano estimulado
39
subliminarmente. Por exemplo: nos
primeiros trinta segundos de exposio
cor, as pessoas sofrem a ao da cor em si;
depois, as clulas oculares enviam nova
mensagem ao crebro, que passa a sofrer a
influncia da cor complementar. Assim, no
caso dos hospitais que pintam paredes e
tetos dos quartos em tons de azul, o efeito
pretendido, aps um tempo, passa a se
inverter, justamente pela influncia do
laranja, que possui vermelho em sua
composio e acelerador da freqncia
cardaca.

Sabemos que a cor no necessria para a
criao de mensagens visuais, mas o
elemento que tem mais afinidade com as
emoes e por isso deve ser sempre usada
na comunicao. Neste ponto, devemos
enfatizar que o design em preto e branco
40
tambm permite cores, sendo at mesmo
mais rico e desafiador, alm de econmico.
Consider aes sobr e a
cor
Os estmulos que causam as sensaes
cromticas esto divididos em dois grupos:
o das cores-luz e o das cores-pigmento.

Cor-luz, ou luz colorida, a radiao
luminosa visvel que tem como sntese
aditiva a luz branca. Cor-pigmento a
substncia material que, conforme sua
natureza, absorve, refrata e reflete os raios
luminosos componentes da luz que incide
sobre ela. o tipo de luz refletida que
determina a sua denominao.

41
Um objeto dito verde, ento, quando
absorve quase todos os raios da luz branca,
s refletindo nos nossos olhos os verdes. A
mistura das cores-pigmento produz um
cinza escuro e denominada sntese
subtrativa.

Explica-se a viso cromtica dos seres
humanos da seguinte maneira: o espectro
eletromagntico um campo vastssimo de
ondas, das quais apenas algumas percebidas
pelo olho humano.

Se um objeto refletir todas as radiaes
luminosas que o atingem, essas radiaes
chegaro simultaneamente ao olho e o
veremos como totalmente branco.

42
Quadro 1 Figuras demonstrativas da
estimulao e propriedades da luz e das
cores



Demonstrao do grau de estimulao dos
diferentes cones sensveis luz monocromtica.


As cores diametralmente opostas so
complementares entre si. O triangulo assinalado
representa as cores primrias da luz.
43


Sntese aditiva mostrando as doze cores-luz
primrias e secundrias


Tringulo das cores de acordo com o sistema
Munsell de cores.

44
As cores fundamentais ou primitivas so
aquelas que compem o espectro solar.
Conforme a nomenclatura so elas: violeta,
roxo, azul, verde, amarelo, laranja e
vermelho. Cor geratriz ou primria cada
uma das trs cores indecomponveis que,
misturadas em propores variveis,
produzem todas as luzes do espectro.

Ainda que a cor no tenha existncia
material, podemos us-la para identificar os
elementos que devem atrair a ateno das
pessoas. Entretanto, quando usada
indiscriminadamente, a cor pode ter um
efeito negativo ou de distrao.

Isso pode afetar no somente a reao do
usurio em relao pgina, mas tambm a
produtividade, pois se torna difcil focalizar
na tarefa (Windows, 1995).
45

Para extrair todo o potencial das cores e
apresent-las em um monitor de
computador, necessrio seguir algumas
recomendaes. Ainda que estabelecer
regras gerais ou especficas para o uso da
cor seja difcil, devido diversidade de
fatores que a influenciam, aqui, vamos
tentar responder s questes mais
freqentes dos projetistas e usurios de
monitores grficos de computadores
coloridos, como: que cores eu devo usar?
Quantas cores eu devo usar? Essas cores so
apropriadas? Como eu posso melhor-las?

Como j vimos, cada cor tem numerosos
significados associativos e simblicos. At a
classe social a que o indivduo pertence
pode determinar sua preferncia. H uma
tendncia para as cores vibrantes, como
46
o vermelho, nas classes menos
favorecidas; enquanto a camada social
mais elevada inclina-se para os tons
suaves.

Tambm as pocas do ano e as estaes
geogrficas so fatores a ser considerados
para o estabelecimento de relaes entre os
seres humanos e as cores.

Devemos citar, ainda, os experimentos
psquicos realizados por Hermann
Rorschach. Esses experimentos levam
concluso de que indivduos alegres
respondem intuitivamente cor; enquanto
a reao de pessoas deprimidas
geralmente voltada forma.

A preferncia pela cor geralmente denuncia
indivduos com mais abertura a estmulos
exteriores; privilgio das pessoas sensveis,
47
que se deixam influenciar, e que esto
propensas desorganizao e oscilaes
emocionais. As reaes forma indicam, ao
contrrio, o temperamento frio,controlado,
introspectivo (Farina, 1990, p. 104).

Um outro psiclogo chamado Ernest
Schachtel completa concluindo que, ao
reagir cor, o indivduo sofre a ao do
objeto uma atitude passiva. Quando
percebe a forma, ao contrrio, ele tem de
examinar o objeto, definir sua estrutura,
elaborar uma resposta uma atitude ativa.

Pesquisas semelhantes citadas por Arnheim
(1995,p. 325-326) concluram que cores e
objetos podem produzir conflitos no
crebro. Por exemplo, ao serem
apresentados a crianas um quadrado azul e
um crculo vermelho, quando foi
perguntado se um quadrado vermelho era
mais parecido com o quadrado ou com o
48
crculo, a maioria delas fazia a sua escolha
com base na forma.

E essa tendncia aumentava com a idade. As
crianas pr-escolares eram dirigidas pela
forte atrao perceptiva das cores.

Mas, medida que a cultura comea a
treinar as crianas nas habilidades prticas,
as quais dependem muito mais da forma do
que da cor, elas se voltam cada vez mais
para a forma como um meio decisivo de
identificao.


49

Quadro 2. Conflitos entre forma e cor









Merece ser exposta, ainda, a pesquisa
realizada pelo psiclogo Bamz (citado por
Farina, 1990, p. 105), que alia a preferncia
dos indivduos por determinada cor ao fator
idade.

Conflito no crebro Conflito no crebro
O lado direito do seu crebro tenta dizer a cor, O lado direito do seu crebro tenta dizer a cor,
mas o lado esquerdo insiste em ler a palavra.
mas o lado esquerdo insiste em ler a palavra.
50
Segundo esse estudo, o vermelho
corresponderia ao perodo de 1 a 10 anos
(efervescncia, espontaneidade); o laranja,
de 10 a 20 anos (imaginao, excitao,
aventura); o amarelo, de 20 a 30 anos (fora,
potncia, arrogncia); o verde, de 30 a 40
anos (diminuio do fogo juvenil); o azul,
de 40 a 50 anos (pensamento, inteligncia);
o lils, de 50 a 60 anos (juzo, misticismo,
lei); o roxo, alm dos 60 anos (sabedoria,
experincia e benevolncia).

Diante de tantas variaes, conclumos que
no possvel estabelecer critrios rgidos
para o uso da cor. Portanto, o estudo da cor
e da sua influncia de fundamental
importncia quando da criao de uma
composio, seja para um site, um logotipo
ou uma pea publicitria, porque as cores
tm uma ao estimulante sobre os
51
indivduos e so eficientes em reter a sua
ateno, evocam sentimentos e sensaes,
provocam diferentes associaes de idias
ou estados de esprito (Sant'anna, 1989).

Segundo Farina (1990; p. 101), alm de
atuarem sobre a emotividade humana, as
cores produzem sensao de movimento,
uma dinmica envolvente e compulsiva.
Vemos o amarelo transbordar de seus
limites espaciais com uma tal fora
expansiva que parece invadir os espaos
circundantes; o vermelho, embora agressivo,
equilibra-se sobre si mesmo; o azul cria a
sensao do vazio, de distncia, de
profundidade.

H, tambm, sensaes relacionadas com as
cores quentes e frias. As cores quentes
proporcionam uma sensao de
52
proximidade, calor, densidade, opacidade,
secura, alm de serem estimulantes. J as
cores frias, parecem distantes, leves,
transparentes, midas, areas e so
calmantes.

As cores, enfim, constituem estmulos
psicolgicos para a sensibilidade humana,
influindo no indivduo, para gostar ou no
de algo, para negar ou afirmar, para se
abster ou agir (Farina, 1990; p. 112).

Desde a Antigidade, o homem tem dado
um significado psicolgico s cores, e desde
ento no ocorreram diferenas de
interpretao significativas (Dondis, 1988).
Passaremos, portanto, ao estudo dos
significados psicolgicos das principais
cores e tambm das sensaes acromticas
53
brancas, pretas e cinza, segundo Farina
(1990) e Pedrosa (1982).
Br anco
Do ponto de vista fsico, o branco a soma
das cores. Psicologicamente, a ausncia
delas. Simboliza a luz. Para os ocidentais,
simboliza a vida e o bem; para os orientais,
a morte, o fim, o nada. Associao
material: batismo, casamento, cisne, lrio,
primeira comunho, neve, nuvens em tempo
claro, areia clara. Associao afetiva: ordem,
simplicidade, limpeza, bem, pensamento,
otimismo, paz, pureza, inocncia, modstia,
infncia, alma, harmonia, estabilidade,
divindade.
54
Pr et o
Indica a privao ou ausncia de luz. O
preto absoluto no existe na natureza. O
preto encontra sua maior fora em oposio
ao branco. Nas artes grficas, tem emprego
indispensvel como elemento de contraste
para ressaltar os matizes. As cores puras,
contornadas com preto, ganham em
luminosidade e vibrao.

Quando misturado s cores claras, cria
tonalidades desagradveis, sujas, de
interpretao psicolgica negativa.
Associao material: sujeira, sombra,
enterro, noite, carvo, fumaa, morto, fim,
coisas escondidas. Associao afetiva: mal,
misria, pessimismo, tristeza, desgraa, dor,
temor, negao, melancolia, angstia,
55
intriga, mistrio, suspense, seriedade,
nobreza.
Cinza
cor neutra por excelncia. Simboliza a
posio intermediria entre a luz e a
sombra. No interfere nas cores em geral.
Associao material: p, chuva, neblina,
mquinas, mar sob tempestade. Associao
afetiva: tdio, tristeza, decadncia, velhice,
desnimo, seriedade, sabedoria, passado,
finura, pena, aborrecimento.
Ver mel ho
cor primria tanto em luz quanto em
pigmento. a mais saturada das cores,
sendo, portanto, a que mais se destaca
visualmente e a mais rapidamente
56
distinguida pelos olhos. Ao lado do verde,
forma a dupla de complementares mais
vibrante, atingindo at a brutalidade. Seu
escurecimento com preto d origem a vrios
tons de marrom. O escurecimento sem
perda de luminosidade obtido pela mistura
da prpura, violeta ou azul. a nica cor
que no pode ser clareada sem perder suas
caractersticas essenciais. Clareado em
mistura com o amarelo, produz o laranja e,
dessaturado pela mistura com o branco,
produz o rosa. Sua aparncia mais bela e
enrgica conseguida quando aplicado
sobre fundo preto, funcionando como rea
luminosa.

Sobre o branco, torna-se escuro e terroso.
Associao material: rubi, cereja, sinal de
parada, perigo, vida, sol, fogo, sangue,
lbios, mulher, feridas, conquista,
57
masculinidade. Associao afetiva:
dinamismo, fora, energia, revolta,
movimento, coragem, esplendor,
intensidade, paixo, vulgaridade, vigor,
glria, calor, violncia, excitao, ira,
interdio, emoo, ao, agressividade,
extroverso.
Amar el o
Em cor-pigmento, uma das cores
primrias, tendo por complementar o
violeta. Em cor-luz, secundria (mistura
do vermelho com o verde), sendo a
complementar do azul. a mais clara das
cores e a que mais se aproxima do branco
numa escala de tons. a cor quente por
excelncia. Misturado ao vermelho, exalta-se
produzindo o laranja. Misturado ao azul,
esfria-se e produz o verde. Escurecido com
58
preto, adquire colorao esverdeada pouco
agradvel, prxima do verde-oliva sombrio.
Clareado com branco, no perde suas
qualidades intrnsecas. Sobre fundo branco,
pouco visvel; j sobre o preto, ganha
fora e vibrao. Em contraste com o cinza,
se enriquece em qualidade cromtica e
beleza. Amplo e ofuscante, a mais
desconcertante das cores, transbordando
dos limites, parecendo sempre maior do que
, devido sua caracterstica expansiva.
Associao material: ouro, fruto maduro,
sol, flores grandes, terra argilosa, palha,
luz, topzio, vero, limo chins, calor de
luz solar. Associao afetiva: iluminao,
conforto, alerta, gozo, cime, orgulho,
esperana, idealismo, egosmo, inveja, dio,
adolescncia, espontaneidade, variabilidade,
euforia, originalidade, expectativa.
59
Ver de
cor primria em luz, complementar do
magenta. Em pigmento, secundria, sendo
a complementar do vermelho. o ponto
ideal de equilbrio da mistura do amarelo
com o azul duas cores opostas, uma
quente outra fria, uma clara outra escura,
uma expande-se outra se contrai. Surge,
ento um repouso feito de tenses. a cor
mais calma. A passividade o carter
dominante do verde absoluto.

O verde escurecido com preto torna-se
acinzentado. Clareado com o amarelo,
torna-se mais ativo e penetra na variada
gama de verde-limo. Dessaturado com
branco, ganha em luminosidade. Associao
material: umidade, frescor, primavera,
bosque, guas claras, folhagem, mar, vero,
60
plancie, natureza. Associao afetiva:
esperana, sade, tranqilidade, segurana,
natureza, equilbrio, liberdade, cime,
suavidade, firmeza, juventude.
Azul
primria tanto em cor-luz quanto em cor-
pigmento. Nas luzes, sua complementar o
amarelo; em pigmento, o laranja. Por ser a
mais escura das cores primrias, o azul tem
analogia com o preto. Todas as cores que se
misturam com o azul esfriam-se, por ser ele
a mais fria das cores. Associao material:
frio, mar, cu, gelo, feminilidade, guas
tranqilas, montanhas longnquas.
Associao afetiva: infinito, nobreza,
pureza, espao, verdade, sentido, afeto,
intelectualidade, paz, meditao, confiana,
fidelidade, sentimento profundo.
61
Viol ceas
o nome genrico de todas as cores
resultantes da mistura do vermelho com o
azul. Chama-se violeta, ou roxo, o ponto de
equilbrio ptico da mescla dessas duas
cores. Em pigmento, cor secundria e
complementa o amarelo. Em luz colorida, a
mescla equilibrada de azul e vermelho
denominada magenta, complementar do
verde, tonalidade que se aproxima do violeta
purpurino. a cor que possui a mais alta
freqncia e o menor comprimento de onda.
Quando rebaixado com preto, torna-se
desagradvel e sujo. Escurecido com azul,
esfria-se, oferecendo possibilidades tonais
de extrema riqueza cromtica. Dessaturado
com branco, forma a extensa gama dos
lilases, tonalidades de extrema luminosidade
e beleza. A mais importante cor violcea o
62
prpura, a mistura ptica de 2/ 3 de
vermelho com 1/ 3 de azul. Associao
material: noite, igreja, aurora, sonho,
vidncia, agresso, furto, misria.
Associao afetiva: temperana, lucidez,
saudade, cime, melancolia, f, dignidade,
poder, riqueza, engano, calma, autocontrole,
violncia, mistrio, delicadeza.
Lar anj a
Quando produzido por luzes coloridas,
terciria (2/ 3 de vermelho e 1/ 3 de verde).
Em pigmento, cor secundria, resultante
da mistura equilibrada do vermelho com o
amarelo, e complementar do azul. cor
quente e, portanto, dispersiva.

As reas coloridas pelo laranja parecem
maiores do que so. Quando rebaixado com
63
preto, torna-se sujo. Misturado ao vermelho,
consegue-se um escurecimento tonal
relativo, surge um vermelho alaranjado.
Clareado com amarelo, ilumina-se, ganha em
vibrao, mas perde a consistncia.
Dessaturado com o branco, ganha em
luminosidade. Associao material: outono,
laranja, fogo, pr-do-sol, luz, chama, calor,
festa, perigo, aurora, raios solares.
Associao afetiva: fora, luminosidade,
dureza, euforia, energia, alegria,
advertncia, tentao, prazer, senso de
humor.
Mar r om, ocr e e t er r as
No existem como luzes coloridas. Em
pigmento, so resultantes da mistura de
amarelo e preto ou amarelo, vermelho e
preto. Associao material: terra, lama,
64
outono, doena, sensualidade, desconforto.
Associao afetiva: pesar, melancolia,
resistncia, penitncia, traio, humildade.
Per cepo e Ef eit os da
Cor
Recomendaes
Por tudo o que estudamos, recomenda-se
que as cores de uma pgina na Web no
sejam selecionadas separadamente e sim,
dentro de um contexto geral que privilegie
tambm a visibilidade. (Robertson, 1993).
Farina (1990) cita alguns contrastes
interessantes para uma fcil visibilidade:
o preto sobre amarelo o verde ou azul; o
vermelho sobre amarelo ou branco; o
65
branco sobre azul ou preto; e o amarelo
sobre o preto.
Vale lembrar que o estudo desses contrastes
ainda mais importante para a correta
utilizao de caracteres. As combinaes
mais visveis so citadas por Ribeiro (1993):
letras pretas sobre fundo branco; letras
vermelhas sobre fundo branco; letras
amarelas sobre fundo preto; letras brancas
sobre fundo azul; letras vermelhas sobre
fundo preto; letras brancas sobre fundo
vermelho; letras azuis sobre fundo branco.
Segundo o autor, o grau de legibilidade das
letras coloridas sobre fundos de cor ser
mais ou menos acentuado dependendo do
tipo de letra. Em geral, uma letra escura
sobre um fundo claro legvel de mais
longe do que o inverso e se utilizarmos uma
cor clara em fundo escuro, a letra tem de
66
ser mais forte, porque a cor escura do fundo
absorve a cor clara da letra (Ribeiro, 1993;
p. 192).

Ainda sobre combinaes de cores, Farina
(1990) considera de pouca visibilidade as
duplas azul-verde e verde-vermelho, que,
alm de ineficazes podem at irritar a
sensibilidade ptica. O branco-preto tem
visibilidade mdia, comparado com o
amarelo-preto.

O autor tambm cita a importncia de se
considerar o tamanho do tipo para a
aplicao de uma cor mais leve ou mais
pesada. Dessa forma, as cores escuras em
tipos sobre fundos tambm escuros, mas
diferentes, resultam praticamente ilegveis
qualquer que seja o tamanho do tipo. As
cores claras devem colocar-se em tipos no
muito pequenos, especialmente se o fundo
67
for vermelho, verde ou roxo. O cinza
geralmente no apresenta muita
visibilidade (Farina, 1990; p. 37).
fato que algumas limitaes podem ser
contornadas. Por exemplo, no caso de
pginas na WEB, a aparncia de uma janela
pode ser alterada quando outras janelas so
abertas na mesma tela. Entretanto,
recomenda-se sempre que sejam respeitadas
as diferenas culturais e fisiolgicas entre
os indivduos (Robertson, 1993).

Considere-se, ainda, que as pessoas idosas
tm uma sensibilidade reduzida para cores,
o que, por sua vez, pode requerer o uso de
cores mais brilhantes.

Por outro lado, evite usar azul para
pequenas reas (Robertson, 1993). Uma
pequena rea em azul vai parecer mais
68
desbotada do que uma grande rea da
mesma cor. Evite o uso do azul e do
vermelho, simultaneamente (Robertson,
1993).
Considere ainda que o azul e o vermelho
tm diferentes profundidades de foco e,
para o olho humano, o processo para
encontrar o foco correto fatigante.
Obser vaes
1. Quando cores do espectro amplamente
separadas, como o vermelho e o azul,
so apresentadas na tela, elas
aparentaro estarem em diferentes
planos de profundidade (Robertson,
1993).
2. Recomenda-se que as cores sejam
selecionadas em diferentes
iluminaes, ou seja, com a presena
69
de luz fluorescente, incandescente e
luz do dia (Robertson, 1993).
Recomendaes
a) As cores que voc usar devem satisfazer
s propostas da pgina na Web (Windows,
1995).
As cores no devem ser usadas
indiscriminadamente, somente como
elemento decorativo. Recomenda-se o uso
de um grupo limitado de cores, dando ao
usurio a opo de mud-las (Windows,
1995). Desse modo as pginas de um mesmo
site estaro mais propensas a terem um
padro consistente.
Ateno: quando se for permitir que o
usurio mude as cores de uma pgina na
Web, preciso considerar a complexidade da
70
tarefa e a habilidade mdia do pblico
usurio (Windows, 1995). Portanto, permita
sempre que o conjunto de cores-padro
possa ser recupervel e restabelecido para
que o usurio no se perca na realizao da
tarefa devido ao uso indiscriminado da cor
(ISO 9241-8).
b) Use a cor como uma forma de
informao adicional ou aumentada.
(Windows, 1995). Evite confiar na cor
como o nico meio de expressar um
valor ou uma funo particular.
c) Use cor para realar ao invs de usar
sublinhado (e use sublinhado ao invs de
itens piscando) (Nielsen, 1996). Restrinja
o uso do sublinhado para links evitando
assim confundir o usurio.
71
d) Evite usar cores muito quentes, tais
como, o rosa e o magenta. (Robertson,
1993).
As cores muito quentes parecem pulsar na
tela e ficam difceis de focalizar. Se for
usado um fundo colorido, selecione as cores
do texto de modo a obter o contraste mais
forte entre o texto e o fundo. Isso aumenta
a visibilidade e a legibilidade do texto.
e) No use vrias cores em uma nica
pgina. Isso distrai a ateno do usurio
e causa a perda de foco na atividade
principal.
f) Sobre um fundo escuro, recomenda-se o
uso da cor verde para o texto
(Robertson, 1993). O verde est no meio
do espectro solar e o comprimento de
onda que produz a sensao do verde o
72
ponto mais alto de sensibilidade do olho
humano (Pedrosa 1982).
g) Considere que a forma, a localizao e
os rtulos de texto so outras maneiras
de distinguir a informao (Windows,
1995) A cor no deve ser o principal
elemento para esse fim.
h) Recomenda-se o uso mnemnico da cor
(Robertson, 1993) que empregado
respeitando os esteretipos para criar
fortes associaes que ajudam no
reconhecimento, na lembrana e no
tempo de busca.
i) Use cores brilhantes e contrastantes com
cautela. Esses elementos atraem a
ateno do usurio e o seu emprego deve
ser reservado para reas importantes;
caso contrrio, o usurio pode achar
73
mais difcil saber para onde olhar e ficar
confuso.
j) Use cores monocromticas para o texto,
sempre. As cores monocromticas so
mais ntidas aumentando a legibilidade e
a visibilidade do texto.
k) Recomenda-se o uso de uma cor neutra
para fundos. As cores neutras (por
exemplo, cinza-claro) aumentam a
visibilidade das outras cores.
l) Evite reas piscando. Quando isso for
realmente necessrio, lembre-se de no
usar mais que uma rea piscando ao
mesmo tempo.
m) No que diz respeito cor melhor ser
conservador. Recomenda-se usar o
mximo de cinco cores. Para usurios
novatos o uso de quatro cores distintas
74
mais apropriado. Esta quantidade
permite espao extra na memria de
curta durao.
n) No use simultaneamente alto croma e
cores que estejam muito distantes no
espectro solar. Para relaes figura-
figura e muitas figura-fundo, fortes
contrastes de vermelho/ verde,
azul/ amarelo, verde/ azul e
vermelho/ azul criam vibraes, iluses
de sombras e imagens posteriores.
o) Use um cdigo de cores consistente e
familiar, com referncias apropriadas. As
denotaes comuns no ocidente so as
seguintes:
Vermelho: pare,
perigo, quente, fogo;
Amarelo: cuidado,
devagar, teste;
Verde: ande, OK, livre,
vegetao, segurana;
Azul: frio, gua,
calmo, cu;
75

Cores quentes: ao, resposta requerida,
proximidade; cores frias: status, informao
de fundo, distncia; cinzas, brancas e azuis:
neutralidade.

Recomenda-se o uso da mesma cor para
agrupar elementos relacionados. (Marcus,
1992). importante ser consistente no
agrupamento de cores. No use uma cor
particular para um elemento que no esteja
relacionado com outro elemento.
p) Use o mesmo cdigo de cores para
treinamento, teste, aplicao e
publicao.
Uma vez estabelecido o cdigo de cores, as
mesmas cores devem ser usadas por todo o
ciclo de vida de disseminao e gerao de
conhecimento.
76
Por outro lado, lembre-se de que o monitor
do computador usa misturas aditivas de
cores, e que a soma das cores gera o branco.
Por isso, deve-se sempre usar um cdigo
redundante de forma e cor. Essa abordagem
auxilia os usurios com deficincia em
visualizar cores, pois a forma a varivel
visual mais fcil de ser reconhecida.
q) Use a cor para aumentar a informao
mostrada em preto e branco.
No que concerne ao aprendizado e
compreenso, a cor superior ao preto e
branco em termos do tempo de
processamento e de reaes emocionais,
mas no h diferena na habilidade em
interpretar a informao. A cor mais
aprecivel e a memria para informao
colorida tambm parece ser superior do que
aquela em preto e branco. Entretanto,
77
recomenda-se projetar primeiramente em
preto e branco e, ento, adicionar a cor. A
cor aumenta o processamento cognitivo e
visual de uma informao que funciona bem
em preto e branco, pois ajuda a localizar,
classificar e associar imagens.
Obser vaes
impor t ant es
Ao mesmo tempo em que voc pode usar
cor para mostrar relao ou agrupamento,
associar uma cor a um significado particular
no sempre bvio ou fcil de aprender.
1. Cores monocromticas parecem ser
mais ntidas do que as cores
policromticas. (Robertson, 1993).
2. As pessoas gostam de displays
coloridos (Guimares, 1997).
78
3. Cor uma propriedade muito subjetiva
e o que agradvel para voc pode ser
desagradvel para outro (Windows,
1995).
4. A interpretao da cor pode variar
culturalmente, e, at mesmo em uma
nica cultura, as associaes
individuais podem diferir (Windows,
1995).
5. Aproximadamente 8% dos homens e
0,5% das mulheres tm deficincia em
visualizar cores. A mais freqente a
falta de habilidade para distinguir o
vermelho, o amarelo e o verde (ISO
9241-8)
6. Cores muito quentes podem parecer
pulsar na tela (Robertson, 1993).
7. Cores complementares, como
vermelho e verde, podem tornar-se
difceis para o olho focalizar.
79
8. Cores escuras tendem a retroceder o
espao visual, enquanto que cores
claras fazem o espao visual vir para
frente.
9. Para evitar problemas com usurios
com viso deficiente em cores, as
cores como vermelho e verde devem
ter luminncias suficientemente
diferentes.
10. Cores de fundo ou adjacentes afetam a
sombra ou a luminncia percebida de
uma cor particular.
80
Fundo
O fundo de uma pgina na Web composto
por padres de texturas e/ ou cores. A
textura pode ser percebida tanto pelo tato
quanto pela viso, mas possvel que uma
textura no tenha nenhuma qualidade ttil,
somente tica, como o caso dos desenhos,
por exemplo. J quando h uma textura real,
coexistem ambas as sensaes. A maior
parte da nossa experincia com as texturas
visual.
Consider aes
A maioria dessas texturas que vemos no
est realmente ali. Se tocamos a fotografia
de um sedoso veludo no temos a
convincente experincia ttil que nos foi
prometida pela viso. O significado se
81
baseia no que vemos (Dondis, 1988, p.
71). Por isso, a escolha do fundo
desempenha um papel muito importante no
resultado final de uma composio. Ele
pode aumentar o interesse pelo projeto
visual. No caso de pginas em WEB, para
que esse fundo seja harmonioso, ele deve
seguir as recomendaes e observaes
sobre cores.
Recomendaes
Recomenda-se usar cores neutras para o
fundo de uma pgina na Web. (ISO 9241-8).
Cores neutras, usadas para fundos,
aumentam a legibilidade do texto.
1. No use fundo muito carregado
(Kristof e Satran, 1995). Isso faz com
que sua pgina fique demorada para
carregar.
82
2. No use cores muito escuras para
fundo de toda a pgina (Kristof e
Satran, 1995). Em pequenas reas, elas
ajudam a direcionar a ateno do
usurio, mas em toda a pgina elas
aumentam o cansao visual.
3. No utilize elementos aleatrios como
fundo de uma pgina na Web (Kristof e
Satran, 1995). O elemento de fundo da
pgina deve aumentar o entendimento
do seu contedo. Se for usado um
fundo colorido, selecione as cores do
texto de modo a obter o contraste mais
forte entre o texto e o fundo
(Robertson, 1993). Isso aumenta a
visibilidade e a legibilidade do texto.
83
Obser vaes
1. Utilize fundo simples para no
comprometer a compreenso da pgina,
a legibilidade do texto e o tempo para
ser carregada.
2. O fundo no deve chamar mais ateno
do que a informao.
3. Use figura (texto, cones e figuras)
cromtica (azul, verde, vermelho, e
outras) sobre fundo acromtico
(branco, preto e cinza) e vice- versa
(ISO 9241-8).
84
Font es
Fontes vestem palavras. E palavras vestem
idias. As fontes podem fazer pelas idias o
que as roupas fazem pelas pessoas. No
somente o chapu, gravata, terno ou vestido
que voc veste. o jeito como voc veste.
a adequao a voc e ocasio que fazem
a diferena. E assim com as fontes.
Consider aes
Uma biblioteca de fontes uma espcie de
guarda-roupa com alternativas para diversas
ocasies (Shushan e Wright, 1994, p. 28).
As fontes tm muitas funes de modo a
propiciar formas de letras para a leitura.
Assim como outros elementos visuais, as
fontes organizam a informao ou criam
uma disposio particular.
85

verdade que a grande maioria dos leitores
no conhecedora, nem foi informada a
respeito do uso de fontes. Mas errado
supor que eles no iro responder ao uso
adequado delas (Shushan e Wright, 1994).
H diversos sistemas de classificao dos
tipos. E eles so baseados geralmente nas
suas origens cronolgicas e geogrficas ao
invs do seu carter visual. Como esse
carter das fontes que realmente afeta o
leitor, e no a sua histria, citaremos apenas
um desses sistemas de classificao, a
classificao geral proposta pelo grfico
francs Francis Thibaudeau e descrita por
Ribeiro (1993). Essa classificao baseada
na presena, ou no, e nas caractersticas
das serifas, linhas ou curvas que se projetam
das extremidades de um tipo.

86
Thibaudeau agrupou as fontes, ento, em
quatro grandes famlias, denominando-as:
Basto, Egipciana, Elzevir e Didot. Dentro
de cada famlia, h diversas variaes.

Diferente terminologia apresentada por
Collaro (1987) para a mesma classificao
de Thibaudeau. O autor descreve as famlias
como Lapidria, Egpcia, Romana Antiga e
Romana Moderna, respectivamente. Fontes
do tipo Basto no possuem serifas e so as
mais simples e legveis. Mas, em grandes
volumes de textos, a falta de contraste entre
as hastes as torna cansativas.

A famlia Egipciana tem uma base
notadamente retangular que lhe empresta
equilbrio e estabilidade. Destaca-se pela
uniformidade dos traos, e a
87
predominncia do preto sobre o branco
em sua construo.

As fontes Elzevir possuem a base
triangular e distribuio perfeita de
traos finos e grossos, o que os
caracteres muito legvel e elegante. A
famlia Didot caracterizada pelo
exagero de traos finos e grossos em sua
construo, que proporcionam beleza e
distino. A esse contraste junta-se uma
serifa de trao fino. Embora de leitura
agradvel, tem aspecto frgil.

Os tipos que primam pelo novo, pelo
diferente e que fogem a essa classificao,
misturando elementos de mais de uma
famlia ou mesmo no possuindo relao
com nenhuma, podem ser chamados de
Fantasia.
88

Variando o tamanho e o peso de uma fonte,
vemos um texto como sendo mais ou menos
importante e, tambm, percebemos a ordem
em que ele deve ser lido.

Segundo Brady (1988), ao escolher uma
fonte, deve-se considerar a legibilidade e o
carter. Legibilidade est relacionada com a
velocidade com que cada letra ou uma
combinao delas pode ser reconhecida.
Uma fonte pode ser extremamente legvel
quando isolada, mas sua aplicao errada
com relao a tamanho, espaamento de
entrelinhas, contraste com o fundo, entre
outras aes, pode torn-la de difcil leitura.

Sant'anna (1989) cita cinco fatores que
influenciam na legibilidade:

89
simplicidade: quanto mais simples (menos
decorativo) um caracter, mais legvel ser;

dimenses: letras pequenas demais so
cansativas e grandes demais causam mal-
estar. Existe um tamanho adequado para
cada aplicao. Em um ttulo de cartaz
publicitrio, por exemplo, os caracteres
devem ser suficientemente grandes para
chamar a ateno, e pequenos para que
sejam lidos sem esforo;

fora: para que haja legibilidade, deve haver
uma relao harmnica entre a altura da
letra e sua largura. Letras grossas e baixas
tonam-se escuras devido ao pouco fundo
que aparece entre suas hastes, dificultando a
leitura. Os caracteres muito altos e finos
tambm so prejudicados, s que pelo
excesso de fundo;
90

orientao: quanto mais oblquos os
caracteres, menor a sua legibilidade, o que
talvez seja devido nossa maior experincia
com os caracteres orientados verticalmente;

harmonia: uma composio deve primar
por um estilo nico. No aconselhvel
misturar muitos estilos de fontes.

Brady (1988; p. 6) cita outros fatores
relacionados com a legibilidade dos
caracteres. Ns estamos condicionados a
ler mais facilmente letras minsculas com
traos moderadamente grossos e finos e
com serifas. [...] Palavras em letras
maisculas, tipos gticos, tipos sem serifa, e
textos em itlico tendem a ser menos
legveis. Os estudos atribuem s serifas a
capacidade de guiar o olho de uma letra
91
seguinte. Mas, por outro lado, tambm
concluem que as letras sem serifas so mais
fceis de ler tanto em tamanhos muito
grandes quanto muito pequenos. difcil
elaborar qualquer regra rgida e inaltervel,
porque a legibilidade afetada no somente
pelo estilo da fonte, mas por inmeros
fatores, inclusive, a qualidade do papel e a
resoluo do monitor. Brady (1988) ressalta
que, quando combinados, tipos diversos
devem realmente parecer diferentes. Se
duas fontes so to similares que o leitor
no pode distingui-las, por que usar duas
fontes? (Brady, 1988). Para simplificar
procure combinar fontes serifadas com
fontes sem serifas. At por que, quando se
deseja uma fonte que chame ateno, o
melhor no escolher fontes muito
elaboradas.

92
As fontes tipo fantasia, segundo o autor,
so de difcil leitura e geralmente as
palavras no podem ser escritas todas em
maisculas. Para dar nfase determinada
fonte, o mtodo mais comum o seu uso
em tamanho grande. Mas o tamanho no o
nico modo de criar nfase e nem sempre o
mais correto. Deve-se considerar o uso da
cor, das formas itlico e negrito, de
minsculas ou maisculas, do espaamento
entre letras, da posio na composio e,
inclusive, do espao em branco sua volta.

O contraste, enfim, o fator-chave para que
determinado elemento tipogrfico tenha
nfase. Em uma pgina, uma linha que est
em minsculas, saltar aos olhos se as
demais estiverem em maisculas. Uma fonte
comum destaca-se entre outras em itlico.
At mesmo um azul acinzentado ofusca um
93
vermelho brilhante se for nico. Quanto ao
carter das fontes, Brady (1988) afirma que
ele definido pelo desenho das letras e
refere-se personalidade ou humor que elas
projetam. Por isso, fundamental, em
termos de publicidade, saber que imagem o
cliente quer projetar de seu produto ou
servio e quem o pblico que deve ser
atingido (velhos, jovens, executivos, donas-
de-casa...).

Certos caracteres do a impresso de
positivos, ponderados, racionais. Outros,
pelo contrrio, do uma impresso de
rigidez, peso. Existem ainda aqueles de
natureza malevel, fluida, flexvel, leve,
persuasiva, podem ir at o ponto de evocar
a alegria e frivolidade. Qualquer que seja a
opo necessrio que a famlia de
caracteres escolhida para compor um texto
94
no s corresponda natureza do texto,
mas ainda favorea a expresso do
sentimento evocado.

Segundo Brady (1988), em algumas fontes, o
caractere facilmente reconhecido,
entretanto, pode ser muito sutil em outras.
Isso depende muito da sua utilizao na
composio e, tambm de interpretaes
individuais. A adequao do estilo
mensagem, porm, no precisa ser levada ao
extremo. Qualidades como antigidade e
tradio no so necessariamente bem
representadas por um texto em romano
antigo. Nem essencial usar fontes sem
serifas em negrito porque o texto se refere
maquinaria. Assim como no h regra que
diga que devam ser usadas fontes floridas
para perfumes. Um exemplo clssico de um
bem-sucedido uso tipogrfico do que
95
pareceria um tipo no apropriado o rtulo
do Chanel n5: com sua fonte sem serifa
tem sido a marca da elegncia h cinqenta
anos (Hurlburt, 1986; p.107).

Mais importante , portanto, um conceito
global de design que desperte o interesse e
sugira o valor do produto de um modo
criativo e original. Deve-se objetivar a
projeo de uma imagem consistente da
companhia ou do produto atravs de cada
elemento grfico que atinge o pblico.
Assim, todo design deve ser guiado pela
mesma filosofia, ento cada novo item
refora as mensagens anteriores.

Pela prpria natureza e diponibilidade
tecnolgica dos monitores existentes, as
fontes so geralmente menos legveis nesses
veculos do que quando impressas. Por isso
96
vale seguir ou criar recomendaes
especficas para uso em pginas WEB que
sero exibidas nas telas de TV e
computador.
Esquema de Font es
Recomendaes
1. Recomenda-se o uso de fontes com
serifa. Estudos mostram um pequeno
aumento de legibilidade quando so
utilizados fontes com serifa.
2. Limite o nmero de fontes e estilos
em uma mesma pgina. (Robertson,
1993).
Use o mximo de duas fontes (por
exemplo, Arial e Times New Roman),
duas inclinaes (romano e itlico),
97
dois pesos (regular e negrito), e quatro
tamanhos (ttulo principal, subttulo,
texto e nota de rodap) (Marcus, 1992
Mullet e Sano, 1995).
3. No recomendado o uso de fontes
muito grandes (Nielsen, 1996). O uso
de fontes muito grandes d ao usurio
a impresso de que o texto est
gritando com ele. Para evitar esse
efeito recomenda-se usar fontes com
caixas alta e baixa.
Fontes com caixas alta e baixa usadas
juntas so mais legveis e
compreensveis. (Guimares, 1997).
4. Recomenda-se que a seleo da fonte
seja feita de acordo com o tipo de
documento a ser executado (Marcus,
1992).
98
Tipos com serifa so mais
apropriados para documentos
formais. Para literatura em geral,
podem ser utilizados os tipos sem
serifa, Helvtica ou Arial.
5. Use, sempre, o sistema-padro de
fontes para elementos comuns do
site(Windows, 1995).
O uso de um sistema padro torna a
interface mais consistente, gerando
uma padronizao.
6. De preferncia, use o conjunto de
fontes-padro do seu browser e ajuste a
fonte da sua pgina de acordo com ele.
Isso evita que sua pgina na Web
apresente problemas cada vez que o
usurio alterar o browser.
99
7. Em terminais de vdeo de baixa
resoluo, recomenda-se o uso de
fontes sem serifa e com estilo regular.
Nesse caso, o uso da serifa deve ser
evitado, pois ela pode no ser
visualizada.
8. Recomenda-se deixar um espao antes
e depois da palavra para aumentar a
visibilidade do vdeo reverso.
(Robertson, 1993). Tal procedimento
aumenta a visibilidade da palavra.
9. Recomenda-se o uso do itlico para
atrair a ateno do usurio. O uso do
itlico desperta a ateno do usurio e
no causa quebras significativas no
ritmo de leitura, mas deve ser usado
somente para textos curtos.
10. Evite o uso de caracteres brilhando e
piscando. Eles distraem e competem
pela ateno do usurio. O usurio
100
precisa de paz para a ler as
informaes.
Obser vaes
a) As fontes podem ser usadas para
realar uma pgina na Web da mesma
maneira que a cor (Robertson, 1993).
b) Os leitores preferem a fonte a qual
eles esto mais acostumados a ler
(Marcus, 1992).
c) As fontes com serifa so mais
apropriadas para documentos formais
(Marcus, 1992).
d) Uma organizao clara e regular de
tipografia na pgina aumenta a
legibilidade e a leiturabilidade
(Marcus, 1992).
101
e) De preferncia, use caixa baixa ou
caixa mista (caixa alta e baixa) do que
caixa alta (Marcus, 1992).
f) Usar muitas fontes normalmente
resulta em poluio visual (Marcus,
1992).
g) Fontes de diferentes famlias (por
exemplo, Times New Roman e Arial)
de um mesmo estilo (com ou sem
serifa) no devem ser misturadas em
nenhuma circunstncia (Mullet e Sano,
1995).
102
Text o
O texto o resultado do agrupamento de
letras de modo a formar palavras. Esse
agrupamento pode ser feito por meio de um
arranjo simtrico ou assimtrico.
Consider aes
O uso de tamanhos e tipos de fontes
coerentes no texto ajudam na compreenso
e apreciao de uma pgina na Web pelo
leitor, ou seja, na legibilidade e na
leiturabilidade dessa pgina.
103
Recomendaes
Recomenda-se que os textos sejam escritos
em uma fonte proporcional. Letras com
larguras variveis consomem menos espao
e criam um texto mais facilmente lido do
que um texto escrito em uma fonte com
largura fixa. (Marcus, 1992).
Recomenda-se, ainda, o uso de caixa-alta e
baixa. Um texto em caixas alta e baixa
mais legvel do que um texto todo em caixa-
alta porque possibilita a identificao da
forma, especialmente da metade superior da
palavra.
No se deve usar o sublinhado para realar
o texto. O uso do sublinhado em um bloco
contnuo de texto pode dificultar a leitura
104
da linha superior, alm de confundir o
usurio.
Recomenda-se evitar o uso do sublinhado
para enfatizar ttulos. Reserve o uso do
sublinhado para links, que o padro
adotado na Web.
Evite o alinhamento direita. O
alinhamento do texto direita prejudicial
compreenso pelos leitores inexperientes.
Evite o uso de hfen. O uso de hfen reduz
a velocidade de leitura tanto para leitores
experientes quanto para leitores
inexperientes.
Obser vaes
1. Itlico til para atrair a ateno do
usurio sem causar quebras severas no
ritmo de leitura (Robertson, 1993).
105
2. Linhas curtas facilitam a leitura, pois
elas reduzem o movimento excessivo
dos olhos (Robertson, 1993).
3. Letras legveis tm normalmente 10 ou
12 pontos de tamanho para monitores
com resoluo de 800 por 600 pontos
por polegada (dpi).
4. O comprimento timo de uma linha
para textos legveis de 10 a 12
palavras ou de 40 a 60 caracteres por
linha.
5. Uma organizao clara e regular de
fontes na pgina aumenta a
legibilidade e leiturabilidade do texto
(Marcus, 1992).
6. possvel fazer textos com arranjos
simtricos e assimtricos, mas no se
devem misturar tais arranjos dentro de
uma pgina na Web.
106
7. Considere sempre as limitaes de
softwares. Por exemplo, a verso
HTML 3.2 no permite o alinhamento
direita.
107
cones
cones, ndices e smbolos so
freqentemente utilizados em interfaces
com o usurio. Esses elementos
proporcionam um guia funcional e esttico
para interfaces grficas, por exemplo, uma
homepage que utiliza centenas de cones
diferentes. Esses elementos pictogrficos e
ideogrficos funcionam como um sistema de
signos. Estritamente falando, o que
chamamos cones so uma mistura de
cones, ndices e smbolos.

A noo de signo, segundo Rabaa e
Barbosa (1987), bsica e essencial em
qualquer cincia relacionada com a
comunicao, em que se inclui a
comunicao no-verbal, e por isso est em
108
constante aprofundamento e
questionamento.

De acordo com Eco (1990), o signo usado
para transmitir uma informao.
Ele insere-se num processo de comunicao
do tipo fonte-emissor-canal-mensagem-
destinatrio.

Uma mensagem pode ser (e quase sempre )
a organizao complexa de muitos signos.
Mas o signo no est inserido apenas em um
processo de comunicao; ele entra num
processo de significao.

Saussure, antecipando e determinando todas
as definies posteriores, definiu signo
como uma entidade de dupla face, uma
relao entre significante e significado com
base em um sistema de regras.
109
Saussure jamais definiu claramente o
significado, deixando-o a meio caminho entre
uma imagem mental, um conceito e
uma realidade psicolgica no circunscrita
diversamente; em compensao, sublinhou
energicamente o fato de o significado ser algo
relacionado atividade mental dos indivduos
no seio da sociedade (Eco, 1976, p.0).

Nesse ponto, mais compreensvel a
definio dada por Pierce segundo a qual
signo tudo aquilo que, sob certos
aspectos e em alguma medida, substitui
alguma outra coisa, representando-a para
algum Para ele, a relao de significao
envolve trs sujeitos: um signo, o seu objeto
e o seu interpretante; jamais uma ao entre
duplas.

Outro diferencial quanto teoria
saussuriana que no requer, como
condio necessria para a definio do
signo, que este seja emitido
110
intencionalmente e produzido
artificialmente, como propunha Saussure
(Eco, 1976).

O mesmo conceito assim apresentado por
Coelho Netto (1990, p. 56):
Um signo (ou representamen), para Pierce,
aquilo que, sob certo aspecto, representa
alguma coisa para algum. Dirigindo-se a
essa pessoa, esse primeiro signo criar na
mente (ou semiose) dessa pessoa um signo
equivalente a si mesmo ou, eventualmente, um
signo mais desenvolvido. Este segundo signo
criado na mente do receptor recebe a
designao de interpretante (que no
o intrprete), e a coisa representada
conhecida pela designao de objeto.

fato que fatores pessoais limitam o
nmero de objetos que podem ser
percebidos em determinado momento.
Sensibilizam os mecanismos de percepo
do indivduo, fazendo com que este d
maior ou menor importncia a um objeto ou
111
a aspectos deste. Podem, ento, deformar as
cognies desses objetos. a chamada
deformao seletiva ou, como prope
Meyrs e Reynolds (1972), discriminao
perceptiva em que emoes e desejos fazem
com que o indivduo selecione apenas
alguns aspectos do objeto-estmulo,
desenvolvendo, importante que se diga,
inconscientemente, uma cognio distorcida
da verdadeira.

Gombrich (citado por Arnheim, 1995; p. 43)
diz: Quanto maior for a importncia
biolgica que um objeto tem para ns, mais
estaremos aptos a reconhec-lo e mais
tolerante ser, portanto nosso padro de
correspondncia formal. Posteriormente, o
prprio autor exemplifica: um homem que
espera sua namorada numa esquina v-la-
em quase todas as mulheres que se
112
aproximam, e esta tirania do trao da
memria tornar-se- mais forte medida
que os minutos passam (Arnheim, 1995; p.
43).

A cincia que estuda as relaes dos signos
cdigos e mensagens e entre signo e
discurso, a Semitica, que se constitui
uma parte da Psicologia social. Semiologia
foi o termo criado pelo suo Ferdinand
Saussure para indicar a cincia geral dos
signos.

Posteriormente, o francs Roland Barthes
inverte essa definio, entendendo todos os
sistemas de signos como reportveis s leis
da linguagem. Afirmava, ento, que a
Lingstica no era uma parte, mesmo que
privilegiada, da cincia geral dos signos. A
Semiologia que era parte da Lingstica. A
113
gramtica pura determinaria o que deve ser
verdadeiro quanto ao signo para que este
possa veicular um significado; o ramo da
lgica que estudaria o que verdadeiro em
relao ao signo para que possa aplicar-se a
um objeto. E a retrica pura teria por
objetivo estudar as leis pelas quais um signo
d origem a outro e um pensamento provoca
outro (Coelho Netto, 1990).

Outra diviso da Semitica foi proposta por
Morris e foi acolhida no domnio cientfico.
Tambm uma classificao segundo trs
aspectos: sinttico, que procura as relaes
dos signos entre si, independentemente do
que designam ou identificam; semntico,
que leva em considerao os signos em
relao com os objetos designados; e
pragmtico, os signos em relao com quem
os utiliza.
114

A este trabalho interessa a compreenso
da Semitica como um todo e por isso
vamos avanar estudando os trs nveis
principais de classificao para os signos,
chamados tricotomias: em relao a si
mesmos, em relao ao objeto e em relao
ao interpretante.

A segunda tricotomia a mais conhecida e
importante. a que mais se utiliza no
estudo da comunicao, principalmente
comunicao visual. As demais sero citadas
visando, apenas, uma compreenso do
conjunto da teoria pierciana exposta.
Embora as tricotomias tenham uma ordem
determinada, deixaremos para analisar por
ltimo essa segunda tricotomia que
consideramos vlida.

115
A primeira tricotomia diz respeito ao signo
considerado em si mesmo. So espcies de
signos segundo esta classificao:

a) qualissigno: uma qualidade que um
signo. Por exemplo, uma cor;

b) sinsigno: uma coisa existente, um
acontecimento real. Por exemplo, um
cata-vento. Como s pode se
manifestar por meio de suas
qualidades, envolve um ou vrios
qualissignos;

c) legissigno: no uma coisa ou evento
singular, determinada, mas uma
conveno ou lei estabelecida pelos
homens. Por exemplo, as palavras.
Todo legissigno requer sinsignos.

116
A terceira tricotomia considera o signo em
relao ao interpretante, ou seja, relaes
pragmticas de signo:

a) rema: para o seu interpretante,
funciona como um signo de uma
possibilidade que pode ou no se
verificar. Por exemplo, uma palavra
isolada, como vermelho.

b) dicissigno ou dicente: um signo de
uma existncia real. Corresponde a um
enunciado e envolve remas. Por
exemplo, este vermelho est
manchado.

c) argumento: um signo de razo, um
signo de lei. Envolve a essncia de um
juzo. Por exemplo, um silogismo do
tipo A B, B C, portanto, A C
117
(Coelho Netto, 1990; Rabaa e
Barbosa, 1987).

A segunda tricotomia diz respeito s
relaes entre o signo e o seu objeto e
divide os signos em cones, ndices e
smbolos.

a) cone: quando possui alguma
semelhana ou analogia com o seu
referente (o objeto representado). Um
signo icnico na medida em que
possui a propriedade do seu denotado.
Por exemplo, uma fotografia, uma
esttua, um desenho e, sobretudo, uma
imagem mental;

b) ndice, ndex ou indicador: quando se
refere ao objeto em virtude de ser
diretamente afetado por ele. um
118
signo que tem uma conexo fsica com
o objeto que indica. Por exemplo, um
dedo apontado para um objeto, fumaa
que indcio de fogo, um campo
molhado indicao de que choveu.
Assim como tambm so ndices os
pronomes demonstrativos, as
impresses digitais, os nomes prprios
e comuns na medida em que so
usados para indicar um objeto;

c) smbolo: quando a relao com o
referente arbitrria, uma associao
de idias produzida por uma
conveno. marcado pela
arbitrariedade. Por exemplo, qualquer
das palavras de uma lngua, a cruz, a
sustica, as bandeiras, os sinais de
trnsito (Coelho Netto, 1990; Rabaa e
Barbosa, 1987).
119

Para ser entendido, o smbolo no exige que
seu receptor conhea o objeto a que se
refere (o que ocorre com o ndice se no
conheo o fogo no poderei saber o que a
fumaa indica). , portanto, um meio de
conhecer coisas novas.

Tambm, ao contrrio do cone, o
conhecimento do smbolo no implica o
conhecimento da coisa representada como
ela . Isso porque ele no tem ligaes com
a coisa significada, independe desta, o que
faz com que no seja efmero.

Na realidade, dificilmente se pode constatar
a ocorrncia de um desses trs tipos de
signo em estado puro. Freqentemente um
cone tambm um ndice, assim como um
ndice pode ser simblico. Cada signo pode
120
ser assumido como um ndice e como um
cone ou como um smbolo, segundo as
circunstncias em que aparece e o uso
significativo a que se destina (Eco, 1990).
EXEMPLOS DE CONES
Podemos ver nas figuras a seguir alguns
exemplos de ndices, cones e smbolos. A
ttulo de exerccio, procure relacionar cada
imagem com a sua categoria tricotmica
descrita no item sete desta obra.


Fig. 1 cones excelentes de aplicaes
comuns

121

Fig. 2 cones muito bons de aplicaes
comuns

Fig. 3 Histograma dos cones mais usados
no Windows

Vale lembrar que as trs tricotomias, que
podem ser combinadas em inmeras classes
de signos (legissigno indicial remtico,
122
sinsigno dicente...), foram reunidas por
Pierce em trs categorias correspondentes,
chamadas primeiridade, secundidade e
terceiridade.

A primeiridade refere-se ao nvel do
sensvel, do qualitativo. Abrange o cone, o
qualissigno e o rema.
A secundidade diz respeito ao nvel da
experincia, da coisa ou do evento. Incluem-
se a o ndice, o sinsigno e o dicissigno.

E, por fim, a terceiridade refere-se
mente, ao pensamento, razo. o caso do
smbolo, do legissigno e do argumento.

Depois de compreendidas todas essas
classificaes, chega-se a um outro conceito
de signo desenvolvido posteriormente por
Pierce. Um conceito mais complexo, porm
123
mais amplo. Nele, o signo apresentado
como um Primeiro (nvel do sensvel) que se
coloca numa relao tridica com um
Segundo, seu objeto (nvel do evento), de
modo a ser capaz de determinar que um
Terceiro, seu interpretante (nvel da razo),
assuma a mesma relao tridica com seu
objeto na qual ele prprio est em relao
com o mesmo objeto. Essa proposta de
Pierce surge como restabelecedora do
tringulo semitico em sua totalidade, indo
ao encontro de alguns pensadores que
consideravam importante apenas o lado
esquerdo do tringulo, exclundo o nvel do
objeto. Outra concluso que se pode tirar
dessa segunda posio de Pierce que um
signo uma relao tridica completa e
ordenada, portanto, nem tudo pode ser
signo. O signo no um dos elementos do
tringulo, uma de suas pontas, um dos
124
membros da relao. O signo a reunio
das trs pontas, a relao toda e completa, a
totalizao dos trs vrtices do tringulo
(Coelho Netto, 1990; P. 66).

Todos esses conceitos levam-nos a
concluir que grande a importncia dos
smbolos, cones e ndices para a
comunicao visual, especialmente na
WEB.
Consider aes
Nenhum grupo de regras ou normas pode
garantir que um cone seja perfeitamente
projetado, mas as observaes e
recomendaes citadas aqui podem ajudar
nesta tarefa. cones so usados por toda a
Web para representar objetos ou tarefas. Em
funo de os cones representarem os
125
objetos de uma pgina na Web, importante
valorizar aqueles que efetivamente
comuniquem as suas propostas.
Recomendaes
1. Recomenda-se projetar os cones
criando esboos rpidos. Uma vez que
o contedo semntico tenha sido
organizado, crie vrios esboos que
variem da abstrao lgica imagem
concreta. Indique todos os elementos
visuais, seu tamanho e sua localizao
aproximada.
importante no ser muito preciso ou
detalhista no incio do projeto; o mais
importante explorar todas as variaes
possveis. Avalie se os cones vo ao
encontro das necessidades do emissor, do
receptor e do meio em que ele ser usado.
126
2. Comece identificando a proposta do
cone e o seu uso. (Windows, 1995).
Uma boa sugesto fazer um brainstorming
sobre possveis idias. Reconhecemos que
freqentemente difcil projetar cones que
definam operaes ou processos, ou seja,
atividades que dependam dos verbos; por
isso, recomenda-se o uso de substantivos.
3. Recomenda-se o uso de metforas do
mundo real. Isso facilita o
reconhecimento, identificao e
associao do cone por parte do
usurio que pode usar a experincia e
aprendizado prvio para interpretar o
cone.
4. Classifique os cones por estilos. Os
estilos devem ser estabelecidos de
modo que todos os cones sejam
127
agrupados por uma abordagem
consistente ou pela sua aparncia.
5. Recomenda-se que seja projetado um
grid para organizar todos os elementos
que compem o cone. O uso do grid
importante para estabelecer padres
de linhas horizontais, verticais e
oblquas alm de um nmero limitado
de tamanhos para os objetos que
compem o cone.
6. Use objetos grandes, linhas grossas e
reas simples para distinguir os cones
(Marcus, 1992). Uma vez selecionado o
estilo da apresentao, continue a usar
a mesma abordagem dentro de todo o
conjunto de cones. Evite que os
elementos mais significativos do cone
sejam muito pequenos em comparao
com o seu tamanho total (Marcus,
1992)
128
7. Recomenda-se que o cone tenha uma
aparncia simplificada. Um cone
composto de muitas partes pode
confundir o usurio. As diferenas
visuais devem ser significativas sob o
ponto de vista da comunicao. No
devemos adicionar elementos
decorativos sem necessidade, pois isso
aumenta o tempo de processamento
para a mente humana e cria a
possibilidade de erros de
interpretao.
8. Avalie os projetos de cones
mostrando-os para usurios potenciais.
Quando os prottipos estiverem
disponveis, eles devem ser revisados e
testados por usurios tpicos. As
avaliaes que podem afetar todos os
aspectos do projeto do cone devem
ser repetidas.
129
9. Recomenda-se ter precauo com o
uso do anti-aliasing. A tcnica chamada
anti-aliasing envolve a adio de pontos
coloridos para suavizar as
extremidades pontiagudas de uma
figura grfica. Entretanto, no use
anti-aliasing sobre o lado de fora da
extremidade de um cone, pois os
pontos contrastantes podem parecer
irregulares ou dentados quando houver
uma variao do fundo.
10. Use um estilo comum para todos os
cones. Repita as caractersticas
comuns como o uso da mesma fonte
de luz (canto superior esquerdo) e
evite os contornos em preto; eles
aumentam a poluio visual.
11. Recomenda-se que se comece a
projetar os cones em preto e branco.
Considere a cor como uma
130
propriedade adicional. Tambm teste
as imagens em diferentes fundos, pois
o usurio pode mudar o padro de
fundo do seu browser.
12. Recomenda-se o uso de cor com
discrio. Para a criao de um cone
suficiente o uso de cinco cores ou at
menos, incluindo o preto, o branco
e/ ou o cinza. Muita variao de cores
distrai a ateno do usurio.
13. Recomenda-se o uso da paleta de 256
cores. Isto permite cones com
aparncia muito realstica e faz com
que eles possam ser corretamente lidos
em monitores configurados para exibir
256 cores ou mais.
14. Finalmente, lembre de considerar o
potencial cultural do impacto dos seus
cones. O que pode ter um certo
significado em uma pas ou cultura
131
pode ter significados imprevistos em
outro. melhor evitar letras ou
palavras, se possvel, pois podem fazer
com que os desenhos sejam difceis de
aplicar em outras culturas.
Obser vaes
1. Os cones e smbolos podem substituir a
linguagem escrita e contribuir para que
as pginas na Web tenham compreenso
internacional.
2. Os espaos poupados em menus, mapas
e diagramas com a utilizao de cones
podem ser significante.
3. Com uma boa seleo de cones e
smbolos mais informaes podem ser
colocadas dentro de uma determinada
janela ou de um espao na tela.
132
4. Um cone ocupa menos espao do que o
seu equivalente em palavras.
5. cones bem concebidos,
sistematicamente projetados e
efetivamente organizados, devem ser
fceis e rpidos de reconhecer em um
contexto visual complicado.
6. Faa do cone um documento
reconhecvel e representativo do
contedo da sua pgina.
7. Quando projetar cones, faa como um
conjunto, considerando o
relacionamento de uns com os outros e
com as tarefas dos usurios.
8. Certifique-se de que as escalas
(tamanho) de seus cones sejam
consistentes com os outros objetos com
os quais eles esto relacionados e que se
encaixam bem dentro do site.
133
9. Procure usar perspectiva e dimenso
(luz e sombra) para melhor comunicar a
representao do mundo real.
10. Recomenda-se a projeo de imagens,
assumindo que a fonte de luz venha do
canto superior esquerdo.
11. Um estilo ilustrativo tende a comunicar
conceitos metafricos mais efetivamente
que smbolos abstratos.
12. A grande vantagem que os cones tm
sobre as palavras que eles podem ser
alegres, inteligentes e ter apelo visual.
13. O reconhecimento e a memria do
usurio so dois fatores importantes
para ser considerado no projeto de
cones.
134
como ut il izar est a obr a
Acreditamos que so poucos os
mandamentos em design e, assim, quase
todas as regras podem e devem ser
quebradas. Recomendamos que a obra seja
lida integralmente, caso apaream dvidas
elas podem ser encaminhadas aos autores
por meio de mensagem enviada aos e-mails:
fpiero@zaz.com.br, dpiero@zaz.com.br, ou
ainda por meio de carta endereada Rua
Jlia Lacourt Penna, 325, Jardim Cambur,
Vitria ES, CEP 29090 210.
Por ltimo, faa experincias. Use os
exemplos apresentados, assista s palestras
do autor e aceite a premissa de que gnio
um por cento inspirao e 99 por cento
transpirao.
135
Gl ossr io
Arranjo simtrico: composio que apresenta
elementos semelhantes em ambas as metades.
Caixa alta: letras maisculas.
Caixa baixa: letras minsculas.
Contedo semntico: compreendido como sendo
o significado do termo significado (Marcus,
1992)
Cores complementares: so as cores que se
encontram em posies opostas no crculo
cromtico, por exemplo, o vermelho e o verde
(Marcus, 1992)
Cores monocromticas: cores produzidas por um
nico canho de eltrons (dispositivo emissor de
luz usado nos monitores de vdeo). As cores
policromticas so produzidas por trs canhes de
eltrons diferentes (Red, Green e Blue).
Cores neutras: so as cores que aumentam a
visibilidade das outras cores, como os vrios tons
de cinza.
Croma: saturao: pureza da cor dentro da escala
do cinza, a variante mais viva da cor percebida.
136
Espectro solar: so as chamadas cores do arco-
ris e seguem a ordem: Vermelho - Alaranjado -
Amarelo - Verde - Azul - Anil - Violeta
Fadiga visual: cansao visual causado pelo nmero
excessivo de elementos visuais ou cores em uma
nica pgina.
Fonte com largura varivel: fontes que possuem
larguras diferentes para letras que apresentam
larguras diferentes, por exemplo o e e o i.
Fonte: conjunto das letras do alfabeto, nmeros e
sinais desenhadas de um modo caracterstico.
Fvea: rea central de foco do olho humano
(Marcus, 1992)
Grid: uma grade composta de linhas verticais e
horizontais.
cone: alguma coisa que se parece com o seu
significado. Ele representativo e de fcil
compreenso. Ex.: Um trao de tinta significando
uma linha geomtrica em uma ilustrao no livro
texto.
ndice: um sinal que foi causado por algo ou
por um processo ao qual ele se refere. Ex.: Um
rastro de lama nos degraus um ndice de que
algum entrou h pouco (Marcus, 1992)
137
Layout Organizao espacial: diagramao de
elementos visuais que compem uma pgina na
Web.
Legibilidade: diz respeito habilidade do leitor de
encontrar, identificar, discriminar e absorver o
texto com sucesso.
Leiturabilidade: diz respeito facilidade de
interpretao e apelo do texto.
Luminncia = brilho = valor: quantidade relativa
de claro ou escuro em uma escala do preto ao
branco (tambm chamado de intensidade).
Matiz = tom (Cor): composio do comprimento
de onda espectral da cor que produz a percepo
de ser azul, laranja, marrom e outras. a variao
qualitativa da cor.
Memria de curta durao: tambm chamada de
memria de trabalho, dura cerca de 20 segundos,
e capaz de armazenar cinco palavras ou formas,
seis letras, sete cores e oito dgitos.
Peso: quantidade de massa de uma fonte, por
exemplo, uma fonte com estilo bold pesada.
Poluio visual: efeito causado pelo uso de um
nmero excessivo de elementos visuais em uma
nica pgina na Web.
138
Ponto: unidade de medida da letra. Um ponto
equivale a 0,325 mm.
Projeto Visual: organizao espacial, diagramao
de elementos visuais que fazem parte de um site
completo.
Serifa: traos que fazem o acabamento de uma
letra (Schriver, 1997)
Smbolo: um sinal que pode ser completamente
arbitrrio na sua aparncia. Ex.: Uma bandeira
para representar um pas.
139
Ref er ncias
bibl iogr f icas
ARNHEIM, Rudolf. Arte e Percepo
Visual: Uma Psicologia da
VisoCriadora. 9a ed. So Paulo:
Pioneira, 1995
BRADY, Philip. Using TypeRight.
Cincinnati: North Light Books, 1988.
COELHO NETTO, J. Teixeira. Semitica,
Informao e Comunicao. 3a ed. So
Paulo: Perspectiva, 1990. (Srie
Debates)
COLLARO, Antonio Celso. Projeto Grfico:
Teoria e Prtica da Diagramao. 2a ed.
So Paulo: Summus, 1987.
140
DONDIS, Donis A. La Sintaxis de la
Imagen: Introduccin al Alfabeto
Visual. 7a ed. Barcelona: Gustavo Gili,
1988.
ECO, Humberto. Tratado Geral de
Semitica. So Paulo: Perspectiva, 1976.
FARINA, Modesto. Psicodinmica das Cores
em Comunicao. 4a ed. So Paulo:
Edgar Blcher, 1990.
GUIMARES, Lia Buarque Macedo.
Ergonomia cognitiva, Conferncia
proferida no 8
o
Congresso Brasileiro de
Ergonomia, Florianpolis, 1997.
HURLBURT, Allen. Layout: O Design da
Pgina Impressa. 2a ed. So Paulo:
Nobel, 1986.
141
INTERNATIONAL ORGANIZATION FOR
STANDARDIZATION, Projeto de
norma internacional, Requirements for
displayed colours - ISO 9241 parte 8, final
draft., Genebra, Sua,1997.
KRISTOF, Ray; SATRAN, Amy.
Interactivity by design - Creating &
communicating with new media, Indiana,
USA, 1995, Macmillan, ISBN 1- 56830-
221-5.
MARCUS, Aaron. Graphic design for
electronic documents and user
interfaces, New York, 1992, ACM
Press, ISBN 0-201-54364-8.
MEYRS, James H. e REYNOLDS, William
H. Gerncia de Marketing e
Comportamento do Consumidor. Rio de
Janeiro: Vozes, 1972.
142
MULLET, Kevin e SANO, Darrell.
Designing visual interfaces,
Communication oriented techniques, New
Jersey, 1995, SunSoft Press, ISBN 013-
303389-9.
OSF/ Motif SYTLE GUIDE. Guia de
estilos para interface com padro
OSF/ Motif, Cambridge, USA, 1990,
Open Software Foundation.
RABAA, Carlos A. e BARBOSA, Gustavo
G. Dicionrio de Comunicao. So
Paulo: tica, 1987.
ROBERTSON, Douglas. (July 16, 1993)
HCI Report.
SANT'ANNA, Armando. Propaganda:
Teoria, Tcnica e Prtica. 4a ed. So
Paulo: Pioneira, 1989.
SCHRIVER, Karen A. Dynamics in
document design, USA, 1997, Jonh
Wiley & Sons, ISBN 0-471-30636-3.
143
SHUSHAN, Ronnie e WRIGHT, Don.
Desktop Publishing by Design
Everyone's Guide to Pagemaker 5.
Washington: Microsoft Press, 1994.
WINDOWS STYLE GUIDE, The Windows
interface guidelines - A guide for
designing software, USA, 1995, Microsoft
Corporation.

144
BI BLI OGRAFI A

ABIPEME. Fundao Getlio Vargas.
Centro de Estudos da Cultura e do
Consumo. So Paulo : FGV, 1991.
ALCNTARA, Eurpides. Emoo pra valer!
Veja, So Paulo, p. 64-67, 1o set.1993.
AMANH. Varig na cabea. Porto Alegre,
Amanh, v. 10, n. 106, p. 1-20, abr.1996.
Especial: As Marcas Campes.
ASSOCIAO BRASILEIRA DE NORMAS
TCNICAS, Rio de janeiro. Normas
ABNT sobre documentao. Rio de
Janeiro, 1978.
AZEVEDO, Wilton. Os Signos do Design.
So Paulo: Global, 1994. (Coleo
Contato Imediato).
145
BERLO, David K. O Processo da
Comunicao: Introduo Teoria e
Prtica. So Paulo: Martins Fontes,
1991.
BLECHER, Nelson. Era da Globalizao
converte marca em
patrimnio bilionrio. Folha de So
Paulo, So Paulo, 27 out.1994. Especial
Top of Mind, p.A-2.
___. Omo bate Coca-Cola no 'Top of Mind'
95. Folha de So Paulo, So Paulo, 13
nov.1995. Especial Top of Mind, p.2.
BORDENAVE, Juan D. e CARVALHO,
Horcio M. Comunicao e
Planejamento. 2a ed. Rio de Janeiro: Paz
e Terra, 1987.
BRANDO, Vladimir. O Poder das Marcas.
Expresso, So Paulo, a.5, n.56, p.14-20,
1995.
146
CYBIS, Walter de Abreu. Ergonomia de
interfaces homem-computador,
Florianpolis, 1997, Apostila para o
curso de Ps-Graduao em Engenharia
de Produo - Universidade Federal de
Santa Catarina.
COBRA, Marcos. Administrao de
Marketing. 2a edio. So Paulo: Atlas,
1992. COELHO NETTO, J. Teixeira.
Semitica, Informao e Comunicao.
3a ed. So Paulo: Perspectiva, 1990.
(Srie Debates)
COELHO, Teixeira. O que Industria
Cultural? 8a ed. So Paulo: Brasiliense,
1986. (Coleo Primeiros Passos)
COSTA, Joan. Imagen Global: Evolucin
del Diseo de Identidad. 2a ed.
Barcelona: CEAC, 1989.
147
EMERICH, Helcio. Valor secundrio da
embalagem. Folha de So Paulo, So
Paulo, 12 set.1994. Dinheiro, p. 2-5.
___. No reino das fraudes. Folha de So
Paulo, So Paulo, 1o abr.
1996. Negcios, p. 5-7.
EXAME. Mais brilho na maquiagem.
Exame, So Paulo, p.67-68, 20 abr.1988.
___. Perfil Novo. Exame, So Paulo, p.111,
8 jul.1992.
FARAH, Raphic J. Designers pe a boca no
mundo. Publish, Rio de Janeiro, a.6,
n.22, p.64-68, jan./ fev.1996.
FERLAUTO, Cludio. Uma viso da
logotipia brasileira: 91/ 92. Abigraf, So
Paulo, a.17, n.141, p.52-54,
jul./ ago.1992.
148
FERNANDES, Ftima. Com 50% de
mercado, Consul j se tornou sinnimo
de geladeira. Folha de So Paulo, So
Paulo, 27 out.1994. Especial Top of
Mind, p.A-9.
FRANA, Jnia Lessa. Manual para
Normalizao de Publicaes Tcnico-
cientficas. 3a ed. Belo Horizonte:
UFMG, 1996.
FRANCO, Clia de Gouva. O milionrio
segredo das marcas. Folha de So Paulo,
So Paulo, 31 mar.1996. Mais!, p. 5-10.
GEISSBUHLER, Steff. 'Design global
tedioso' diz Geissbuhler. Folha de So
Paulo, So Paulo, 27 fev.1996. Ilustrada,
p. 5-4.
GUILLAUME, Paul. Psicologia da Forma.
2a ed. So Paulo: Nacional, 1966.
HOCHBERG, Julian E. Percepo. 3a ed.
Rio de Janeiro: Zahar, 1982.
149
HORTON, William. The icon book - Visual
symbols for computer systems and
documentation, USA, 1994, Jonh Wiley &
Sons, ISBN 0471599018.
INSTITUTO BRASILEIRO DE
GEOGRAFIA E ESTATSTICA -
IBGE. Rio de Janeiro. Censo
Demogrfico de 1991. Rio de Janeiro,
1991.
JANSSEN, Hugo. Una breve historia del
logotipo. Orgyn, PMSI Bulgamor, Pases
Baixos, a.5, n.4, p.33-35, 1994.
JORNAL DA ACOMACSUL. Psicologia da
Cor. Pelotas, a.1, n.5, set.1995.
LAZZAROTTO, Gisley e ROSSI, Janete.
Comunicao, Gestalt e Behaviorismo.
IN: GUARESCHI, P.A. Comunicao e
Controle Social. Rio de Janeiro:
Vozes, 1991.
150
LESSA, Washington Dias. Dois Estudos de
Comunicao Visual. Rio de Janeiro:
UFRJ, 1995. p. 61-111: A Marca
Figurativa.
LUCCHESI, Cristiane. A moda do "Pe na
Consul" est de volta. Folha de So
Paulo, So Paulo, 13 nov.1995. Especial
Top of Mind, p.17.
MARTINS, Jos S. O Poder da Imagem: o
uso estratgico da imagem criando valor
subjetivo para a marca. 4a ed. So
Paulo: Makron Books, 1995.
MAYER, Martin. Afinal, o que aconteceu a
Madison Avenue? A publicidade nos
anos 90. Porto Alegre: Ortiz, 1991.
MUCCHIELLI, Roger. A Psicologia da
Publicidade e Propaganda:
Conhecimento do Problema. Rio de
Janeiro, Livros Tcnicos e Cientficos,
1978.
151
MULLET, Kevin e SANO, Darrell.
Designing visual interfaces,
Communication oriented techniques, New
Jersey, 1995, SunSoft Press, ISBN 013-
303389-9.
MURPHY, John e ROWE, Michael. Como
Disear Marcas y Logotipos. 3a ed.
Barcelona: Editorial Gustavo Gili, 1992.
OSF/ Motif SYTLE GUIDE. Guia de
estilos para interface com padro
PEDROSA, Israel. Da Cor Cor
Inexistente. Brasilia: UNB, 1982.
PERISCINOTO, Alex. Etiqueta ou no, eis
a questo. Folha de So Paulo, So
Paulo, 14 nov.1994. Dinheiro, p.2-5.
PINTO, Ivan S. e TROIANO, Jaime C. Na
esquina de Madison Av. e Wall Street.
Mercado Global, So Paulo, n.89, p.42-
46, 1o trim.1993.
152
POLESI, Cassiano. Atitude. Revista da
Criao, So Paulo, a. 2, n.13, p.12-15,
mar.1996.
RIBEIRO, Milton. Planejamento Visual
Grfico. 3a ed. Braslia: Linha, 1993.
RICHARDSON, Roberto J. Pesquisa Social:
Mtodos e Tcnicas. 2a ed. So Paulo:
Atlas, 1990.
RICHERS, Raimar. Oito chaves de uma
marca. Folha de So Paulo, So Paulo,
13 nov.1995. Especial Top of Mind, p.2.
RIES, Al. As Leis Imutveis do Marketing.
Exame, So Paulo, a. 28, n. 596, p.71-
72, 8 nov.1995.
ROSENBAUM, Alvin (ed.). U.S.A.
Trademarks - Logos: Stationery Systems
& Corporate Identity - A Visual
Encyclopedia. Tokyo: Graphic-Sha
Publishing, 1994.
153
SALGADO, Eduardo. Resgate de marcas
custa tempo e dinheiro. Amanh, Porto
Alegre, a.9, n.90, p.24-27, nov.1994.
SAMPSON, Peter. Novas tendncias em
imagem e pesquisa de marcas. Mercado
Global, So Paulo, a.22, n.97, p.33-43,
1o trim.1995.
SANT'ANNA, Armando. Propaganda:
Teoria, Tcnica e Prtica. 4a ed. So
Paulo: Pioneira, 1989.
SCALZO, Fernanda. MASP recebe acervo de
design grfico. Folha de So, So Paulo,
15 abr.1994. Ilustrada. p.5-7.
SCHRIVER, Karen A. Dynamics in
document design, USA, 1997, Jonh
Wiley & Sons, ISBN 0-471-30636-3.
----, Tipos Grficos - Legibilidade, Revista
Ideografia, So Paulo, (02/ 04/ 1986).
154
SHUSHAN, Ronnie e WRIGHT, Don.
Desktop Publishing by Design -
Everyone's Guide to Pagemaker 5.
Washington: Microsoft Press, 1994.
SIMES, Edda Q . e TIEDEMANN, Klaus
B. Psicologia da Percepo. IN:
RAPPAPORT, C.R. Temas Bsicos de
Psicologia. v. 10-II. So Paulo: EPU,
1985.
SOUZA, Marcos Gouva e NEMER, Artur.
Marca e Distribuio: desenvolvendo
dominao estratgica e vantagem
competitiva no mercado global. So
Paulo: Makron Books, 1993.
VEJA. O Apelo Visual. Veja, So Paulo,
p.100-101, 5 out.1994.
____. Anis batem a cruz. Veja, So Paulo,
a.29, n.20, p.103, 15 mai. 1996.
155
WHELAN, Bride. Color Harmony 2 - A
Guide to Creative Color Combination.
Massachusetts: Rockport Publishers,
1994.
WINDOWS STYLE GUIDE, The Windows
interface guidelines A guide for
designing software, USA, 1995, Microsoft
Corporation.
NIELSEN, Jakob. (site)http:/ / www.sun.com
/ columns/ alertbox/ 9605.html
http:/ / www.useit.com (1996).




156

S r i e: Gui a d e
Est i l o s pa r a We b
2 v er s o 20 0 0