Download - Interface
ran
gel@
dsc.u
fpb
.b
rra
ng
el@
dsc.u
fpb
.b
rra
ng
eld
e
qu
eir
oz@
gm
ail.c
om
ran
geld
e
qu
eir
oz@
gm
ail.c
om
DSC/CCT/UFCGDSC/CCT/UFCG
22
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
“Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.”
[Lemay, Duff & Mohler, Graphics & Web Page Design (1996)]
33
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Projeto Gráfico IProjeto
Gráfico I “Visual” da interface com o usuário, quer para
aplicações stand-alone ou web
Composição visual contendo fontes de texto, imagens, cores e layouts
Criação de uma “cara” e um “visual impressivo” para um produto
Estabelecimento de um framework destinado à compreensão do conteúdo
“Visual” da interface com o usuário, quer para aplicações stand-alone ou web
Composição visual contendo fontes de texto, imagens, cores e layouts
Criação de uma “cara” e um “visual impressivo” para um produto
Estabelecimento de um framework destinado à compreensão do conteúdo
44
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Projeto Gráfico II
Projeto Gráfico II
Fontes de textoFontes de texto
ImagensImagens
CoresCores
LayoutLayout
55
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Projeto Gráfico III
Projeto Gráfico III
Fontes de textoFontes de texto
ImagensImagens
CoresCores
LayoutLayout
66
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Compartilhamento de aspectos de práticas de projeto em Engenharia e Ciência da Computação com foco em aspectos cognitivos, culturais, simbólicos e emocionais
Relação direta com os aspectos Utilidade, Usabilidade e Preferência
Compartilhamento de aspectos de práticas de projeto em Engenharia e Ciência da Computação com foco em aspectos cognitivos, culturais, simbólicos e emocionais
Relação direta com os aspectos Utilidade, Usabilidade e Preferência
Projeto Gráfico IV
Projeto Gráfico IV
77
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Prática adotada pelas diferentes sociedades humanas há milhares de anos
Prática adotada pelas diferentes sociedades humanas há milhares de anos
Projeto Gráfico V
Projeto Gráfico V
88
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diversificação da arte e do projeto visual a partir da Revolução Industrial
Projeto de impressos e artefatos para a produção em massa
Diversificação da arte e do projeto visual a partir da Revolução Industrial
Projeto de impressos e artefatos para a produção em massa
Projeto Gráfico VI
Projeto Gráfico VI
http://www.ebroadcast.com.au/dir/Arts/Illustration/Historic_Illustrators/http://www.ebroadcast.com.au/dir/Arts/Illustration/Historic_Illustrators/
99
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Desenvolvimento do projeto gráfico como profissão sobretudo após a II Guerra Mundial.
Desenvolvimento do projeto gráfico como profissão sobretudo após a II Guerra Mundial.
Projeto Gráfico VII
Projeto Gráfico VII
Poster (1989)Poster (1989)
Neville BRODYNeville BRODYFonte INSIGNIAFonte INSIGNIA
Fonte ONDINAFonte ONDINA
Projeto visualProjeto visual
Adrian FRUTIGERAdrian FRUTIGER
Fonte ZAPFINO EXTRAFonte ZAPFINO EXTRA
Fonte ZAPF ESSENTIALS OFFICEFonte ZAPF ESSENTIALS OFFICE
Hermann ZAPFHermann ZAPFCartaz Publicitário da FIRESTONE (1999) Cartaz Publicitário da FIRESTONE (1999)
LogomarcasLogomarcas
1010
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Fundamentação no EQUILÍBRIO e na INTEGRAÇÃO de aspectos objetivos e subjetivos
Fundamentação no EQUILÍBRIO e na INTEGRAÇÃO de aspectos objetivos e subjetivos
Projeto Gráfico VIII
Projeto Gráfico VIII
AspectosObjetivosAspectosObjetivos
AspectosSubjetivos
AspectosSubjetivos
Projeto GráficoProjeto Gráfico
1111
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Aspectos ObjetivosObjetivos Fundamentação em estudos quantitativosquantitativos,
e.g. testes de usabilidade O “visual” funciona?
Aspectos SubjetivosSubjetivos Fundamentação no julgamento qualitativoqualitativo
de especialistas, e.g. avaliação heurística Dependência de fatores contextuais
Aspectos ObjetivosObjetivos Fundamentação em estudos quantitativosquantitativos,
e.g. testes de usabilidade O “visual” funciona?
Aspectos SubjetivosSubjetivos Fundamentação no julgamento qualitativoqualitativo
de especialistas, e.g. avaliação heurística Dependência de fatores contextuais
Projeto Gráfico IX
Projeto Gráfico IX
1212
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Caráter contextual do “visualvisual” da interface
Fundamentação na cultura
Diferenças nos significados culturais
Multiplicidade de significados
Valorização da singularidade singularidade e da rigorosidaderigorosidade
Caráter contextual do “visualvisual” da interface
Fundamentação na cultura
Diferenças nos significados culturais
Multiplicidade de significados
Valorização da singularidade singularidade e da rigorosidaderigorosidade
Projeto Gráfico X
Projeto Gráfico X
1313
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Conhecimento de princípios de projeto gráfico
Aprimoramento da capacidade de comunicação com projetistas gráficos
Capacitação para a concepção de interfaces mais usáveis
Conhecimento de princípios de projeto gráfico
Aprimoramento da capacidade de comunicação com projetistas gráficos
Capacitação para a concepção de interfaces mais usáveis
Projeto Gráfico XI
Projeto Gráfico XI
1414
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diversidade de filosofias e pontos de vista de projeto gráfico
Ponto de vista consensual
Economia de elementos visuais
Fundamentação na máxima menos é maismenos é mais Concepção de telas “limpas” e bem organizadas
Uso de formas inerentes à aplicação (Die Form folgt aus der Funktion - Bauhaus )
Diversidade de filosofias e pontos de vista de projeto gráfico
Ponto de vista consensual
Economia de elementos visuais
Fundamentação na máxima menos é maismenos é mais Concepção de telas “limpas” e bem organizadas
Uso de formas inerentes à aplicação (Die Form folgt aus der Funktion - Bauhaus )
Projeto Gráfico XI
Projeto Gráfico XI
1515
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Clareza Uso de Metáforas Adequadas Manutenção da Consistência Consideração do Alinhamento Observação da Proximidade Exploração do Contraste
Clareza Uso de Metáforas Adequadas Manutenção da Consistência Consideração do Alinhamento Observação da Proximidade Exploração do Contraste
Princípios de Projeto Gráfico I
Princípios de Projeto Gráfico I
1616
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Clareza I
Justificação da inserção de cadacada elemento planejado para a composição gráfica de uma interface
Fundamentação do projeto visual na máxima Menos é maisMenos é mais
Clareza I
Justificação da inserção de cadacada elemento planejado para a composição gráfica de uma interface
Fundamentação do projeto visual na máxima Menos é maisMenos é mais
Princípios de Projeto Gráfico II
Princípios de Projeto Gráfico II
1717
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Clareza II
Espaços em branco (Espaço negativonegativo)
Condução dos olhos para as áreas contendo informações (Espaço positivopositivo) Direcionamento dos olhos por entre os
elementos ativosativos do diálogo
Provisão de simetria e equilíbrio ao projeto, mediante o uso adequado
Reforço do impacto da mensagem
Uso associado à simplicidade, elegância, classe e refinamento do projeto gráfico
Clareza II
Espaços em branco (Espaço negativonegativo)
Condução dos olhos para as áreas contendo informações (Espaço positivopositivo) Direcionamento dos olhos por entre os
elementos ativosativos do diálogo
Provisão de simetria e equilíbrio ao projeto, mediante o uso adequado
Reforço do impacto da mensagem
Uso associado à simplicidade, elegância, classe e refinamento do projeto gráfico
Princípios de Projeto Gráfico III
Princípios de Projeto Gráfico III
1818
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico IV
Princípios de Projeto Gráfico IV
Clareza III
Exemplo 1
Em sua opinião, há clareza na apresentação da informação?
Clareza III
Exemplo 1
Em sua opinião, há clareza na apresentação da informação?
1919
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico V
Princípios de Projeto Gráfico V
Clareza IV
Exemplo 2 Em sua opinião,
há clareza na apresentação da informação?
Clareza IV
Exemplo 2 Em sua opinião,
há clareza na apresentação da informação?
2020
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico VI
Princípios de Projeto Gráfico VI
Clareza V
Exemplo 3
Em sua opinião, há clareza na apresentação da informação?
Clareza V
Exemplo 3
Em sua opinião, há clareza na apresentação da informação?
2121
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico VII
Princípios de Projeto Gráfico VII
Clareza VI
Exemplo 4
Em sua opinião, há clareza na apresentação da informação?
Clareza VI
Exemplo 4
Em sua opinião, há clareza na apresentação da informação?
2222
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas I
Limitação da apresentação visual ao mínimo possível de itens familiares relevantes
Uso de metáforas familiares Consideração do conhecimento e das experiências do usuário
Interfaceamento direto e intuitivo do usuário com a aplicação durante a realização de tarefas
Facilidade de previsão e aprendizado dos comportamentos das representações baseadas em software
Uso de Metáforas Adequadas I
Limitação da apresentação visual ao mínimo possível de itens familiares relevantes
Uso de metáforas familiares Consideração do conhecimento e das experiências do usuário
Interfaceamento direto e intuitivo do usuário com a aplicação durante a realização de tarefas
Facilidade de previsão e aprendizado dos comportamentos das representações baseadas em software
Princípios de Projeto Gráfico VIII
Princípios de Projeto Gráfico VIII
2323
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas II
Compreensão mais efetiva do uso dos diferentes elementos visuais da interface e da navegação pelos níveis de informação nela existentes
Consideração de que NENHUMANENHUMA metáfora é perfeita
Adoção de uma combinação equilibrada das melhores partes de várias metáforas Consideração do contexto de uso Focalização no ponto de vista do usuário
Uso de Metáforas Adequadas II
Compreensão mais efetiva do uso dos diferentes elementos visuais da interface e da navegação pelos níveis de informação nela existentes
Consideração de que NENHUMANENHUMA metáfora é perfeita
Adoção de uma combinação equilibrada das melhores partes de várias metáforas Consideração do contexto de uso Focalização no ponto de vista do usuário
Princípios de Projeto Gráfico IX
Princípios de Projeto Gráfico IX
2424
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas III
Categorias de Metáforas
Organizacionais Associação com a estruturação existente de um grupo, sistema ou organização
Exemplo Criação de um site para o comércio
eletrônico de livros Metáfora de uma livraria, na qual os produtos aparecem agrupados por tipo (e.g. profissional, ficção) e subtipo (e.g. ciência da computação, história, ficção científica)
Uso de Metáforas Adequadas III
Categorias de Metáforas
Organizacionais Associação com a estruturação existente de um grupo, sistema ou organização
Exemplo Criação de um site para o comércio
eletrônico de livros Metáfora de uma livraria, na qual os produtos aparecem agrupados por tipo (e.g. profissional, ficção) e subtipo (e.g. ciência da computação, história, ficção científica)
Princípios de Projeto Gráfico X
Princípios de Projeto Gráfico X
2525
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico XI
Princípios de Projeto Gráfico XI
Uso de Metáforas Adequadas IV - Exemplo 5 Qual a sua opinião sobre a metáfora
organizacional usada neste site?
Uso de Metáforas Adequadas IV - Exemplo 5 Qual a sua opinião sobre a metáfora
organizacional usada neste site?
http://www.worldwidestore.com/SclothingM.htmhttp://www.worldwidestore.com/SclothingM.htm
2626
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas V
Categorias de Metáforas
Funcionais Relação entre tarefas passíveis de execução com a aplicação e tarefas passíveis de serem executadas em outras aplicações Exemplo
Criação da interface para um ambiente de processamento gráfico Uso de metáforas que possibilitem a execução de tarefas (e.g. recorte, cópia e colagem de representações gráficas) de modo similar ao que ocorre em outros ambientes não necessariamente destinados ao processamento gráfico
Uso de Metáforas Adequadas V
Categorias de Metáforas
Funcionais Relação entre tarefas passíveis de execução com a aplicação e tarefas passíveis de serem executadas em outras aplicações Exemplo
Criação da interface para um ambiente de processamento gráfico Uso de metáforas que possibilitem a execução de tarefas (e.g. recorte, cópia e colagem de representações gráficas) de modo similar ao que ocorre em outros ambientes não necessariamente destinados ao processamento gráfico
Princípios de Projeto Gráfico XII
Princípios de Projeto Gráfico XII
2727
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico XIII
Princípios de Projeto Gráfico XIII
Uso de Metáforas Adequadas VI - Exemplo 6 Qual a sua opinião sobre as metáforas funcionais
destacadas nesta aplicação?
Uso de Metáforas Adequadas VI - Exemplo 6 Qual a sua opinião sobre as metáforas funcionais
destacadas nesta aplicação?
2828
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas VII
Categorias de Metáforas
Visuais Fundamentação em elementos gráficos culturais comuns, familiares à maioria dos usuários Exemplo
Concepção da interface para um CD player virtual Uso das metáforas icônicas startstart, stopstop, previousprevious, nextnext e pausepause existentes em CD players do mundo inteiro
Uso de Metáforas Adequadas VII
Categorias de Metáforas
Visuais Fundamentação em elementos gráficos culturais comuns, familiares à maioria dos usuários Exemplo
Concepção da interface para um CD player virtual Uso das metáforas icônicas startstart, stopstop, previousprevious, nextnext e pausepause existentes em CD players do mundo inteiro
Princípios de Projeto Gráfico XIV
Princípios de Projeto Gráfico XIV
2929
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico XV
Princípios de Projeto Gráfico XV
Uso de Metáforas Adequadas VIII - Exemplo 7 Qual a sua opinião sobre as metáforas visuais
utilizadas nesta aplicação?
Uso de Metáforas Adequadas VIII - Exemplo 7 Qual a sua opinião sobre as metáforas visuais
utilizadas nesta aplicação?
3030
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Metáforas Adequadas VII
Recomendações
Coletar opiniões de usuários
Revisar e avaliar cada metáfora coletada/ planejada
Evitar desencorajar quaisquer sugestões oferecidas pelos usuários (pelo menos não de imediato)
Tentar mapear as principais seções da aplicação, conectando os elementos dos níveis de informação associados a cada metáfora
Uso de Metáforas Adequadas VII
Recomendações
Coletar opiniões de usuários
Revisar e avaliar cada metáfora coletada/ planejada
Evitar desencorajar quaisquer sugestões oferecidas pelos usuários (pelo menos não de imediato)
Tentar mapear as principais seções da aplicação, conectando os elementos dos níveis de informação associados a cada metáfora
Princípios de Projeto Gráfico XVI
Princípios de Projeto Gráfico XVI
3131
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Consistência I
De layout, cromática, visual, icônica, tipográfica, textual, metafórica, semântica e sintática
Em cada tela e ao longo de diferentes telas
Adoção das recomendações do guia de estilo da plataforma para a qual a aplicação se destina
Consistência I
De layout, cromática, visual, icônica, tipográfica, textual, metafórica, semântica e sintática
Em cada tela e ao longo de diferentes telas
Adoção das recomendações do guia de estilo da plataforma para a qual a aplicação se destina
Princípios de Projeto Gráfico XVII
Princípios de Projeto Gráfico XVII
3232
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Página principalPágina principal
Página 1Página 1
www.santafean.comwww.santafean.comPágina 2Página 2
Princípios de Projeto Gráfico XVIII
Princípios de Projeto Gráfico XVIII
Consistência II - Exemplo 8Consistência II - Exemplo 8
3333
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Princípios de Projeto Gráfico XVIII
Princípios de Projeto Gráfico XVIII
Consistência III - Exemplo 9Consistência III - Exemplo 9 Qual a sua
opinião sobre a consistência deste projeto?
Qual a sua opinião sobre a consistência deste projeto?
3434
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento I
Convenção da civilização ocidental
Início no topo, à esquerda
Acompanhamento da informação de cima para baixo, da esquerda para a direita
Auxílio ao sistema visual no tocante ao escrutínio mais fácil do dispositivo de visualização
Alinhamento I
Convenção da civilização ocidental
Início no topo, à esquerda
Acompanhamento da informação de cima para baixo, da esquerda para a direita
Auxílio ao sistema visual no tocante ao escrutínio mais fácil do dispositivo de visualização
Princípios de Projeto Gráfico XIX
Princípios de Projeto Gráfico XIX
3535
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento II
Uso de grades I
Auxílio à localização de componentes da tela a partir de linhas horizontais e verticais (ocultas)
Associação de itens relacionados
Agrupamento lógico de itens
Minimização do número de controles e redução do congestionamento de informações
Alinhamento II
Uso de grades I
Auxílio à localização de componentes da tela a partir de linhas horizontais e verticais (ocultas)
Associação de itens relacionados
Agrupamento lógico de itens
Minimização do número de controles e redução do congestionamento de informações
Princípios de Projeto Gráfico XX
Princípios de Projeto Gráfico XX
3636
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento III
Uso de grades II
Exemplo 9
Alinhamento III
Uso de grades II
Exemplo 9
Princípios de Projeto Gráfico XXI
Princípios de Projeto Gráfico XXI
http://webmonkey.wired.com/webmonkey/98/28/index4a_page2.html?tw=designhttp://webmonkey.wired.com/webmonkey/98/28/index4a_page2.html?tw=design
3737
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento IV
Uso de grades III
Exemplo 10
Alinhamento IV
Uso de grades III
Exemplo 10
Princípios de Projeto Gráfico XXII
Princípios de Projeto Gráfico XXII
3838
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento V
Uso de grades IV Exemplo 11
Alinhamento V
Uso de grades IV Exemplo 11
Princípios de Projeto Gráfico XXII
Princípios de Projeto Gráfico XXII
3939
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Alinhamento V
À esquerda, centralizado ou à direita
Seleção de um modo de alinhamento e uso consistente em todo o projeto
Tendência à centralização de itens por principiantes Indefinição, calma, formalidade
Alinhamento V
À esquerda, centralizado ou à direita
Seleção de um modo de alinhamento e uso consistente em todo o projeto
Tendência à centralização de itens por principiantes Indefinição, calma, formalidade
Eis um texto
alinhadoà esquerda
Eis um texto
alinhadoà esquerda
Eis um texto
alinhadopelo centro
Eis um texto
alinhadopelo centro
Eis um texto
alinhadoà direita
Eis um texto
alinhadoà direita
Princípios de Projeto Gráfico XXIII
Princípios de Projeto Gráfico XXIII
4040
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade I
Contigüidade de itens causa a sensação visual/ mental da existência de uma relação entre eles
Distanciamento implica usualmente ausência de relação entre itens
Proximidade I
Contigüidade de itens causa a sensação visual/ mental da existência de uma relação entre eles
Distanciamento implica usualmente ausência de relação entre itens
Princípios de Projeto Gráfico XXIV
Princípios de Projeto Gráfico XXIV
4141
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade II
Exemplo 12
Proximidade II
Exemplo 12
Princípios de Projeto Gráfico XXV
Princípios de Projeto Gráfico XXV
Nome
Endereço 1
Endereço 2
Cidade
Estado
Fone
Fax
Nome
Endereço 1
Endereço 2
Cidade
Estado
Fone
Fax
Nome
Endereço 1
Endereço 2
Cidade
Estado
Fone
Fax
4242
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade III
Exemplo 13 – Quadro de Diálogo I
Proximidade III
Exemplo 13 – Quadro de Diálogo I
Princípios de Projeto Gráfico XXVI
Princípios de Projeto Gráfico XXVI
4343
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade IV
Exemplo 14 – Quadro de Diálogo II
Proximidade IV
Exemplo 14 – Quadro de Diálogo II
Princípios de Projeto Gráfico XXVII
Princípios de Projeto Gráfico XXVII
4444
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade V
Exemplo 15 – Quadro de Diálogo III
Proximidade V
Exemplo 15 – Quadro de Diálogo III
Princípios de Projeto Gráfico XXVIII
Princípios de Projeto Gráfico XXVIII
4545
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Proximidade VI
Exemplo 16 – Quadro de Diálogo IV
Proximidade VI
Exemplo 16 – Quadro de Diálogo IV
Princípios de Projeto Gráfico XXIX
Princípios de Projeto Gráfico XXIX
4646
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Contraste I
Retenção da atenção
Condução dos olhos em torno da interface
Possibilidade de focalização do olho na informação mais relevante do contexto apresentado
Possibilidade de uso para o direcionamento do olho para o item mais importante
Dominância da idéia principal do contexto visualizado
Contraste I
Retenção da atenção
Condução dos olhos em torno da interface
Possibilidade de focalização do olho na informação mais relevante do contexto apresentado
Possibilidade de uso para o direcionamento do olho para o item mais importante
Dominância da idéia principal do contexto visualizado
Princípios de Projeto Gráfico XXX
Princípios de Projeto Gráfico XXX
4747
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Contraste II
Diretrizes relevantes
Definir qual o item mais importante na interface e destacá-lo dos demais itens presentes
Usar a geometria para auxiliar o seqüenciamento da informação apresentada
Contraste II
Diretrizes relevantes
Definir qual o item mais importante na interface e destacá-lo dos demais itens presentes
Usar a geometria para auxiliar o seqüenciamento da informação apresentada
Princípios de Projeto Gráfico XXXI
Princípios de Projeto Gráfico XXXI
4848
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Contraste III - Exemplo 17 Contraste III - Exemplo 17
Princípios de Projeto Gráfico XXXII
Princípios de Projeto Gráfico XXXII
Uso de contraste Uso de contraste para a discriminação para a discriminação de diferentes níveis de diferentes níveis de informaçãode informação
Qual a sua opinião sobre o uso do contraste nesta página?
Qual a sua opinião sobre o uso do contraste nesta página?
4949
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 01
Observe a interface da transparência 48 e responda:
Para onde o seu olho é inicialmente direcionado (O que domina?)
Qual é o componente mais importante nesta interface?
Exercício 01
Observe a interface da transparência 48 e responda:
Para onde o seu olho é inicialmente direcionado (O que domina?)
Qual é o componente mais importante nesta interface?
Princípios de Projeto Gráfico XXXIII
Princípios de Projeto Gráfico XXXIII
5050
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 01 Exercício 01
Princípios de Projeto Gráfico XXXIII
Princípios de Projeto Gráfico XXXIII
5151
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 02
Diagnostique o excerto de interface exibido a seguir.
Exercício 02
Diagnostique o excerto de interface exibido a seguir.
Princípios de Projeto Gráfico XXIV
Princípios de Projeto Gráfico XXIV
5252
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Economia de Elementos Visuais I
Economia de Elementos Visuais I
Princípios
Fundamentação na máxima menos é maismenos é mais
Minimização de bordas, delineamento maciço e fronteiras de seções (Uso de espaço em branco)
Minimização do ruído visual
Minimização do número de controles
Princípios
Fundamentação na máxima menos é maismenos é mais
Minimização de bordas, delineamento maciço e fronteiras de seções (Uso de espaço em branco)
Minimização do ruído visual
Minimização do número de controles
5353
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Economia de Elementos Visuais I - Exemplo 18 Economia de Elementos Visuais I - Exemplo 18
Economia de Elementos Visuais II
Economia de Elementos Visuais II
Qual a sua opinião sobre a economia de elementos visuais deste projeto?
Qual a sua opinião sobre a economia de elementos visuais deste projeto?
5454
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Economia de Elementos Visuais II - Exemplo 19 Economia de Elementos Visuais II - Exemplo 19
Economia de Elementos Visuais II
Economia de Elementos Visuais II
Qual a sua opinião sobre a economia de elementos visuais deste projeto?
Qual a sua opinião sobre a economia de elementos visuais deste projeto?
5555
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Técnicas de Codificação ITécnicas de
Codificação I Vídeo Piscante
Recurso adequado para atrair a atenção do observador para um alvo de interesse
Uso moderado e cauteloso
Vídeo Reverso
Recurso adequado para destacar um alvo de interesse
Uso moderado e cauteloso
Vídeo Piscante
Recurso adequado para atrair a atenção do observador para um alvo de interesse
Uso moderado e cauteloso
Vídeo Reverso
Recurso adequado para destacar um alvo de interesse
Uso moderado e cauteloso
5656
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Luz e Cor I
Percepção Artística da Cor I
Fundamentação na fusão de branco e preto às cores puras
TintaTinta Cor pura + BrancoBranco
SombraSombra Cor pura + Preto
TomTom Cor pura + Preto + BrancoBranco
Luz e Cor I
Percepção Artística da Cor I
Fundamentação na fusão de branco e preto às cores puras
TintaTinta Cor pura + BrancoBranco
SombraSombra Cor pura + Preto
TomTom Cor pura + Preto + BrancoBranco
Técnicas de Codificação II
Técnicas de Codificação II
5757
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Luz e Cor II
Percepção Artística da Cor II
Luz e Cor II
Percepção Artística da Cor II
SATURAÇÃOSATURAÇÃO
BrancoBranco
Preto
Cor Pura
TonsTonsde Cinzade Cinza
Tintas
Tons
Sombras
BR
ILH
OB
RIL
HO
Técnicas de Codificação III
Técnicas de Codificação III
5858
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Luz e Cor III
Características para a Discriminação da Cor
Matiz (Hue)
Cor dominante conforme percepção do observador
Saturação (Saturation) Pureza relativa da cor Cores puras Saturação de 100%
Luz e Cor III
Características para a Discriminação da Cor
Matiz (Hue)
Cor dominante conforme percepção do observador
Saturação (Saturation) Pureza relativa da cor Cores puras Saturação de 100%
SATURAÇÃOSATURAÇÃO
Técnicas de Codificação IV
Técnicas de Codificação IV
5959
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV I
HSVHSV (HH ue SS aturation VV alue)
Uso comum em aplicações de computação gráfica
Seleção de cores por um usuário para aplicação a elementos gráficos
Uso do disco de cores HSV
Modelo Cromático HSVHSV I
HSVHSV (HH ue SS aturation VV alue)
Uso comum em aplicações de computação gráfica
Seleção de cores por um usuário para aplicação a elementos gráficos
Uso do disco de cores HSV
Escala de BrilhoEscala de Brilho
Escala de SaturaçãoEscala de Saturação
0° R
60° Y120° G
180° C
240° B 300° M
0° R
60° Y120° G
180° C
240° B 300° M
Técnicas de Codificação V
Técnicas de Codificação V
6060
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV II HSVHSV (HH ue SS aturation VV alue) ou HSBHSB (HH ue
SS aturation BB rightness) Disco de Cores
MatizMatiz Região circular SaturaçãoSaturação e ValorValor Região triangular
separada (Triângulo retângulo) SaturaçãoSaturação Eixo horizontal do triângulo ValorValor Eixo vertical do triângulo
Modelo Cromático HSVHSV II HSVHSV (HH ue SS aturation VV alue) ou HSBHSB (HH ue
SS aturation BB rightness) Disco de Cores
MatizMatiz Região circular SaturaçãoSaturação e ValorValor Região triangular
separada (Triângulo retângulo) SaturaçãoSaturação Eixo horizontal do triângulo ValorValor Eixo vertical do triângulo
MatizMatiz
SaturaçãoSaturaçãoV
alo
rV
alo
r
MatizMatiz
SaturaçãoSaturaçãoV
alo
rV
alo
r
Técnicas de Codificação VI
Técnicas de Codificação VI
6161
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV III
Método cônico (ou hexacônico) de visualização Uso de uma formação cônica (ou hexacônica) do disco de cores
SaturaçãoSaturação Distância do centro de uma seção circular do cone
ValorValor Distância da ponta do cone ao ponto de interesse, sobre o eixo vertical
Modelo Cromático HSVHSV III
Método cônico (ou hexacônico) de visualização Uso de uma formação cônica (ou hexacônica) do disco de cores
SaturaçãoSaturação Distância do centro de uma seção circular do cone
ValorValor Distância da ponta do cone ao ponto de interesse, sobre o eixo vertical
Técnicas de Codificação VII
Técnicas de Codificação VII
6262
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV IV
Visões cônica e hexacônica
Modelo Cromático HSVHSV IV
Visões cônica e hexacônica
Técnicas de Codificação VIII
Técnicas de Codificação VIII
0° Vermelho0° Vermelho
SS
HH
VV60° Amarelo60° Amarelo120° Verde120° Verde
180° Ciano180° Ciano
240° Azul240° Azul 300° Magenta300° Magenta
0.0 Preto0.0 Preto
1.0 Branco1.0 Branco
6363
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV V
Método cilíndrico de visualização
Modelo matematicamente mais acurado do espaço cromático HSVHSV
Limitações de caráter prático Decréscimo do número de níveis de
saturação e matizes visualmente distinguíveis à medida que o valor tende para 00 (PretoPreto)
Limitação da faixa de precisão no processo típico de armazenamento de valores RGB em sistemas computacionais
Modelo Cromático HSVHSV V
Método cilíndrico de visualização
Modelo matematicamente mais acurado do espaço cromático HSVHSV
Limitações de caráter prático Decréscimo do número de níveis de
saturação e matizes visualmente distinguíveis à medida que o valor tende para 00 (PretoPreto)
Limitação da faixa de precisão no processo típico de armazenamento de valores RGB em sistemas computacionais
Técnicas de Codificação IX
Técnicas de Codificação IX
6464
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV VI
Método cilíndrico (ou hexacilíndrico) de visualização
Modelo Cromático HSVHSV VI
Método cilíndrico (ou hexacilíndrico) de visualização
0° Vermelho0° Vermelho
SS
HH
VV60° Amarelo60° Amarelo120° Verde120° Verde
180° Ciano180° Ciano
0.0 Preto0.0 Preto
240° Azul240° Azul 300° Magenta300° Magenta
1.0 Branco1.0 Branco
Técnicas de Codificação X
Técnicas de Codificação X
6565
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Modelo Cromático HSVHSV VII
Tintas Adição de pigmento BRANCO Redução de SS com VV constante
Sombras Adição de pigmento PRETO Redução de VV com SS constante
Tons Redução de SS e VV
Exemplo VERMELHOVERMELHO (Puro)
HH = 00SS = 11VV = 11
Modelo Cromático HSVHSV VII
Tintas Adição de pigmento BRANCO Redução de SS com VV constante
Sombras Adição de pigmento PRETO Redução de VV com SS constante
Tons Redução de SS e VV
Exemplo VERMELHOVERMELHO (Puro)
HH = 00SS = 11VV = 11
0° VermelhoVermelho0° VermelhoVermelho
Técnicas de Codificação XI
Técnicas de Codificação XI
6666
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Matiz
Comprimento de onda dominante (vermelhovermelho, verdeverde, amareloamarelo, azulazul)
Espectro cromático (VIBGYOR)
Saturação
Pastel versus quente (azul bebêazul bebê, azul celesteazul celeste, azul azul realreal)
Valor
Quantidade de energia (brancobranco, cinza clarocinza claro, cinza cinza escuroescuro, preto)
Usualmente V = 0.299*R+0.587*G+0.114*BV = 0.299*R+0.587*G+0.114*B
Matiz
Comprimento de onda dominante (vermelhovermelho, verdeverde, amareloamarelo, azulazul)
Espectro cromático (VIBGYOR)
Saturação
Pastel versus quente (azul bebêazul bebê, azul celesteazul celeste, azul azul realreal)
Valor
Quantidade de energia (brancobranco, cinza clarocinza claro, cinza cinza escuroescuro, preto)
Usualmente V = 0.299*R+0.587*G+0.114*BV = 0.299*R+0.587*G+0.114*B
Técnicas de Codificação XII
Técnicas de Codificação XII
6767
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Ferramentas típicas para a seleção de cores Ferramentas típicas para a seleção de cores
SSSS
HHHHVVVV
Corel Photopaint 12Corel Photopaint 12
Mapinfo Professional v. 7Mapinfo Professional v. 7
Técnicas de Codificação XIII
Técnicas de Codificação XIII
6868
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Cor Refletida e Emitida I
Visão do mundo Cor refletida
Incidência da luz (natural ou artificial) sobre superfícies e reflexão para os sensores visuais segundo propriedades da superfície
Exemplo: Imagem impressa em uma folha de papel a partir de uma impressora de jato de tinta
Uso do modelo cromático subtrativosubtrativo CCMMYYKK (Primárias CCyanyan, MMagentaagenta, YYellowellow e BlacK)
Cor Refletida e Emitida I
Visão do mundo Cor refletida
Incidência da luz (natural ou artificial) sobre superfícies e reflexão para os sensores visuais segundo propriedades da superfície
Exemplo: Imagem impressa em uma folha de papel a partir de uma impressora de jato de tinta
Uso do modelo cromático subtrativosubtrativo CCMMYYKK (Primárias CCyanyan, MMagentaagenta, YYellowellow e BlacK)
Técnicas de Codificação XIV
Técnicas de Codificação XIV
6969
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Cor Refletida e Emitida II
Visão do mundo Cor emitida
Emissão da luz (por superfícies geradoras de radiação luminosa) diretamente para os sensores visuais segundo propriedades da superfície emissora
Exemplo: Imagem visualizada em um terminal de vídeo (CRT ou LCD) Uso do modelo
cromático aditivoaditivo RRGGBB (Primárias RReded, GGreenreen e Blue)
Cor Refletida e Emitida II
Visão do mundo Cor emitida
Emissão da luz (por superfícies geradoras de radiação luminosa) diretamente para os sensores visuais segundo propriedades da superfície emissora
Exemplo: Imagem visualizada em um terminal de vídeo (CRT ou LCD) Uso do modelo
cromático aditivoaditivo RRGGBB (Primárias RReded, GGreenreen e Blue)
Técnicas de Codificação XV
Técnicas de Codificação XV
7070
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor I
Usar cor cuidadosa e moderadamente
Projetar em P&B e, só então, adicionar cor onde se mostrar pertinente e apropriado
Empregar cor para atrair a atenção, expressar organização, indicar status, estabelecer relações entre níveis de informação ou entre elementos de um mesmo nível de informação
Evitar o uso de recursos cromáticos sem relação com a tarefa
Diretrizes para Uso de Cor I
Usar cor cuidadosa e moderadamente
Projetar em P&B e, só então, adicionar cor onde se mostrar pertinente e apropriado
Empregar cor para atrair a atenção, expressar organização, indicar status, estabelecer relações entre níveis de informação ou entre elementos de um mesmo nível de informação
Evitar o uso de recursos cromáticos sem relação com a tarefa
Técnicas de Codificação XVI
Técnicas de Codificação XVI
7171
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor II
Usar cor para auxiliar o usuário em tarefas de busca
Evitar o uso de cor em situações em que não haja um recurso alternativo (redundante) para evidenciar a informação codificada via cor Cegueira cromática (protanopsia,
deuteranopsia, acianoblepsia/ acianopsia ) Monocromaticidade dos terminais de vídeo Elevação do desempenho do processo de
codificação em função da redundância
Diretrizes para Uso de Cor II
Usar cor para auxiliar o usuário em tarefas de busca
Evitar o uso de cor em situações em que não haja um recurso alternativo (redundante) para evidenciar a informação codificada via cor Cegueira cromática (protanopsia,
deuteranopsia, acianoblepsia/ acianopsia ) Monocromaticidade dos terminais de vídeo Elevação do desempenho do processo de
codificação em função da redundância
Técnicas de Codificação XVII
Técnicas de Codificação XVII
7272
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor III
Manter a consistência com associações cromáticas de profissões e culturas
Apresentar imagens coloridas sobre fundos preto, branco ou cinza
Assegurar o contraste entre as cores do plano frontal de informação (foreground), e as cores do plano de fundo (background), tanto em nível de brilho quanto de matiz
Usar cor com um propósito, não apenas como adereço para o projeto
Diretrizes para Uso de Cor III
Manter a consistência com associações cromáticas de profissões e culturas
Apresentar imagens coloridas sobre fundos preto, branco ou cinza
Assegurar o contraste entre as cores do plano frontal de informação (foreground), e as cores do plano de fundo (background), tanto em nível de brilho quanto de matiz
Usar cor com um propósito, não apenas como adereço para o projeto
Técnicas de Codificação XVIII
Técnicas de Codificação XVIII
7373
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Técnicas de Codificação XIX
Técnicas de Codificação XIX
Exemplo 20 – Discriminação de Formas I
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
Exemplo 20 – Discriminação de Formas I
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
7474
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Técnicas de Codificação XX
Técnicas de Codificação XX
Exemplo 21 – Discriminação de Formas II
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
Exemplo 21 – Discriminação de Formas II
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
7575
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Técnicas de Codificação XXI
Técnicas de Codificação XXI
Exemplo 22 – Discriminação de Formas III
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
Exemplo 22 – Discriminação de Formas III
Quantos retângulos menores compõem o grupo de formas abaixo ilustrado?
7676
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Técnicas de Codificação XXII
Técnicas de Codificação XXII
Exercício 02 – Discriminação de objetos coloridos I
Localize uma letra vermelha
Exercício 02 – Discriminação de objetos coloridos I
Localize uma letra vermelha
V
RZ
M
FG
Q
J
C
T
D
W
WP
KV
LH
IN
E B
S
U O
X
Y
V
R
Z
MF
GQ
J
C
TD
W
A
P
K
V
L HI N
E B
S
U
O
XY
R
Z
DKS
W V
SX
7777
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
AA
Técnicas de Codificação XXIII
Técnicas de Codificação XXIII
Exercício 03 – Discriminação de objetos coloridos II
Localize um AA e dois YY
Exercício 03 – Discriminação de objetos coloridos II
Localize um AA e dois YY
V
RZ
M
FG
Q
J
C
T
M
W
WP
KV
LH
IN
E B
S
U O
X
Y
V
R
Z
MF
GQ
J
C
TD
W
A
P
K
V
L HI N
E B
S
U
O
XY
R
Z
DKS
W V
SX
YYYY
7878
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
V
R
Z
M
F
G
Q
J
C
TD
W
A
P
Técnicas de Codificação XXIV
Técnicas de Codificação XXIV
Exercício 03 – Discriminação de objetos coloridos III
Localize um QQ e um MM
Exercício 03 – Discriminação de objetos coloridos III
Localize um QQ e um MM
KS
DE
UQQ
MM
Y
O
H
7979
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Cor e Busca I
Auxílio em tarefas de busca de itens específicos em um dispositivo de visualização
Aceleração do processo de localização
Formas (60%)
Tamanhos (40%)
Brilho (40%)
Caracteres Alfanuméricos (40%)
Letras (10%)
Cor e Busca I
Auxílio em tarefas de busca de itens específicos em um dispositivo de visualização
Aceleração do processo de localização
Formas (60%)
Tamanhos (40%)
Brilho (40%)
Caracteres Alfanuméricos (40%)
Letras (10%)
Técnicas de Codificação XXV
Técnicas de Codificação XXV
8080
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Cor e Busca II
Determinação do Escore
E = (TBA – TBC)/TBAE = (TBA – TBC)/TBA
TBATBA – Tempo de Busca AcromáticaTBCTBC – Tempo de Busca Cromática
Decréscimo inicial do tempo de busca com a adição de um número reduzido de cores ao contexto da tarefa
Acréscimo progressivo do tempo de busca com o crescimento do número de cores adicionadas
Cor e Busca II
Determinação do Escore
E = (TBA – TBC)/TBAE = (TBA – TBC)/TBA
TBATBA – Tempo de Busca AcromáticaTBCTBC – Tempo de Busca Cromática
Decréscimo inicial do tempo de busca com a adição de um número reduzido de cores ao contexto da tarefa
Acréscimo progressivo do tempo de busca com o crescimento do número de cores adicionadas
Técnicas de Codificação XXVI
Técnicas de Codificação XXVI
8181
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Acurácia e Codificação por Cor I
Aumento da Discriminação Redundância na codificação
Formas Geométricas
Círculo amarelo
Retângulo azul
Acurácia e Codificação por Cor I
Aumento da Discriminação Redundância na codificação
Formas Geométricas
Círculo amarelo
Retângulo azul
Técnicas de Codificação XXVII
Técnicas de Codificação XXVII
8282
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Acurácia e Codificação por Cor II
Aceleração do processo de localização Indicações visuais de reforço
Resultados Brilho e Cor (104%)
Tamanho, Brilho e Cor (61%)
Tamanho e Cor (60%)
Acurácia e Codificação por Cor II
Aceleração do processo de localização Indicações visuais de reforço
Resultados Brilho e Cor (104%)
Tamanho, Brilho e Cor (61%)
Tamanho e Cor (60%)
Técnicas de Codificação XXVIII
Técnicas de Codificação XXVIII
8383
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Acurácia e Codificação por Cor III
Determinação do Escore
E = (R – C)/CE = (R – C)/C
RR – Cor + RedundânciaCC – Apenas Cor
Acurácia e Codificação por Cor III
Determinação do Escore
E = (R – C)/CE = (R – C)/C
RR – Cor + RedundânciaCC – Apenas Cor
Técnicas de Codificação XXIX
Técnicas de Codificação XXIX
8484
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor IV
Usar cores contrastantes para expressar diferença (vice-versa)
Assegurar-se de que as cores utilizadas nos planos de frente (foreground) e de fundo (background) não “vibram”
Diretrizes para Uso de Cor IV
Usar cores contrastantes para expressar diferença (vice-versa)
Assegurar-se de que as cores utilizadas nos planos de frente (foreground) e de fundo (background) não “vibram”
Técnicas de Codificação XXX
Técnicas de Codificação XXX
Par de cores escolhidas “vibra” Fadiga ocular e dor de cabeça
8585
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor IV
Usar cores contrastantes para expressar diferença (vice-versa)
Assegurar-se de que as cores utilizadas nos planos de frente (foreground) e de fundo (background) não “vibram”
Técnicas de Codificação XXXI
Par de cores escolhidas “vibra” Fadiga ocular e dor de cabeça
Outra versão do slide anterior
Outra versão do slide anterior
8686
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Significado da Cor Significado da Cor
Técnicas de Codificação XXXII
Técnicas de Codificação XXXII
CorCorVermelho
Cor de rosa
Laranja
Azul
Amarelo
Marrom
Verde
Púrpura
Branco
Preto
http://www.color-wheel-pro.com/color-meaning.htmlhttp://www.color-wheel-pro.com/color-meaning.html
CorCor Significado ContextualSignificado ContextualVermelho Amor, agressão, perigo, erro, calor, paixão
Cor de rosa Feminilidade, delicadeza, romance
Laranja Calor, coragem, advertência, outono
Azul Frieza, desligado, poder, confiança
Amarelo Felicidade, precaução, alegria, covardia
Marrom Estabilidade, Terra, outono, sujeira, morno
Verde Ligado, inveja, siga, segurança, natureza
Púrpura Realeza, sofisticação, artificialidade
Branco Luminosidade, pureza, inocência, bem
Preto Escuridão, mistério, mal, sobriedade, medo
8787
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Significado Cultural da Cor I Significado Cultural da Cor I
Técnicas de Codificação XXXIII
Técnicas de Codificação XXXIII
http://www.cs.uu.nl/people/markov/gmaker/feldman/chapter07.pdfhttp://www.cs.uu.nl/people/markov/gmaker/feldman/chapter07.pdf
Cor EUA & Europa Japão China Brasil
PerigoIraAristocracia
PerigoIra
FelicidadeFestividade
IraÓdio
CovardiaPrecauçãoCalor
AlegriaNobrezaGraça
HonraRealeza
DinheiroOuroRiqueza
SegurançaInvejaMeio Ambiente
JuventudeFuturoEnergia
JuventudeCrescimento
EsperançaRiqueza
MasculinidadeCalmaAutoridadeFrieza
TraiçãoFrieza
ForçaPoder
Alegria
PurezaVirtudeBem
LutoLamentaçãoTristeza
LamentaçãoHumilhação
PurezaPazBem
LutoMal
Mal Mal LutoMal
8888
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Significado Cultural da Cor II Significado Cultural da Cor II
Técnicas de Codificação XXXIV
Técnicas de Codificação XXXIV
Cor Nigéria Coréia Oriente Médio
Perigo PerigoIraMal
PerigoMal
Luz solarBrilho
Riqueza FelicidadeProsperidade
Riqueza NaturezaPazFrescor
FertilidadePoder
CalmaPaz
FriezaFrescor
VirtudeFéVerdade
Pureza InocênciaPureza
PurezaLuto
Mal MalEscuridão
MalMistério
http://www.netmechanic.com/news/vol6/design_no10.htmhttp://www.netmechanic.com/news/vol6/design_no10.htm
8989
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor V
Adotar uma paleta (gama de cores utilizada em uma tela) consistente
Selecionar uma paleta do espaço HSV, a partir da variação de suas dimensões (HH, SS e VV)
Evitar a variação simultânea do matizmatiz, da saturaçãosaturação e do brilhobrilho
Usar apenas 4-64-6 cores por tela, a menos que se trate de um efeito artístico ou de um conjunto de tons contínuos
Diretrizes para Uso de Cor V
Adotar uma paleta (gama de cores utilizada em uma tela) consistente
Selecionar uma paleta do espaço HSV, a partir da variação de suas dimensões (HH, SS e VV)
Evitar a variação simultânea do matizmatiz, da saturaçãosaturação e do brilhobrilho
Usar apenas 4-64-6 cores por tela, a menos que se trate de um efeito artístico ou de um conjunto de tons contínuos
Técnicas de Codificação XXXV
Técnicas de Codificação XXXV
9090
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para Uso de Cor VI
Empregar cores pastéis e primárias
Levar em conta que as cores dos objetos se tornam menos visíveis e distintas quando suas dimensões se tornam menores
Evitar o uso de cores saturadas ou muito intensas em áreas ou objetos de grandes dimensões
Considerar as conotações contextuais e culturais das cores no ato da escolha da paleta
Diretrizes para Uso de Cor VI
Empregar cores pastéis e primárias
Levar em conta que as cores dos objetos se tornam menos visíveis e distintas quando suas dimensões se tornam menores
Evitar o uso de cores saturadas ou muito intensas em áreas ou objetos de grandes dimensões
Considerar as conotações contextuais e culturais das cores no ato da escolha da paleta
Técnicas de Codificação XXXVI
Técnicas de Codificação XXXVI
9191
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Cor versus Faixa Etária
Influência Significativa
Percepção/ Interpretação/ Resposta às paletas utilizadas em projetos gráficos
Aceitação/ Preferência pelas paletas de cores empregadas em projetos de interfaces gráficas
Uso de Cor versus Faixa Etária
Influência Significativa
Percepção/ Interpretação/ Resposta às paletas utilizadas em projetos gráficos
Aceitação/ Preferência pelas paletas de cores empregadas em projetos de interfaces gráficas
Técnicas de Codificação XXXVII
Técnicas de Codificação XXXVII
9292
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Cor versus Faixa Etária II
Resposta/ Preferência cromática de usuários de diferentes faixas etárias
Crianças mais jovens Associação de cores quentes à sensação de alegria
Crianças mais velhas e adolescentes Melhor resposta a cores brilhantes e quentes do que a cores opacas e frias
Uso de Cor versus Faixa Etária II
Resposta/ Preferência cromática de usuários de diferentes faixas etárias
Crianças mais jovens Associação de cores quentes à sensação de alegria
Crianças mais velhas e adolescentes Melhor resposta a cores brilhantes e quentes do que a cores opacas e frias
Técnicas de Codificação XXXVIII
Técnicas de Codificação XXXVIII
9393
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Uso de Cor versus Faixa Etária III
Resposta/ Preferência cromática de usuários de diferentes faixas etárias
Adultos Preferência por cores mais frias e more suaves em relação a cores quentes e saturadas
Adultos mais velhos Melhor resposta a cores mais brilhantes (devido à degradação do sistema visual, crescente com o aumento da idade)
Uso de Cor versus Faixa Etária III
Resposta/ Preferência cromática de usuários de diferentes faixas etárias
Adultos Preferência por cores mais frias e more suaves em relação a cores quentes e saturadas
Adultos mais velhos Melhor resposta a cores mais brilhantes (devido à degradação do sistema visual, crescente com o aumento da idade)
Técnicas de Codificação XXXIX
Técnicas de Codificação XXXIX
http://www.hypermedic.com/color/index.phphttp://www.hypermedic.com/color/index.php
9494
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Efeito de Texto Colorido sobre Fundo Colorido I Efeito de Texto Colorido sobre Fundo Colorido I
Técnicas de Codificação XL
Técnicas de Codificação XL
Texto BRANCO
Texto CINZA
Texto AMARELO
Texto AMARELO CLARO
Texto VERDE
Texto VERDE CLARO
Texto AZUL
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO PÁLIDO
Texto COR DE ROSA
Texto PRETO
FundoVERMELHO
9595
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Efeito de Texto Colorido sobre Fundo Colorido II Efeito de Texto Colorido sobre Fundo Colorido II
Técnicas de Codificação XLI
Técnicas de Codificação XLI
Texto BRANCO
Texto CINZA
Texto AMARELO
Texto AMARELO CLARO
Texto VERDE
Texto VERDE CLARO
Texto AZUL ESCURO
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO
Texto COR DE ROSA
Texto PRETO
FundoAZUL
9696
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Efeito de Texto Colorido sobre Fundo Colorido III Efeito de Texto Colorido sobre Fundo Colorido III
Técnicas de Codificação XLII
Técnicas de Codificação XLII
Texto BRANCO
Texto CINZA
Texto AMARELO
Texto AMARELO CLARO
Texto VERDE ESCURO
Texto VERDE CLARO
Texto AZUL ESCURO
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO
Texto COR DE ROSA
Texto PRETO
FundoVERDE
9797
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 03 - Efeito de Texto Colorido sobre Fundo Colorido
Observe a interface da transparência 98 e responda:
Para onde o seu olho é inicialmente direcionado?
Qual é o componente mais importante nesta interface?
Qual o diagnóstico do contraste entre os diferentes elementos de tal componente?
Exercício 03 - Efeito de Texto Colorido sobre Fundo Colorido
Observe a interface da transparência 98 e responda:
Para onde o seu olho é inicialmente direcionado?
Qual é o componente mais importante nesta interface?
Qual o diagnóstico do contraste entre os diferentes elementos de tal componente?
Técnicas de Codificação XLIII
Técnicas de Codificação XLIII
9898
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 03 Exercício 03
Técnicas de Codificação XLIV
Técnicas de Codificação XLIV
9999
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Ícone
Representação gráfica destinada à comunicação visual de uma mensagem específica
Símbolo gráfico (usualmente uma figura estilizada) projetado para denotar um conceito em uma interface gráfica com o usuário
Programa, objeto ou ação
Símbolo gráfico associado a um link em aplicações Web
Ícone
Representação gráfica destinada à comunicação visual de uma mensagem específica
Símbolo gráfico (usualmente uma figura estilizada) projetado para denotar um conceito em uma interface gráfica com o usuário
Programa, objeto ou ação
Símbolo gráfico associado a um link em aplicações Web
Técnicas de Codificação XLV
Técnicas de Codificação XLV
100100
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para o Projeto de Ícones I
Representar objetos ou ações de um modo familiar e reconhecível para o usuário
Limitar o número de ícones diferentes ao mínimo possível
Evitar detalhamento excessivo dos ícones
Garantir a discriminação dos ícones tanto entre si quanto destes e o fundo da tela
Diretrizes para o Projeto de Ícones I
Representar objetos ou ações de um modo familiar e reconhecível para o usuário
Limitar o número de ícones diferentes ao mínimo possível
Evitar detalhamento excessivo dos ícones
Garantir a discriminação dos ícones tanto entre si quanto destes e o fundo da tela
Técnicas de Codificação XLVI
Técnicas de Codificação XLVI
101101
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para o Projeto de Ícones II
Considerar a necessidade de habilidade para o desenho no ato de projetar/ criar ícones
Contratar um projetista de ícones, caso se sinta incapaz de criá-los satisfatoriamente (lembrar-se de que há padrões e modos de projetar/ criar ícones críticos)
Evitar o uso gratuito e sem significado de ícones
Assegurar a legibilidade dos ícones criados independentemente da resolução do vídeo
Diretrizes para o Projeto de Ícones II
Considerar a necessidade de habilidade para o desenho no ato de projetar/ criar ícones
Contratar um projetista de ícones, caso se sinta incapaz de criá-los satisfatoriamente (lembrar-se de que há padrões e modos de projetar/ criar ícones críticos)
Evitar o uso gratuito e sem significado de ícones
Assegurar a legibilidade dos ícones criados independentemente da resolução do vídeo
Técnicas de Codificação XLVII
Técnicas de Codificação XLVII
102102
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Exercício 04
O que significa cada um dos ícones abaixo?
Exercício 04
O que significa cada um dos ícones abaixo?
Técnicas de Codificação XLVIII
Técnicas de Codificação XLVIII
103103
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para o Projeto de Ícones III
Usar uma família de representações gráficas como base para a criação dos ícones do projeto
Exemplo 1
Diretrizes para o Projeto de Ícones III
Usar uma família de representações gráficas como base para a criação dos ícones do projeto
Exemplo 1
Técnicas de Codificação XLIX
Técnicas de Codificação XLIX
http://java.sun.com/products/jlf/ed2/book/index.htmlhttp://java.sun.com/products/jlf/ed2/book/index.html
Famílias de Ícones 3D Planos(JAVATM Sun Microsystems)
Perspectiva
Frontal
Arquivo Pasta
104104
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Diretrizes para o Projeto de Ícones IV
Usar uma família de representações gráficas como base para a criação dos ícones do projeto
Exemplo 2 – Ícones criados a partir de famílias
Diretrizes para o Projeto de Ícones IV
Usar uma família de representações gráficas como base para a criação dos ícones do projeto
Exemplo 2 – Ícones criados a partir de famílias
Técnicas de Codificação L
Técnicas de Codificação L
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp
Folder Folder Open My Documents My Favorites
105105
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Coisas a EVITAREVITAR em um Projeto Gráfico
Texto piscante
Imagens animadas
Imagens de fundo texturizadas
Quadros (frames)
Paletas com mais de 5 cores para cada cenário de uso
Mistura de fontes de texto
Coisas a EVITAREVITAR em um Projeto Gráfico
Texto piscante
Imagens animadas
Imagens de fundo texturizadas
Quadros (frames)
Paletas com mais de 5 cores para cada cenário de uso
Mistura de fontes de texto
Técnicas de Codificação LI
Técnicas de Codificação LI
106106
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Coisas a LEMBRARLEMBRAR em um Projeto Gráfico
Simplicidade
Template de página
Sombras de uma única cor
Consistência com relação à navegação, aos elementos do template e à estrutura de páginas
Concisão
Coisas a LEMBRARLEMBRAR em um Projeto Gráfico
Simplicidade
Template de página
Sombras de uma única cor
Consistência com relação à navegação, aos elementos do template e à estrutura de páginas
Concisão
Técnicas de Codificação LII
Técnicas de Codificação LII
107107
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
ran
gel@
dsc.u
fpb
.br
ran
geld
eq
ueir
oz@
gm
ail.c
om
DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG
Coisas a LEMBRARLEMBRAR em um Projeto Gráfico
Índice ou mapa de site
Formato simples para a impressão da página ou do site, se necessário
Planejamento cuidadoso da página ou do site
Coisas a LEMBRARLEMBRAR em um Projeto Gráfico
Índice ou mapa de site
Formato simples para a impressão da página ou do site, se necessário
Planejamento cuidadoso da página ou do site
Técnicas de Codificação LIII
Técnicas de Codificação LIII
ran
gel@
dsc.u
fpb
.b
rra
ng
el@
dsc.u
fpb
.b
rra
ng
eld
e
qu
eir
oz@
gm
ail.c
om
ran
geld
e
qu
eir
oz@
gm
ail.c
om
DSC/CCT/UFCGDSC/CCT/UFCG
José Eustáquio Rangel de QueirozJosé Eustáquio Rangel de Queiroz
DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃODEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO
UNIVERSIDADE FEDERAL DE CAMPINA GRANDEUNIVERSIDADE FEDERAL DE CAMPINA GRANDE
GRUPO DE INTERFACES HOMEM-MÁQUINAGRUPO DE INTERFACES HOMEM-MÁQUINA