FIHM Aula 07 - Multidisciplinaridade em IHM_Design_Visual

Prévia do material em texto

Design gráfico
Prof. Mauricio Barbosa e Castro
Proximidade
Alinhamento
Repetição
Contraste
 Proximidade
 Proximidade
Itens relacionados entre si devem ser agrupados
 Proximidade
Itens relacionados entre si devem ser agrupados
Itens próximos formam uma unidade visual
E U V O U E M B O R A M A IS C E D O H O JE
E U V O U E M B O R A M A IS C E D O H O J E
 Proximidade
Itens relacionados entre si devem ser agrupados
Itens próximos formam uma unidade visual
Cores iguais aproximam os elementos e os tornam 
do mesmo grupo.
E U V O U E M B O R A M A IS C E D O H O JE
E U V O U E M B O R A M A IS C E D O H O JE
E U V O U E M B O R A M A IS C E D O H O JE
 Proximidade
Itens relacionados entre si devem ser agrupados
Itens próximos formam uma unidade visual
Informações complementares devem ser colocadas 
próximas das principais.
Cores iguais aproximam os elementos e os tornam 
do mesmo grupo.
 Proximidade
O propósito básico da proximidade é o de organizar.
Se a informação estiver organizada em grupos
será mais fácil de ser ‘lida’.
Grupos são formados por semelhança de: 
tema, cor, tamanho, estilo e posicionamento.
A organização deixa espaços ‘em branco’ que fazem
a vista descansar entre uma informação e outra. 
“Itens relacionados entre si devem ser agrupados.”
 Proximidade
Como atingir este objetivo?
Deixe os olhos semi-fechados. 
Conte o número de elementos visuais que estão 
sendo vistos. 
Se houver mais de 3 a 5, veja quais poderiam ser 
agrupados por proximidade para que se tornem uma 
unidade visual.
Proximidade
Alinhamento
Repetição
Contraste
 Alinhamento
 Alinhamento
Nós lemos da esquerda para a direita
Este parágrafo está 
escrito com alinhamento 
pela esquerda. Segue a 
direção de nossos olhos 
durante a leitura. 
Portanto, sua leitura é 
bastante confortável, 
pois a primeira coisa 
que vemos é a ordem e 
nos baseamos nela para 
seguir a leitura.
Este parágrafo está 
escrito com alinhamento 
pela direita. Não é que 
fique ruim, mas para 
grandes textos dificulta 
a localização da próxima 
linha. Também mostra o 
desalinhamento para 
depois organizar ao final 
da visualização.
Este parágrafo foi escrito 
com alinhamento 
centralizado. Utilizado 
em grandes textos faz 
com que o leitor 
preocupe-se em 
procurar onde está a 
próxima palavra. Este 
tipo de alinhamento é 
ideal para pequenos 
textos de até 2 ou 3 
linhas.
O alinhamento
justificado, também tem
suas características. Vai
ajustar tanto do lado
direito quanto do
esquerdo, entretanto,
para fazer isso pode
criar grandes espaços
entre as palavras
atrapalhando a
seqüência da leitura
(regra da
“proximidade”).
 Alinhamento
Nós lemos da esquerda para a direita
Nós lemos de cima para baixo
01234567891011
12131415161718
19202122232425
26272829303132
33343536373839
93837363534333
23130392827262
52423222120291
81716151413121
11019876543210
33343536373839
26272829303132
19202122232425
12131415161718
01234567891011
05101520253035
16111621263136
27121722273237
38131823283338
49141924293439
 Alinhamento
Normalmente colocamos o texto em qualquer lugar sem 
nos preocupar com os demais elementos da página.
“Nada deve ser colocado arbitrariamente em
uma página. Cada item deve ter uma
conexão visual com algo na página.”
Quando os itens estão alinhados há uma coesão visual.
Fazer uso de alinhamento facilita a leitura de textos 
longos e organiza a leitura dos textos curtos.
 Alinhamento Como atingir este objetivo?
Esteja consciente do posicionamento dos elementos 
na página. Encontre sempre algo para fazer o 
alinhamento, mesmo que os dois objetos estejam 
fisicamente distantes.
Evite usar tipos de alinhamentos de textos diferentes 
em uma mesma página.
 Alinhamento
Como atingir este objetivo?
Esteja consciente do posicionamento 
dos elementos na página. Encontre 
sempre algo para fazer o alinhamento, 
mesmo que os dois objetos estejam 
fisicamente distantes.
Evite usar tipos de alinhamentos de 
textos diferentes em uma mesma 
página.
Proximidade
Alinhamento
Repetição
Contraste
 Repetição
 Repetição
Após a decodificação de um elemento sua repetição 
torna a leitura deste elemento mais fácil.
Repetir elementos reforça idéias.
Repetição significa:
 Usar a mesma simbologia em todo o projeto.
 Utilizar os mesmos estilo de fonte.
 Alinhar os parágrafos do mesmo modo.
 Manter títulos, subtítulos, etc, com o mesmo 
tratamento por todo o trabalho.
 Usar as mesmas cores por todo o projeto.
 Distribuir quantidades de informação igualmente. 
 Repetição
 Repetição
Após a decodificação de um elemento sua repetição 
torna a leitura deste elemento mais fácil.
Repetir elementos reforça idéias.
Repetir estilos mantém a unidade visual:
 nas apresentações,
 nos projetos,
 nas cartas,
 na comunicação visual,
 nos relatórios,
 nos formulários.
 Repetição
Como atingir este objetivo?
Pense sobre a possibilidade de 
acrescentar elementos apenas para criar 
uma repetição.
Verifique o que já existe: listas 
numeradas, bullets, títulos, gráficos...
Pense em como repetir de forma diferente. 
Trocando o elemento de fonte, cor, forma, 
tamanho. Dê destaque à repetição.
Evite repetir demais, para não ficar cansativo. 
Proximidade
Alinhamento
Repetição
Contraste
 Contraste
 Contraste
Tonalidade
Cores
Tamanho
Formato
 Contraste
Tonalidade
Cores
Tamanho
Formato
 Contraste
Tonalidade
Cores
Tamanho
Formato
 Contraste
Contraste
Contraste
Tonalidade
Cores
Tamanho
Formato
 Contraste
Tonalidade
Cores
Regras de Design
Tamanho
Formato
 Contraste
“Se dois itens forem muito parecidos 
faça-os ficarem diferentes.”
O contraste chama sua atenção para um projeto. É 
uma maneira de tornar seu projeto atraente.
Se os objetos são importantes deve-se dar 
DESTAQUE contrastando com os demais. Mas todos os 
elementos devem estar ordenados com regras claras.
Não seja tímido: OUSE
 Contraste
Como atingir este objetivo?
O contraste deve criar interesse e ajudar 
a comunicação dos dados. O leitor deve 
ser capaz de compreender a proposta 
imediatamente.
Escolha os elementos que merecem 
destaque: linha, texto, desenho, cores, 
formas, espaços, parágrafos. 
Ouse. Faça testes. Brinque com os 
elementos.
Só não tente dar contraste em tudo, pois se 
tudo tem contraste, nada foi contrastado.
 Hierarquia e composição
Quando se trabalha um projeto de design, a 
primeira coisa que devemos determinar, antes 
mesmo de desenvolver conceitos visuais, é o 
quão importante é cada um dos elementos que 
compõem a nossa concepção do produto.
É assim que surgem as hierarquias. Isso é mais 
importante do que este, que por sua vez é mais 
importante que os outros. 
 Parece fácil à primeira vista, já que o título é 
a primeira chamada que você deve ler, em 
seguida, a inclinação ou os destaques, os 
dados anexados, etc
 Mas como fazer para que, conceitualmente, 
demos importância aos elementos, para 
conseguir cumprir eficientemente a 
hierarquia?.
 A ORDEM DE LEITURA
 Nossa cultura ocidental é muito rígida no que diz respeito 
ao sentido de leitura. Assim que aprendemos a ler, tudo 
segue da esquerda para a direita e de cima para baixo.
 É muito difícil compreender que dois elementos que têm 
as mesmas características, são lidos em sentido inverso. 
 Criamos inconscientemente uma maneira automática para 
organizar os elementos, e não podemos ir contra essa 
forma.
 Por exemplo, na imagem acima, vemos 12 barras 
horizontais dispostas uma sobre a outra. 
 Se você começar a contar o seu cérebroprovavelmente começar a fazê-lo de cima para baixo. 
 Agora, por que ler primeiro a barra de cima sendo 
que a de baixo é 4 vezes maior?
 Em um segundo exemplo, podemos entender que, se os círculos 
foram unidos, provavelmente, a ordem de leitura a nos guiar 
será a forma tradicional de leitura da esquerda para a direita. 
 Há apenas um fator que pode mudar a ordem tradicional de 
leitura: quebrar o “cima para baixo e da esquerda para a direita”; 
é a superposição: de frente para trás.
 O TAMANHO
 A organização do 
tamanho dos 
elementos é, sem 
dúvida, um dos 
métodos mais 
utilizados de 
hierarquia e não 
necessita muita 
explicação.
 No entanto, 
ampliar um objeto 
não é a única 
maneira de se 
sobressair.
 O exemplo mostra 
que uma entidade 
não tem de ser 
maior a ser 
hierarquicamente 
mais importante.
 COR
◦ Uma das maneiras mais interessantes é pela cor. 
◦ Os melhores designers do mundo sabem que é ter 
cor falando em seu nome, e mais importante serve 
para realçar um item, ou para escondê-lo.
 As cores expressam algo por si mesmo. Vamos 
dizer que eu tenha que pintar uma paisagem de 
outono com folhas amarelas nas árvores. Se eu 
vejo isso como uma sinfonia em amarelo, não 
importa se o amarelo que eu uso é o mesmo que 
o amarelo das folhas? Não, não.
 Van Gogh
 As cores são formadas dentro do cérebro humano. É o 
mecanismo cerebral que interpreta os sinais luminosos 
enviados pelos olhos e traduz a informação luminosa 
naquilo que percebemos como cor de acordo com o 
comprimento de onda da energia emitida.
 “É como se os olhos fossem nossa máquina fotográfica, 
com a objetiva sempre pronta a impressionar um filme 
invisível em nosso cérebro”. 
(FARINA, 1990)
 A palavra “cor” é empregada para definir a 
sensação consciente de um observador cuja 
retina se acha estimulada por energia 
radiante
 O entendimento da cor é um fenômeno mais 
próximo da neurofisiologia do que da física
 A teoria das cores estuda a cor do ponto de 
vista físico
 Necessidade de pensar em cores: percepção das nuances de 
cores nos mais diferentes materiais;
◦ Desde o neolítico os homens pesquisam as argilas, suas cores e formas de 
vitrificação – delegam a utilização de determinados artefatos e cores para 
fins religiosos, fúnebres, comemorativos, bélicos, etc.
 Necessidade de reproduzir as cores;
◦ Nas paredes das cavernas os homens já tentavam reproduzir as cores da 
natureza através de pigmentos animais, vegetais, e minerais. Com 
desenhos feitos à carvão, percebe-se que já existia um estudo de qual 
material queimar para produzir carvão de melhor qualidade artística.
 Necessidade de criar pigmentos, fixadores e solventes;
◦ A partir do momento que já se conseguia uma grande gama de cores à 
base de água, passou-se a misturar nos pigmentos ceras e óleos animais 
para fixar a cor e dissolvê-la quando necessário.
 A cor existe na mente e pode criar uma 
impressão subjetiva e objetiva.
 A cor pode estimular os nossos pensamentos 
e emoções, e a resposta para cores diferentes 
se dá de formas diferentes já que, como 
humanos, respondemos à cor biologicamente 
e psicologicamente.
 Psicodinâmica das cores é um campo de estudo 
dedicado a analisar o efeito das cores no 
comportamento humano e do sentimento.
 O estudo da psicodinâmica das cores é complicada 
por diferentes significados simbólicos das cores nas 
diferentes culturas. Por exemplo, na cultura ocidental 
noiva se veste de branco para significar que é pura e 
inocente, enquanto na cultura oriental, por exemplo 
na China, as noivas usam vermelho pois representa 
felicidade e sorte.
 A cor vermelha, por exemplo, é considerada 
muito mais chamativa aqui no ocidente que 
no oriente, pois lá eles têm formas naturais 
de extrair esta cor há muito mais tempo. Esta 
relação do significado psicológico das cores 
dá a cada uma delas significados diferentes 
em diferentespartes do mundo.
P sicod inâm ica
P sique D inâm ica
conjunto dos processos 
psíquicos, conscientes e 
inconscientes
parte da mecânica que estuda as 
relações entre as forças e os 
movimentos por elas produzidos
estudo da ação dos fenômenos inconscientes sobre 
o comportamento humano
 Efeitos Psicológicos das Cores
◦ Segundo Carl Jung, no fundo da psique humana há 
o inconsciente coletivo, onde estão contidos os 
arquétipos --- o padrão original ou modelo a partir 
do qual outras coisas do mesmo tipo são feitas.
◦ Essas são as imagens fundamentais que são 
desenvolvidos e formados a partir de nossos 
antepassados através de milhares de anos.
 A cor é parte de nossa herança biológica e 
psicológica, portanto, às vezes, respondemos 
às cores de certo modo, por exemplo, que o 
vermelho é quente e azul é frio, e estas são 
consideradas respostas universal.
 Jung também mencionou sobre os tipos de 
personalidade extrovertido e introvertido, se 
verificou que estes tipos de personalidade têm 
preferências de cores distintas: 
◦ o tipo extrovertido tem uma tendência maior para a 
estimulação mais intensa, por isso apreciam um 
ambiente colorido;
◦ introvertidos são mais favoráveis a um menor grau de 
estimulação, e menor intensidade de cor é preferida.
 A cor também é afetada pela cultura e pela 
evolução social, o que quer dizer que o 
significado da cor não é o mesmo em 
diferentes culturas e períodos de tempo.
 Já que vivemos em diferentes sociedades, os 
significados das cores são formados por 
mitos, valores, crenças, religiões, costumes 
sociais, bem como geográfica e 
historicamente por essas sociedades.
GRUPO COR ASSOCIAÇÕES RECOMENDADO PARA
FR
IA
S
(c
al
m
an
te
s)
Q
U
EN
TE
S
(e
xc
ita
nt
es
)
N
EU
TR
A
S
NATUREZA DAS
ASSOCIAÇÕES
segurança e
conf i abili dad
céu
(portanto admirado
universalmente)
relacionado à
negócios
riqueza
(verde escuro)
calma
(verde claro)
otimismo
chama a
atenção e te dá
energia
(ativando
a glândula
pituitária)
energia
(rosa forte)
romântico
(rosa claro)
animador
poderoso
simplicidade
e pureza
(prende o
olhar)
mercado
f i na
 BRANCO
◦ O branco segundo o simbolismo é a 
cor mais perfeita. Não há conceito
“branco” de significado negativo.
Mas a perfeição impõe distância, 
apenas 2% dos homens e 1% das mulheres tem o branco como cor 
favorita.
- BEM, VERDADE, IDEAL, PERFEIÇÃO, HONRA.
- SINGULARIDADE, EXTIDÃO.
- FEMININO, LIMPEZA, INOCÊNCIA, MORTE, VAZIO
 PRETO
◦ É mesmo uma cor?
◦ Ausência da luz.
◦ Mistura de todas as cores.
- Juventude;
- Final;
- Luto, negação;
- Sujeira, mal, maldade;
- Má sorte;
- Autoridade;
 CINZA
◦ Cor sem personalidade;
◦ É malquista por 13% dos 
homens e 14% das mulheres;
- Sentimentos sombrios, desolação;
- Teoria
- Horrível, cruel, inumano;
- Velhice, passado, esquecimento, grisalho
 VERMELHO
◦ A primeira cor a ser nomeada pelo homem
◦ Provávelmente a primeira cor a ser vista
◦ Preferida de 12% das pessoas
◦ Do latim vermiculus (verme, inseto)
- Paixões: amor e ódio;
- Sangue, vida;
- Fogo;
- Alegria;
- Nobreza;
 LARANJA
◦ Uma cor subestimada! Entremeia o Vermelho e o amarelo;
◦ Não há palavras que rimem com Orange em inglês e alemão;
◦ Vemos menos laranjas do que realmente existe;
◦ Do persa narang (flamejar do fogo)
- Exótico; 
- Sabor;
- Diversão e sociabilidade;
- Perigo;
- Transformação e budismo;
 AMARELO
◦ Uma cor contraditória: favorito de 6% das pessoas;
◦ Ligado ao sol e à vida; ao ouro e à riqueza;
◦ Do latim amaryllis (cor da luz irradiante)
◦ Cor pouco estável;
- Diversão, amabilidade, otimismo;
- Iluminação, esclarecimento;
- Ouro;
- Ciúme, inveja e mentiras;
- Cor de advertência!
 VERDE
 Preferidode 16% dos homens e 15% das mulheres;
 Mais que uma cor: quintessência da natureza, um estilo de vida;
 Do latim viridis (faixa harmoniosa entre o céu e o sol)
- Intermediário; agradável e tolerância;
- Natureza, natural;
- Vida e saúde;
- Negócios e fertilidade;
- Frescor;
- Esperança; 
 AZUL
◦ Favorita de 46% dos homens e 44% das mulheres;
◦ A menos rejeitada também: 1% dos homens e 2% das mulheres;
◦ Do persa lázúrd (azul)
- Simpatia, harmonia, amizade, confiança;
- Longe, infinito;
- Fidelidade;
- Fantasia;
- Divino;
- Frio;
 ROXO
◦ Cor mista: sentimentos ambivalentes;
◦ Favorita de apenas 3% das pessoas;
◦ Do latim russeus (vermelho carregado)
- Poder;
- Teologia;
- Penitência e sobriedade;
- Extravagante;
- Vaidade;
- Feminismo;
	Fundamentos de Interface Homem-Máquina
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Regras de Design
	Slide Number 29
	Regras de Design
	Regras de Design
	Design Visual
	Design Visual
	Design Visual
	Slide Number 35
	Design Visual
	Design Visual
	Design Visual
	Design Visual
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Slide Number 52
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Psicodinâmica das Cores
	Slide Number 62