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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


Princípios de Projeto Gráfico VI

Princípios de Projeto Gráfico VI

Clareza V

Exemplo 3


Clareza V

Exemplo 3


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


Princípios de Projeto Gráfico VII

Princípios de Projeto Gráfico VII

Clareza VI

Exemplo 4


Clareza VI

Exemplo 4


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


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


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


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


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


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


Uso de Metáforas Adequadas V


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


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


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


Uso de Metáforas Adequadas VII


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



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


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



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


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


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


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


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




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


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


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


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


Alinhamento IV

Uso de grades III

Exemplo 10

Alinhamento IV

Uso de grades III

Exemplo 10

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


Alinhamento V

Uso de grades IV Exemplo 11

Alinhamento V

Uso de grades IV Exemplo 11



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


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


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


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


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


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


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


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


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


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


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


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


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


Para onde o seu olho é inicialmente direcionado (O que domina?)


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


Exercício 01 Exercício 01



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


Exercício 02

Diagnostique o excerto de interface exibido a seguir.

Exercício 02

Diagnostique o excerto de interface exibido a seguir.



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


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


Economia de Elementos Visuais I - Exemplo 18 Economia de Elementos Visuais I - Exemplo 18

Economia de Elementos Visuais II


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


Economia de Elementos Visuais II - Exemplo 19 Economia de Elementos Visuais II - Exemplo 19





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


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


Vídeo Piscante

Recurso adequado para atrair a atenção do observador para um alvo de interesse


Vídeo Reverso

Recurso adequado para destacar um alvo de interesse


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


Técnicas de Codificação XX

Técnicas de Codificação XX

Exemplo 21 – Discriminação de Formas II


Exemplo 21 – Discriminação de Formas II


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


Técnicas de Codificação XXI

Técnicas de Codificação XXI

Exemplo 22 – Discriminação de Formas III


Exemplo 22 – Discriminação de Formas III


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


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


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


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


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


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


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


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


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


Acurácia e Codificação por Cor III


E = (R – C)/CE = (R – C)/C

RR – Cor + RedundânciaCC – Apenas Cor

Acurácia e Codificação por Cor III


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


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





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


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


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


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


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


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


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


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


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


Uso de Cor versus Faixa Etária III


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


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


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


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

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


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

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


Exercício 03 - Efeito de Texto Colorido sobre Fundo Colorido


Para onde o seu olho é inicialmente direcionado?


Qual o diagnóstico do contraste entre os diferentes elementos de tal componente?

Exercício 03 - Efeito de Texto Colorido sobre Fundo Colorido


Para onde o seu olho é inicialmente direcionado?


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


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


Í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


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


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


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


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


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


Diretrizes para o Projeto de Ícones IV


Exemplo 2 – Ícones criados a partir de famílias

Diretrizes para o Projeto de Ícones IV


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


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


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


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



Í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


Í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