Comunicação visual pra web

7,075 views

Published on

muito bom esse livro

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,075
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
269
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Comunicação visual pra web

  1. 1. Universidade do Sul de Santa CatarinaComunicação Visual para Web Disciplina na modalidade a distância Palhoça UnisulVirtual 2007
  2. 2. ApresentaçãoParabéns, você está recebendo o livro didático da disciplina deComunicação Visual para Web.Este material didático foi construído especialmente para estecurso, levando em consideração o seu perfil e as necessidadesda sua formação. Como os materiais estarão, a cada novaversão, recebendo melhorias, pedimos que você encaminhe suassugestões sempre que achar oportuno via professor tutor oumonitor.Recomendamos, antes de você começar os seus estudos, queverifique as datas-chave e elabore o seu plano de estudo pessoal,garantindo assim a boa produtividade no curso.Lembre: você não está só nos seus estudos, conte com o SistemaTutorial da UnisulVirtual sempre que precisar de ajuda oualguma orientação.Desejamos que você tenha um excelente êxito neste curso!Equipe UnisulVirtual
  3. 3. Vera Niedersberg SchuhmacherComunicação Visual para Web Livro didático Design instrucional Flavia Lumi Matuzawa 3ª edição revista Palhoça UnisulVirtual 2007
  4. 4. Copyright © UnisulVirtual 2007Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição. 004.61 S41 Schuhmacher, Vera Niedersberg Comunicação visual para web I: livro didático / Vera Niedersberg Schuhmacher ; design instrucional Flavia Lumi Matuzawa, [Leandro Kingeski Pacheco]. – 3 ed. rev. Palhoça : UnisulVirtual, 2007. 296 p. : il. ; 28 cm. Inclui bibliografia. 1. Internet (Redes de computação). 2. Comunicação visual. I. Matuzawa, Flavia Lumi. II. Pacheco, Leandro Kingeski. III. Título.Ficha catalográfica elaborada pela Biblioteca Universitária da UnisulCréditosUnisul - Universidade do Sul de Santa CatarinaUnisulVirtual - Educação Superior a DistânciaCampus UnisulVirtual Bibliotecária Higor Ghisi Luciano Priscila Santos Alves Lamuniê SouzaRua João Pereira dos Santos, 303 Soraya Arruda Waltrick Pedro Paulo Alves Teixeira Liana PamplonaPalhoça - SC - 88130-475 Rafael Pessi Logística de Materiais Marcelo PereiraFone/fax: (48) 3279-1541 e Cerimonial de Formatura Vilson Martins Filho Jeferson Cassiano Almeida da Costa Marcos Alcides Medeiros Junior3279-1542 Jackson Schuelter Wiggers (coordenador) Maria Isabel AragonE-mail: cursovirtual@unisul.br Equipe Didático-Pedagógica Eduardo Kraus Olavo LajúsSite: www.virtual.unisul.br Coordenação dos Cursos Angelita Marçal Flores Priscilla Geovana Pagani Adriano Sérgio da Cunha Carmen Maria Cipriani Pandini Monitoria e Suporte Silvana Henrique SilvaReitor Unisul Aloísio José Rodrigues Caroline Batista Rafael da Cunha Lara (coordenador) Vilmar Isaurino VidalGerson Luiz Joner da Silveira Ana Luisa Mülbert Carolina Hoeller da Silva Boeing Adriana Silveira Ana Paula Reusing Pacheco Cristina Klipp de Oliveira Caroline Mendonça Secretária ExecutivaVice-Reitor e Pró-Reitor Cátia Melissa S. Rodrigues (Auxiliar) Daniela Erani Monteiro Will Dyego Rachadel Viviane Schalata MartinsAcadêmico Charles Cesconetto Dênia Falcão de Bittencourt Edison Rodrigo ValimSebastião Salésio Heerdt Diva Marília Flemming Enzo de Oliveira Moreira Francielle Arruda Tecnologia Itamar Pedro Bevilaqua Flávia Lumi Matuzawa Gabriela Malinverni Barbieri Osmar de Oliveira Braz JúniorChefe de gabinete da Reitoria Janete Elza Felisbino Karla Leonora Dahse Nunes Josiane Conceição Leal (coordenador)Fabian Martins de Castro Jucimara Roesler Leandro Kingeski Pacheco Maria Eugênia Ferreira Celeghin Ricardo Alexandre Bianchini Lilian Cristina Pettres (Auxiliar) Ligia Maria Soufen Tumolo Rachel Lopes C. Pinto Rodrigo de Barcelos MartinsPró-Reitor Administrativo Lauro José Ballock Márcia Loch Simone Andréa de CastilhoMarcus Vinícius Anátoles da Silva Luiz Guilherme Buchmann Patrícia Meneghel Tatiane SilvaFerreira Figueiredo Silvana Denise Guimarães Vinícius Maycot Serafim Edição – Livro Didático Luiz Otávio Botelho Lento Tade-Ane de AmorimCampus Sul Marcelo Cavalcanti Vanessa de Andrade Manuel Produção Industrial e Suporte Professora ConteudistaDiretor: Valter Alves Schmitz Neto Mauri Luiz Heerdt Vanessa Francine Corrêa Arthur Emmanuel F. Silveira Vera Niedersberg SchuhmacherDiretora adjunta: Alexandra Orsoni Mauro Faccioni Filho Viviane Bastos (coordenador) Michelle Denise Durieux Lopes Destri Viviani Poyer Francisco Asp Design InstrucionalCampus Norte Moacir Heerdt Flavia Lumi MatuzawaDiretor: Ailton Nazareno Soares Nélio Herzmann Gerência de Relacionamento Projetos Corporativos Leandro Kingeski PachecoDiretora adjunta: Cibele Schuelter Onei Tadeu Dutra com o Mercado Diane Dal Mago Patrícia Alberton Walter Félix Cardoso Júnior Vanderlei Brasil Projeto Gráfico e CapaCampus UnisulVirtual Patrícia Pozza Equipe UnisulVirtualDiretor: João Vianney Raulino Jacó Brüning Logística de Encontros Secretaria de Ensino a DistânciaDiretora adjunta: Jucimara Roesler Rose Clér E. Beche Presenciais Karine Augusta Zanoni Diagramação Marcia Luz de Oliveira (secretária de ensino) Rafael Pessi Design Gráfico (Coordenadora) Ana Luísa MittelztattEquipe UnisulVirtual Cristiano Neri Gonçalves Ribeiro Aracelli Araldi Ana Paula Pereira Revisão (coordenador) Graciele Marinês Lindenmayr Djeime Sammer Bortolotti RevisareAdministração Adriana Ferreira dos Santos Guilherme M. B. Pereira Carla Cristina SbardellaRenato André Luz Alex Sandro Xavier José Carlos Teixeira Franciele da Silva BruchadoValmir Venício Inácio Evandro Guedes Machado Letícia Cristina Barbosa Grasiela Martins Fernando Roberto Dias Zimmermann Kênia Alexandra Costa Hermann James Marcel Silva Ribeiro
  5. 5. SumárioApresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 03Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11UNIDADE 1 – Psicologia da comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15UNIDADE 2 – Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41UNIDADE 3 – Etapas do processo de Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67UNIDADE 4 – Por que usabilidade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85UNIDADE 5 – Avaliando a usabilidade de Websites . . . . . . . . . . . . . . . . . . . . . . . . . . .111UNIDADE 6 – Navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135UNIDADE 7 – A compatibilidade na resolução de monitores e websites . . . . . . .151UNIDADE 8 – Conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169UNIDADE 9 – Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197UNIDADE 10 – Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219UNIDADE 11 – O futuro da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267Respostas e comentários das atividades de auto-avaliação . . . . . . . . . . . . . . . . . . . . .269Anexo 1 - Imagens coloridas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
  6. 6. Palavras da professoraVocê já tentou acessar um site de banco para realizarum pagamento e não conseguiu? Ao sair do site semefetuar a transação desejada sentimo-nos em plenoséculo XXI reféns da tecnologia e não apoiados por ela(como foi amplamente prometido!). Durante a últimadécada ocorreu uma transformação exuberante ematividades antes feitas de forma manual como linhas deprodução de indústrias, carros informatizados, educaçãoe principalmente o advento da Internet. Grande partedas atividades da vida moderna inserem os recursoscomputacionais no dia a dia do cidadão comum. Afacilidade e o conforto na utilização tornou-se umproblema sério, o cidadão trava um combate diário nautilização das facilidades propostas por tais tecnologias.Observe um cidadão na fila de um caixa eletrônico, tenteobservar quantos destes conseguem chegar ao final daoperação desejada de forma harmoniosa. Observe osseguintes sintomas: vergonha, frustração, raiva, e emmuitos casos a desistência do cliente.Por que isto acontece? Uma grande parcela de culpareside no projeto da interface e no diálogo da interaçãocom o usuário. Em muitas situações a preocupação écentralizada nas funcionalidades do sistema sendo odesign gráfico e o próprio projeto de interação colocadosem um plano secundário. Quando a interação ocorre emum Website a dificuldade em localizar a informação,efetuar a transação ou mesmo a aparência “desagradável”do site induzem o usuário a sair facilmente do portal,que na maioria das vezes não retorna. O internauta éimpaciente, situações vagas, incoerentes e confusas olevam a sair do site e continuar sua busca em outrosendereços.
  7. 7. Universidade do Sul de Santa Catarina Durante a disciplina será possível conhecer melhor o projeto de design centrado no usuário assim como a introdução a conceitos que minimizem situações de desconforto e que facilitem a interação do usuário adequando-o as necessidades do cliente. É fundamental desde já que saibamos que o bom projeto de interface garante a aceitação do cliente e o conseqüente sucesso do produto. O projeto de design adequado ajuda de forma inestimável a fidelização do cliente ao site.10
  8. 8. Plano de estudoO plano de estudos visa a orientá-lo/a no desenvolvimento daDisciplina. Nele, você encontrará elementos que esclarecerãoo contexto da Disciplina e sugerirão formas de organizar o seutempo de estudos.O processo de ensino e aprendizagem na UnisulVirtual levaem conta instrumentos que se articulam e se complementam.Assim, a construção de competências se dá sobre a articulaçãode metodologias e por meio das diversas formas de ação/mediação.São elementos desse processo: o livro didático; o Espaço UnisulVirtual de Aprendizagem - EVA; as atividades de avaliação (complementares, a distância e presenciais); o Sistema Tutorial.EmentaUsabilidade. Ergonomia de interface e navegabilidade.Psicologia da comunicação, arquitetura de informação emapa do site. Produção gráfica, diagramação, estética e suainfluencia na performance do site. Padronização gráfica.Resolução de monitores e compatibilidade. Indicadores dequalidade, tempo de visualização e projetos de otimização dacomunicação.
  9. 9. Universidade do Sul de Santa Catarina Objetivos da disciplina Propiciar o desenvolvimento de sites mais eficientes centrados nos usuários. Utilizar Instrumentos de elicitação de conhecimentos. Esclarecer diretrizes para a concepção de Web sites consistentes a partir de normas e padrões reconhecidos. Apresentar técnicas e instrumentos de avaliação de usabilidade para sites Web. Carga horária A carga horária total da disciplina é 60 horas/aula, 4 créditos, incluindo o processo de avaliação. Agenda de atividades/ Cronograma Verifique com atenção o EVA, organize-se para acessar periodicamente o espaço da Disciplina. O sucesso nos seus estudos depende da priorização do tempo para a leitura; da realização de análises e sínteses do conteúdo; e da interação com os seus colegas e tutor. Não perca os prazos das atividades. Registre no espaço a seguir as datas, com base no cronograma da disciplina disponibilizado no EVA. Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da Disciplina.12
  10. 10. Comunicação Visual para WebAtividades obrigatóriasDemais atividades (registro pessoal) 13
  11. 11. 1UNIDADE 1Psicologia da comunicação Objetivos de aprendizagem Estudar sobre a psicologia envolvida no processo de comunicação visual. Conhecer a teoria da Gestalt do objeto. Ter conhecimento das implicações existentes no mecanismo de memorização. Ter conhecimento das implicações geradas a partir de decisões de projeto e que são explicadas pela psicologia. Seções de estudo Seção 1 O que é Gestalt? Seção 2 Um pouco da história Seção 3 Percepção da Forma Seção 4 Os princípios da Gestalt Seção 5 Os mecanismos de memorização Seção 6 Restrições de tempo em relação à memorização
  12. 12. Universidade do Sul de Santa Catarina Para início de conversa Quando você olha para uma página Web, para uma figura ou mesmo um documento impresso, você organiza o que está vendo, tenta impor uma estrutura e fazer conexões. Seu cérebro tenta decompor as imagens ao mesmo tempo em que tenta organizar estas partes de acordo com suas similaridades de cor, tamanho, textura e forma. Posteriormente, as partes são reagrupadas em um conjunto que permite a compreensão do seu significado. Durante esta unidade, você terá um contato muito próximo com a teoria da Gestalt, muito conhecida como o estudo das formas e que procura estabelecer relações por meio das quais as partes da imagem são agrupadas na percepção visual. No decorrer de seu estudo você fará uma incursão sobre os princípios que dão forma à teoria e justificam sua utilização. Você vai perceber que o bom uso dos princípios da Gestalt explica, muitas vezes, o sucesso de técnicas de projeto visual. Nesta unidade, você também explorará o universo da memória: por que lembramos de fatos ocorridos há 10 anos mas não lembramos de fatos lidos em uma revista a uma semana? O complexo mecanismo da memória e sua boa utilização na construção de um projeto de interface serão discutidos no decorrer da unidade.16
  13. 13. Comunicação Visual para Web ISEÇÃO 1 – O que é Gestalt?A palavra Gestalt tem origem germânica e significa forma,forma regular ou ainda configuração. A teoria da Gestalt surgiunas primeiras décadas deste século (1920), ao mesmo tempo emque a Europa saía de um de seus períodos mais conturbados desua história - a Primeira Guerra Mundial.Figura 1.1 A Primeira Guerra Mundial*A Gestalt é uma escola de psicologiaexperimental atuante principalmentena área da teoria da forma. Suascontribuições foram fundamentaisao estudo da percepção, sensação domovimento, linguagem, memória,inteligência, entre outros. Figura 1.2 O castelo**Os Gestaltistas queriam compreender quais os processos *<http://www.psicológicos que estavam envolvidos na ilusão de ótica. O guerrasnomundo.hpg.que acontece ou como acontece quando um estímulo físico é ig.com.br/index2.htm>percebido pelo ser humano com uma forma diferente do que ele éna realidade. **<http://www.psicologia. freeservers.com/gestalt/ movimento.html> Na figura 1.2 você não tem a “impressão” de que todas as pessoas estão o tempo todo subindo a escada? Por quê? É uma ilusão de ótica de movimento contínuo. Unidade 1 17
  14. 14. Universidade do Sul de Santa Catarina Quantas cores você acredita terem sido usadas na figura 1.3? Na verdade temos somente 2 tons de amarelo e 1 de azul, mas parecem terem sido usadas bem mais, não é mesmo?Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.psicologia.freeservers.com/ilusoes/colors1.html> Figura 1.3 A ilusão das cores Você costuma ir ao cinema? O movimento que vemos na tela é uma ilusão de ótica causada pelo fenômeno da pós-imagem retiniana. As imagens vão se sobrepondo em nossa retina e o queAs imagens não são apagadas percebemos é um movimento. Mas o cinema que você vê é naimediatamente da retina. verdade uma seqüência de fotografias estáticas projetadas na tela. Além de explicar por meio de suas premissas este tipo de “ilusão”, a Gestalt sugere uma resposta ao porque de certas formas agradarem mais que outras; apoiando-se na fisiologia do sistema nervoso e na psicologia, comprovados por meio de experimentos e pesquisas. SEÇÃO 2 – Um pouco da história Em seu início, havia duas correntes na Gestalt, a dos dualistas e a dos monistas. Os dualistas acreditavam que perceberíamos os elementos separadamente e só então eles formariam o todo, através de uma ação do espírito, de uma percepção mental. Um desenho seria visto como partes, mas a forma total que percebemos estaria interligada pelo espírito que uniria seus elementos. Os monistas, por sua vez, sustentavam a idéia de que as partes dependem mais do todo e que o todo determina a ordem das partes. Para os monistas, forma e matéria não são separáveis, portanto, os elementos de uma forma não existem18
  15. 15. Comunicação Visual para Web Iseparadamente. As partes são vistas como elementos formadoresdo todo. Em outras palavras, se modificarmos algum elemento otodo também é alterado.Quando em uma página mudamos a cor do fundo (figura 1.4)percebemos a mudança do todo (os elementos se modificam) enão apenas do fundo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.4 O conceito monista: o todo determina as partesA concepção monista acabou sendo a teoria polarizadora. Seusprincipais defensores Max Wertheimer, Kurt Koff ka e WolfgangKöhler acabaram por se tornar figuras de maior importância naescola da Gestalt. Os princípios da Gestalt estenderam-se alémda psicologia, para áreas como a Física e a Filosofia.SEÇÃO 3 – Percepção da forma O dicionário define percepção como o ato de adquirir o conhecimento de um fato, ser ou objeto, através dos sentidos.Segundo a Gestalt, a percepção da forma pelo cérebro é sempreuma percepção global dos estímulos, ou seja, o cérebro não enxergaelementos isolados. O olho humano tende a agrupar as váriasunidades de um campo visual para formar um todo, portanto,enxergamos o todo e não partes dele. Na figura a seguir os dois Unidade 1 19
  16. 16. Universidade do Sul de Santa Catarina círculos centrais são de igual tamanho, mas parecem diferentes. Esta ilusão é provocada pela percepção total do conjunto. A noção de tamanho do círculo se dá pela dependência dos demais círculos. Figura 1.5 Ilusão de ótica. Fonte: Filho (2003) Nosso organismo percebe então um conjunto de elementos como uma forma completa, em que os componentes estão integrados entre si. Se decompormos algum elemento, estaremos automaticamente destruindo o conjunto. SEÇÃO 4 – Princípios da Gestalt Entre os princípios da Gestalt, destaca-se como fundamental referência para as composições gráficas, o seguinte conceito: “o todo é mais do que a soma das partes”. Isto equivale a dizer que “A + B” não é simplesmente “(A+B)”, mas sim um terceiro elemento “C”, que possui características próprias. A partir de experimentos e resultados científicos fundamentaram- se diretrizes que regem a percepção humana das formas. Estas leis apresentam conclusões sobre o comportamento natural do cérebro no processo de percepção. Em outras palavras, estas leis nos indicam o porquê de vermos as coisas de uma certa maneira e não de outra.20
  17. 17. Comunicação Visual para Web IUnidadeA unidade pode ser vista como um único elemento, que existepor si só, ou pode ser vista como parte de um todo. SegundoFilho (2003), quando a unidade é vista como um único elemento,não existe agrupamentos ou mesmo relações entre os elementos. S Figura 1.6 - Unidade Figura 1.7 - UnidadeNa figura 1.6 é possível ver o grupo de pessoas como umaunidade, mas pode-se também dizer que cada pessoa constituiuma unidade, ou ainda uma sub-unidade, dentro do todo.Na figura 1.7 tem-se o exemplo de uma unidade onde não ocorreagrupamento. Neste caso, a unidade é formada por um únicoelemento: a letra S.Segregação A segregação é a capacidade perceptiva de separar, identificar, evidenciar ou destacar unidades formais em um todo ou em parte dele (FILHO, 2003).O uso de elementos como linhas, texturas, cores, sombras e outrosnos permitem realizar a segregação. Na imagem 1.8 podemossegregar as principais unidades: o carro, a estrada e o fundo.Mas é possível segregarmos a unidade automóvel em faróis, placa,vidros, rodas, calotas etc. Esta decomposição pode continuar atéque todas as unidades visíveis tenham sido mapeadas. Unidade 1 21
  18. 18. Universidade do Sul de Santa CatarinaPara uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://images.google.com.br/images?q=pessoas&hl=pt-BR&lr=&start=100&sa=N> Figura 1.8. Segregação Proximidade O princípio da proximidade descreve a tendência dos elementos individuais de serem associados com os elementos mais próximos, formando unidades. Quando colocamos elementos próximos, em condições iguais, a percepção do ser humano será reconhecê-los, formando um só todo. Observe a figura 1.9. Em um primeiro momento o que exatamente você vê? Duas colunas ou quatro colunas? aa aa aa aa aa aa aa aa aa aa aa aa Figura 1.9 Proximidade Nosso sistema nervoso organiza a figura como um todo e pelo efeito da proximidade nos leva a interpretar 2 colunas distintas, em 2 pares. As diferentes distâncias existentes nas 4 colunas nos levam ao agrupamento das mais próximas.22
  19. 19. Comunicação Visual para Web I Quanto menor a distância maior a unidade. <http://www.pontofrio.com. br/cgi-bin/loja.pl>Figura 1.10 ProximidadeNa figura 1.10, as informações relacionadas a cada tipo de relógioestão próximas, criando a intenção de agrupamento. Na leitura dousuário ocorre a interpretação de que preço e descrição pertencemà imagem mais próxima.SimilaridadeElementos semelhantes tendem a se agrupar naturalmente. Asemelhança pode ser estabelecida pelo compartilhamento decaracterísticas visuais básicas como: cor, forma, tamanho entre outras. Observe o seguinte exemplo: Para uma melhor compreensão, visualize, OX OX OX OX aa aa aa aa no anexo 1, ao final do livro didático, esta figura OX OX OX OX ou aa aa aa aa colorida. OX OX OX OX aa aa aa aa Figura 1.11 SimilaridadeApesar dos espaços inter-elementos e inter-colunas terem sidoigualados, o agrupamento ocorre pela semelhança dos elementos.No primeiro caso pela composição da semelhança da forma dasletras OX e no segundo pelo uso da cor. Quanto maior a semelhança entre os estímulos, maior a probabilidade de serem percebidos como um grupo comum. Unidade 1 23
  20. 20. Universidade do Sul de Santa Catarina A proximidade e semelhança são diretrizes que se completam quando o assunto é agrupamento, mas a semelhança é o fator mais forte de organização. Continuidade Conforme Filho (2003), a continuidade descreve a preferência pelos contornos contínuos e sem quebra, ao invés de combinações complexas de figuras irregulares. O cérebro tende sempre a enxergar a melhor continuação de retas e curvas, assim pode-se direcionar o cérebro a enxergar imagens de determinadas formas, de acordo com a necessidade. Quando você observa a figura (a), abaixo, o que é perce bido são duas linhas que se cruzam e não quatro linhas que se tocam em um ponto. a) b) z x y Figura 1.12 Continuidade Fonte: Filho (2003) Quando você vê a figura b, percebe que ela é composta de 3 elementos x, y e z. Quais dos elementos parecem uma continuação? Qual elemento parece ser um anexo? Se você respondeu que o elemento z parece um anexo, acertou! Ela fere o princípio da boa continuação. Curvas que não seguem a boa continuação natural perdem fluência e harmonia. Uma figura com linhas internas contínuas tende a ser vista como bidimensional, enquanto o desencontro de linhas internas nos direciona à tridimensionalidade. Fechamento O princípio do fechamento descreve a tendência humana de unir intervalos e estabelecer ligações. O cérebro humano interpreta o estímulo visual de forma completa, como figuras fechadas mesmo24
  21. 21. Comunicação Visual para Web Iquando algumas informações de contorno estão ausentes. Essadiretriz é fácil de explicar. Você lembra de ter visto figuras queapesar de formadas por contornos não-contínuos, enxergou comounidades completas? Figura 1.13 FechamentoExiste a tendência psicológica de se unir intervalos e estabelecerligações. Na figura acima o que você vê? São três círculosincompletos ou realmente existe o contorno do triângulo?Figura/FundoQuando as partes integrantes de um todo são ligeiramentediferentes, tendemos a assimilá-las ao todo, percebendo-asde maneira uniforme. Por outro lado, quando as partes nãoconstituem um todo, a tendência perceptiva é no sentido decontrastá-las com o fundo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.14 Figura/FundoQuando colocamos uma cor cinzenta sobre um fundo branco,parecerá mais escura do que se inserida em um fundo negro. Unidade 1 25
  22. 22. Universidade do Sul de Santa Catarina Normalmente, distingue-se figura de fundo pelo fato da figura ter uma forma e aparecer como objeto na frente. O fundo deve ser, então, sem forma, parecendo se estender de maneira contínua por trás da figura. No quadro Monalisa fica claro para o usuário a interpretação da figura e do fundo.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.*<http://images.google.com.br/images>**<http://www.geocities.com/Area51/9839/ilusoes.htm> Figura 1.15 Figura/Fundo* Figura 1.16 Figura/Fundo** Na figura 1.15, a consideração do que é figura ou do que é fundo faz com que o indivíduo interprete a figura como um homem tocando sax ou o rosto de uma jovem mulher. Pregnância A lei da pregnância diz que todas as formas tendem a ser percebidas em seu caráter mais simples, as forças de organização tendem a se dirigir sempre no sentido da clareza, unidade e equilíbrio (FILHO, 2003). Uma casa pode ser vista por 2 formas geométricas: um retângulo e um triangulo. E uma forma forte e pregnante, pois consegue transmitir com muita simplicidade a informação.26
  23. 23. Comunicação Visual para Web I Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.17 Pregnância da formaÉ o princípio da simplificação natural da percepção. Quantomais simples, mais facilmente é assimilada, desta forma, a partemais facilmente compreendida em um desenho é a mais regular,que requer menos simplificação. Quando a figura é pregnante, elaexprime uma característica qualquer de forma forte, de maneiraque se destaque e seja de fácil compreensão.Formas fechadas, simétricas, regulares atraem o olhar e sedestacam do fundo, quando a forma é pregnante, facilmenteconseguimos separá-la do fundo. A imagem aérea da Cidade do México é de baixa pregnância, o grande número de unidades formais e a organização visual confusa dificultam a leitura e a compreensão. http://encarta.msn.com/media_ 461539938_761569238_-1_1/ Aerial_View_of_Mexico_City.html Figura 1.18 Baixa Pregnância da forma Unidade 1 27
  24. 24. Universidade do Sul de Santa Catarina O Taj Mahal é um exemplo da boa pregnância da forma. Podemos observar o uso da continuidade, da ordem, da proximidade, da semelhança dos elementos e do equilíbrio.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.gimcracker.com/ Figura 1.19 Boa Pregnância da formaarchives/Taj-Mahal.jpg> Conheça mais sobre as leis da Gestalt Bibliografia Gestalt - Publicações em língua portuguesa URL: http://www.gestalttheory.net/pubs/gestaltismo.html International Society for Gestalt Theory and its Applications - GTA URL: http://www.gestalttheory.net/ Gestaltismo e Percepção URL: http://www.psicologia.freeservers.com/gestalt/28
  25. 25. Comunicação Visual para Web ISEÇÃO 5 – Os mecanismos de memorizaçãoA visão humana é o sentido que provê o maior volume deinformações a serem processadas pelo cérebro, estima-se quemetade do potencial de processamento cerebral humano sejautilizado na organização de informações visuais.Nossos usuários de software percebem as informações pormeio de um sistema sensorial. Os novos recursos da tecnologiapermitem que esta percepção ultrapasse o sentido da visão,fazendo uso da audição e do tato. No mecanismo de percepção, olhos e cérebro atuam em conjunto na interpretação das informações.Ao percebermos as informações, as mesmas são codificadas,processadas, usando-se argumentos de raciocínio, além de seremarmazenadas na memória para posterior recuperação.A MemóriaA memória é o mecanismo que nos permite recordar pessoas,acontecimentos, coisas que aconteceram anteriormente. Richard Järnefelt deDesde que o ser humano iniciou sua trajetória em áreas de Helsinki, Finland,pesquisa, o funcionamento e as circunstâncias em que ocorrem conquistou, em 1999,a memorização são arduamente discutidas. Nas últimas o Guinessbook, comdécadas, muito se tem estudado a respeito das características um repertório de 3.000 músicas tocadas no piano,e do funcionamento da memória humana. Estudos evoluíram, sem partituras, apenaspermitindo a compreensão dos meios fisiológicos de como o ser com o uso da memória.humano armazena as informações, assim como as razões pelas Fonte: http://www.quais podemos perdê-las. guinnessworldrecords. com/gwr5/conten Figura 20. Recorde no Guinessbook Unidade 1 29
  26. 26. Universidade do Sul de Santa Catarina O uso deste conhecimento para os projetistas de software na construção de projetos de Web permite uma melhor adaptação do projeto às características e delimitações da memória humana, considerando suas habilidades e capacidade em termos cognitivos. A natureza da memória pressupõe dois fatores: a codificação (estratégias de memorização) e a recordação. A codificação vai permitir a maior ou menor facilidade de se recordar determinada informação. A recordação pode ser livre ou por reconhecimento (somos expostos a pistas que no reavivam a memória). Quando reproduzirmos o que entrou, recupera-se a memória. Segundo Schneiderman (1992), a memória humana pode ser dividida em três partes, cada uma com diferentes características: Memória Rápida ou de Curto Termo. Memória de Trabalho ou Sensorial. Memória Permanente ou de Longo Termo. Memória de Curto Termo A memória de curto termo armazena informações na memória em apenas um curto espaço de tempo 10 a 25 segundos, no máximo. É uma memória rápida, recebendo as informações de entrada captadas pelos órgãos dos sentidos (olhos, ouvidos, olfato e tato) e os passa ao sistema cognitivo. Nesta memória são armazenadas respostas aos estímulos como: informações expressas pela fala, movimentos e ações. As informações são armazenadas por um período de aproximadamente 10 segundos, armazenando poucas informações a cada vez. A memória de curto termo guarda, em média, um número de 7 informações captadas pelos órgãos dos sentidos (BORGES, 2005).30
  27. 27. Comunicação Visual para Web I— Que tal repetirmos um experimento realizado em 1956 porMiller? Faça um ditado de 30 palavras com seu amigo maispróximo. Finalizado o ditado, peça para que ele escreva todas aspalavras que ele consegue recordar.E então? Qual foi o resultado?Este teste nos dá uma idéia da quantidade de informaçãoarmazenada na memória de curto termo!Memória de Trabalho ou SensorialA memória sensorial também é conhecida como memória detrabalho. Na memória sensorial são trabalhadas as informaçõescaptadas pela memória de curto termo e posteriormente enviadasà memória permanente. A memória de trabalho pode armazenarinformações por um tempo, podendo variar de minutos a dias,mas mesmo assim a informação será posteriormente eliminada(BORGES, 2005). Você já estudou para fazer um concurso ou vestibular? Cursinhos são especialistas em criar mecanismos para conectar e organizar informações de forma que as mesmas permaneçam na memória permanentemente, permitindo que você as recupere mais tarde (dias, meses, anos).Você lembra de alguma situação quando estudou para umaavaliação escolar e uma semana depois não lembrava mais doconteúdo? Tente descrever a fisiologia da célula ou os nomes dosrios que fazem parte da Região Norte!Quando o assunto não é considerado fundamental ouimportante para o indivíduo, o mesmo não estabelecemecanismo de codificação. Desse modo, este conteúdodificilmente irá atravessar as fronteiras da memóriasensorial. Lembramos do conteúdo até realizar a prova,uma semana depois, apesar de uma boa nota, nãolembramos mais do assunto e dificilmente repetiríamosa boa nota sem estudar novamente. Unidade 1 31
  28. 28. Universidade do Sul de Santa Catarina A memória de curto termo recupera informação na memória permanente. Mas quais mecanismos podemos usar para registrarmos ou recuperarmos a informação na memória sensorial? Podemos usar metáforas, analogias, regras e tudo aquilo que de alguma maneira chame a atenção do indivíduo. Lembram das famosas musiquetas cantadas por professores de química e física? Memória de Longo Termo Quando armazenamos uma informação na memória de longo termo, ela permanece para sempre. Além da possibilidade de recuperação, também temos a característica relacionada a sua capacidade, até hoje não temos como quantificar as informações que podem ser armazenadas nela ou mesmo seu espaço. Algumas informações são recuperadas diretamente da memória permanente para a memória de curto prazo, sem passar pela memória sensorial. Isto acontece porque são informações utilizadas pelo individuo há muito tempo e de forma repetida. Se neste momento, perguntar para você qual o seu nome? Quando você nasceu? Qual o nome de sua esposa(o) ou namorada(o)? Essas seriam respostas imediatas, já estão a um longo tempo com você e não são necessários mecanismos de recuperação. Fala, Audição Fala, Movimento Memória de Trabalho Memória de Curto Termo ou Sensorial Memória de Longo Termo ou Permanente Figura 21. Esquema de Funcionamento da Memória segundo Schneiderman (1992)32
  29. 29. Comunicação Visual para Web ISEÇÃO 6 – Restrições de tempo em relação à memorizaçãoBen Schneiderman (1992) realizou vários estudos relacionadosao mecanismo de memorização e percepção. Estes resultados nosfornecem dicas para a boa utilização da memória em projetos deinterfaces. Nestes estudos, o pesquisador aponta a insatisfaçãode usuários com mecanismos de interface, em que o tempo deresposta é superior a 2 segundos.A razão para isto é que o ser humano guarda informações namemória de curto termo por no máximo 15 segundos. Quandoo usuário espera além deste tempo, ele precisa recordar o queestava fazendo, o que torna a interação mais difícil e lenta. Ogrande problema é que de acordo com a tarefa os tempos deresposta aceitáveis são diferentes, veja os resultados coletados porSchneiderman (1992) e Galitz (1993): digitar, movimentar o cursor, ou selecionar com o mouse: 50-150 milissegundos; tarefas simples como o iniciar um brower: menos de 1 segundo; introduzir dados para buscas de dados: 1-4 segundos; tarefas complexas como cálculos, registros : 8-30 segundos.O tempo de resposta é crucial para um bom projeto, assim comoo uso, ao longo do projeto, de mecanismos de codificação quepermitam tornar o site interessante e inesquecível. Dicas para a boa utilização da memória do usuário Evite a carga de elementos de multimídia que levam um intervalo de tempo longo para serem carregados em conexões de baixa velocidade. O limite de tempo ideal para operações de carga é 15 segundos. SEGUE Unidade 1 33
  30. 30. Universidade do Sul de Santa Catarina Insira indicadores de feedback (barras de progressão, ampulhetas girando, quando não é possível determinar o tempo necessário até o término da tarefa) quando o tempo de processamento é longo. Figura 22. Indicadores de feedback O sistema deve reagir após uma ação, em um tempo máximo de 0,1 segundo. 1,0 segundo é o tempo limite para que o fluxo de pensamento do usuário permaneça ininterrupto. 10 segundos é o tempo limite para manter a atenção do usuário focada num diálogo. 10 segundos é o tempo que a memória de curto tempo se mantém carregada com alguma informação captada pelo sistema cognitivo. As informações devem estar visíveis ao usuário por um período que permita sua identificação e reconhecimento (páginas que somem rapidamente sem dar oportunidade de identificação são esquecidas com a mesma velocidade). Projetistas devem criar mecanismos para associação de ações. Por exemplo, para voltar a um ponto anterior deve haver uma indicação explícita, como uma tecla Voltar. Operações freqüentes acabam sendo memorizadas na memória de longo termo e a escolha de ícones para ações deve ser consistente. Nos dois exemplos* o uso do carrinho para indicar o ato de comprar em sites de ecommerce são facilmente interpretados, pois já foram memorizados pela repetição de uso em diferentes sites. Figura 23. Ícones Projetistas devem tomar um cuidado redobrado com operações que, pela repetição, tornam-se óbvias para o projetista e acabam não sendo explicadas para o usuário, mas que na verdade não são óbvias para ele. Fonte: SCHNEIDERMAN (1992) *www.americanas.com; www.pontofrio.com.br34
  31. 31. Comunicação Visual para Web I Você está curioso(a) sobre aspectos relacionados ao mecanismo de memorização? Dê uma espiadinha nestes artigos, eles são muito interessantes. Notícia é destaque hoje e esquecida amanhã http://www.comciencia.br/reportagens/memoria/05.shtml A memória http://www.comciencia.br/reportagens/memoria/15.shtmlSínteseDurante a unidade foi possível perceber a importância da noçãode unidade da Gestalt na psicologia da percepção, e também aimportante relação sujeito-objeto. Quando percebemos as imagensocorre o resultado da interação luz na retina, com a tendência deorganizar da melhor forma possível os estímulos externos.Você pôde perceber, por meio das diferentes leis, que ilusõesde ótica são criadas pelo uso da forma, que é possível brincarcom idéias de agrupamento utilizando a proximidade e/ousimilaridade, que não é necessário desenhar uma formacompletamente para que a mesma se torne uma informação parao usuário (continuidade).Observou que a lei fundamental da teoria da Gestalt é apregnância da forma, em que o objeto apresenta o máximode equilíbrio, clareza e unificação visual pelo uso da máxima:simplicidade.Você também aprendeu que a memória é organizada em umaestrutura de três elementos, a memória de curto termo, longotermo e de trabalho. Agora já é possível entender a importânciado tempo de resposta no projeto da interface e da necessidadede usarmos mecanismos de projeto que chamem a atenção dousuário de forma que a informação seja inesquecível para ele. Unidade 1 35
  32. 32. Universidade do Sul de Santa Catarina Atividades de auto-avaliação 1) Qual o significado da Pregnância, para um indivíduo, no mecanismo de percepção? 2) Em que situação a lei da semelhança e da proximidade são complementares em um projeto de página? Procure um exemplo deste aspecto na internet e cite o endereço. 3) Procure um exemplo do uso da lei do fechamento em logotipos ou páginas na internet, cite o exemplo e o respectivo endereço.36
  33. 33. Comunicação Visual para Web I4) Relacione as formas abaixo com as leis da Gestalt (pregnância, figura/ fundo, proximidade, semelhança, continuidade, fechamento):a) b) Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida.c) d)e) f)g) Unidade 1 37
  34. 34. Universidade do Sul de Santa Catarina 5) Relacione os temas relacionados ao armazenamento da memória: [A] Memória de Curto Termo; [B] Memória de Trabalho; [C] Memória de Longo Termo; a) ( ) Armazena a informação por um espaço de 10 a 25 segundos; b) ( ) permite o armazenamento de informações por um longo período; c) ( ) armazena informações por horas e até dias; d) ( ) é a memória responsável por enviar informações para a memória permanente; e) ( ) armazena informações relacionadas aos sentidos como fala, audição; f) ( ) é a memória responsável por recuperar informações da memória permanente; g) ( ) armazena, no máximo, sete informações e as apaga da memória rapidamente. 6) Em termos de projeto de interface Web, quais artifícios você pode utilizar para sensibilizar o usuário fazendo com que o mesmo se “recorde” do diálogo existente na sua página?38
  35. 35. Comunicação Visual para Web ISaiba mais AMARO, Fausto. Mecanismos de memória. www.ncs.iscsp.utl.pt/apontamentos/index.php?dir=3%BA%20Ano/&file=Psicologia.rtf Recomendações para design. http://www.fast-consulting.com/GUI%20Design%20Handbook/gdhb_menubar.htm Publicações sobre Gestalt em língua portuguesa. http://www.gestalttheory.net/pubs/gestaltismo.html FILHO, Gomes J. Gestalt do Objeto. São Paulo: Escrituras, 2003. Unidade 1 39
  36. 36. 2UNIDADE 2Cores na Web Objetivos de aprendizagem Entender o mecanismo fisiológico de reconhecimento das cores. Perceber os cuidados necessários para o uso da cor na Web. Compreender os efeitos e as influências da cor durante o projeto de interface. Seções de estudo Seção 1 Mas o que é cor? Seção 2 A visão humana da cor Seção 3 Teoria das cores Seção 4 Definição da cor de fundo da página Seção 5 Recomendações para o uso de cores na Web
  37. 37. Universidade do Sul de Santa Catarina Para início de conversa A unidade Cores na Web traz à tona a importância do uso da cor no projeto de Web sites. Muitas vezes consideramos a cor apenas como um fator estético, mas se você observar os objetos que você usa no cotidiano, vai perceber aspectos interessantes: o botão de ligar e desligar do controle remoto de sua tv é vermelho, quantas cores existem no teclado do seu celular? O painel do seu carro faz uso de no mínimo três cores, por quê? O uso da cor proporciona uma importante dimensão na comunicação visual, se a utilizamos com sabedoria melhora a interpretação de uma mensagem, se mal utilizada pode prejudicá-la. Quando vamos escolher as cores a serem utilizadas em nossos sites acabamos, às vezes, por perder o sono à noite até tomarmos a decisão. Qual cor? Quantas cores? Quais combinam? As cores da empresa, o gosto do cliente, nossas decisões durante o projeto nos colocam em ciladas virtuais. As escolhas relacionadas ao uso da cor vão além dos meros aspectos pessoais. O uso eficiente da cor depende de fatores que variam de particularidades como: recursos visuais disponíveis, fatores humanos e do próprio contexto de uso e do ambiente onde a mesma será utilizada. Durante a unidade vamos explorar este mundo colorido, a maneira como vemos, como interpretamos, tentando entender melhor para aplicar mais adequadamente a cor nos projetos de sites para Web. SEÇÃO 1 – Mas o que é cor? Em 1966, Newton descobriu Figura 2.1 que a luz branca do sol pode ser decomposta com o auxílio de um prisma de cristal em radiações de larguras variáveis (magenta, alaranjado, amarelo, verde, azul ciano, anil e violeta). Sem luz não existe cor!42
  38. 38. Comunicação Visual para Web IA impressão destas radiações sobre a retina do olho é o quedistinguimos como cor. A cor pode ser definida como umcomprimento de onda.O comprimento de onda para o vermelho é de 580 nm(nanômetros), para o verde 540 nm e para o azul 440 nm. Quando você vê um arco-íris, você está vendo a luz solar decomposta nestas 7 cores. Você sabe o que funciona como prisma neste caso? As gotículas de água! Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.2 - Decomposição da luz <http://www.dailytimes.com. pk/default.asp?page=story_ 26-7-2005_pg9_9>SEÇÃO 2 – A visão humana da corO olho humano é o órgão responsável pela recepção da visão.O olho é formado pelo globo ocular que é uma esfera comaproximadamente 2,5 cm de diâmetro. Quando você fi xa o olharsobre um objeto, a imagem deste objeto atravessa a córnea, depoispassa pela íris - que é responsável por regular a quantidade de luzrecebida por meio da pupila. Unidade 2 43
  39. 39. Universidade do Sul de Santa Catarina<http://pt.wikipedia.org/wiki/Globo_ocular> Figura 2.3 - Globo Ocular Após atravessar o cristalino, a imagem é focada sobre a retina (invertida, depois o cérebro acerta isto!). Você conhece o mecanismo de uma máquina fotográfica? Nosso globo ocular pode ser comparado a uma máquina fotográfica, onde o cristalino seria a objetiva, a íris o diafragma e a retina seria a placa ou película. Quando a imagem chega ao cristalino, ela é ajustada, sendo levada para trás ou para frente, permitindo que ela se projete sobre a retina. Nossa retina está provida de duas espécies de células sensíveis à luz: os bastonetes e os cones. Cones e bastonetes Os bastonetes permitem a visão para intensidades luminosas muito pequenas (noite, crepúsculo). Recebem apenas impressão de luminosidade e nenhuma impressão cromática. Por isto quando saímos da cama à noite, no escuro, os objetos coloridos aparecem sem cor, nossa visão está por conta dos bastonetes. Os bastonetes (120 milhões de células) não percebem diferenças finas de forma e cor. Os cones permitem a impressão colorida em claridades média e grande (visão diurna), a imagem fornecida é mais nítida e detalhada. Existem três tipos de cones (três milhões de células) no olho humano, cada um distingue uma cor diferente: vermelho, verde ou azul. Você sabia que a quantidade de cones vermelho, verde ou azul é 40:20:um? É por este motivo que sua sensibilidade para o azul é muito menor do que para o vermelho. Em outras palavras, você vê um número maior de tons de vermelho do que azuis.44
  40. 40. Comunicação Visual para Web ICampo visualA capacidade de percepção das cores está diretamente relacionadaao campo visual. A distribuição das células fotoreceptoras nãoé uniforme. Olhe a figura 2.5, na área central existem apenascélulas do tipo cone (1), no campo central (2) existem células dotipo cone e bastonetes, na área periférica encontram-se apenasbastonetes (3).Na região da fóvea (1) ocorre a projeção da imagem do objetofocalizado. Nós enxergamos com nitidez somente objetos focadosna fóvea. Essa permite que a luz atinja os fotorreceptores sempassar pelas demais camadas da retina, maximizando a acuidadevisual. É a capacidade de oOs bastonetes, ausentes na fóvea, são encontrados principalmente olho de distinguir entrena retina periférica (2,3), sendo responsáveis pela transmissão de dois pontos próximos,informações para as células ganglionares. e depende de diversos fatores, em especialNo fundo do olho está o ponto cego, insensível à luz, não há do espaçamento doscones nem bastonetes, dele emergem o nervo óptico e os vasos fotorreceptores na retina e da precisão da refraçãosangüíneos da retina. do olho. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.4. - Campo Visual (WICKER, 2000).Segundo Winkler (2000), a área central da visão (1) é aresponsável pela leitura e deve receber máxima percepção econtraste. O campo central (2) deve contrastar com a áreacentral, com uma relação de 2:1, e o campo visual perifériconão deve exceder de 10:1. A área periférica percebe apenasmovimentos e vultos. Unidade 2 45
  41. 41. Universidade do Sul de Santa Catarina Você já chegou ao cinema após o início da sessão? Saiu da ante-sala com muita claridade e entrou na sala de projeção exatamente no momento em que a cena estava muito escura? Como você se sentiu? Aquela cegueira momentânea é causada pela acomodação dos cones e pelo aumento da sensibilidade dos bastonetes. O inverso também acontece, imagine você saindo de uma sala com baixa luminosidade para um gramado em um dia de sol intenso. Formação de imagens coloridas na retina Durante todo o processo da percepção visual o cristalino se modifica, se adapta, de modo a focalizar sobre a retina a imagem do objeto visualizado. A acomodação e a convergência do cristalino dependem da cor do objeto visualizado. Isto acontece porque as ondas verde, azul e vermelha convergem a diferentes distâncias da retina. Na figura 2.5 é possível observar que as ondas vermelhas convergem além da superfície da retina, enquanto os comprimentos de onda verdes sobre a retina e azuis convergem antes da retina. Quando focalizamos objetos avermelhados, o cristalino se torna mais convexo, como se o objeto estivesse próximo do observador. Quando focalizamos um objeto azul, o cristalino fica menos convexo (mais relaxado), como se objeto estivesse distante (WINCLER, 2000).Para uma melhor compreensão,visualize, no anexo 1, ao finaldo livro didático, esta figuracolorida. Figura 2.5 - Foco sobre a retina Fonte: Apostila de técnicas de apresentação - Roberto Cabral de Mello Borges - UFRGS. 2003.46
  42. 42. Comunicação Visual para Web IO uso de cores intensas causa fadiga visual justamente pelanecessidade constante de adaptação do cristalino. Imagineo uso do azul e do vermelho simultaneamente, as diferentesprofundidades de foco seriam fatigantes!A cegueira para algumas coresVocê sabia que o daltonismo é uma deficiência na visão quedificulta a percepção de uma ou de todas as cores (na sua variaçãomais comum o daltônico não distingue o vermelho do verde)? O daltonismo é uma deficiência quase que exclusivamente masculina, para 10% da população masculina apenas 1% das mulheres apresentam o problema. No projeto Web, temos que considerar esta parcela da população fazendo uso da luminância, de forma a permitir a diferenciação da cor.Que tal você verificar sua acuidade visual? Qual número você vênas esferas? Este teste tenta detectar a deficiência da percepção dacor – o daltonismo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://chost.sites.uol. com.br/Principal/teste_ de_daltonismo.html> Figura 2.6 - Teste de visãoImagino que agora você esteja se perguntando: como o indivíduodaltônico diferencia as luzes verdes e vermelhas do semáforo,já que para esse indivíduo as duas cores são apenas variações docinza? Em tempo, os números nas esferas são o 5 e o 6. Unidade 2 47
  43. 43. Universidade do Sul de Santa Catarina SEÇÃO 3 – Teoria das cores Muitas teorias procuram explicar o fenômeno da visão cromática, mas todas elas se baseiam na observação de que o olho humano pode detectar quase todas as graduações de cores, quando as luzes monocromáticas vermelho, verde e azul são misturadas apropriadamente. As cores se dividem em três grupos: primárias, secundárias e terciárias. Cores primárias São as cores que não podem ser formadas por nenhuma mistura. São elas: azul, amarelo e vermelho. Quando misturadas de forma variável produzem todas as cores do espectro. Cores secundárias São formadas por duas cores primárias misturadas em partes iguais. Cores terciárias São as intermediárias entre uma cor secundária e qualquer das duas primárias que lhe dão origem (PEDROSA, 1982). Observe a figura baixo, construída por Fabris, em 1973. As cores primárias estão no centro, as secundárias (verde, laranja e violeta) no segundo triângulo. O terceiro ciclo se complementa com as cores terciárias. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.7 - Círculo das cores (FABRIS, 1973)48
  44. 44. Comunicação Visual para Web ICores complementaresSão as cores opostas no disco de cores. O vermelho écomplementar do verde, o azul é complementar do laranja.As cores complementares são usadas para dar força e equilíbrioa um trabalho, criando o máximo de contraste. As corescomplementares são as que dão mais contrastes entre si, sequeremos destacar um amarelo, devemos colocar junto dele umvioleta. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.8. - Cores complementares (Vera Schuhmacher)Cores análogasSão as que aparecem lado a lado no disco de cores. São análogasporque há nelas uma mesma cor básica. O amarelo-ouro e o laranja-avermelhado têm em comum a cor laranja. Elas são usadas para dar a sensação de uniformidade, profundidade, movimento, luz e sombra.Podemos considerar análogas três cores que se apresentam emseqüência, no círculo das cores, como: o laranja, laranja-vermelhoe vermelho. Unidade 2 49
  45. 45. Universidade do Sul de Santa Catarina Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.9. - Círculo das cores (WINCKLER, 2000) Figura 2.10. - Cores Análogas (Vera Schuhmacher) O contraste das cores A sensação da cor depende de três parâmetros: o croma, a intensidade e o matiz (GUIMARÃES, 1997). Matiz É a característica que diferencia uma cor de outra, por exemplo, o amarelo do azul, o verde do violeta. Refere-se a maior ou menor quantidade de luz presente na cor. Quando se adiciona preto a determinado matiz, esse se torna gradualmente mais escuro, e essas graduações são chamadas escalas tonais. Para se obter escalas tonais mais claras, acrescenta-se branco. Observe o que ocorre na figura 2.8, quando acrescentamos branco a cor.50
  46. 46. Comunicação Visual para Web I Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida.Figura 2.11. Escalas tonais (Vera Schuhmacher)CromaÉ a qualidade específica de saturação da cor, que indica o seu graude pureza. Mas o que é saturação? Imagine um copo de leitepuro. Agora imagine você adicionando a este leite cinco colheresde chocolate em pó. O leite vai ficar bastante escuro. Agora vocêcomeça adicionando leite a esta mistura, a cor vai clareando,mas ainda é marrom, quanto mais leite você adicionar mais clarovai ficar o leite. Se você adicionar 10 litros de leite à mistura, éprovável que o líquido fique quase branco. Podemos dizer que a saturação refere-se à quantidade de branco em uma cor.Quando diminuímos a saturação a imagem acaba por ficar empreto e branco,com o grau de saturação em 0. Para que você possa visualizar essa transição, consulte o arquivo publicado na Midiateca. Ele apresenta uma imagem com diversos tons de saturação.Mas quando ocorre ao contrário e aumentamos a saturação, aimagem acaba por ficar quase com um aspecto irreal. Unidade 2 51
  47. 47. Universidade do Sul de Santa Catarina Luminosidade É a quantidade relativa de claro ou escuro em uma escala do preto ao branco. É fundamental para a percepção de profundidade. Contraste É a base à distinção da forma, tamanho, posição, volume e aparência dos objetos. Ele pode ser obtido através de diferenças do matiz e ilumina ção. O contraste pode ser usado para alterar a sensação de tamanho entre objetos. Um exemplo é quando queremos parecer mais magros e usamos roupa preta. As cores contrastantes são diretamente opostas no disco das cores; como o azul e o amarelo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.14. Contraste das cores Compare os diferentes efeitos produzidos pelo contraste do fundo para o mesmo quadrado vermelho. O quadrado vermelho parece mais brilhante (preto), menos brilhante (laranja) ou ainda maior (preto), de acordo com o fundo utilizado. Saiba mais Não deixe de acessar o site Color in Motion no endereço <http://www.mariaclaudiacortes.com/>. O site é uma experiência interativa sobre a comunicação e o simbologismo da cor. Você vai aprender em que situações determinadas cores expressam uma informação, suas cores complementares e como elas são utilizadas em diferentes países.52
  48. 48. Comunicação Visual para Web I Que tal brincar com um aplicativo que gera esquemas e combinações de cores? Cada esquema se baseia em uma cor usada como base, que é combinada e complementada por cores adicionais, calculadas por meio de algoritmos que permitem a melhor combinação ótica. Esta ferramenta Color Scheme está disponível em <http://wellstyled.com/tools/>. Divirta-se !!SEÇÃO 4 – Sistema e representação das coresAs cores são representadas de maneira diferente se o dispositivoreflete ou emite luz. Objetos que não emitem luz refletem umaparte da luz que incide sobre eles e absorvem a outra parte.A sensação da cor é relativa e variável, segundo a natureza dafonte luminosa e do objeto. Se uma laranja lima é iluminada poruma luz azul, esta se transforma em verde; neste caso a reflexãodo amarelo se soma a da luz azul e ambas as cores são refletidasmisturadas. Assim, os dispositivos que representam cores seguem o modelo subtrativo, quando não emitem luz, e aditivos quanto emitem luz.Dispositivos que misturam pigmentos coloridos (impressora,Scanner), seguem o modelo subtrativo, cujas cores primárias são:amarelo, magenta e ciano. A mistura de todas as cores produzo preto. Dispositivos baseados na emissão de luz (monitor,data-show) seguem o modelo aditivo, cujas cores primárias sãovermelho, verde e azul-violeta. O branco é obtido pela mistura detodas as cores. Unidade 2 53
  49. 49. Universidade do Sul de Santa Catarina São modelos aditivos o HSV, o HLS e RGB. Entre os modelos subtrativos, o mais empregado é o CMYK. O sistema RGB é o padrão de cores na WWW. É um sistema cartesiano (x, y, z) onde cada cor primária (Red, Green e Blue) representa um dos eixos do cubo RGB. O modelo CMYK é formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK). É utilizado em dispositivos de impressão. Há diferenças entre cores representadas em monitores do mesmo padrão RGB. Diversos fatores causam as diferenças, entre eles, o gamut, ou seja, o grau de contraste entre os valores intermediários de cinza de uma imagem. O valor de gamut do Macintosh é de 1.8 e de um PC é 2,2. Imagens geradas em um Mac parecerão muito mais escuras na plataforma PC, enquanto as geradas no PC parecerão apagadas e sem brilho no Mac.“Signal detection theory”, um SEÇÃO 5 – Definição da cor de fundo da páginamodelo estatístico elaborado nadécada de 50. Segundo a teoria de detecção de sinais, o cérebro humano interpreta e organiza a informação que recebe em forma ótima, quando no campo visual há um número mínimo de cores e formas: quanto menos “ruído”, mais claro é o “sinal”. Quando você escolhe o padrão de cores de um site é importante observar alguns aspectos relacionados por Schneirman (2000): Assunto da página: é um site voltado ao entretenimento? É um site voltado para venda de imóveis? Público alvo: há algum fator de homogeneização? Sexo (maioria homens ou mulheres), idade (é uma página que pretende atingir o público infantil ou para jovens procurando diversão noturna), experiência (os usuários são funcionários de uma empresa com ou sem experiência no uso da internet/intranet)? Existem outros fatores a serem considerados? Ou os usuários formam uma platéia altamente heterogênea? (usuários de um sistema de caixa eletrônico de um banco, por exemplo)54
  50. 50. Comunicação Visual para Web I Ambiente: qual é ou grau de estresse ao qual os usuários estão submetidos (elevado, como em um sistema de bolsas de valores?)? Qual é a luminosidade do ambiente?Veja a seguir alguns exemplos. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://disney.go.com/ home/today/index.html> Figura 2.15. Website da Disney <http://sepultura.uol. com.br/v6/> Figura 2.16. Website da banda Sepultura Unidade 2 55
  51. 51. Universidade do Sul de Santa Catarina A cor básica de fundo (o Matiz), da página inicial do site Disney, é azul. Uma cor que, além de transmitir confiança, calma e estabilidade, é perfeitamente visível para a grande maioria da população. Note que apesar do impacto visual não há muitas cores: fora o azul básico, utilizaram-se o verde, branco e laranja (todas cores positivas, emocionais). O negro foi abolido da página. As áreas com menor saturação da cor básica estão nas bordas. O site do grupo de rock Sepultura é basicamente negro. Combina perfeitamente com o grupo e com a expectativa dos usuários do site, fãs da banda. Note que, novamente, há poucas cores. O site “Mais Você” é adequado ao consumidor principal: a mulher. Cores suaves, femininas, esteticamente limpo.<http://maisvoce.globo.com/perfil_apresentadora.jsp> Figura 2.17. Website Mais Você Observe, agora, duas versões diferentes de uma mesma página:Para uma melhorcompreensão,visualize, no anexo1, ao final do livrodidático, esta figuracolorida. Figura 2.18. Website Lancome56

×