Guia de Estilos para WEB

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