Resumo: Este trabalho faz uma anlise do uso das cores em websites, bem como sua importncia no desenvolvimento de projetos de websites destinados a diferentes tipos de usurios. As cores desenvolvem um importante papel na percepo, j que utilizada a fim de predispor o usurio ao que proposto pelo produtor do site. Sendo assim, esta pesquisa tem por objetivo verificar a relevncia da utilizao da psicologia das cores na construo de sites. Como motivao para incio do estudo tem-se a seguinte questo: O uso da psicologia das cores decisivo para o sucesso ou insucesso de um website? Para tanto, fez-se um minucioso estudo bibliogrfico a fim de obter embasamento terico para o desenvolvimento da pesquisa. Palavras-chave: Cores; Design; Website.
Abstract: This paper analyzes the use of colors on websites, as well as its importance in the development of projects of websites aimed at different types of users. The colors develop an important role in perception, since it is used in order to predispose the user to what is proposed by the producer of the site. Thus, this research aims to verify the relevance of using the psychology of color in building sites. As motivation for the beginning of the study has the following question: Using the psychology of color is crucial to the success or failure of a website? As such, there is a thorough bibliographical studying order to obtain theoretical basis for the development of research. Keywords: Colors, Design, Website. 2
SUMRIO
1. INTRODUO ................................................................................................................................................. 3 2. METODOLOGIA ............................................................................................................................................. 3 3. DESENVOLVIMENTO .................................................................................................................................... 5 3.1 SOBRE WEBSITES ............................................................................................................................................ 5 3.2 PSICOLOGIA DAS CORES .................................................................................................................................. 7 3.3 APLICANDO A PSICOLOGIA DAS CORES A UM PROJETO DE WEBSITE ................................................................ 6 3.4 ANLISES DE SITES DE SUCESSO ..................................................................................................................... 8 3.4.1 Anlise de site de turismo ...................................................................................................................... 9 3.4.2 Anlise de conceituado site de esportes............................................................................................... 10 3.4.3 Analise de famosa empresa de calados .............................................................................................. 11 3.4.4 Anlise de site de fotografia ................................................................................................................ 12 3.4.5 Anlise de site de conceituada revista brasileira ................................................................................ 13 3.4.6 Anlise de site de filmes ....................................................................................................................... 14 3.4.7 Anlise de site de emissora alem ....................................................................................................... 15 4. O PROJETO .................................................................................................................................................... 16 5. CONSIDERAES FINAIS .......................................................................................................................... 18 6. REFERNCIAS BIBLIOGRFICAS........................................................................................................... 19 7. APNDICE ...................................................................................................................................................... 20 7.1 APNDICE 1 FORMULRIO DE BRIEFING ..................................................................................................... 20 7.2 APNDICE 2 LAYOUT .................................................................................................................................. 21 8. ANEXOS .......................................................................................................................................................... 22 8.1 FIGURA 1 ...................................................................................................................................................... 22 8.2 FIGURA 2 ...................................................................................................................................................... 23 8.3 FIGURA 3 ...................................................................................................................................................... 24 8.4 FIGURA 4 ...................................................................................................................................................... 25 8.5 FIGURA 5 ...................................................................................................................................................... 26 8.6 FIGURA 6 ...................................................................................................................................................... 27 8.7 FIGURA 7 ...................................................................................................................................................... 28
3
1. Introduo
O fortalecimento da globalizao nos ltimos anos e a evoluo das tecnologias da informao contriburam para que a internet tenha um papel fundamental no que tange a transmisso de informaes bem como a prestao de servios a seus usurios atravs de websites. Produzir um website interagir com um conjunto de ramificaes tcnicas e tecnolgicas diversas: textos, hipertextos, design, usabilidade, mdia, mdias sociais e uma srie de novos elementos que podem surgir to rapidamente quanto o surgimento de novas tecnologias. Sendo assim, pode-se afirmar que produzir um website estar ciente das demandas de produo de design. Dentro do design de websites surgem elementos e formas de utiliz-los que podem variar de acordo com os objetivos dos produtos e seu processo de desenvolvimento (LIMA, 2011). A escolha das cores fundamental para uma boa harmonia dos elementos de um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os elementos da pgina. A seleo de cores para obteno de resultados especficos deve ser cuidadosa. A dosagem adequada de seu emprego e a escolha das demais cores que tero que coexistir, refletiro no efeito desejado em sites (AZEVEDO; SANTOS; OLIVEIRA ,2010) Com base no exposto, a questo norteadora do estudo : O uso da psicologia das cores decisivo para o sucesso ou insucesso de um website? Com o intuito de verificar a relevncia da utilizao da psicologia das cores na construo de sites, bem como analisar criticamente o quanto as cores influenciam na percepo dos usurios realizou-se uma minuciosa pesquisa bibliogrfica.
2. Metodologia Para fomentao da pesquisa utilizou-se a pesquisa bibliogrfica que permite a incluso simultnea de pesquisa experimental e semiexperimental, proporcionando uma compreenso mais completa do foco de interesse. Na realizao desta pesquisa ocorrida nos meses de agosto a dezembro de 2011, fez-se a pesquisa bibliogrfica buscando-se semelhanas e diferenas entre os artigos levantados nos documentos de referncia. Ademais, a pesquisa se deu utilizando-se das etapas assim ordenadas: coleta de bibliografias, avaliao das bibliografias, anlise e interpretao dos dados coletados e apresentao dos resultados. 4
A questo norteadora da pesquisa foi: O uso da psicologia das cores decisivo para o sucesso ou insucesso de um website? A anlise dos dados ocorreu atravs da anlise textual, a qual um mtodo de aprofundamento e mergulho em processos discursivos. Assim, com os mtodos supracitados tornou-se possvel analisar e sintetizar os conhecimentos inerentes ao tema. 5
3. Desenvolvimento 3.1 Sobre Websites A World Wide Web foi criada no incio da dcada de 1990, por Tim Berners-Lee, para aperfeioar a comunicao no CERN (Centre European pour la Recherche Nucleaire). Berners-Lee criou o HTML (HyperText Markup Language), uma linguagem de marcao baseada na bem-sucedida SGML (Standard Generalized Markup Language), para formatar os documentos que seriam distribudos em rede e tambm desenvolveu protocolos de comunicao para tornar vivel seu novo sistema de informaes em hipertexto (BERNERS- LEE, 1999). Como se tratavam de documentos formais, o HTML no tinha uma preocupao visual, sendo composto exclusivamente por informao. A marcao era utilizada para determinar o que significava cada elemento, sendo, por exemplo, um ttulo de pgina definido entre elementos <title>, um cabealho entre elementos <h1> e nmeros subsequentes, um pargrafo entre <p> e assim por diante (ANDRADE, 2005). Web era a existncia de um ambiente onde pessoas conseguissem trocar informaes livremente, e que essas informaes pudessem ser acessadas de diversos dispositivos (REIS, 2007). O desenvolvimento de um website de acordo com o mtodo tradicional utilizado na dcada de 1990, segundo AWAMURA (2004), uma extenso da mdia impressa, isto , pginas desenvolvidas para parecerem perfeitas nos navegadores principais da poca. Com base nas informaes supracitadas relevante ressaltar que a Web exerce um papel crescentemente importante nas reas de educao, negcios, comrcio, governos e recreao, portanto faz-se mister conhecer sua estrutura.(REIS, 2007).
3.2 Psicologia das Cores As cores transmitem mensagens e tendem a predispor determinados estados de humor, desencadeando emoes, modificando comportamentos e, por vezes, alterando o funcionamento do organismo. O nosso canal fsico de informao da cor so os nossos olhos. atravs dos sentidos, especificamente o da viso, pela luz, que somos informados sobre o meio externo. Ele nos d a configurao espacial, permitindo-nos o equilbrio postural, possibilitando-nos reconhecer objetos quanto a sua forma, cor, tamanho, mobilidade e luminosidade. 6
A cor exerce influncia decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa. A combinao das cores afeta o psicolgico e pode tornar um ponto importante no interesse do pblico em seu site. A combinao certa pode causar efeitos como de excitao, urgncia, contentamento, calma, vulgaridade, melancolia, segurana etc., e ainda destacar algum elemento em relao a outro. Sendo assim, Grujic (2011) delega as sensaes visuais de cada cor o um significado e maneira que a cor branca significa pureza, o preto-negativo, cinza-tristeza, vermelho-calor e dinamismo, rosa- graa, ternura, azul-pureza e f. Alm das sensaes visuais existem tambm as sensaes acromticas tais como a cor branca que traz as sensaes aqui listadas: inocncia, paz, divindade, calma, harmonia, para os orientais pode significar morte, batismo, casamento, cisne, lrio, neve, ordem, simplicidade, limpeza, bem, pureza e a cor preto a qual mostra sensaes contrrias como: sujeira, sombra, carvo, fumaa, misria, pessimismo, melancolia, nobreza, seriedade. expressivo e angustiante ao mesmo tempo. Alegre quando combinado com outras cores. Ademais, a cor cinza lembra p, chuva, neblina, tdio, tristeza, velhice, passado, seriedade. Posio intermediria entre luz e sombra (MORENO, 2008). Quanto as sensaes cromticas faz-se importante ressaltar as sensaes abaixo citadas (MORENO, 2008): Vermelho: guerra, sol, fogo, ateno, mulher, conquista, coragem, furor, vigor, glria, ira, emoo, paixo, emoo, ao, agressividade, perigo, dinamismo, baixeza, energia, revolta, calor, violncia. Laranja: prazer, xtase, dureza, euforia, outono, aurora, festa, luminosidade, tentao, senso de humor. Flamejar do fogo. Amarelo: egosmo, cimes, inveja, prazer, conforto, alerta, esperana, flores grandes, vero, limo, calor da luz solar, iluminao, alerta, euforia. Verde: umidade, frescor, bosque, mar, vero, adolescncia, bem-estar, paz, sade (medicina), esperana, liberdade, paz repousante. Pode desencadear paixes. Azul: frio, mar, cu, horizonte, feminilidade, espao, intelectualidade, paz, serenidade, fidelidade, confiana, harmonia, afeto, amizade, amor, viagem, verdade, advertncia. 7
3.3 Aplicando a psicologia das cores a um projeto de website Na Web a seleo de uma cor um pouco complicada, pois impossvel garantir que uma determinada cor ir se apresentar no monitor do usurio como ela realmente , ou seja, como a que o designer colocou. Isto acontece devido ao fato de cada monitor ter uma especificao diferente, uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e etc., e ainda cada um pode estar configurado com uma determinada resoluo inferior como 640x480 pixels, 800x600 pixels e assim por diante.
Para designers, particularmente para aquele trabalhando em campos como o de desenho de marcas para corporaes, marketing, desenho de embalagens, e interiores, o que importa como a cor afeta o humor e as escolhas do consumidor. Isso explorado por servios de consultoria de cor (FRASER; BANKS, P.49 apud LIMA, 2011).
No design, apesar de formas e uso de tipos de layout aparecem primeiro e serem considerados prioridade na formulao de peas, as cores assumem um papel influenciador. Se uma cor capaz de afetar o humor e as escolhas de um receptor e influenci-lo de tal forma, possvel, ento, assumir um papel de grande importncia no pensamento de qualquer publicitrio, artista ou designer na escolha das cores (LIMA, 2011). A escolha de cores para um site web representa metade de um design. Escolher as cores certas pode tomar boa parte do seu tempo na concepo e criao de um projeto. O primeiro passo analisar o foco da empresa ou produto (FERREIRA, 2011). 8
Usar as cores de forma harmoniosa saber utilizar as cores de uma forma que agrade os olhos, que seja percebida com clareza e excitao e que transmita uma ideia anteriormente concebida de forma competente, segura e particularmente eficiente. A combinao desses fatores que ir determinar a fidelidade e a reproduo de cores e a qualidade das imagens. A escolha da cor sofre influncia da moda, das tendncias e da deciso do designer. Sendo assim, Guimares (2004) ensina as sete diretrizes de utilizao das cores: 1) Esttica (harmonia, equilbrio, contraste, intensidade, variabilidade) 2) Visibilidade, legibilidade e saturao de leitura (conforto visual) 3) Organizao e usabilidade (como ajudar o usurio a navegar no site, direcionar a sua leitura, identificar unidades, partes, sees etc.) 4) Identidade (como se diferenciar e ser reconhecido por meio das cores) 5) Repertrio simblico (a carga simblica que pode ser incorporada s cores, naquele determinado contexto de uso e do repertrio do usurio que se pretende atingir) 6) Informao (como a cor pode contribuir para conduzir a informao) 7) Limitaes e recursos tcnicos (aspectos materiais do suporte e dos processos)
3.4 Anlises de sites de sucesso Para ratificar a importncia dos conceitos identificados na pesquisa, este trabalhou analisou alguns casos de sucesso, procurando identificar a aplicao da psicologia das cores em seu layout. Todos os sites podem ser observados em imagem de alta resoluo nos anexos. 9
3.4.1 Anlise de site de turismo
Figura 1 Pgina inicial do site DREAMLINE.
DREAMLINE - www.dreamline.nu O Site apresentado na figura 1 equilibra cores quentes e frias. fcil de ver, sem brancos na sua galeria e com uma combinao que fortalece bem as imagens. Nos textos, usa marrom bem leve, mas a fonte leve e no cansa. Como a cor da fonte no preta a percepo torna-se suave. No fundo utiliza a cor marrom, de maneira bastante sutil utiliza como cor de fundo da fonte textual, um tom rosa dando delicadeza e trazendo calma e leveza ao site. A cores frias do aimpresso de ambientes maiores aumentando as dimenses de um recinto enquanto que as cores quentes diminuem (AZEVEDO; SANTOS; OLIVEIRA, 2010). As cores quentes embora excitem o SNC(Sistema Nervoso Central) atuando favoravelmente na vitalidade ; em quantidade geram extresse (AZEVEDO; SANTOS; OLIVEIRA, 2010). A combinao de cores quentes e frias feita no site analisado fez-se relevante j que estas quando bem combinadas enfatizam suas qualidades e neutralizam seus problemas como os supracitados. 10
3.4.2 Anlise de conceituado site de esportes
Figura 2 Pgina inicial do site Globo Esporte.
GLOBOESPORTE.COM - www.globoesporte.com O Site apresentado na figura 2 lanou uma famlia de sites que possui uma combinao de cor dedicada ao perfil do time ou esporte que o internauta procura, sendo de muito bom gosto e de admirvel criatividade no uso das cores em tons verdes. Como aduz Azevedo, Santos e Oliveira (2010) Toda cor afeta o ser humano , seja pelo eletromagnetismo,seja pela representao psicossocial. Dessa forma, conveniente salientar que a utilizao das cores dedicada ao perfil do time ou esporte que o internauta procura, foi acertada j que aspectos psicolgicos so veemente afetados quando se trata do futebol,o esporte mais popular do pas. paixo nacional. 11
3.4.3 Anlise de famosa empresa de calados
Figura 3 - Pgina inicial do site Havaianas.
HAVAIANAS - www.havaianas.com.br O Site apresentado na figura 3 faz uso despudorado da cor. Com inestimvel resultado, visto que o site destina-se a um pblico jovem e vende um produto nico na sua forma, varivel na sua aparncia. O desdobramento das cores associadas a modelos especficos flui muito bem e gera infinitas possibilidades. De acordo com estudos de psicologia, a utilizao das cores na publicidade ou como parte da identidade corporativa de uma empresa, constitui um dos cdigos de comunicao no verbal mais certeiros e efetivos(JUSTO, 2009). Assim , percebe-se que a empresa Havaianas utiliza-se das cores no seu site para estabelecer uma ntima comunicao com seu pblico alvo. 12
3.4.4 Anlise de site de fotografia
Figura 4 - Pgina inicial do site PHOTOSYNTHESIS.
PHOTOSYNTHESIS - www.photosynt.net O Site apresentado na figura 4; O que se espera normalmente de um site de fotografia uma exploso de cores e imagens, o que nem sempre o desejado. Este site no usa nada (ou quase nada) de branco: quando vamos ver as fotos, nossa retina no est muito saturada, permitindo uma melhor leitura visual. simples, leve e funciona. Faz uso de cores frias que so convenientes para ambientes onde se deseja relaxamento, pela sugesto de temperatura agradvel e de tranquilidade , quando em excesso podem tornar o ambiente depressivo e montono, por isso tambm faz leve uso das cores quentes para neutralizar este impeclio (AZEVEDO; SANTOS; OLIVEIRA, 2010). 13
3.4.5 Anlise de site de conceituada revista brasileira
Figura 5 - Pgina inicial do site Veja So Paulo.
VEJA SO PAULO - www.vejinha.com.br O Site apresentado na figura 5 trabalha com hierarquia visual a partir das cores. Cuida bastante da qualidade das fotos que mostram, pois so os nicos elementos coloridos da composio. Toda a navegao do site em tons de cinza e isso neutraliza essa rea de interao do site. Algumas evidncias cientficas sugerem que a luz de diversas cores, que entra pelos olhos, pode afetar diretamente o centro das emoes. Cada um de ns responde cor de uma forma particular. As pessoas tendem tambm a ser atradas por certas cores, em virtude de alguns fatores determinantes (GRUJIC,2011). As cores utilizadas no site da revista so de bom tom ao que se prope, visto que, estas tm por objetivo chamar a ateno do pblico leitor de maneira a entret-lo e torna-lo informado. 14
3.4.6 Anlise de site de filmes
Figura 6 - Pgina inicial do site Wim Wenders.
WIM WENDERS - www.wim-wenders.com O Site apresentado na figura 6 exibe sofisticados recursos cromticos no tratamento da imagem, usando preto em fundo preto, tons extensivos de cinzas amarronzados e azulados que geram um preto e branco colorido em grficos que poderiam ser banais. Um filme ou foto exibido numa janela em fundo preto. A cor pontual sobre um fundo preto, conduz a observao de um objeto fotogrfico ou de uma informao especficos. As cores mais suaves e discretas possuem um comprimento de onda mais curto e rpido mexendo com os nossos sentidos mais elevados, os espirituais. Sao cores que acalmam a circulao do sangue esfriando assim a temperatura do corpo (MORENO, 2008). 15
3.4.7 Anlise de site de emissora alem
Figura 7 - Pgina inicial do site ZDF.
ZDF - www.zdf.de O Site apresentado na figura 7 explora bem a identidade das sees, com boa intensidade de cores e sem exagerar nas reas das cores que fazem a variao. As cores escolhidas tm saturao descendente, so intensas sem serem agressivas. A cor cinza d dois nveis de destaque para os textos, ao utilizar ora branco, ora preto, e ainda valoriza as imagens fotogrficas e as cenas que so reproduzidas. Este site faz uso das cores quentes, que so cores que chamam mais a ateno, ficam mais em evidncia, isto , tem um alto poder de penetrao. So cores com uma onda de frequncia mais longa e lenta que envolvem os sentidos instintivos-materiais. Estimulam a circulao sangnea elevando assim a temperatura do corpo (MORENO, 2008). 16
4. O Projeto O objetivo do site atender uma empresa do ramo alimentcio, que trabalha diretamente com jantares, eventos corporativos e buf. A sua necessidade principal um site representativo que possa captar novos clientes com imagens de eventos j realizados e poder fazer oramento online, facilitando os trmites para finalizar a venda de prestao de servios. Mais informaes sobre os requisitos do projeto podem ser obtidas no Briefing, disponvel no Apndice 1. A figura 8 apresenta o layout proposto.
Figura 8 Projeto do Layout
O Apndice 2, contm imagens do layout em melhor resoluo. 17
As cores escolhidas para o desenvolvimento do layout foram vermelho, pois relacionado a fogo e calor, e laranja, pela tentao ou flamejar do fogo. A organizao do layout centralizado absoluto de forma que aumenta o tamanho somente de forma vertical. Na pgina inicial do site, o layout fixo na horizontal e vertical com o tamanho de 970 pixels de largura, as demais pginas internas do site possuem a largura fixa e altura varivel com o contedo das pginas. O menu foi criado em forma horizontal para melhor usabilidade do pblico-alvo, que pode ser de um jovem de 18 anos a um senhor com 70 anos, pois est localizado no topo de pgina com cores relacionadas ao layout que destacam as palavras. A localizao do formulrio de oramento na pgina inicial apresentado imediatamente facilitando a relao prestao de servio/cliente ao fazer a cotao de preos de uma forma mais gil e fcil para qualquer pessoa que acesse o site sem diferena de faixa de idade. 18
5. Consideraes Finais A cor como resultado de percepo visual, no processo cognitivo de excitao sensorial, perde apenas para estmulos sonoros. A cor websites ela assume um papel de protagonista, sujeitando todos os outros elementos da sua interface ao seu sucesso ou insucesso, ao seu uso eficaz ou ineficaz. As cores desempenham papel fundamental no que tange ao resultado de trabalhos relacionados web design, isso pode ser claramente observado em sites como os citados no desenvolvimento desta pesquisa. Com base no que foi pesquisado, tornou-se claro a importncia de que os profissionais de design tenham em mente que ao responsabilizar-se pela construo de uma web, estes devem antes saber e procurar conhecer a que usurio se destina, com o intuito de ter em mente o nfimo do usurio para ento utilizar de seus conhecimentos e desenvolver bem seu trabalho. Neste contexto, a psicologia das cores agrega valor ao processo de produo de web site independente de seu segmento. relevante citar ento, que, os sites analisados neste trabalho tiveram como cunho do sucesso a escolha acertada de cores que condizem com os usurios a que se destinam. Portanto, conclui-se que a psicologia das cores aplicada ao web design de imensurvel relevncia, vista a necessidade atual de constante aprimoramento na forma de chegar ao usurio de forma a satisfaz-lo. Como principal recomendao, prope-se um aprofundamento do tema de maneira a buscar fontes quantitativas relacionadas a acesso dos sites citados e a relao que estes tm com a aplicao de cores que melhor definem o objetivo de cada site e atende aos anseios dos usurios a quem so destinados. 19
6. Referncias bibliogrficas ANDRADE, W. Web Standards: do comeo e de leve. 2005. Disponvel em: <http://fatorw.com/2005/12/22/web-standards-do-comeco-e-de-leve>. ltimo acesso em: 06 ago. 2011.
AZEVEDO, Maria de Ftima Mendes de; SANTOS, Michelle Steiner dos; OLIVEIRA, Rbia de; O uso da cor no ambiente de trabalho: uma ergonomia da percepo. Florianpolis-SC, 2010.
AWAMURA, K. As vantagens do Web Standards para seus visitantes, clientes e voc! 2004. Disponvel em: <http://www.geocities.com/ken_awamura/wsbenefits/index.htm>. Acesso em: 18 nov. 2011.
BERNERS-LEE, T. Weaving the Web: the original design and ultimate destiny of the World Wide Web by its inventor. 1.ed. San Francisco, CA. Harper San Francisco. 1999. ISBN 00-625-1586-1
FERREIRA, Davi. - Definindo cores para o seu layout. Disponvel em: <www.daviferreira.com> - Acesso em: 22 ago.2011.