Fernando Antonio Dal Piero Recife – PE 16 de dezembro de 1997 V i t ó r i a – ES 02 de setembro de 2000
Série: Guia de Estilos para W e b 2ª versão 2000
Série: Guia de Estilos para Web 2ª versão 2000
Guia de Estilos para W e b 2 ª versão 2000 ®Dal
Piero
Assessoria
em
Estratégia
&
Posicionamento & Professor Dal Piero, Fernando Antonio. Conteúdo técnico:
Equipe de implantação:
Fernando A. Dal Piero Fernando A. Dal Piero Fabrizzio B. Dal Piero Fabrizzio B. Dal Piero
Capa: Figura representativa da faixa de raios i n f r a v e r m e l h o s e ul t r a v i o l e t a a l c a n ç a d a p e l a vista humana (700 nm para infravermelhos e 400 nm para ultravioleta).
Fabrizzio B. Dal Piero
4
Sobre os autores Fernando Antonio Dal Piero é professor de Sistemas de Informação, Geopolítica e Jogos de Empresas em várias Universidades brasileiras. Fabrizzio B. Dal Piero é escritor de instruções militares com artigos publicados em Internet em todo o mundo.
Editoração: Fabrizzio B. Dal Piero Fernando A. Dal Piero Revisão: Alina da Silva Bonella Consultoria de serviços. ®Dal Piero Assessoria em Estratégia & Posicionamento Telefone: (27) 337 25 81 FAX: (27) 347 1510 e-mail: fpiero@zaz.com.br dpiero@zaz.com.br
5
Agradecimentos Os autores desejam, agradecer de maneira especial aos artistas que inspiraram muitas das observações e recomendações que estão transcritas nesta obra. Agradecemos também à industria de software e hardware que nos mantiveram atualizados com relação a programas e equipamentos. Por fim, agradecemos à Vanessa Correa, da Editco Comercial Ltda. (iEditora), que se dispôs a comercializar esta obra.
6
Sumário Apresentação _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 0 Considerações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 3 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 6 Hierarquia d e Informação
_________ 22
Foco e Ênfase _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 2 5 Estrutura e Equilíbrio
_____________ 27
Relacionamento d e Elementos
_____ 31
U n i d a d e e Integração _ _ _ _ _ _ _ _ _ _ _ _ _ _ 3 2 Observações importantes sobre hierarquia da informação _ _ _ _ _ _ _ _ _ _ 3 4 Cor
_________________________________ 37
Considerações sobre a cor _ _ _ _ _ _ _ _ _ _ 4 0 Branco _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Preto _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Cinza _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Vermelho _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Amarelo _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Verde_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Azul _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Violáceas _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Laranja _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Marrom, ocre e terras _ _ _ _ _ _ _ _ _ _ _ _ _
53 54 55 55 57 59 60 61 62 63
7
Percepção e Efeitos da Cor _ _ _ _ _ _ _ _ _ 6 4 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 6 4
Observações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 6 8 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 6 9
Observações importantes _ _ _ _ _ _ _ _ _ _ _ 7 7 Fundo ______________________________ 80 Considerações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8 0 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8 1
Observações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8 3 Fontes _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8 4 Considerações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8 4 Esquema de Fontes _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 9 6 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 9 6
Observações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 0 0 Texto
______________________________ 102
Considerações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 0 2 Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 0 3
Observações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 0 4 Ícones
_____________________________ 107
Exemplos de Ícones
_______________ 120
Considerações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 2 4
8
Recomendações _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 2 5
Observações
_______________________ 131
Como utilizar esta obra
___________ 134
Glossário _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1 3 5 Referências bibliográficas
________ 139
9
Apresentação O uso comercial da Internet hoje é uma alternativa real e economicamente viável. Cada vez mais as empresas, instituições e pessoas apresentam os seus produtos por meio da exposição em sites e páginas WEB. N o e n t a n t o, q u a n d o f a z e m o s t a l o p ç ã o , é preciso encarar o fato de que até hoje não existia um guia de estudos sobre como compor páginas para a Internet. O presente trabalho visa a atender a essa demanda, qual seja, permitir aos criadores e gestores dos m e i o s d e c o m un i c a ç ã o , e s p e c i a l m e n t e d e páginas Web, tomarem conhecimento dos princípios
que
lhes
permitirão
criar
ambientes gráficos, amigáveis e agradáveis de se ver e “navegar”. Oferece-se um roteiro
para
que
cada
apresentador/expositor possa, se o seguir,
10
assegurar
que
o
usuário/assistente
interativo terá o entendimento perfeito da proposta do site ou página, seja comercial ou
destinado
à
Educação
a
Distância
(EAD). Portanto, a função deste guia é reunir a informação pertinente ao tema de natureza d o c u m e n t á r i a qu e t a m b é m s e r á d i s t r i b u í d o em formato de slides para palestra/curso com duração de duas horas. Ao todo, apresentamos, em uma linguagem clara e concisa, perto de uma centena de sugestões e recomendações, que proporcionam a quem p r e t e n d e i n i c i a r- s e n a a r t e de c o m p o r o u “reengenharizar” sites e páginas na WEB todas as bases necessárias para começar a trabalhar.
11
A terminologia contida neste documento procura
seguir
sempre
a
orientação
científica, no entanto reconhecemos que, e m d e t e r m i n a d o s m o m e n t o s , a s m á x i m as da ciência não são suficientes para lidar com fenômenos
associados
à
transição
de
paradigmas e, então, escrevemos baseados nos
resultados
de
vários
anos
de
observações. Ratificamos o compromisso, como já vimos fazendo, de manter o ritmo de atualização e disseminação deste conteúdo de maneira suficientemente
ilustrada
e
rica
em
sugestões práticas.
Fernando Antonio Dal Piero
12
Considerações O projeto visual de uma página na Web é uma
ferramenta
importante
para
a
c o m u n i c a ç ã o h u m a n a . E s s e t i p o d e p r o j e t o, por empregar a visão, um dos principais sentidos
humanos,
como
meio
de
estabelecer a compreensão e a percepção, permite contemplar, observar, reconhecer, visualizar, examinar, ler, admirar e mirar, isso só para mencionar alguns dos seus atributos. Devemos
ressaltar,
ainda,
o
caráter
universal da informação visual, pois é um meio natural, que não se necessita aprender. Não precisamos ser visualmente cultos para emitir ou entender imagens visuais. Essas capacidades são intrínsecas aos seres vivos
13
h u m a n o s. O o l h o é t a m b é m c a p a z d e informar a distância, a direção e a forma dos
objetos.
Entretanto,
ainda
que
o
processo de ver requeira pouca energia, a maneira pela qual nós enxergamos e aquilo que vemos influencia como sentimos e também o que entendemos. N o s tempos modernos, como a comunicação é muito rápida, surge a necessidade de r e c u p e r a r a s f o r m a s p r é - verbais e visuais da comunicação,
enfatizando
o
uso
dos
recursos, que podem expressar funções e operações.
Também
por
isso
cresce
a
i m p o r t â n c i a d e s e d i s p o r organizadamente a informação numa página, especialmente na WEB. A sua disposição pode fazer a diferença entre comunicar uma mensagem ou
deixar
o
usuário/leitor
perplexo
e
sobrecarregado. Não bastasse, no caso da
14
Internet, até mesmo a funcionalidade da página pode ser afetada, se ela não tiver uma apresentação bem projetada. De maneira geral podemos dizer que um b o m l a y o u t depende do contexto em que está inserido e cumpre uma proposta maior do que decorativa, pois todos os elementos v i s u a i s i n f l u e n c i a m un s a o s o u t r o s . S e n d o assim, deve-se privilegiar o uso da estética, dos ícones e das letras, já que a informação v i s u a l c o m u n i c a d e m o d o n ã o - verbal e, para isso pode incluir sinais emocionais que motivem, dirijam ou distraiam.
15
Recomendações Segundo muitos autores, a percepção e o poder de organizar a informação visual depende
de
necessidades
mecanismos e
naturais,
propensões
do
das
sistema
nervoso humano, tanto quanto de fatores técnicos. No que toca aos fatores técnicos, para uso em Internet, uma recomendação que deve ser observada é no que diz r e s p e i t o a o s f r a m e s . Use f r a m e s com cuidado. O uso de frames pode ajudar a orientar o usuário a navegar no site, mas cuidado com o momento da impressão para não criar facilidades que permitam imprimir o frame e r r a d o. P o r o u t r o l a d o , d e v e - s e c o n s i d e r a r que os seres humanos organizam o que lêem e o que pensam sobre uma informação, agrupando-a
espacialmente.
Isto
é:
16
enxergamos como pensamos. O todo é percebido de maneira distinta da soma das características de seus componentes. Uma pessoa, quando completa uma figura, não está apenas adivinhando por inferência de experiência passada, mas realmente vê a figura completa. Um exemplo pode ser visto quando nos lembramos da figura de pontos em círculo. Os
oito
pontos
(não
ilustrados
neste
trabalho) são percebidos como um círculo e não como dois quadrados entrecortados. Da mesma forma, podemos ver nas figuras a seguir
exemplos
dos
fenômenos
de
percepção de “fechamento e agrupamento”.
17
P r o x i m i d a d e S i m i l a r i d a d e C o n t i n u i d ade F e c h a m e n t o Á r e a S i m e t r i a
Assim, para facilitar, na construção de mensagens visuais, deve-se agrupar cada item de informação em poucas categorias. No máximo sete (Mullet e Sano, 1995). Precisa-se ainda considerar que o processo de
ver
é
simples.
Os
mecanismos
fisiológicos são automáticos no sistema nervoso humano, como se pode constatar da descrição sucinta apresentada por Arnheim para o processo visual.
18
Segundo
Arnheim
(1995)
ver
é
essencialmente um meio de orientação p r á t i c a e p o d e s e r r e s u m i d o a s sim: 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 cérebro em forma de imagens e cores.
Fig. 2 esquema da retina onde se Fig. 1 olho humano: corte longitudinal
desencadeia o processo de visibilidade cromática
Farina (1990, p.14) diz que conhecer as propriedades da visão é de fundamental importância aos que se valem da imagem
19
para
transmitir
mensagens.
Todo
o
conhecimento humano relativo a formas e cores é adquirido pela visão. Vale, então, mencionar que a visão é sempre atraída por elementos coloridos antes dos elementos em preto e branco e por desenhos antes do texto. Portanto, se desejamos atrair a atenção, devemos usar cores e ícones em lugar de textos. Por outro lado, ao se usar textos, deve-se s e m p r e r e s p e i t a r a s c o n v e n ç õ e s d e layout de leitura da informação. Em países ocidentais isso significa dispor os textos da esquerda para a direita e de cima para
baixo.
As
informações
mais
importantes devem estar localizadas no canto superior esquerdo (OSF/Motif, 1990). Mas a tenção: quando a informação é posicionada verticalmente, os links devem
20
estar
alinhados
por
suas
extremidades
esquerdas, em países ocidentais (Schriver, 1997). Isso facilita a compreensão da informação pelo usuário. Além disso, para todos que pretendem projetar a organização e a composição de elementos visuais em páginas na Web, recomenda-se
respeitar
os
seguintes
princípios: hierarquia de informação, foco e ênfase, estrutura e equilíb rio, relação de unidade de integração e elementos, todos temas que dos quais passamos a seguir a descrever os princípios e a importância.
21
Hierarquia de Informação Esse princípio diz respeito à disposição da informação, no caso, dentro de uma página n a We b, baseada em sua importância relativa com
os
outros
elementos
visuais.
O
resultado dessa disposição afeta todos os outros
princípios
de
organização
e
composição de um layout e determina que informação o usuário vê e o que ele é e n c o r a j a d o a f a z e r p r i m e i r o . Para utilizar esse princípio, responda a estas perguntas: •
Qual
informação
é
mais
importante para o usuário? (Em outras palavras, quais são as prioridades
de
um
usuário
quando encontrar o site?). •
O que o usuário quer ou precisa ver
em
primeiro,
s e g un d o ,
22
terceiro
lugares
e
assim
por
diante? (O que o usuário vê primeiro deve corresponder à sua prioridade). Nesse
sentido,
os
autores
Meyers
&
Reynolds, tanto quanto Sant'ana, relacionam o conceito de idéias e imagem na memória e afirmam que uma combinação de estímulos pode
produzir
outras
idéias
e
assim
sucessivamente, de tal maneira que se pode prender a atenção de uma pessoa por longos períodos de tempo. Os autores citam quatro leis básicas para a associação de idéias, que teriam sido estabelecidas pelo s gregos: a) c o n t i g ü i d a d e ,
quando
representada
pela
existente
duas
entre
a
idéia
é
proximidade imagens.
Por
e x e m p l o , m a r- n a v i o , p e n a - p á s s a r o ;
23
b) s u c e s s ã o : q u a n d o u m a i d é i a s e g u e outra.
Como
trovão-tempestade,
veneno-morte; c) contraste:
quando
as
idéias
são
a n t a g ô n i c a s . P o r e x e m p l o : a m o r- ó d i o ; d) s e m e l h a n ç a : q u a n d o d u a s o u m a i s i m a g e n s s e s u p e r p õ e m : g a d o - tigre-leão. Essas leis para associação de idéias podem ser aplicadas tanto na criação de peças publicitárias tradicionais (cartazes, peças para televisão ou rádio) como para a construção de páginas WEB.
24
Foco e Ênfase O princípio do foco e ênfase auxilia o usuário na colocação de itens prioritários. Determinar o foco envolve identificar a idéia central, ou o ponto focal do objeto (campo visual), no caso uma página na WEB. Para determinar a ênfase, escolhemse
os
elementos
que
devem
ser
proeminentes, isolando-os de outros ou fazendo com que eles se sobressaiam. Para facilitar
alcançar
esse
resultado,
consideramos que onde o usuário navega p r i m e i r o , p r o c u r a n d o p o r i n f o rmação, é uma importante sinalização de qual será o foco da sua navegação. Entretanto, as decisões do projeto de uma página na Web podem governar
esse
princípio.
Por
exemplo:
acreditamos que as pessoas de culturas ocidentais procuram, no canto superior
25
e s q uerdo da tela de um monitor de vídeo, as informações mais importantes. Aliás, todos os seres humanos inclinam-se para terem c o m o r e f e r ê n c i a p r i m á r i a a r e l a ç ã o v e r t i c a lhorizontal, pois diz respeito ao seu bemestar
e
equilíbrio.
Nesse
sentido,
consideramos extremamente importante o estudo
dos
interesses
e
dos
aspectos
culturais do público alvo para somente então idealizar uma página ou site na WEB.
26
Estrutura e Equilíbrio O equilíbrio em uma composição visual é uma
combinação
certa
de
potenciais
e l e m e n t o s d e todas as direções. O equilíbrio impõe a estabilidade pela anulação mútua de forças opostas. Quando existe equilíbrio, há ênfase à harmonia, caso contrário, sobressai uma sensação de desagrado. O princípio de estrutura
e
equilíbrio
é
um
dos
mais
i m p o r t a n t es de um projeto visual, perdendo apenas para o contraste. Sem uma estrutura que sirva de base e sem equilíbrio 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 equilíbrio torna u m a p á g i n a n a W e b mais difícil de ser entendida pelo usuário.
27
O equilíbrio pode ser obtido em uma composição de duas maneiras: simétrica ou assimétrica. O equilíbrio simétrico ocorre quando os e l e m e n t o s e s t ã o s i m e t r i c a m e n t e distribuídos em ambos os lados de um eixo imaginário fixado pela vista. É perfeitamente lógico e simples de se criar, mas, pode resultar estático e até aborrecido. A maioria das vezes carece de ação, e não sendo dinâmico, leva ao desinteresse severo e repousado. Já o equilíbrio assimétrico, considerado pelos gregos como um mau equilíbrio, é o b t i d o v a r i a n d o - se elementos e posições, de maneira que se equilibrem os pesos. Ainda que as múltiplas tensões provocadas pela inexistência
de
um
centro
definido
28
requei r a m
consideráveis
habilidades
do
designer, o resultado é mais cheio de graça, tem mais ação e resulta interessante e rico em variedades, sendo, portanto, um alvo a ser perseguido.
Contraste O contraste é a justaposição de elementos d e s i g u a i s q u e p e r m it e a t r a i r e r e t e r a atenção imediatamente. Aplicar com bons resultados
os
princípios
básicos
do
contraste requer tempo e prática. Podemos dizer que os principais recursos que o contraste
oferece
são
de
“peso”,
de
tamanho, de posição.
29
$
9
O uso mais comum do contraste é simplesmente aquele que estabelece diferenças de tamanho e to nalidades. , 99
Neste exemplo, vemos a maneira pela qual se pode fazer um título comum ficar bem especial, apenas variando a dimensão de uma letra. É uma utilização da técnica de contraste de tamanho.
Entretanto, expandindo-se o leque de gradações, introduzindo-se sombras reais de cinza num documento preto e branco, por exemplo, consegue-se a “mágica” de criar cores. Contraste de posição se obtém quando se dispõe 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 razão para isso.
30
Relacionamento de Elementos O princípio do relacionamento de elementos reforça
o
composição
anterior. seja
Para eficiente,
que
uma precisa
apresentar o predomínio de um ou mais elementos sobre o conjunto. Se todo o conjunto tiver o mesmo valor, a atenção será leve e dispersa. O destaque pode ser determinado pelo peso, tamanho, posição ou cor de um determinado elemento em relação aos demais. Por isso a colocação de um elemento visual pode ajudar a comunicar uma relação/conexão específica de uma página com o site da qual ela faz parte.
31
Unidade e Integração A unidade é verificada na composição quando não existem elementos discordantes, assegurando subordinação a um motivo principal. A unidade e a integração refletem como avaliar uma dada página na Web em r e l a ç ã o a o s i t e ao qual ela pertence. Quando uma página na Web é visualmente unificada com o site (endereço), o usuário acha mais fácil
navegar
porque
ela
oferece
um
ambiente consistente, previsível e permite a sensação de tudo ser um objeto único. Para implementar esse princípio, considere o seguinte: •
Como as diferentes páginas do site funcionam visualmente?
32
•
Como o projeto visual da página se
relaciona
com
as
outras
páginas do site ou de outros sites em que é usado?
33
Observações importantes sobre hierarquia da informação Quando se deseja priorizar ou mesmo hierarquizar uma informação alguns itens devem ser observados: 1.
uma página 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 página na Web;
34
3.
cuidado
com
espaçamento
e
o
tamanho,
o
a
colocação
da
informação para que o ambiente seja visualmente consistente e previsível; 4.
vale usar cores para agrupar assuntos correlatos;
5.
considere sempre que o início ou a b a s e d a t e l a s ã o o s m e l h o r e s locais para
mostrar
informação
sobre
orientações, as quais devem estar sempre visíveis; 6.
portanto,
“instale”
as
áreas
para
entrada de texto e resposta perto da base da tela. Pense que a maioria dos usuários não são exímios datilógrafos e precisam olhar para o teclado; 7.
da mesma forma, para minimizar o movimento dos olhos, o usuário deve sempre ser inquirido a responder em
35
uma área diretamente adjacente à questão; 8.
outras orientações para o usuário podem ser colocadas em áreas fixas ou m ó v e i s , o u a p r e s e n t a n d o - a s em menus p o p - u p s disponíveis sobre requisição do usuário ou do próprio erro;
9.
entretanto, use sempre o alinhamento adjacente para links que formam um grupo
de
opções
de
assuntos
exclusivos; 10. considere que o uso de texto deve ser o
mínimo,
suficiente
apenas para
comunicar a informação.
36
Cor A cor é ao mesmo tempo simples e complexa,
entretanto
sempre
é
uma
importante propriedade estética em uma página na Web. Nenhuma cor é vista do mesmo modo por duas pessoas. Significa “ c o i s a s d i f e r e n t e s ” p a r a p e s s o a s d i f e r entes em diferentes culturas. A cor é pessoal e universal, transmite mensagens repletas de infinitas variações. Cada cor tem numerosos significados associativos e simbólicos. “A cor
não
só
universalmente
tem
um
compartido
experiência ,
como
também,
informativo
independente,
significado através um através
da
valor dos
significados que descrevem simbolicamente” (Dondis, 1988; p. 69).
37
Além
do
significado
transmissível,
o
autor
cromático
cita
ainda
a
existência, de preferências de cor pessoais e subjetivas. Farina (1990) acrescenta que os costumes sociais, a cultura, são fatores que intervêm na escolha das cores (vestido de noiva branco, enxoval de menina rosa...). Por
outro
lado,
algumas
experiências
psicológicas têm provado que há uma reação f í s i c a d o i n d i v íd u o à c o r . O v e r m e l h o s e r á excitante; o azul, refrescante. A luz colorida seria capaz de estimular a circulação
sanguínea
e
agir
sobre
a
musculatura aumentando a sua força numa seqüência que vai do azul, passando pelo a m a r e l o e l a r a n j a , c u l m i n a n d o n o v e r melho. Importante ressaltar que o sistema de leitura
ocular
humano
é
estimulado
38
subliminarmente.
Por
exemplo:
nos
primeiros trinta segundos de exposição à cor, as pessoas sofrem a ação da cor em si; depois, as células oculares enviam nova mensagem ao cérebro, que passa a sofrer a influência da cor complementar. Assim, no caso dos hospitais que pintam paredes e tetos dos quartos em tons de azul, o efeito pretendido, após um tempo, passa a se inverter, justamente pela influência do laranja,
que
possui
vermelho
em
sua
composição e é acelerador da freqüência cardíaca. Sabemos que a cor não é necessária para a criação de mensagens visuais, mas é o elemento que tem mais afinidade com as emoções e por isso deve ser sempre usada na comunicação. Neste ponto, devemos enfatizar que o design em preto e branco
39
também permite “cores”, sendo até mesmo mais rico e desafiador, além de econômico.
Considerações sobre a cor Os estímulos que causam as sensações cromáticas estão divididos em dois grupos: o das cores-luz e o das cores-pigmento. C o r- luz, ou luz colorida, é a radiação luminosa visível que tem como síntese a d i t i v a a l u z b r a n c a . C o r- p i g m e n t o é a substância
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 denominação.
40
Um objeto é dito verde, então, 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
síntese
subtrativa. Explica- s e a v i s ã o c r o m á t i c a d o s s e r e s humanos da seguinte maneira: o espectro eletromagnético é um campo vastíssimo de ondas, das quais apenas algumas percebidas pelo olho humano. Se um objeto refletir todas as radiações luminosas que o atingem, essas radiações chegarão simultaneamente ao olho e o veremos como totalmente branco.
41
Quadro 1 – Figuras demonstrativas da estimulação e propriedades da luz e das cores
Demonstração do grau de estimulação dos diferentes cones sensíveis á luz monocromática.
As cores diametralmente opostas são complementares entre si. O triangulo assinalado representa as cores primárias da luz.
42
Síntese aditiva mostrando as doze cores-luz primárias e secundárias
Triângulo das cores de acordo com o sistema Munsell de cores.
43
As cores fundamentais ou primitivas são aquelas que compõem o espectro solar. Conforme a nomenclatura são elas: violeta, roxo,
azul,
verde,
amarelo,
laranja
e
vermelho. Cor geratriz ou primária é cada u m a d a s t rê s c o r e s i n d e c o m p o n í v e i s q u e , misturadas
em
proporções
variáveis,
produzem todas as luzes do espectro. Ainda que a cor não tenha existência m a t e r i a l , p o d e m o s u s á - la para identificar os elementos que devem atrair a atenção das pessoas.
Entretanto,
quando
usada
indiscriminadamente, a cor pode ter um efeito negativo ou de distração. Isso pode afetar não somente a reação do usuário em relação à página, mas também a produtividade, pois se torna difícil focalizar na tarefa (Windows, 1995).
44
Para extrair todo o potencial das cores e apresentá-las
em
um
monitor
de
computador, é necessário seguir algumas recomendações.
Ainda
que
estabelecer
regras gerais ou específicas para o uso da cor seja difícil, devido à diversidade de fatores que a influenciam, aqui, vamos tentar
responder
às
questões
mais
freqüentes dos projetistas e usuários de monitores
gráficos
de
computadores
coloridos, como: que cores eu devo usar? Quantas cores eu devo usar? Essas cores são a p r o p r i a d a s ? C o m o e u p o s s o m e l h o r á - las? Como já vimos, cada cor tem numerosos significados associativos e simbólicos. Até a classe social a que o indivíduo pertence pode determinar sua preferência. Há uma tendência para as cores vibrantes, como
45
o
vermelho,
nas
classes
menos
favorecidas; enquanto a camada social m a i s e l e v a d a i n c l i n a-s e p a r a o s t o n s suaves. Também as épocas do ano e as estações geográficas são fatores a ser considerados para o estabelecimento de relações entre os seres humanos e as cores. Devemos citar, ainda, os experimentos psíquicos
realizados
por
Hermann
Rorschach. Esses experimentos levam à conclusão
de
que
indivíduos
alegres
r e s p o n d e m i n t u i t i v a m e n t e à c o r ; enquanto a
reação
de
pessoas
deprimidas
é
geralmente voltada à forma. A preferência pela cor geralmente denuncia i n d i v í d u o s c o m m a i s ab e r t u r a a e s t í m u l o s exteriores; é privilégio das pessoas sensíveis,
46
que se deixam influenciar, e que estão propensas à desorganização e oscilações e m o c i o n a i s . A s r e a ç õ e s à forma indicam, ao contrário, o temperamento frio,controlado, introspectivo (Farina, 1990, p. 104). Um
outro
psicólogo
chamado
Ernest
Schachtel completa concluindo que, ao reagir à cor, o indivíduo sofre a ação do objeto – é uma atitude passiva. Quando “percebe” a forma, ao contrário, ele tem de examinar o objeto, definir sua estrutura, e l a b o r a r u m a r e s p o s t a – é uma atitude ativa. Pesquisas semelhantes citadas por Arnheim (1995,p. 325-326) concluíram que cores e objetos
podem
produzir
cérebro.
Por
exemplo,
conflitos ao
no
serem
apresentados a crianças um quadrado azul e um
círculo
vermel h o ,
quando
foi
perguntado se um quadrado vermelho era mais parecido com o quadrado ou com o
47
círculo, a maioria delas fazia a sua escolha com base na forma. E essa tendência aumentava com a idade. As crianças pré-escolares eram dirigidas pela forte atração perceptiva das cores. Mas, à medida que a cultura começa a treinar as crianças nas habilidades práticas, 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 identificação.
48
Quadro 2. Conflitos entre forma e cor
Conflito no cérebro O lado direito do seu cérebro tenta dizer a cor, mas o lado esquerdo insiste em ler a palavra.
Merece ser exposta, ainda, a pesquisa realizada pelo psicólogo Bamz (citado por Farina, 1990, p. 105), que alia a preferência dos indivíduos por determinada cor ao fator idade.
49
Segundo
esse
estudo,
o
vermelho
corresponderia ao período de 1 a 10 anos (efervescência, espontaneidade); o laranja, de 10 a 20 anos (imaginação, excitação, aventura); o amarelo, de 20 a 30 anos (força, potência, arrogância); o verde, de 30 a 40 anos (diminuição do fogo juvenil); o azul, de 4 0 a 5 0 a n o s ( p e n s a m e n t o , i n t e l i g ê n c i a ) ; o lilás, de 50 a 60 anos (juízo, misticismo, lei); o roxo, além dos 60 anos (sabedoria, experiência e benevolência). Diante de tantas variações, concluímos que não é possível estabelecer critérios rígidos p a r a o u s o da cor. Portanto, o estudo da cor e da sua influência é de fundamental importância quando da criação de uma composição, seja para um site, um logotipo ou uma peça publicitária, porque as cores têm
uma
ação
estimulante
sobre
os
50
indivíduos e são eficientes em reter a sua atenção, evocam sentimentos e sensações, provocam diferentes associações de idéias ou estados de espírito (Sant'anna, 1989). Segundo Farina (1990; p. 101), além de atuarem sobre a emotividade humana, as c o r e s p r o d u z e m s e n s a ç ã o d e m o v i m e n t o, uma dinâmica envolvente e compulsiva. “Vemos o amarelo transbordar de seus limites
espaciais
com
uma
tal
força
expansiva que parece invadir os espaços circundantes; o vermelho, embora agressivo, equilibra - s e s o b r e s i m e s m o ; o a z u l c r i a a sensação
do
vazio,
de
distância,
de
profundidade.” Há, também, sensações relacionadas com as cores quentes e frias. As cores quentes proporcionam
uma
sensação
de
51
proximidade, calor, densidade, opacidade, secura, além de serem estimulantes. Já as cores
frias,
transparentes,
parecem úmidas,
d i s tantes, aéreas
leves, e
são
calmantes. As cores, enfim, “constituem estímulos psicológicos para a sensibilidade humana, influindo no indivíduo, para gostar ou não de algo, para negar ou afirmar, para se abster ou agir” (Farina, 1990; p. 112). Desde a Antigüidade, o homem tem dado um significado psicológico às cores, e desde então
não
ocorreram
diferenças
de
interpretação significativas (Dondis, 1988). Passaremos,
portanto,
ao
estudo
dos
significados psicológicos das principais cores e também das sensações acromáticas
52
brancas, pretas e cinza, segundo Farina (1990) e Pedrosa (1982).
Branco Do ponto de vista físico, o branco é a soma das cores. Psicologicamente, é a ausência delas. Simboliza a luz. Para os ocidentais, simboliza a vida e o bem; para os orientais, é a morte, o fim, o nada. Associação material: batismo, casamento, cisne, lírio, primeira comunhão, neve, nuvens em tempo claro, areia clara. Associação afetiva: ordem, simplicidade, limpeza, bem, pensamento, o t i m i s m o , p a z , p u r e za, inocência, modéstia, infância,
alma,
harmonia,
estabilidade,
divindade.
53
Preto Indica a privação ou ausência de luz. O preto absoluto não existe na natureza. O preto encontra sua maior força em oposição ao branco. Nas artes gráficas, tem emprego indispensável como elemento de contraste para ressaltar os matizes. As cores puras, contornadas
com
preto,
ganham
em
luminosidade e vibração. Quando é misturado às cores claras, cria tonalidades
desagradáveis,
interpretação Associação
sujas,
psicológica material:
sujeira,
de
negativa. sombra,
enterro, noite, carvão, fumaça, morto, fim, coisas escondidas. Associação afetiva: mal, miséria, pessimismo, tristeza, desgraça, dor, temor,
negação,
melancolia,
angústia,
54
intriga,
mistério,
suspense,
seriedade,
nobreza.
Cinza É cor neutra por excelência. Simboliza a posição intermediária entre a luz e a sombra. Não interfere nas cores em geral. Associação material: pó, chuva, neblina, máquinas, mar sob tempestade. Associação afetiva: tédio, tristeza, decadência, velhice, desânimo, seriedade, sabedoria, passado, finura, pena, aborrecimento.
Vermelho É cor primária tanto em luz quanto em pigmento. É a mais saturada das cores, sendo, portanto, a que mais se destaca visualmente
e
a
mais
rapidamente
55
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 vários tons de marrom. O escurecimento sem perda de luminosidade é obtido pela mistura d a p ú r p u r a , v i o l e t a o u a z u l . É a ú n ic a c o r que não pode ser clareada sem perder suas características
essenciais.
Clareado
em
mistura com o amarelo, produz o laranja e, dessaturado pela mistura com o branco, produz o rosa. Sua aparência mais bela e enérgica é conseguida quando aplicado sobre fundo preto, funcionando como área luminosa. Sobre o branco, torna-se escuro e terroso. Associação material: rubi, cereja, sinal de parada, perigo, vida, sol, fogo, sangue, lábios,
mulher,
feridas,
conquista,
56
masculinidade. dinamismo,
Associação força,
movimento, glória,
energia,
coragem,
intensidade,
paixão,
calor,
afetiva: revolta, esplendor,
vulgaridade,
violência,
vigor,
excitação,
ira,
interdição, emoção, ação, agressividade, extroversão.
Amarelo Em
c o r- p i g m e n t o ,
primárias,
tendo
é por
uma
das
cores
complementar
o
v i o l e t a . E m c o r- l u z , é s e c u n d á r i a ( m i s t u r a 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 excelência. Misturado ao vermelho, exalta-se produzindo o laranja. Misturado ao azul, esfria - s e e p r o d u z o v e r d e . E s c u r e c i d o c o m
57
preto, adquire coloração esverdeada pouco a g r a d á v e l , p r ó x i m a d o v e r d e - oliva sombrio. Clareado com branco, não perde suas qualidades intrínsecas. Sobre fundo branco, é pouco visível; já sobre o preto, ganha força e vibração. Em contraste com o cinza, se enriquece em qualidade cromática e beleza.
Amplo
e
ofuscante,
é
a
mais
desconcertante das cores, transbordando dos limites, parecendo sempre maior do que é, devido à sua característica expansiva. Associação material: ouro, fruto maduro, sol, flores grandes, terra argilosa, palha, luz, topázio, verão, limão chinês, calor de luz solar. Associação afetiva: iluminação, conforto, alerta, gozo, ciúme, orgulho, e s p e r a n ç a , i d e a l i s m o, egoísmo, inveja, ódio, adolescência, espontaneidade, variabilidade, euforia, originalidade, expectativa.
58
Verde É cor primária em luz, complementar do magenta. Em pigmento, é secundária, sendo a complementar do vermelho. É o ponto ideal de equilíbrio da m i s t u r a d o a m a r e l o com o azul – duas cores opostas, uma quente outra fria, uma clara outra escura, uma expande-se outra se contrai. Surge, então um repouso feito de tensões. É a cor mais calma. A passividade é o caráter 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-limão. Dessaturado com branco, ganha em luminosidade. Associação material:
umidade,
frescor,
primavera,
bosque, águas claras, folh a g e m , m a r , v e r ã o ,
59
planície,
natureza.
Associação
afetiva:
esperança, saúde, tranqüilidade, segurança, natureza,
equilíbrio,
liberdade,
ciúme,
suavidade, firmeza, juventude.
Azul É p r i m á r i a t a n t o e m c o r- luz quanto em corp i g m e n t o . N a s l u z e s , s u a c o m p l e m e n t ar é o amarelo; em pigmento, é o laranja. Por ser a mais escura das cores primárias, o azul tem analogia com o preto. Todas as cores que se m i s t u r a m c o m o a z u l e s f r i a m - se, por ser ele a mais fria das cores. Associação material: frio, mar, céu, gelo, feminil i d a d e , á g u a s tranqüilas, Associação
montanhas afetiva:
longínquas.
infinito,
nobreza,
pureza, espaço, verdade, sentido, afeto, intelectualidade, paz, meditação, confiança, fidelidade, sentimento profundo.
60
Violáceas É o nome genérico de todas as cores resultantes da mistura do vermelho com o a z u l . C h a m a - se violeta, ou roxo, o ponto de equilíbrio óptico da mescla dessas duas cores. Em pigmento, é cor secundária 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 freqüência e o menor comprimento de onda. Quando rebaixado com preto, torna-se desagradável e sujo. Escurecido com azul, esfria - s e , o f e r e c e n d o p o s s i b i l i d a d e s t o n a i s de extrema riqueza cromática. Dessaturado com branco, forma a extensa gama dos lilases, tonalidades de extrema luminosidade e beleza. A mais importante cor violácea é o
61
púrpura,
a
mistura
óptica
de
2/3
de
vermelho com 1/3 de azul. Associação material: vidência,
noite,
igreja,
agressão,
aurora, furto,
sonho, miséria.
Associação afetiva: temperança, lucidez, saudade, ciúme, melancolia, fé, dignidade, poder, riqueza, engano, calma, autocontrole, violência, mistério, delicadeza.
Laranja Quando produzido por luzes coloridas, é terciária (2/3 de vermelho e 1/3 de verde). Em pigmento, é cor secundária, 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 são. Quando rebaixado com
62
p r e t o , t o r n a - se sujo. Misturado ao vermelho, consegue-se
um
escurecimento
tonal
relativo, surge um vermelho alaranjado. C l a r e a d o c o m a m a r e l o , i l u m i n a - se, ganha em vibração,
mas
perde
a
consistência.
Dessaturado com o branco, ganha em luminosidade. Associação material: outono, l a r a n j a , f o g o , p ô r- d o - sol, luz, chama, calor, festa,
perigo,
aurora,
raios
solares.
Associação afetiva: força, luminosidade, dureza,
euforia,
energia,
alegria,
advertência, tentação, prazer, senso de humor.
Marrom, ocre e terras Não existem como luzes coloridas. Em pigmento, são resultantes da mistura de amarelo e preto ou amarelo, vermelho e preto. Associação material: terra, lama,
63
outono, doença, sensualidade, desconforto. Associação
afetiva:
pesar,
melancolia,
resistência, penitência, traição, humildade.
Percepção e Efeitos da Cor Recomendações Por tudo o que estudamos, recomenda-se que as cores de uma página na Web não sejam selecionadas separadamente e sim, dentro de um contexto geral que privilegie também a visibilidade. (Robertson, 1993). Farina (1990) cita alguns contrastes interessantes para uma fácil visibilidade: o preto sobre amarelo o verde ou azul; o vermelho sobre amarelo ou branco; o
64
branco sobre azul ou preto; e o amarelo sobre o preto. Vale lembrar que o estudo desses contrastes é ainda mais importante para a correta utilização de caracteres. As combinações mais visíveis são citadas por Ribeiro (1993): l e t r a s p r e t a s s o b r e f u n d o b r a n c o ; letras vermelhas
sobre
fu n d o
branco;
letras
a m a r e l a s s o b r e f u n d o p r e t o ; letras brancas sobre fundo azul; letras vermelhas sobre fundo preto; letras brancas sobre fundo v e r m e l h o ; letras azuis sobre fundo branco. Segundo o autor, o grau de legibilidade das l e t r a s c o l o r i d a s s o b r e fu n d o s d e c o r s e r á mais ou menos acentuado dependendo do tipo de letra. “Em geral, uma letra escura sobre um fundo claro é legível de mais longe do que o inverso e se utilizarmos uma cor clara em fundo escuro, a letra tem de
65
s e r m a i s f o r t e , p o r q u e a c o r e s cura do fundo absorve a cor clara da letra” (Ribeiro, 1993; p. 192). Ainda sobre combinações de cores, Farina (1990) considera de pouca visibilidade as d u p l a s a z u l- v e r d e e v e r d e - vermelho, que, além de ineficazes podem até irritar a sensibilidade óptica. O branco-preto tem visibilidade
média,
comparado
com
o
amarelo - p r e t o . O autor também cita a importância de se considerar o tamanho do tipo para a aplicação de uma cor mais leve ou mais pesada. Dessa forma, as cores escuras em tipos sobre fundos também escuros, mas diferentes, resultam praticamente ilegíveis qualquer que seja o tamanho do tipo. “As c o r e s c l a r a s d e v e m c o l o c a r- s e e m t i p o s n ã o muito pequenos, especialmente se o fundo
66
for vermelho, verde ou roxo. O cinza geralmente
não
apresenta
muita
visibilid a d e ” ( F a r i n a , 1 9 9 0 ; p . 3 7 ) . É fato que algumas limitações podem ser contornadas. Por exemplo, no caso de páginas na WEB, a aparência de uma janela pode ser alterada quando outras janelas são abertas
na
mesma
tela.
Entretanto,
re c o m e n d a - s e s e m p r e q u e s e j a m respeitadas as diferenças culturais e fisiológicas entre os indivíduos (Robertson, 1993). Considere-se, ainda, que as pessoas idosas têm 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
67
desbotada do que uma grande área da mesma cor. E v i t e o u s o d o a z u l e d o vermelho,
simultaneamente
(Robertson,
1993). C o n s i d e r e a i n d a q u e o a z u l e o v e r m elho têm diferentes profundidades de foco e, para o olho humano, o processo para encontrar o foco correto é fatigante.
Observações 1 . Quando cores do espectro amplamente separadas, como o vermelho e o azul, são
apresentadas
na
tela,
elas
aparentarão estarem em diferentes planos de profundidade (Robertson, 1993). 2. Recomenda-se que as cores sejam selecionadas
em
diferentes
iluminações, ou seja, com a presença
68
de luz fluorescente, incandescente e à luz do dia (Robertson, 1993).
Recomendações a) As cores que você usar devem satisfazer à s p r o p o s t a s d a p á g i n a n a Web (Windows, 1995). As
cores
não
devem
indiscriminadamente,
ser
usadas
somente
como
elemento decorativo. Recomenda-se o uso de um grupo limitado de cores, dando ao usuário a opção de mudá-las (Windows, 1 9 9 5 ) . Desse modo as páginas de um mesmo site estarão mais propensas a terem um “padrão” consistente. Atenção: quando se for permitir que o usuário mude as cores de uma página na Web, é preciso considerar a complexidade da
69
tarefa e a habilidade média do “públi co” usuário (Windows, 1995). Portanto, permita sempre que o conjunto de cores-padrão possa ser recuperável e restabelecido para que o usuário não se perca na realização da tarefa devido ao uso indiscriminado da cor (ISO 9241-8). b) Use
a
cor
informação
como
uma
adicional
ou
forma
de
aumentada.
(Windows, 1995). Evite confiar na cor como o único meio de expressar um valor ou uma função particular. c) Use cor para realçar ao invés de usar sublinhado (e use sublinhado ao invés de i t e n s p i s c a n d o ) ( N i e l s e n , 1 9 9 6). Restrinja o uso do sublinhado para links evitando assim confundir o usuário.
70
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 difíceis de focalizar. S e f o r u s a d o um fundo colorido, selecione as cores do texto de modo a obter o contraste mais f o r t e e n t r e o t e x t o e o f u n d o . Isso aumenta a visibilidade e a legibilidade do texto. e) Não use várias cores em uma única página. Isso distrai a atenção do usuário e causa a perda de foco na atividade principal. f) S o b r e u m f u n d o e s c u r o , r e c o m e n d a - 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 sensação do verde é o
71
p o n t o m a i s a l t o d e s e n s i b i lidade do olho humano (Pedrosa 1982). g) Considere que a forma, a localização e os rótulos de texto são outras maneiras de distinguir a informação (Windows, 1995) A cor não deve ser o principal elemento para esse fim. h) Recomenda-se o uso mnemônico da cor (Robertson, 1993) que é empregado respeitando os estereótipos para criar fortes
associações
que
ajudam
no
reconhecimento, na lembrança e no tempo de busca. i) Use cores brilhantes e contrastantes com cautela.
Esses
elementos
atraem
a
a t e n ç ã o d o u s u á r i o e o seu emprego deve ser reservado para áreas importantes; caso contrário, o usuário pode achar
72
mais difícil saber para onde olhar e ficar confuso. j) Use cores monocromáticas para o texto, sempre. As cores monocromáticas são m a i s n í t i d a s a u m e n t a n d o a l e g ibilidade 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) E v i t e á r e a s p i s c a n d o . Q u a n d o i s s o f o r realmente necessário, lembre-se de não usar mais que uma área piscando ao mesmo tempo. m) No que diz respeito à cor é melhor ser conservador.
Recomenda-se
usar
o
máximo de cinco cores. Para usuários novatos o uso de quatro cores distintas é
73
mais
apropriado.
Esta
quantidade
permite espaço extra na memória de curta duração. n) Não use simultaneamente alto croma e cores que estejam muito distantes no espectro solar. Para relações figura figura e muitas figura -fundo, fortes contrastes
de
azul/amarelo,
vermelho/verde, verde/azul
e
vermelho/azul criam vibrações, ilusões de sombras e imagens posteriores. o) Use um código de cores consistente e familiar, com referências apropriadas. As denotações comuns no ocidente são as seguintes: Vermelho: pare,
Amarelo: cuidado,
perigo, quente, fogo;
devagar, teste;
Verde: ande, OK, livre,
Azul: frio, água,
vegetação, segurança;
calmo, céu;
74
Cores quentes: ação, resposta requerida, proximidade; cores frias: status, informação de fundo, distância; 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. Não use uma cor particular para um elemento que não esteja relacionado com outro elemento. p) Use o mesmo código de cores para treinamento,
teste,
aplicação
e
publicação. Uma vez estabelecido o código de cores, as mesmas cores devem ser usadas por todo o ciclo de vida de disseminação e geração de conhecimento.
75
Por outro lado, lembre- s e d e q u e o m o n i t o r do computador usa misturas aditivas de cores, e que a soma das cores gera o branco. Por isso, deve-se sempre usar um código redundante de forma e cor. Essa abordagem auxilia os usuários com deficiência em visualizar cores, pois a forma é a variável visual mais fácil de ser reconhecida. q) Use a c o r p a r a a u m e n t a r a i n f o r m a ç ã o mostrada em preto e branco. No
que
concerne
ao
aprendizado
e
compreensão, a cor é superior ao preto e branco
em
termos
do
tempo
de
processamento e de reações emocionais, mas não há diferença na habilidade em interpretar a informação. A cor é mais apreciável e a memória para informação colorida também parece ser superior do que aquela em preto e branco. Entretanto,
76
recomenda-se projetar primeiramente em preto e branco e, então, adicionar a cor. A cor aumenta o processamento cognitivo e visual de uma informação que funciona bem em preto e branco, pois ajuda a localizar, classificar e associar imagens.
Observações importantes Ao mesmo tempo em que você pode usar cor para mostrar relação ou agrupamento, a s s o c i a r u m a c o r a u m s ignificado particular não é sempre óbvio ou fácil de aprender. 1. Cores monocromáticas parecem ser mais
nítidas
do
que
as
cores
policromáticas. (Robertson, 1993). 2. As pessoas gostam de displays coloridos (Guimarães, 1997).
77
3 . Cor é uma propriedade muito subjetiva e o que é agradável para você pode ser desagradável para outro (Windows, 1995). 4. A interpretação da cor pode variar culturalmente, e, até mesmo em uma única cultura, as associações individuais podem diferir (Windows, 1995). 5. Aproximadamente 8% dos homens e 0,5% das mulheres têm deficiência em visualizar cores. A mais freqüente é 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 v e r m e l h o e v e r d e , p o d e m t o r n a r- s e difíceis para o olho focalizar.
78
8. Cores escuras tendem a retroceder o espaço visual, enquanto que cores claras fazem o espaço visual vir para frente. 9. Para evitar problemas com usuários com visão deficiente em cores, as cores como vermelho e verde devem ter luminâncias suficientemente diferentes. 1 0 . Cores de fundo ou adjacentes afetam a sombra ou a luminância percebida de uma cor particular.
79
Fundo O f u n d o d e u m a p á g i n a n a W e b é composto por padrões de texturas e/ou cores. A textura pode ser percebida tanto pelo tato quanto pela visão, mas é possível que uma textura não tenha nenhuma qualidade tátil, somente ótica, como é o caso dos desenhos, por exemplo. Já quando há uma textura real, coexistem ambas as sensações. A maior p a r t e da nossa experiência com as texturas é visual.
Considerações A maioria dessas texturas que vemos não está realmente ali. “Se tocamos a fotografia de
um
sedoso
veludo
não
temos
a
convincente experiência tátil que nos foi prometida pela visão. O significado se
80
baseia no que vemos” 71).
Por
isso,
a
(Dondis, 1988, p. escolha
do
fundo
desempenha um papel muito importante no resultado final de uma composição. Ele pode aumentar o interesse pelo projeto visual. No caso de páginas em WEB, para q u e e s s e f u n d o s e j a ha r m o n i o s o , e l e d e v e seguir as recomendações e observações sobre cores.
Recomendações Recomenda-se usar cores neutras para o f u n d o d e u m a p á g i n a n a W e b . (ISO 9241-8). Cores
neutras,
usadas
para
fundos,
aumentam a legibilidade do texto. 1. Não use fundo muito “carregado” (Kristof e Satran, 1995). Isso faz com que sua página fique demorada para carregar.
81
2. Não use cores muito escuras para fundo de toda a página (Kristof e Satran, 1995). Em pequenas áreas, elas ajudam a direcionar a atenção do usuário, mas em toda a página elas aumentam o cansaço visual. 3. Não utilize elementos aleatórios como f u n d o d e u m a p á g i n a n a W e b (Kristof e Satran, 1995). O elemento de fundo da página deve aumentar o entendimento do seu conteúdo. 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.
82
Observações 1. Utilize fundo simples para não comprometer a compreensão da página, a legibilidade do texto e o tempo para ser carregada. 2 . O fundo não deve chamar mais atenção do que a informação. 3. Use figura (texto, ícones e figuras) cromática (azul, verde, vermelho, e outras)
sobre
fundo
acromático
(branco, preto e cinza) e vice- versa (ISO 9241-8).
83
Fontes Fontes vestem palavras. E palavras vestem idéias. As fontes podem fazer pelas idéias o que as roupas fazem pelas pessoas. Não é somente o chapéu, gravata, terno ou vestido que você veste. É o jeito como você veste. É a a d e q u a ç ã o a v o c ê e à o c a s i ã o q u e f a z em a diferença. E assim é com as fontes.
Considerações “Uma biblioteca de fontes é uma espécie de g u a r d a - roupa com alternativas para diversas ocasiões “(Shushan e Wright, 1994, p. 28). As fontes têm muitas funções de modo a p r o p i c i a r f o r m a s d e l e t r a s p a r a a leitura. Assim como outros elementos visuais, as fontes organizam a informação ou criam uma disposição particular.
84
É verdade que a grande maioria dos leitores não é conhecedora, nem foi informada a respeito do uso de fontes. Mas é errado supor que eles n ã o i r ã o r e s p o n d e r a o u s o adequado delas (Shushan e Wright, 1994). Há diversos sistemas de classificação dos tipos. E eles são baseados geralmente nas suas origens cronológicas e geográficas ao invés do seu caráter visual. Como é esse caráter das fontes que realmente afeta o leitor, e não a sua história, citaremos apenas um desses sistemas de classificação, a classificação geral proposta pelo gráfico francês Francis Thibaudeau e descrita por Ribeiro (1993). Essa classificação é baseada na presença, ou não, e nas características das serifas, linhas ou curvas que se projetam das extremidades de um tipo.
85
Thibaudeau agrupou as fontes, então, em quatro grandes famílias, denominando-as: Bastão, Egipciana, Elzevir e Didot. Dentro de cada família, há diversas variações. Diferente terminologia é apresentada por Collaro (1987) para a mesma classificação de Thibaudeau. O autor descreve as famílias como Lapidária, Egípcia, Romana Antiga e Romana Moderna, respectivamente. Fontes d o t i p o B a s t ã o n ã o p o s s u e m s e r i f a s e s ã o as mais simples e legíveis. Mas, em grandes volumes de textos, a falta de contraste entre as hastes as torna cansativas. A
família
Egipciana
tem
uma
base
notadamente retangular que lhe empresta equilíbrio e estabilidade. Destaca-se pela uniformidade
dos
traços,
e
a
86
predominância do preto sobre o branco em sua construção. As
fontes
Elzevir
possuem
a
base
triangular e distribuição perfeita de traços
finos
e
grossos,
o
que
os
caracteres muito legível e elegante. A família
Didot
é
caracterizada
pelo
exagero de traços finos e grossos em sua construção, que proporcionam beleza e d i s t i n ç ã o . A e s s e c o n t r a s t e j u n t a -se uma serifa de traço fino. Embora de leitura agradável, tem aspecto frágil. Os tipos que primam pelo novo, pelo diferente e que fogem a essa cla ssificação, misturando elementos de mais de uma família ou mesmo não possuindo relação com nenhuma, podem ser chamados de Fantasia.
87
Variando o tamanho e o peso de uma fonte, vemos um texto como sendo mais ou menos importante e, também, percebemos a ordem em que ele deve ser lido. Segundo Brady (1988), ao escolher uma fonte, deve-se considerar a legibilidade e o caráter. Legibilidade está relacionada com a velocidade com que cada letra ou uma combinação delas pode ser reconhecida. U m a f o n t e p o d e s e r e x t re m a m e n t e l e g í v e l quando isolada, mas sua aplicação errada com relação a tamanho, espaçamento de entrelinhas, contraste com o fundo, entre o u t r a s a ç õ e s , p o d e t o r n á - la de difícil leitura. Sant'anna (1989) cita cinco fatores que influenciam na legibilidade:
88
simplicidade: quanto mais simples (menos decorativo) um caracter, mais legível será; dimensões: letras pequenas demais são c a n s a t i v a s e g r a n d e s d e m a i s c a u s a m m a lestar. Existe um tamanho adequado para cada aplicação. Em um título de cartaz publicitário, p o r e x e m p l o , o s c a r a c t e r e s devem ser suficientemente grandes para chamar a atenção, e pequenos para que sejam lidos sem esforço; f o r ç a : para que haja legibilidade, deve haver uma relação harmônica 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 também são prejudicados, só que pelo excesso de fundo;
89
orientação:
quanto
mais
oblíquos
os
c a r a c t e r e s , m e n o r a s u a l e g i b il i d a d e , o q u e talvez seja devido à nossa maior experiência com os caracteres orientados verticalmente; harmonia: uma composição deve primar por um estilo único. Não é aconselhável misturar muitos estilos de fontes. Brady (1988; p. 6) cita outros fatores relacionados
com
a
legibilidade
dos
caracteres. “Nós estamos condicionados a ler mais facilmente letras minúsculas com traços moderadamente grossos e finos e com
serifas”.
[...]
Palavras
em
letras
maiúsculas, tipos góticos, tipos sem serifa, e t e x t o s e m it á l i c o t e n d e m a s e r m e n o s legíveis”. Os estudos atribuem às serifas a capacidade de guiar o olho de uma letra à
90
seguinte. Mas, por outro lado, também concluem que as letras sem serifas são mais fáceis de ler tanto em tamanhos muito g r a n d e s q u a n t o m u i t o p e q uenos”. É difícil elaborar qualquer regra rígida e inalterável, porque a legibilidade é afetada não somente pelo estilo da fonte, mas por inúmeros fatores, inclusive, a qualidade do papel e a resolução do monitor. Brady (1988) ressalta que, quando combinados, tipos diversos devem realmente parecer diferentes. “Se duas fontes são tão similares que o leitor n ã o p o d e d i s t i n g u i - 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 à atenção, o melhor
não
é
escolher
fontes
muito
elaboradas.
91
As fontes tipo fantasia, segundo o autor, são
de
difícil
leitura
e
geralmente
as
palavras não podem ser escritas todas em maiúsculas. Para dar ênfase à deter minada fonte, o método mais comum é o seu uso em tamanho grande. Mas o tamanho não é o único modo de criar ênfase e nem sempre o mais correto. Deve-se considerar o uso da cor,
das
formas
itálico
e
negrito,
de
minúsculas ou maiúsculas, do espaçamento entre letras, da posição na composição e, inclusive, do espaço em branco à sua volta. O c o n t r a s t e , e n f i m , é o f a t o r-chave para que determinado elemento tipográfico tenha ênfase. Em uma página, uma linha que está em minúsculas, saltará aos olhos se as d e m a i s e s tiverem em maiúsculas. Uma fonte comum destaca-se entre outras em itálico. Até mesmo um azul acinzentado ofusca um
92
vermelho brilhante se for único. Quanto ao caráter das fontes, Brady (1988) afirma que ele é definido pelo desenho das letras e r e f e r e - s e à p ersonalidade ou humor que elas projetam. Por isso, é fundamental, em termos de publicidade, saber que imagem o cliente quer projetar de seu produto ou serviço e quem é o público que deve ser atingido (velhos, jovens, executivos, donasde-casa...). Certos caracteres dão a impressão de positivos, ponderados, racionais. Outros, pelo contrário, dão uma impressão de rigidez, peso. Existem ainda aqueles de natureza maleável, fluida, flexível, leve, persuasiva, podem ir até o ponto de evocar a alegria e frivolid a d e . Q u a l q u e r q u e s e j a a opção
é
necessário
que
a
família
de
caracteres escolhida para compor um texto
93
não só corresponda à natureza do texto, mas
ainda
favoreça
a
expressão
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 utilização na composição e, também de interpretações individuais.
A
adequação
do
estilo
à
mensagem, porém, não precisa ser levada ao extremo. Qualidades como antigüidade e tradição não são 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 não há regra que diga que devam ser usadas fontes floridas p a r a p e rfumes. “Um exemplo clássico de um bem-sucedido
uso
tipográfico
do
que
94
pareceria um tipo não apropriado é o rótulo do Chanel nº5: com sua fonte sem serifa tem sido a marca da elegância há cinqüenta 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 projeção de uma “imagem consistente” da companhia ou do produto através de cada elemento gráfico que atinge o público. Assim, todo design deve ser guiado pela mesma filosofia, então cada novo item reforça as mensagens anteriores. Pela
própria
natureza
e
diponibilidade
tecnológica dos monitores existentes, as fontes são geralmente menos legíveis nesses veículos do que qua n d o i m p r e s s a s . P o r i s s o
95
vale
seguir
ou
criar
recomendações
específicas para uso em páginas WEB que serão
exibidas
nas
telas
de
TV
e
computador.
Esquema de Fontes Recomendações 1.
Recomenda-se o uso de fontes com serifa. Estudos mostram um pequeno aumento de legibilidade quando são utilizados fontes com serifa.
2.
Limite o número de fontes e estilos em uma mesma página. (Robertson, 1993). Use o máximo de duas fontes (por exemplo, A r i a l e T i m e s N e w R o m a n ) , duas inclinações (romano e itálico),
96
d o i s p e s o s ( r e g u l a r e negrito), e quatro tamanhos (título principal, subtítulo, texto e nota de rodapé) (Marcus, 1992 Mullet e Sano, 1995). 3.
Não é recomendado o uso de fontes muito grandes (Nielsen, 1996). O uso de fontes muito grandes dá ao usuário a impressão 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
são
mais
legíveis
e
compreensíveis. (Guimarães, 1997). 4.
Recomenda-se que a seleção da fonte seja feita de acordo com o tipo de documento a ser executado (Marcus, 1992).
97
Tipos
com
apropriados
serifa para
são
mais
documentos
formais. Para literatura em geral, podem ser utilizados os tipos sem serifa, Helvética ou Arial. 5.
Use, sempre, o sistema-padrão de f o n t e s p a ra e l e m e n t o s c o m u n s d o site(Windows, 1995).
O uso de um sistema padrão torna a interface mais consistente, gerando uma padronização. 6.
De preferência, use o conjunto de f o n t e s - p a d r ã o d o s e u b r o w s e r e ajuste a fonte da sua página de acordo com ele. Isso evita que sua página na Web apresente problemas cada vez que o usuário alterar o browser.
98
7.
Em
terminais
de
vídeo
de
baixa
resolução, recomenda-se o uso de fontes sem serifa e com estilo regular. Nesse caso, o uso da serifa deve ser evitado,
pois
ela
pode
não
ser
visualizada. 8.
R e c o m e n d a - se deixar um espaço antes e depois da palavra para aumentar a visibilidade do vídeo reverso. (Robertson, 1993). Tal procedimento aumenta a visibilidade da palavra.
9.
Recomenda-se o uso do itálico para atrair a atenção do usuário. O uso do itálico desperta a atenção do usuário e não 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 atenção do usuário. O usuário
99
precisa de paz para a ler as informações.
Observações a)
As fontes podem ser usadas para realçar uma página na Web da mesma maneira que a cor (Robertson, 1993).
b) O s l e i t o r e s p r e f e r e m a f o n t e a q u a l eles estão mais acostumados a ler (Marcus, 1992). c)
As fontes com serifa são mais apropriadas para documentos formais (Marcus, 1992).
d) U m a o r g a n i z a ç ã o c l a r a e r e g u l a r d e tipografia na página aumenta a legibilidade e a leiturabilidade (Marcus, 1992).
100
e)
De preferência, use caixa baixa ou c a i x a m i s t a ( c a i x a a l t a e b a i x a ) do que caixa alta (Marcus, 1992).
f)
Usar muitas fontes normalmente resulta em poluição visual (Marcus, 1992).
g)
Fontes de diferentes famílias (por exemplo, Times New Roman e Arial) de um mesmo estilo (com ou sem serifa) não devem ser misturadas em n e n h u m a c i r c unstância (Mullet e Sano, 1995).
101
Texto O texto é o resultado do agrupamento de letras de modo a formar palavras. Esse agrupamento pode ser feito por meio de um arranjo simétrico ou assimétrico.
Considerações O uso de tamanhos e tipos de fontes coerentes n o texto ajudam na compreensão e a p r e c i a ç ã o d e u m a p á g i n a n a W e b pelo leitor,
ou
seja,
na
legibilidade
e
na
leiturabilidade dessa página.
102
Recomendações Recomenda-se que os textos sejam escritos em uma fonte proporcional. Letras com larguras variáveis consomem menos espaço 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 legível do que um texto todo em caixaa lt a p o r q u e p o s s i b i l i t a a i d e n t i f i c a ç ã o d a forma, especialmente da metade superior da palavra. Não se deve usar o sublinhado para realçar o texto. O uso do sublinhado em um bloco contínuo de texto pode dificultar a leitura
103
da linha superior, além de confun dir o usuário. Recomenda-se evitar o uso do sublinhado para enfatizar títulos. Reserve o uso do sublinhado para links, que é o padrão adotado na Web. Evite
o
alinhamento
à
direita.
O
alinhamento do texto à direita é prejudicial à c o m p r e e n s ã o p e l o s l e i t o res inexperientes. Evite o uso de hífen. O uso de hífen reduz a velocidade de leitura tanto para leitores experientes
quanto
para
leitores
inexperientes.
Observações 1.
Itálico é útil para atrair a atenção do usuário sem causar quebras severas no ritmo de leitura (Robertson, 1993). 104
2.
Linhas curtas facilitam a leitura, pois elas reduzem o movimento excessivo dos olhos (Robertson, 1993).
3.
Letras legíveis têm normalmente 10 ou 12 pontos de tamanho para monitores com resolução de 800 por 600 pontos por polegada (dpi).
4.
O comprimento ótimo de uma linha para textos legíveis é de 10 a 12 palavras ou de 40 a 60 caracteres por linha.
5.
Uma organização clara e regular de fontes na página aumenta a legibilidade e leiturabilidade do texto (Marcus, 1992).
6.
É possível fazer tex t o s c o m a r r a n j o s simétricos e assimétricos, mas não se devem misturar tais arranjos dentro de uma página na Web.
105
7.
Considere sempre as limitações de softwares. Por exemplo, a versão HTML 3.2 não permite o alinhamento à direita.
106
Ícones Ícones,
índices
e
s ím b o l o s
são
freqüentemente utilizados em interfaces com
o
usuário.
Esses
elementos
proporcionam um guia funcional e estético para interfaces gráficas, por exemplo, uma homepage que utiliza centenas de ícones diferentes. Esses elementos pictográficos e i d e o g ráficos funcionam como um sistema de signos.
Estritamente
falando,
o
que
chamamos ícones são uma mistura de ícones, índices e símbolos. A noção de signo, segundo Rabaça e Barbosa (1987), é básica e essencial em qualquer
ciência
c o m u n i c a ção,
em
relacionada que
se
com
a
inclui
a
c o m u n i c a ç ã o n ã o - verbal, e por isso está em
107
constante
aprofundamento
e
questionamento. De acordo com Eco (1990), o signo é usado para transmitir uma informação. Ele insere- se num processo de comunicação do
tipo
f o n t e - e m i s s o r- c a n a l- m e n s a g e m -
destinatário. Uma mensagem pode ser (e quase sempre é) a organização complexa de muitos signos. Mas o signo não está inserido apenas em um processo de comunicação; ele entra num processo de significação. Saussure, antecipando e determinando t odas as definições posteriores, definiu signo como uma entidade de dupla face, uma relação entre significante e significado com base em um sistema de regras.
108
Saussure jamais definiu claramente o s i g n i f i c a d o , d e i x a n d o - o a meio caminho entre uma imagem mental, um conceito e uma realidade psicológica não circunscrita diversamente; em compensação, sublinhou e n e r g i c a m e n t e o f a t o d e o s i g n i f i c a d o ser algo relacionado à atividade mental dos indivíduos no seio da sociedade (Eco, 1976, p.0). Nesse
ponto,
é
mais
compreensível a
definição dada por Pierce segundo a qual signo é “tudo aquilo que, sob certos aspectos e em alguma medida, substitui alguma outra coisa, representando-a para alguém” Para ele, a relação de significação envolve três sujeitos: um signo, o seu objeto e o seu interpretante; jamais uma ação entre duplas. Outro
diferencial
saussuriana
é
que
quanto não
à
requer,
teoria como
condição necessária para a definição do signo,
que
este
seja
emitido
109
intencionalmente
e
produzido
a r t i f i c i a l m e n t e , c o m o p r o p un h a S a u s s u r e (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 alguém. 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 designação de interpretante (que não é o intérprete), e a coisa representada é conhecida pela designação de objeto. É fato que fatores pessoais limitam o número
de
percebidos
objetos em
que
determinado
podem
ser
momento.
Sensibilizam os mecanismos de percepção do indivíduo, fazendo com que este dê m a i o r o u m e n o r i m p o r t â n c i a a u m o bjeto ou
110
a aspectos deste. Podem, então, deformar as cognições desses objetos. É a chamada deformação seletiva – ou, como propõe Meyrs e Reynolds (1972), discriminação perceptiva em que emoções e desejos fazem com que o indivíduo selecione apenas alguns
aspectos
do
o b j e t o - estímulo,
desenvolvendo, é importante que se diga, inconscientemente, uma cognição distorcida da verdadeira. Gombrich (citado por Arnheim, 1995; p. 43) diz: “Quanto maior for a importância biológica que um objeto tem para nós, mais e s t a r e m o s a p t o s a r e c o n h e c ê - lo – e m a i s tolerante será, portanto nosso padrão de correspondência formal”. Posteriormente, o próprio autor exemplifica: “um homem que e s p e r a s u a n a m o r a d a n u m a e s q u i n a v ê - la - á em
quase
todas
as
mulheres
que
se
111
aproximam, e esta tira nia do traço da m e m ó r i a t o r n a r- s e - á m a i s f o r t e à m e d i d a que os minutos passam” (Arnheim, 1995; p. 43). A ciência que estuda as relações dos signos – códigos e mensagens – e entre signo e discurso, é a Semiótica, que se constitui uma parte da Psicologia social. Semiologia foi o termo criado pelo suíço Ferdinand Saussure para indicar a ciência geral dos signos. Posteriormente, o francês Roland Barthes inverte essa definição, entendendo todos os sistemas de signos como reportáveis às leis da
linguagem.
Afirmava,
então,
que
a
Lingüística não era uma parte, mesmo que privilegiada, da ciência geral dos signos. A Semiologia é que era parte da Lingüística. A
112
gramática pura determinaria o que deve ser verdadeiro quanto ao signo para que este possa veicular um sig nificado; o ramo da lógica que estudaria o que é verdadeiro em r e l a ç ã o a o s i g n o p a r a q u e p o s s a a p l i c a r- se a um objeto. E a retórica pura teria por objetivo estudar as leis pelas quais um signo dá origem a outro e um pensamento provoca outro (Coelho Netto, 1990). Outra divisão da Semiótica foi proposta por Morris e foi acolhida no domínio científico. Também é uma classificação segundo três aspectos: sintático, que procura as relações dos signos entre si, independentemente do que designam ou identificam; semântico, que leva em consideração os signos em relação com os objetos designados; e pragmático, os signos em relação com quem os utiliza.
113
A este trabalho interessa a compreensão da Semiótica como um todo e por isso vamos avançar estudando os três níveis principais de classificação para os signos, chamados tricotomias: em relação a si mesmos, em relação ao objeto e em relação ao interpretante. A segunda tricotomia é a mais conhecida e importante. É a que mais se utiliza no estudo da comunicação, principalmente comunicação visual. As demais serão citadas visando, conjunto
apenas, da
uma
teoria
compreensão
pierciana
do
exposta.
Embora as tricotomias tenham uma ordem determinada, deixaremos para analisar por último
essa
segunda
tricotomia
que
c o n s i d e r a m o s v á lida.
114
A primeira tricotomia diz respeito ao signo considerado em si mesmo. São espécies de signos segundo esta classificação: a) q u a l i s s i g n o : u m a q u a l i d a d e q u e é u m signo. Por exemplo, uma cor; b) s i n s i g n o : u m a c o i s a e x i s t e n t e , u m a c o n t e c i m e n t o r e a l . P o r e x emplo, um cata-vento.
Como
manifestar
por
qualidades,
só meio
envolve
um
pode
se
de
suas
ou
vários
qualissignos; c) legissigno: não é uma coisa ou evento singular,
determinada,
mas
uma
convenção ou lei estabelecida pelos homens. Por exemplo, as palavras. Todo legissigno requer sinsignos.
115
A terceira tricotomia considera o signo em relação ao interpretante, ou seja, relações pragmáticas de signo: a) r e m a :
para
o
seu
interpretante,
funciona como um signo de uma possibilidade que pode ou não se verificar. Por exe m p l o , u m a p a l a v r a isolada, como “vermelho”. b) d i c i s s i g n o o u d i c e n t e : é u m s i g n o d e uma existência real. Corresponde a um enunciado
e
envolve
exemplo,
“este
remas.
vermelho
Por está
manchado”. c) argumento: é um signo de razão, um s i g n o d e l e i . E n v o l v e a e s s ência de um juízo. Por exemplo, um silogismo do tipo “A é B, B é C, portanto, A é C”
116
(Coelho
Netto,
1990;
Rabaça
e
respeito
às
Barbosa, 1987). A
segunda
tricotomia
diz
relações entre o signo e o seu objeto e divide os signos em ícones, índices e símbolos. a) í c o n e :
quando
possui
alguma
semelhança ou analogia com o seu referente (o objeto representado). Um signo é icônico na medida em que possui a propriedade do seu denotado. Por exemplo, uma fotografia, uma estátua, um desenho e, sobretudo, uma i m a g e m m e n t a l; b) í n d i c e , í n d e x o u i n d i c a d o r : q u a n d o s e refere ao objeto em virtude de ser diretamente afetado por ele. É um
117
signo que tem uma conexão física com o objeto que indica. Por exemplo, um dedo apontado para um objeto, fumaça que é indício de fogo, um campo molhado é indicação de que choveu. Assim como também são índices os pronomes
demonstrativos,
as
impressões digitais, os nomes próprios e comuns na medida em que são usados para indicar um objeto; c) símbolo: quando a relação com o referente é arbitrária, um a associação de
idéias
convenção.
produzida É
por
marcado
uma pela
arbitrariedade. Por exemplo, qualquer das palavras de uma língua, a cruz, a suástica, as bandeiras, os sinais de trânsito (Coelho Netto, 1990; Rabaça e Barbosa, 1987).
118
P a r a s e r e n t e n d i d o , o símbolo não exige que seu receptor conheça o objeto a que se refere (o que ocorre com o índice – se não conheço o fogo não poderei saber o que a fumaça indica). É, portanto, um meio de conhecer coisas novas. Também,
ao
contrário
do
ícone,
o
conhecimento do símbolo não implica o conhecimento da coisa representada como ela é. Isso porque ele não tem ligações com a coisa significada, independe desta, o que faz com que não seja efêmero. Na realidade, dificilmente se pode constatar a ocorrência de um desses três tipos de signo em estado puro. Freqüentemente um ícone é também um índice, assim como um índice pode ser simbólico. “Cada signo pode
119
ser assumido como um índice e como um ícone ou como um símbolo, segundo as circunstâncias em que aparece e o uso sig n i f i c a t i v o a q u e s e d e s t i n a ” ( E c o , 1 9 9 0 ) .
EXEMPLOS DE ÍCONES Podemos ver nas figuras a seguir alguns exemplos de índices, ícones e símbolos. A título de exercício, procure relacionar cada imagem com a sua categoria “tricotômica” descrita no item sete desta obra.
Fig. 1 Ícones excelentes de aplicações comuns
120
Fig. 2 Ícones muito bons de aplicações comuns
F i g . 3 Hi s t o g r a m a d o s í c o n e s m a i s u s a d o s no Windows Vale lembrar que as três tricotomias, que podem ser combinadas em inúmeras classes de signos (legissigno indicial remático,
121
sinsigno dicente...), foram reunidas por Pierce em três categorias correspondentes, chamadas
primeiridade,
secundidade
e
terceiridade. A
primeiridade
refere-se ao nível do
sensível, do qualitativo. Abrange o ícone, o qualissi g n o e o r e m a . A secundidade diz respeito ao nível da experiência, da coisa ou do evento. Incluemse aí o índice, o sinsigno e o dicissigno. E, por fim, a terceiridade refere-se à mente, ao pensamento, à razão. É o caso do s í m b o l o , d o l e g i s s i g n o e d o a rg u m e n t o . Depois
de
compreendidas
todas
essas
c l a s s i f i c a ç õ e s , c h e g a - se a um outro conceito de signo desenvolvido posteriormente por Pierce. Um conceito mais complexo, porém
122
mais amplo. Nele, o signo é apresentado como um Primeiro (nível do sensível) que se coloca
numa
relação
triádica
com
um
Segundo, seu objeto (nível do evento), de modo a ser capaz de determinar que um Terceiro, seu interpretante (nível da razão), assuma a mesma relação triádica com seu objeto na qual ele próprio está em relação com o mesmo objeto. Essa proposta de Pierce
surge
como
restabelecedora
do
triângulo semiótico em sua totalidade, indo ao encontro de alguns pensadores que consideravam importante apenas o lado esquerdo do triângulo, excluíndo o nível do o b j e t o . O u t r a c o n c l u s ã o q u e se p o d e t i r a r dessa segunda posição de Pierce é que um signo é uma relação triádica completa e ordenada, portanto, nem tudo pode ser signo. “O signo não é um dos elementos do triângulo, uma de suas pontas, um dos
123
membros da relação. O signo é a reunião d a s três pontas, a relação toda e completa, a totalização dos três vértices do triângulo” (Coelho Netto, 1990; P. 66). Todos
esses
conceitos
l e v a m -n o s
a
concluir que é grande a importância dos símbolos,
ícones
e
índices
para
a
comunicação visual, especialmente na WEB.
Considerações Nenhum grupo de regras ou normas pode garantir que um ícone seja perfeitamente projetado,
mas
as
observações
e
recomendações citadas aqui podem ajudar nesta tarefa. Ícones são usados por toda a W e b p a r a r e p r e s e n t a r o b j e t o s o u t a r e f as. Em função de os ícones representarem os
124
o b j e t o s d e u m a p á g i n a n a W e b , é importante valorizar
aqueles
que
efetivamente
comuniquem as suas propostas.
Recomendações 1. Recomenda-se
projetar
os
ícones
criando esboços rápidos. Uma vez que o
conteúdo
semântico
tenha
sido
organizado, crie vários esboços que variem da abstração lógica à imagem concreta. Indique todos os elementos visuais, seu tamanho e sua localização aproximada. É importante não ser muito preciso ou detalhista no início do projeto; o mais im p o r t a n t e é e x p l o r a r t o d a s a s v a r i a ç õ e s possíveis. Avalie se os ícones vão ao encontro das necessidades do emissor, do receptor e do meio em que ele será usado.
125
2. Comece identificando a proposta do ícone e o seu uso. (Windows, 1995). Uma boa sugestão é fazer um brainstorming sobre possíveis idéias. Reconhecemos que freqüentemente é difícil projetar ícones que definam operações ou processos, ou seja, atividades que dependam dos verbos; por isso, recomenda-se o uso de substantivos. 3.
Recomenda-se o uso de metáforas do mundo
real.
reconhecimento,
Isso
facilita
o
identificação
e
associação do ícone por parte do usuário que pode usar a experiência e aprendizado prévio para interpretar o ícone. 4.
Classifique os ícones por estilos. Os estilos devem ser estabelecidos de modo que todos os ícones sejam
126
agrupados
por
uma
abordagem
consistente ou pela sua aparência. 5.
Recomenda-se que seja projetado um grid para organizar todos os elementos q u e c o m p õ e m o í c o n e . O u s o d o grid é importante para estabelecer padrões de
linhas
horizontais,
verticais
e
oblíquas além de um número limitado de tamanhos para os objetos que compõem o ícone. 6.
Use objetos grandes, linhas grossas e áreas simples para distinguir os ícones (Marcus, 1992). Uma vez selecionado o e s t i l o d a a p r e s e n t a ç ã o , c o n t i n ue a usar a mesma abordagem dentro de todo o conjunto de ícones. Evite que os elementos mais significativos do ícone sejam muito pequenos em comparação com o seu tamanho total (Marcus, 1992)
127
7.
Recomenda-se que o ícone tenha uma aparência
simplificada.
composto
de
muitas
Um
íc one
partes
pode
confundir o usuário. As diferenças visuais devem ser significativas sob o ponto de vista da comunicação. Não devemos
adicionar
elementos
decorativos sem necessidade, pois isso aumenta o tempo de processamento para
a
mente
possibilidade
humana de
e
cria
erros
a de
interpretação. 8.
Avalie
os
projetos
de
ícones
m o s t r a n d o - os para usuários potenciais. Quando
os
protótipos
estiverem
disponíveis, eles devem ser revisados e testados
por
usuários
típicos.
As
avaliações que podem afetar todos os aspectos do projeto do ícone devem ser repetidas.
128
9.
Recomenda-se ter precaução com o u s o d o a n t i- a l i a s i n g . A técnica chamada a n t i- a l i a s i n g envolve a adição de pontos coloridos
para
extremidades
suavizar
pontiagudas
de
as uma
figura gráfica. Entretanto, não use a n t i- a l i a s i n g s o b r e o l a d o d e f o r a d a extremidade de um ícone, pois os pontos contrastantes podem parecer irregulares ou dentados quando houver uma variação do fundo. 10. Use um estilo comum para todos os ícones.
Repita
as
características
comuns como o uso da mesma fonte de luz (canto superior esquerdo) e evite os contornos em preto; eles aumentam a poluição visual. 11. Recomenda-se
que
se
comece
a
projetar os ícones em preto e branco. Considere
a
cor
como
uma
129
propriedade adicional. Também teste as imagens em diferentes fundos, pois o usuário pode mudar o padrão de fundo do seu browser. 12. Recomenda-se o uso de cor com discrição. Para a criação de um ícone é suficiente o uso de cinco cores ou até menos, incluindo o preto, o branco e/ou o cinza. Muit a variação de cores distrai a atenção do usuário. 13. Recomenda-se o uso da paleta de 256 cores.
Isto
permite
ícones
com
aparência muito realística 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 país ou cultura
130
pode ter significados imprevistos em outro.
É
melhor
evitar
letras
ou
palavras, se possível, pois podem fazer c o m q u e o s desenhos sejam difíceis de aplicar em outras culturas.
Observações 1.
Os ícones e símbolos podem substituir a linguagem escrita e contribuir para que a s p á g i n a s n a W e b tenham compreensão internacional.
2.
Os espaços poupados em menus, mapas e diagramas com a utilização de ícones podem ser significante.
3.
Com uma boa seleção de ícones e símbolos mais informações podem ser colocadas dentro de uma determinada janela ou de um espaço na tela.
131
4.
Um ícone ocupa menos espaço do que o seu equivalente em palavras.
5.
Ícones
bem
concebidos,
sistematicamente
projetados
e
efetivamente organizados, devem ser fáceis e rápidos de reconhecer em um contexto visual complicado. 6.
Faça do ícone um documento reconhecível e representativo do conteúdo da sua página.
7.
Quando projetar ícones, faça como um conjunto, considerando o relacionamento de uns com os outros e com as tarefas dos usuários.
8.
Certifique- s e (tamanho)
de de
que
seus
as ícones
escalas sejam
consistentes com os outros objetos com os quais eles estão relacionados e que se encaixam bem dentro do site.
132
9.
Procure usar perspectiva e dimensão (luz e sombra) para melhor comunicar a representação do mundo real.
10. Recomenda-se a projeção de imagens, assumindo que a fonte de luz venha do canto superior esquerdo. 1 1 . Um estilo ilustrativo t e n d e a c o m u n i c a r conceitos metafóricos mais efetivamente que símbolos abstratos. 12. A grande vantagem que os ícones têm sobre as palavras é que eles podem ser alegres, inteligentes e ter apelo visual. 13. O reconhecimento e a memória do usuário são dois fatores importantes para ser considerado no projeto de ícones.
133
como utilizar esta obra Acreditamos
que
são
poucos
os
mandamentos em design e, assim, quase todas
as
regras
podem
e
devem
ser
quebradas. Recomendamos que a obra seja l i d a i n t e g r a l m e n t e , c a s o a p a re ç a m d ú v i d a s elas podem ser encaminhadas aos autores p o r m e i o d e m e n s a g e m e n v i a d a a o s e -mails: f p i e r o @ z a z . c o m . b r, d p i e r o @ z a z . c o m . b r, ou ainda por meio de carta endereçada à Rua Júlia Lacourt Penna, 325, Jardim Camburí, Vitória – ES, CEP 29090 210. Por
último,
faça
experiências.
Use
os
exemplos apresentados, assista às palestras do autor e aceite a premissa de que gênio é um por cento inspiração e 99 por cento transpiração.
134
Glossário Arranjo simétrico: composição que apresenta elementos semelhantes em ambas as metades. Caixa alta: letras maiúsculas. Caixa baixa: letras minúsculas. Conteúdo semântico: é compreendido como sendo o significado do termo “significado” (Marcus, 1992) Cores complementares: são as cores que se encontram
em
posições
opostas
no
círculo
cromático, por exemplo, o vermelho e o verde (Marcus, 1992) Cores monocromáticas: cores produzidas por um único canhão de elétrons (dispositivo emissor de luz usado nos monitores de vídeo). As cores policromáticas são produzidas por três canhões de elétrons diferentes (Red, Green e Blue). Cores neutras: são as cores que aumentam a visibilidade das outras cores, como os vários tons de cinza. Croma: saturação: pureza da cor dentro da escala do cinza, a variante mais viva da cor percebida.
135
Espectro solar: são as chamadas “cores do arcoíris” e seguem a ordem: Vermelho - Alaranjado Amarelo - Verde - Azul - Anil - Violeta F a d i g a v i s u a l : c a n s a ç o v i s u a l c a u s a d o p e l o n ú m e ro excessivo de elementos visuais ou cores em uma única página. Fonte com largura variável: fontes que possuem larguras diferentes para letras que apresentam larguras diferentes, por exemplo o “e” e o “i”. Fonte: conjunto das letras do alfabeto, números e sinais desenhadas de um modo característico. Fóvea: á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 fácil compreensão. Ex.: Um traço de tinta significando uma linha geométrica em uma ilustração 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 alguém entrou há pouco (Marcus, 1992)
136
Layout Organização espacial: diagramação de elementos visuais que compõem uma página na Web. Legibilidade: diz respeito à habilidade do leitor de encontrar, identificar, discriminar e absorver o texto com sucesso. Leiturabilidade: diz respeito à facilidade de interpretação e apelo do texto. Luminância = brilho = valor: quantidade relativa de claro ou escuro em uma escala do preto ao branco (também chamado de intensidade). Matiz = tom (Cor): composição do comprimento de onda espectral da cor que produz a percepção de ser azul, laranja, marrom e outras. É a variação qualitativa da cor. Memória de curta duração: também chamada de memória de trabalho, dura cerca de 20 segundos, e é capaz de armazenar cinco palavras ou formas, seis letras, sete cores e oito dígitos. Peso: quantidade de massa de uma fonte, por exemplo, uma fonte com estilo bold é pesada. Poluição visual: efeito causado pelo uso de um número excessivo de elementos visuais em uma única página na Web.
137
P o n t o : u n i d a de d e m e d i d a d a l e t r a . U m p o n t o equivale a 0,325 mm. Projeto Visual: organização espacial, diagramação de elementos visuais que fazem parte de um site completo. Serifa: traços que fazem o acabamento de uma letra (Schriver, 1997) Símbolo: um sinal que pode ser completamente arbitrário na sua aparência. Ex.: Uma bandeira para representar um país.
138
Referências bibliográficas ARNHEIM,
Rudolf.
Visual:
Arte
Uma
VisãoCriadora.
e
Percepção
Psicologia 9a
ed.
São
da Paulo:
Pioneira, 1995 BRADY,
Philip.
Using
TypeRi g h t .
Cincinnati: North Light Books, 1988. COELHO NETTO, J. Teixeira. Semiótica, Informação e Comunicação. 3a ed. São Paulo:
Perspectiva,
1990.
(Série
Debates) C O L L A R O , A n t o n i o C e l s o . Projeto Gráfico: Teoria e Prática da Diagramação. 2a ed. São Paulo: Sum m u s , 1 9 8 7 .
139
DONDIS, Donis A. La Sintaxis de la Imagen:
Introducción
al
Alfabeto
Visual. 7 a e d . B a r c e l o n a : G u s t a v o G i l i , 1988. ECO,
Humberto.
Tratado
Geral
de
Semiótica. São Paulo: Perspectiva, 1976. FARINA, Modesto. Psicodinâmica das Cores em Comunicação. 4a ed. São Paulo: Edgar Blücher, 1990. GUIMARÃES, Ergonomia
Lia
Buarque
cognitiva,
Macedo.
Conferência
p r o f e r i d a n o 8 o Congresso Brasileiro de Ergonomia, Florianópolis,
1997.
HURLBURT, Allen. Layout: O Design da Página Impressa. 2a ed. São Paulo: Nobel, 1986.
140
INTERNATIONAL ORGANIZATION FOR STANDARDIZATION,
Projeto
de
norma internacional, Requirements for d i s p l a y e d c o l o u r s - I S O 9 2 4 1 parte 8, final draft., Genebra, Suíça,1997. KRISTOF,
Ray;
SATRAN,
Amy.
Interactivity by design - Creating & communicating with new media , Indiana, USA, 1995, Macmillan, ISBN 1 - 56830221-5. MARCUS, Aaron. Graphic design for electronic
documents
interfaces,
New
York,
and
user
1992,
ACM
Press, ISBN 0-201-54364-8. MEYRS, James H. e REYNOLDS, William H.
Gerência
de
M a r k e t in g
e
Comportamento do Consumidor. Rio de Janeiro: Vozes, 1972.
141
MULLET,
Kevin
Designing
e
SANO,
visual
Darrell.
interfaces,
Communication oriented techniques, New Jersey, 1995, SunSoft Press, ISBN 01 3 303389-9. OSF/Motif
SYTLE
GUIDE.
Guia
de
estilos para interface com padrão OSF/Motif , Cambridge, USA, 1990, Open Software Foundation. RABAÇA, Carlos A. e BARBOSA, Gustavo G.
Dicionário
de Comunicação. São
Paulo: Ática, 1987. ROBERTSON, Douglas. (July 16, 1993) H C I R e p o r t. SANT'ANNA,
Armando.
Propaganda:
Teoria, Técnica e Prática. 4a ed. São Paulo: Pioneira, 1989. SCHRIVER,
Karen
A.
Dynamics
in
d o c u m e n t d e s i g n , USA, 1997, Jonh Wiley & Sons, ISBN 0-471-30636-3.
142
SHUSHAN,
Ronnie
e
WRIGHT,
Don.
Desktop Publishing by Design
—
Everyone's
5.
Guide
to
Pagemaker
Wash i n g t o n : M i c r o s o f t P r e s s , 1 9 9 4 . W I N D O W S S T Y L E G U I D E , The Windows interface
guidelines
-
A guide
for
designing software, USA, 1995, Microsoft Corporation.
143
BIBLIOGRAFIA ABIPEME.
Fundação
Getúlio
Vargas.
Centro de Estudos da Cultura e do C o n s u m o . S ã o P a u lo : FGV, 1991. ALCÂNTARA, Eurípides. Emoção pra valer! Veja, São Paulo, p. 64- 6 7 , 1 o s e t . 1 9 9 3 . AMANHÃ. Varig na cabeça. Porto Alegre, A m a n h ã , v . 1 0 , n . 1 0 6 , p . 1 - 20, abr.1996. Especial: As Marcas Campeãs. ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS, Rio de janeiro. Normas ABNT sobre documentação. Rio de Janeiro, 1978. AZEVEDO, Wilton. Os Signos do Design. São
Paulo:
Global,
1994. ( C o l e ç ã o
Contato Imediato).
144
BERLO,
David
K.
O
Processo
da
Comunicação: Introdução à Teoria e à P r á t i c a . S ã o P a u l o : M a r t i n s F o n tes, 1991. BLECHER, Nelson. Era da Globalização converte
marca
p a t r i m ô n i o bilionário.
Folha
em de
São
Paulo, São Paulo, 27 out.1994. Especial Top
of Mind, p.A-2.
_ _ _ . O m o b a t e C o c a - Cola no 'Top of Mind' 9 5 . Folha de São Paulo, São Paulo, 13 nov.1995. E s p e c i a l T o p o f M i n d , p . 2 . BORDENAVE, Juan D. e CARVALHO, Horácio
M.
Comunicação
e
Planejamento. 2a ed. Rio de Janeiro: Paz e Terra, 1987. BRANDÃO, Vladimir. O Poder das Marcas. Expressão, São Paulo, a.5, n.56, p.14-20, 1995.
145
CYBIS, Walter de Abreu. Er g o n o m i a d e interfaces
h o m e m -c o m p u t a d o r ,
Florianópolis, 1997, Apostila para o c u r s o d e P ó s - Graduação em Engenharia de Produção - Universidade Federal de Santa Catarina. COBRA,
Marcos.
Administração
de
M a r k e t i n g . 2 a e d i ç ã o . S ã o P a u l o : Atlas, 1 9 9 2 . C O E L H O N ETTO, J. Teixeira. Semiótica, Informação e Comunicação. 3a ed. São Paulo: Perspectiva, 1990. (Série Debates) COELHO, Teixeira. O que é Industria Cultural? 8a ed. São Paulo: Brasiliense, 1986. (Coleção Primeiros Passos) COSTA, Joan. Imagen Global: Evolució n del
Diseño
de
Identidad.
2a
ed.
Barcelona: CEAC, 1989.
146
EMERICH, Helcio. Valor secundário da embalagem. Folha de São Paulo, São Paulo, 12 set.1994. Dinheiro, p. 2- 5 . ___. No reino das fraudes. Folha de São Paulo,
São
Paulo,
1o
abr.
1996. Negócios, p. 5-7. EXAME.
Mais
brilho
na
maquiagem.
Exame, São Paulo, p.67- 68, 20 abr.1988. ___. Perfil Novo. Exame, São Paulo, p.111, 8 jul.1992. FARAH, Raphic J. Designers põe a boca no m u n d o . P u b l i s h , R i o d e Janeiro, a.6, n.22, p.64-68, jan./fev.1996. FERLAUTO,
Clá u d i o .
Uma
visão
da
l o g o t i p i a b r a s i l e i r a : 9 1 / 9 2 . A b i g r a f , São Paulo,
a.17,
n.141,
p.52- 5 4 ,
jul./ago.1992.
147
FERNANDES,
Fátima.
Com
50%
de
mercado, Consul já se tornou sinônimo de geladeira. Folha de São Paulo, São Paulo, 27 out.1994. E s p e c i a l T o p o f M i n d , p. A - 9 . FRANÇA,
Júnia
Lessa.
Manual
para
Normalização de Publicações Técnicocientíficas.
3a
ed.
Belo
Horizonte:
UFMG, 1996. FRANCO, Célia de Gouvêa. O milionário segredo das marcas. Folha de São Paulo, São Paulo, 31 mar.1996. Mais!, p. 5- 1 0 . GEISSBUHLER, Steff. 'Design global é tedioso' diz Geissbuhler. Folha de São Paulo, São Paulo, 27 fev.1996. Ilustrada, p. 5- 4 . GUILLAUME, Paul. Psicologia da Forma. 2a ed. São Paulo: Nacional, 1966. HOCHBERG, Julian E. Percepção. 3a ed. Rio de Janeiro: Zahar, 1982.
148
HORTON, William. T h e i c o n b o o k - Visual symbols
for
computer
systems
and
d o c u m e n t a t i o n , USA, 1994, Jonh Wiley & Sons, ISBN 0471599018. INSTITUTO GEOGRAFIA I B G E . Rio
BRASILEIRO E de
DE
ESTATÍSTICA Janeiro.
-
Censo
Demográfico de 1991. Rio de Janeiro, 1991. JANSSEN, Hugo. Una breve historia del l o g o t i p o . O r g y n , P M S I Bulgamor, Países 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. C o m u n i c a ç ã o , G e s t a l t e B e h a v i o r i s m o. IN: GUARESCHI, P.A. Comunicação e Controle Social.
Rio de Janeiro:
Vozes, 1991.
149
LESSA, Washington Dias. Dois Estudos de Comunicação Visual. Rio de Janeiro: UFRJ,
1995.
p.
61- 1 1 1 :
A
Marca
Figurativa. LUCCHESI, Cristiane. A moda do "Põe na Consul" e s t á d e v o l t a . F o l h a d e S ã o Paulo, São Paulo, 13 nov.1995. Especial Top of Mind, p.17. MARTINS, José S. O Poder da Imagem: o uso estratégico da imagem criando valor subjetivo para a marca. 4a ed. São Paulo: Makron Books, 1995. M A Y E R , M a r t i n . Afinal, o que a c o n t e c e u 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 Técnicos e Científicos, 1978.
150
MULLET,
Kevin
Designing
e
SANO,
visual
Darrell.
interfaces,
Communication oriented techniques, New Jersey, 1995, SunSoft Press, ISBN 01 3 303389-9. MURPHY, John e ROWE, Michael. C o m o Diseñar Marcas y Logotipos. 3a ed. Barcelona: Editorial Gustavo Gili, 1992. OSF/Motif
SYTLE
GUIDE.
Guia
de
estilos para interface com padrão PEDROSA,
Israel.
Da
Cor
à
Cor
Inexistente. Brasilia: UNB, 1982. PERISCINOTO, Alex. Etiqueta ou não, eis a questão. Folha de São Paulo, S ã o Paulo, 14 nov.1994. Dinheiro, p.2- 5 . PINTO, Ivan S. e TROIANO, Jaime C. Na e squina de Madison Av. e Wall Street. Mercado Global, São Paulo, n.89, p.4246, 1o trim.1993.
151
POLESI, Cassiano. Atitude. Revista da Criação, São Paulo, a. 2, n.13, p.12- 1 5 , mar.1996. RIBEIRO,
Milton.
Planejamento
Visual
Gráfico. 3a ed. Brasília: Linha, 1993. RICHARDSON, Roberto J. Pesquisa Social: M é t o d o s e T é c n i c a s . 2 a e d . São Paulo: Atlas, 1990. RICHERS, Raimar. Oito chaves de uma marca. Folha de São Paulo, São Paulo, 1 3 n o v . 1 9 9 5 . Especial Top of Mind, p.2. RIES, Al. As Leis Imutáveis do Marketing. Ex a m e , S ã o P a u l o , a . 2 8 , n . 5 9 6 , p . 7 1 72, 8 nov.1995. ROSENBAUM,
Alvin
(ed.).
U.S.A.
T r a d e m a r k s - Logos: Stationery Systems &
Corporate
Identity
-
A
Visual
Encyclopedia.
Tokyo:
Graphic-Sha
Publishing, 1994.
152
SALGADO, Eduardo. Resgate de marcas custa tempo e dinheiro. Amanhã, Porto A l e g r e , a . 9 , n . 9 0 , p . 2 4 - 27, nov.1994. SAMPSON, Peter. Novas tendências em imagem e pesquisa de marcas. Mercado Global, São Paulo, a.22, n.97, p.33- 4 3 , 1o trim.1995. SANT'ANNA,
Armando.
Propaganda:
Teoria, Técnica e Prática. 4a ed. São Paulo: Pioneira, 1989. SCALZO, Fernanda. MASP recebe acervo de design gráfico. Folha de São, São Paulo, 15 abr.1994. Ilustrada. p.5-7. SCHRIVER,
Karen
A.
Dynamics
in
d o c u m e n t d e s i g n , USA, 1997, Jonh Wiley & Sons, ISBN 0-471-30636-3. ----, Tipos Gr áficos - Legibilidade, Revista Ideografia, São Paulo, (02/04/1986).
153
SHUSHAN,
Ronnie
Desktop Everyone's
e
WRIGHT,
Publishing Guide
by
to
Don.
Design
-
Pagemaker
5.
Washington: Microsoft Press, 1994. SIMÕES, Edda Q . e TIEDEMANN, Klaus B.
Psicologia
da
Percepção.
IN:
RAPPAPORT, C.R. Temas Básicos de Psicologia. v. 10- II. São Paulo: EPU, 1985. SOUZA, Marcos Gouvêa e NEMER, Artur. Marca e Distribuição: desenvolvendo dominação
estratégica
e
vantagem
competitiva no mercado global. São Paulo: Makron Books, 1993. VEJA. O Apelo Visual. Veja, São Paulo, p.100- 1 0 1 , 5 o u t . 1 9 9 4 . ____. Anéis batem a cruz. Veja, São Paulo, a.29, n.20, p.103, 15 mai. 1996.
154
WHELAN, Bride. Color Harmony 2 - A Guide to Creative Color Combination. Massachusetts:
Rockport
Publishers,
1994. W I N D O W S S T Y L E G U I D E , The Windows interface guidelines – A guide for designing software, USA, 1995, Microsoft Corporation. NIELSEN, Jakob. ( s i t e ) h t t p : / / w w w . s u n . c o m /columns/alertbox/9605.html http://www.useit.com (1996).
155
Série: Guia de Estilos para W e b 2ª versão 2000
156