O documento discute princípios de percepção visual e design, como a Gestalt, hierarquia visual, contraste, cor e tipografia. Explora como esses elementos afetam a organização e compreensão das informações.
2. Ler
imagens?
Imagens são
"textos"…
e podem ser
“lidos"
O que querem
dizer… o que
podem dizer?
Interpretação
e significado
Velázquez, "Las Meninas” (1656)
6. do vídeo How designers silently tell you what to do? - Affordances and Signifiers - Game Design Theory
https://www.youtube.com/watch?v=l7_b_uVOkT8&list=LLQvTAfq_xCPjoJAyU5thzRg&index=214
7. que faz uma varinha mágica?
o que ela faz no software de edição de imagens?
9. Semiótica
(ciência dos signos)
Índice
signos que se
assemelham (indício)
Símbolo
associação de signos
por convenção
Ícone
signos compartilham
propriedades
Bandeira
Brasil?
Fumaça
Fogo?
Formas e traços
Pessoa nadando?
15. “Novinha você é uma flor”
“Amarelo lembra ouro"
“Ouro lembra ladrão”
“Ladrão lembra você
que roubou meu coração”
“novinha": nova geração?
nova no diminutivo?
muito nova
A pessoa não é uma flor.
Possui as qualidades de uma flor?
A novinha é como uma flor amarela?
Do signo (cor fisiologicamente
estimulante…) ao Ícone
Índice
Símbolo. Metáfora do roubo:
roubar o coração não é literal
24. trecho da palestra da Apple
sobre a fonte San Francisco
https://developer.apple.com/videos/play/wwdc2015/804/
“6:40 a 9:00 - Principles of Design:
Visual perception is largely about illusion (…)
if you want to make two shapes look similar,
you often have to make them dissimilar”
35. O que é Gestalt?
• Gestalt da percepção visual. Psicologia da forma.
• Percepção do todo antes das partes:
vemos a floresta,
depois as árvores,
depois galhos e folhas
46. Similaridade
• A percepção de identidade (similaridade) entre objetos
afeta a percepção de como estão organizados
• Objetos que com formas mais similares do que outras
parecem agrupados
• Similaridade por: cor, formato, tamanho, orientação, etc
52. Cores ajudam a diferenciar
quando não são semelhantes
Aplicativo da Azul permite fazer check-in
de vários passageiros e utiliza cores
diferentes para identificá-los,
tanto na tela inicial
como na tela de seleção de assentos
53.
54. Continuidade
• Tendência a ver objetos (1).Tendência de nosso sistema
visual em resolver a ambiguidade adicionando
informações, a fim de perceber o objeto em totalidade
• A percepção visual tende a perceber formas contínua
(ao invés de segmentos descontinuados)
4 linhas que se unem? ou 2 linhas? são 1 ou 3 cobras?falta algo no I, no B e no M?
55.
56. Percepção de
continuidade do slides
mesmo com cores diferentes
✓
✓Slider é entendido como
uma única linha
e não como dois segmentos
61. Fechamento (Clousure)
• Tendência a ver objetos (2). Nosso sistema visual tenta
fechar figuras abertas de modo que sejam percebidas
como figuras inteiras, e não peças separadas
• Ver apenas as partes, mas enxergar o todo
• Tendências a ver (formar, fechar) objetos
(mesmo diante de áreas em branco)
Mesmo incompletos,
objetos são vistos como inteiros
68. Simetria
• Tendência a ver objetos (3).Tendência a analisar cenas
complexas de um modo que reduza a complexidade.
• Existe mais de uma interpretação possível, mas
tendemos a simplificar, priorizando a simetria.
• Elementos simétricos, mesmo que diferentes, tendem a
ser entendidos como parte de um mesmo grupo
77. uso de figura fundo para
hierarquizar informações
78. marca d’agua e texturas ao fundo de interfaces
são um exemplo de “fundo”
que não compete visualmente com a figura
pop-ups “call to action”
em sites
ou ações moduladores
(deixam o fundo escuro) também
79. • Geralmente (mas nem sempre) no design,
busca-se EVITAR a confusão entre figura e fundo,
e proporcionalmente priorizando um ou outro
com contraste, cor, formas, etc
90. Hierarquia Visual
• Onde os olhos olham e em que ordem?
• Usar: fontes, linhas, cor, formas, imagens e espaço
• Contraste, tamanho, posição
https://uxdesign.cc/3-ways-to-improve-your-visual-design-skills-fa9dc8e583ff
102. Existem diferentes jeitos de criar contraste.
Isso é um exemplo de contraste. contraste.
Contrastes podem ser gerados de várias formas.
Muitos modos de contraste.
103. Existem diferentes jeitos de criar contraste.
Isso é um exemplo de contraste.
CONTRASTES podem ser gerados de várias formas.
Muitos modos de contraste.
104. Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.ste.
Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.
105. Existem diferentes jeitos de criar contraste.
Contraste.ste.
Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.
117. • Legibilidade
(facilidade de leituras, distinguir letras uma das outras)
• Legibilidade x Expressão
• Leiturabilidade (como o tipo se comporta no texto)
• Serifas, sem serifas, outros …
• Kerning (espaço entre duas letras)
• Uso de tipografias diferentes
• Comprimento de linha
• Alinhamentos
• Etc…