Your SlideShare is downloading. ×
O uso de cores em interfaces digitais
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

O uso de cores em interfaces digitais

3,907

Published on

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em …

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/o-uso-de-cores-em-interfaces-digitais/

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,907
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. o uso de cores eminterfaces digitaisEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  • 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  • 3. coresToda cor possui 3 características básicas:•  Matiz.•  Tom.•  Intensidade.
  • 4. matizÉ a característica que define e distingueuma cor.Vermelho, verde ou azul, por exemplo,são matizes.Para mudar o matiz de uma cor,acrescenta-se a ela outro matiz.
  • 5. tomRefere-se à maior ou menor quantidadede luz presente na cor.Quando o preto é adicionado adeterminado matiz, este se torna maisescuro. Essas gradações são chamadasde escalas tonais.Para obter escalas tonais mais claras,acrescenta-se branco.
  • 6. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett cores: tomAmarelo Amarelo Amarelo Amarelo Amarelo Amarelo Amarelo Amarelo Amarelo Amarelo Amarelo 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% Preto Preto Preto Preto Preto Preto Preto Preto Preto Preto 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% No computador é possível fazer a variação de tonalidade de uma cor ao adicionar, gradualmente, a cor preta sobre a cor “original”.
  • 7. intensidadeDiz respeito ao brilho da cor.Um matiz de intensidade alta ou forte évívido e saturado.Um matiz de intensidade baixa ou fracacaracteriza cores apagadas ou pastel.
  • 8. as cores são divididas em...•  Cores primárias: não podem ser•  obtidas a partir de outras.•  Cores secundárias: são obtidas pela•  mistura de 2 cores primárias.•  Cores terciárias: são obtidas pela•  mistura de 1 primária com 1 ou mais•  secundárias.
  • 9. as cores são divididas em...•  Cores complementares: se encontram•  em oposição no disco de cores.•  Cores análogas: há nelas uma mesma•  cor básica.•  Cores neutras: criadas a parir da•  mistura das 3 cores primárias, ou•  qualquer par de cores complementares.
  • 10. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett círculo cromático com a divisão das cores Vermelho Vermelho-Violeta Laranja Magenta Amarelo Violeta Verde-Amarelo Azul Verde Anil Verde-Azulado Cyan
  • 11. o uso de cores em interfaces digitais: cores quentes x cores frias
  • 12. cores quentes x cores friasAs cores podem ser classificadas em 2grupos, em função das reações queprovocam:•  As cores do 1º grupo são chamadas de•  cores quentes (tons de vermelho e•  laranja).•  As cores do 2º grupo são chamadas de•  cores frias (tons de verde e azul).
  • 13. cores quentes•  São psicologicamente dinâmicas,•  estimulantes e vibrantes.•  Sugerem vitalidade, excitação e•  movimento.
  • 14. cores frias•  São calmas, suaves e estáticas.•  Dão a sensação de tranqüilidade,•  frescor, descanso e paz.
  • 15. * Fonte: dissertação de mestrado “A contribuição da ergonomia ambiental na composição cromática dos ambientes construídos de locais de trabalho de escritório”, de JulianeFigueiredo Fonseca círculo cromático com a divisão das cores quentes e frias As cores quentes Cores (vermelhos e laranjas) quentes comandam nossa atenção. Nossos olhos são facilmente atraídos, de maneira que o vermelho cria facilmente um contraste. As cores frias (azuis e verdes) desaparecem gradualmente diante dos nossos olhos. GrandesCores frias áreas de cores suaves são ótimas para a criação de um contraste eficaz.
  • 16. * Fonte: livro “Design para quem não é designer”, de Robin Williams cores quentes x cores frias Mesmo que o nome “Scarlett” seja menor, ele é dominante devido à aplicação da cor quente. O nome maior na cor quente se sobrepõe ao nome menor. Em geral, este é um efeito que deve ser evitado.
  • 17. * Fonte: livro “Design para quem não é designer”, de Robin Williams cores quentes x cores frias Na cor fria, o nome “Scarlett” praticamente desaparece. Geralmente, para que o contraste com uma cor fria realmente crie o efeito desejado, é preciso usá-la em maior quantidade.
  • 18. cores quentes x cores frias Utilizou-se cores quentes para contrastar com a frieza do tom azul predominante na interface, na tentativa de criar um efeito alegre e convidativo, além de comunicar a idéia de transmissão de dados em uma rede de fibra ótica.
  • 19. o uso de cores em interfaces digitais: modelo cmyk
  • 20. modelo cmyk (cor pigmento)A impressão a cores usa 4 coresprimárias conhecidas como CMYK:•  Cyan (ciano, um tipo de azul).•  Magenta (a cor mais próxima do rosa).•  Yellow (amarelo).•  Black (preto).
  • 21. modelo cmyk (cor pigmento)São as 4 cores de tinta que umaimpressora utiliza.Todas as outras cores são simuladas,sobrepondo as 4 cores primárias emporcentagens variadas.
  • 22. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett círculo cromático do modelo cmykMagenta Amarelo Vermelho Vermelho-Primária Primária Secundária Violeta Laranja Terciária Terciária Violeta Verde-Amarelo Terciária Terciária Azul Verde Cyan Secundária Secundária Anil Verde- Primária Terciária Azulado Terciária
  • 23. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett modelo cmyk No modelo CMYK, cada cor tem um valor que varia de 0% até 100%: Cyan (C) Magenta (M) Amarelo (Y) Preto (K) Estas são as quatro cores do processo CMYK. Não é possível ver quaisquer pontos nestas caixas porque elas estão com 100% de cada cor. A imagem acima é uma combinação das quatro cores do modelo CMYK. É possível ver os pontos de cada uma delas na área aumentada.
  • 24. o uso de cores em interfaces digitais: modelo rgb
  • 25. modelo rgb ou aditivo (cor luz)Quando a cor é formada por luzescoloridas, produzidas pela filtragem oudecomposição da luz branca, o estímulorecebe o nome de cor luz.A cor vem direto da fonte de luz para osnossos olhos, sem a interferência dequaisquer objetos.
  • 26. modelo rgb ou aditivo (cor luz)Os monitores (de televisão e computador)usam o modelo de cor RGB, quesignifica:•  Red (vermelho).•  Green (verde).•  Blue (azul).
  • 27. modelo rgb ou aditivo (cor luz)A cor RGB não é um modelo refletivocomo o CMYK (onde a luz atinge o papele é refletida até os nossos olhos).Por isso, a cor RGB é capaz derepresentar uma porcentagem muitomaior do espectro visível.É possível utilizar cores mais brilhantes emais vibrantes do que em papel.
  • 28. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett modelo rgb A a luz vem do sol, atinge um objeto e a cor é refletida para os nossos olhos. A cor RGBvem através do monitor, direto em nossos olhos.
  • 29. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett círculo cromático do modelo rgb Vermelho Vermelho- Primária Violeta Laranja Terciária Terciária Magenta Amarelo Secundária Secundária Violeta Verde-Amarelo Terciária Terciária Azul VerdePrimária Primária Anil Verde- Terciária Azulado Cyan Terciária Secundária
  • 30. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett modelo rgb No modelo RGB, cada cor tem um valor que varia de 0 até 255:Vermelho (R) Verde (G) Azul (B) R: 255 R: 0 R: 0 R: 172 R: 25 R: 255 R: 255 R: 153 G: 0 G: 255 G: 0 G: 155 G: 178 G: 255 G: 204 G: 102 B: 0 B: 0 B: 255 B: 69 B: 115 B: 76 B: 153 B: 51
  • 31. * Fonte: livro “Web design para não-designers”, de Robin Williams e John Tollett modelo rgb ou aditivo (cor luz)Modelo RGB Modelo CMYK(ou aditivo) Vermelho (R) Cyan (C) Verde (G) Branco Magenta (M) Preto O modelo RGB também é conhecido como modelo aditivo, porque as 3 cores primárias (vermelho, verde e azul) são “adicionadas” para formar a Azul (B) R: 255 Amarelo (Y) C: 100% luz branca. G: 255 M: 100% B: 255 Y: 100%
  • 32. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva significados atribuídos às cores rgb Nome da cor Representação Características e significados da cor Provoca uma impressão calorosa e agradável, ativa a criatividade e Amarelo sugere proximidade. Utilizada em excesso, pode tornar-se (combinação monótona e cansativa. É um bom indicador de atividade, sendo do vermelho adequada para mostrar uma janela ativa. Não deve ser usada para com o verde) cor de texto, a não ser com o fundo preto ou azul escuro. Cor estimulante no campo visual. Desperta o entusiasmo, dinamismo, ação e violência. Dá a sensação de calor e força, mas se utilizada em excesso pode irritar e desenvolver sentimentos de Vermelho intranqüilidade e despertar violência. Muito eficiente nas interfaces para sinalizar perigo ou chamar a atenção. Bordas vermelhas de sinais de advertência são rapidamente percebidas. Evitar seu uso em amplas áreas ou como cor de fundo.
  • 33. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva significados atribuídos às cores rgb Nome da cor Representação Características e significados da cor Quando utilizada em tom claro, transmite sensação de bem estar e sugere tranqüilidade, equilíbrio, cor da permissão. Tons escuros tendem a deprimir. É uma cor recebida de forma menos agressiva, Verde com maior passividade, além de ser a mais visível das 3 cores primárias dos terminais RGB, sendo muito propícia quando se deseja transmitir rapidamente uma informação. Evitar seu uso para contornos de objetos. Pode ser vista como contradição entre estímulo e repouso, e transmite uma sensação de frio, confiança, integridade e delicadeza. Sugere espaço e profundidade. É uma cor fria, a mais tranqüila de todas as cores, e tem grande capacidade de relaxar Azul as pessoas. Fornece um bom fundo para as cores vívidas. O olho humano é menos sensível aos comprimentos de onda azul, é uma cor difícil de ser focalizada e de se obter um bom contraste, não devendo ser utilizada para textos e nem para detalhes finos.
  • 34. * Fonte: artigo "Cor e seu emprego em interfaces homem-computador na web", de Vanessa Tavares de Oliveira Barros, Gabriela Mager, Rosane Fonseca de Freitas Martins eCristiane Affonso de Almeida Zerbetto significados atribuídos às cores rgb Aspectos sociais, fatores culturais, modismos, idade, sexo e meio em que vivem podem influenciar na escolha das cores: Nome da cor Representação Idade Associação afetiva Vermelho 1 - 10 Idade da efervescência e da espontaneidade Laranja 10 - 20 Idade da imaginação, excitação e aventura Amarelo 20 - 30 Idade da força, potência e arrogância Verde 30 - 40 Idade da diminuição do fogo juvenil Azul 40 - 50 Idade do pensamento e da inteligência Lilás 50 - 60 Idade do juízo, do misticismo e da lei Roxo Além dos 60 Idade do saber, da experiência e da benevolência Fator da idade como influenciador na preferência por determinadas cores.
  • 35. o uso de cores em interfaces digitais: cores fortes
  • 36. cores fortesCores fortes e brilhantes atraem o olhar.O designer pode utilizar cores fortes paraajudar na diferenciação das áreas da telae dirigir a atenção do usuário para ositens que devem ser percebidos.A interface pode ser dividida em partesclaramente identificadas, destacando oselementos importantes.
  • 37. cores fortesÉ preciso utilizar cores com moderação.Se o designer busca atrair a atenção dousuário, isso só irá funcionar se muitasáreas da tela não estiverem fortementecoloridas.Se todos os elementos da interfaceatraírem os olhos, o resultado será umasensação de confusão e caos.
  • 38. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes No exemplo ao lado, é possível notar o uso de 3 áreas da interface que são facilmente demarcadas através do uso de cores fortes. Além disso, o título em negrito ajuda o usuário a enxergar rapidamente a informação de cada área, permitindo que ele decida se isso o interessa.
  • 39. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes Nesta tela, são utilizadas cores intensas, brilhantes e alegres, posicionadas sobre um fundo neutro.
  • 40. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes As interfaces da Apple sempre utilizam combinações de cores, tons e efeitos balanceados de forma eficaz, atraindo rapidamente o olhar. No exemplo ao lado, as áreas escuras e as cores foram aplicadas de forma moderada, para ressaltar os conteúdos mais importantes.
  • 41. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes Neste caso, a cor não é brilhante. Mas é forte, em parte por causa da quantidade de cor verde utilizada. O propósito de tanto verde é comunicar valores como “qualidade” e “saúde”, apesar do visual do site não combinar com a imagem utilizada.
  • 42. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes Este site vende roupas esportivas exclusivamente femininas. O uso de cores suaves reforça a personalidade da marca.
  • 43. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes Neste exemplo, a utilização de cores escuras em grande quantidade ao redor da tela auxilia a visualização da área principal da página. Resultado: devido ao contraste entre a área de conteúdo da tela e o fundo, os olhos são atraídos para a informação da página.
  • 44. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> cores fortes No exemplo ao lado, é possível observar a aplicação de um recurso parecido com o caso anterior, ou seja, utilização de cores em grande quantidade ao redor da tela. A cor de fundo é suficientemente pálida para manter o conteúdo perceptível. Além disso, os elementos grandes e bem espaçados da tela ajudam a desviar a atenção do usuário em relação ao fundo “atrativo” da interface.
  • 45. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> o verde é o novo cinza? Hoje em dia, cores brilhantes e alegres são amplamente utilizadas nas telas. O verde tem se tornado a cor oficial de muitas interfaces. O azul, laranja e rosa, aplicados de forma saturada, também são muito utilizados.
  • 46. o uso de cores em interfaces digitais: contraste figura x fundo
  • 47. contraste figura x fundoO contraste entre a cor da figura e a cordo fundo também é chamado decontraste de luminância.Quanto maior for essa diferença, maisfácil será discriminar a figura.
  • 48. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contraste figura x fundo Interface Interface Interface Interface Interface Interface
  • 49. contraste figura x fundoOs contrastes mais favoráveis para alegibilidade* são apresentados a seguir.* Legibilidade: qualidade do caracter que faz com que ele, separado de outros* Legibilidade: caracteres, seja visível em relação ao seu fundo.
  • 50. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a preto sobre amarelo
  • 51. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a verde escuro sobre branco
  • 52. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a vermelho sobre branco
  • 53. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a azul sobre branco
  • 54. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a branco sobre azul
  • 55. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a preto sobre branco
  • 56. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a amarelo sobre preto
  • 57. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a branco sobre vermelho
  • 58. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a branco sobre verde escuro
  • 59. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a branco sobre preto
  • 60. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a legibilidade a vermelho sobre amarelo
  • 61. contraste figura x fundoOs contrastes mais favoráveis paraleiturabilidade* são apresentados aseguir.* Leiturabilidade: reconhecimento do conteúdo da informação, quando* Leiturabilidade: representada por caracteres em grupamentos significativos* Leiturabilidade: como palavras e sentenças.
  • 62. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a leiturabilidade preto sobre branco
  • 63. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a leiturabilidade verde escuro sobre branco
  • 64. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a leiturabilidade azul escuro sobre branco
  • 65. * Fonte: palestra “Ergonomia e usabilidade de sistemas de informação”, de Cláudia Mont`Alvão contrastes mais favoráveis para a leiturabilidade preto sobre amarelo
  • 66. contraste figura x fundo Para evitar a perda de contraste entre o texto e o fundo da tela (caracterizado por uma série de imagens), utilizou-se uma área de cor clara, livre de elementos gráficos, como base para a aplicação de caracteres sobrepostos.
  • 67. o uso de cores em interfaces digitais:recomendações
  • 68. recomendaçõesRecomenda-se o uso de 3 a 7 coresnuma mesma tela, com o propósito decodificar informações.A cor não é somente uma propriedadeestética, mas também uma ferramentapara identificar os elementos que devematrair atenção, interagindo com o usuário.
  • 69. recomendaçõesAlgumas cores são fatigantes porqueprovocam a sensação de:•  Vibração.•  Ilusão de sombra.•  Flutuação.Logo, deve-se evitar o uso simultâneo...
  • 70. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva deve-se evitar o uso simultâneo das cores vermelho verde Cores fatigantes: provocam uma sensação de vibração, ilusão de sombra e flutuação.
  • 71. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva deve-se evitar o uso simultâneo das cores azul amarelo Cores fatigantes: provocam uma sensação de vibração, ilusão de sombra e flutuação.
  • 72. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva deve-se evitar o uso simultâneo das cores verde azul Cores fatigantes: provocam uma sensação de vibração, ilusão de sombra e flutuação.
  • 73. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva deve-se evitar o uso simultâneo das cores vermelho azul Cores fatigantes: provocam uma sensação de vibração, ilusão de sombra e flutuação.
  • 74. recomendaçõesOutras cores dificultam a focalização,porque causam a sensação de pulsaçãoda tela.Logo, deve-se evitar o uso simultâneo...
  • 75. * Fonte: artigo "Ergonomia, cores e web-sites", de Susy N. Silva R. Amantini, Thaís Regina Ueno, Rodrigo Ferreira de Carvalho e José Carlos Plácido da Silva deve-se evitar o uso simultâneo das cores rosa azul magenta Cores que dificultam a focalização: provocam uma sensação pulsação da tela.
  • 76. o uso de cores em interfaces digitais:cores protegidas
  • 77. cores protegidasNem sempre as cores escolhidas podemser visualizadas da mesma forma portodos os dispositivos.Os browsers compartilham o mesmoprocesso de gerenciamento de cores,onde apenas 216 são comuns a qualquerplataforma.
  • 78. cores protegidasAs 216 cores protegidas são definidas emconversões de RGB para hexadecimal,das quais, subdividem-se em:•  6 vermelhos, 6 verdes e 6 azuis.•  Que se combinam em variações de•  00, 33, 66, 99, CC e FF.
  • 79. * Fonte: artigo "Cor e seu emprego em interfaces homem-computador na web", de Vanessa Tavares de Oliveira Barros, Gabriela Mager, Rosane Fonseca de Freitas Martins e Cristiane Affonso de Almeida Zerbetto cores protegidas (comuns em qualquer plataforma) Valores para RGB Valor hexadecimal correspondente 0 00 51 33 102 66 153 99 Cores protegidas 204 CC 255 FF Valores hexadecimais das cores abaixoVermelho (R) Verde (G) Azul (B) R: 255 R: 0 R: 0 R: 172 R: 25 R: 255 R: 255 R: 153 G: 0 G: 255 G: 0 G: 155 G: 178 G: 255 G: 204 G: 102 B: 0 B: 0 B: 255 B: 69 B: 115 B: 76 B: 153 B: 51 FF0000 00FF00 0000FF AC9B45 19B273 FFFF4C FFCC99 996633
  • 80. * Fonte: artigo "Cor e seu emprego em interfaces homem-computador na web", de Vanessa Tavares de Oliveira Barros, Gabriela Mager, Rosane Fonseca de Freitas Martins eCristiane Affonso de Almeida Zerbetto cores protegidas (comuns em qualquer plataforma) Quadro de cores hexadecimais protegidas.
  • 81. cores protegidas (comuns em qualquer plataforma)
  • 82. cores protegidas (comuns em qualquer plataforma) Globo.com: versão web.
  • 83. cores protegidas (comuns em qualquer plataforma)www.globo.com Globo.com: versão mobile.
  • 84. o uso de cores em interfaces digitais:usuários daltônicos
  • 85. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> usuários daltônicos: #comofaz ? Assegure-se de que toda informação comunicada com cores também esteja disponível sem cores. Na prática isso quer dizer que a cor não deve ser a única forma de identificar elementos na interface, como links, menus, textos, etc. Um exemplo disso são as mensagens de erro em formulários. Se o contorno em vermelho de um campo é a única maneira de comunicar que ele foi preenchido de forma incorreta, significa que esse formulário não é suficientemente acessível para todos os tipos de usuário.
  • 86. usuários daltônicos: #comofaz ?Exemplo de mensagem de erro em formulário do site Multishow.
  • 87. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários com visão normal enxergam as interfaces. Exemplo de como os usuários daltônicos enxergam as interfaces.
  • 88. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários com visão normal enxergam as interfaces. Exemplo de como os usuários daltônicos enxergam as interfaces.
  • 89. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários Exemplo de como os usuários daltônicoscom visão normal enxergam enxergam as interfaces. as interfaces.
  • 90. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários com visão normal enxergam as interfaces. Exemplo de como os usuários daltônicos enxergam as interfaces.
  • 91. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários com visão normal enxergam as interfaces. Exemplo de como os usuários daltônicos enxergam as interfaces.
  • 92. * Fonte: artigo "As seen by the color blind" - <http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-blind> usuários daltônicos: #comofaz ? Exemplo de como os usuários com visão normal enxergam as interfaces. Exemplo de como os usuários daltônicos enxergam as interfaces.
  • 93. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> como testar se a sua interface é acessível aos daltônicos? Vischeck: http://www.vischeck.com/
  • 94. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> como testar se a sua interface é acessível aos daltônicos? Color Oracle: http://colororacle.cartography.ch/index.html
  • 95. o uso de cores em interfaces digitais: referências bibliográficas
  • 96. referências bibliográficas: livros
  • 97. referências bibliográficas: livros •  Web design para não-designers •  Robin Williams •  John Tollett
  • 98. referências bibliográficas: livros •  Design para quem não é designer •  Robin Williams
  • 99. referências bibliográficas: artigos
  • 100. referências bibliográficas: artigos•  Design acessível, daltonismo e a cegueira das cores•  Henrique C. Pereira•  http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-•  cegueira-das-cores/#more-329•  As seen by the color blind•  http://www.colourlovers.com/web/blog/2008/07/24/as-seen-by-the-color-•  blind•  The visual design of Web 2.0•  Jonathan Nicol•  http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/•  Web 2.0 how-to design style guide•  Ben Hunt•  http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-•  guide/
  • 101. referências bibliográficas: artigos•  Ergonomia, cores e web-sites•  Susy N. Silva R. Amantini•  Thaís Regina Ueno•  Rodrigo Ferreira de Carvalho•  José Carlos Plácido da Silva•  12º Congresso Brasileiro de Ergonomia (2002)•  Cor e seu emprego em interfaces homem-computador na web•  Vanessa Tavares de Oliveira Barros•  Gabriela Mager•  Rosane Fonseca de Freitas Martins•  Cristiane Affonso de Almeida Zerbetto•  6º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design (2004)
  • 102. referências bibliográficas: monografias,dissertações e teses
  • 103. referências bibliográficas: monografias, dissertações e teses•  A contribuição da ergonomia ambiental na composição cromática•  dos ambientes construídos de locais de trabalho de escritório•  Juliane Figueiredo Fonseca•  Dissertação de Mestrado do Programa de Pós-Graduação em Design: Ergonomia e Usabilidade da Interação•  Humano-Computador (PUC-Rio - 2004)
  • 104. referências bibliográficas: palestras
  • 105. referências bibliográficas: palestras•  Ergonomia e usabilidade de sistemas de informação•  Cláudia Mont`Alvão
  • 106. referências bibliográficas: sites
  • 107. referências bibliográficas: sites•  Vischeck•  http://www.vischeck.com/•  Color Oracle•  http://colororacle.cartography.ch/index.html
  • 108. o uso de cores em interfaces digitais:sobre o professor
  • 109. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  • 110. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×