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.
Aula 2/2 de fundamentos do design ministrada na matéria de Composição e Projeto Visual para alunos de Jornalismo do 2º e 3º semestres na Universidade Paulista, Campus Brasília.
02/2014
Coletânea de conceitos sobre design. Diversos autores tratam das características que o design possuí, incluindo sua interdisciplinaridade e áreas de atuação.
Aula 2/2 de fundamentos do design ministrada na matéria de Composição e Projeto Visual para alunos de Jornalismo do 2º e 3º semestres na Universidade Paulista, Campus Brasília.
02/2014
Coletânea de conceitos sobre design. Diversos autores tratam das características que o design possuí, incluindo sua interdisciplinaridade e áreas de atuação.
Como desenvolver artes gráficas com o IllustratorThiago Marques
PARA QUE UMA EMPRESA OU UM PRODUTO TENHA DESTAQUE, É PRECISO QUE SUAS INFORMAÇÕES SEJAM BEM APRESENTADAS AO PÚBLICO POR MEIO DE ARTES COMO BANNERS, FLYERS E FOLDERS. E SEMPRE POR TRÁS DE UMA ARTE BEM FEITA HÁ UMA BOA FERRAMENTA DE DESIGN, COMO O ILLUSTRATOR. POR UTILIZAR DESIGN VETORIAL, O ILLUSTRATOR TEM GANHADO CADA VEZ MAIS PREFERÊNCIA NA ESCOLHA DE FERRAMENTAS DE DESIGN. O MINICURSO TEM COMO OBJETIVO ENSINAR AS PRINCIPAIS TÉCNICAS DE DESIGN VETORIAL PARA QUE CAPACITE OS PARTICIPANTES A CRIAR ARTES GRÁFICAS E DESENHOS VOLTADOS AO AMBIENTE PROFISSIONAL. O MINICURSO SERÁ MINISTRADO POR RENAN TEIXEIRA E THIAGO ALMEIDA M. MARQUES.
Web 2.0 uso_das_cores_nas_interfaces_digitaisCris Souza
O uso das cores como informação e eficácia na comunicação visual.
Em que pode contribuir o recurso da cor no design didático para facilitar o aprendizado e acesso às informações desejadas pelo seu usuário?
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]Rodrigo Freese Gonzatto
[Material atualizado em junho de 2022] Recurso educacional sobre relação entre modos de consciência (crítica e ingênua), suas gradações e relações no pensamento dos autores: Álvaro Vieira Pinto e de Paulo Freire.
Material elaborado para disciplina ''Seminário de Estudos Avançados - Tecnologia e Educação em Álvaro Vieira Pinto'' (PPGEdu/PUCRS) 2021/2 e atualizado em 2022/1.
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Rodrigo Freese Gonzatto
Palestra sobre interações entre as ideias de Vieira Pinto e Paulo Freire diante da questão da Tecnologia. Ministrada no seminário "Paulo Freire: um arauto da liberdade, do diálogo e da utopia", em 04 de junho de 2019, em evento promovido pelo Grupo de Pesquisa Pensamento Educacional Brasileiro: Histórias e Políticas" do Programa de Pós-Graduação em Educação da PUCPR (Curitiba).
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Rodrigo Freese Gonzatto
Fala sobre presente e futuro da comunidade de pesquisa sobre Vieira Pinto no Brasil. Apresentado no 3o Colóquio Álvaro Vieira Pinto, no dia 14 de dezembro de 2018, em Porto Alegre (RS).
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Rodrigo Freese Gonzatto
Apresentação utilizada na banca de defesa de tese de doutorado de Rodrigo Freese Gonzatto, em 28 de setembro de 2018. Trata sobre a história e características do conceito de usuário em Interação Humano-Computador e Design de Interação. A noção de usuário é analisada criticamente perante a ideia de produção da existência, dos filósofos brasileiros Vieira Pinto e Paulo Freire.
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Rodrigo Freese Gonzatto
Slides da apresentação de trabalho (resumo) no XV Congresso de Filosofia Contemporânea da PUCPR - Fenomenologia da Vida em 31 de outubro de 2017, na Pontifícia Universidade Católica do Paraná, Curitiba.
Projetando interações opressivas e libertárias com o corpo inteiroRodrigo Freese Gonzatto
Slides da comunicação oral do artigo (completo) Projetando interações opressivas e libertárias com o corpo consciente, apresentada no XV Simpósio Brasileiro sobre Fatores Humanos em Sistemas Computacionais (IHC 2017). Baseado em Paulo Freire e em Augusto Boal.
Slides do minicurso ministrado no XV Simpósio Brasileiro sobre Fatores Humanos em Sistemas Computacionais (IHC 2017) em 24 de outubro 2017, por Rodrigo Gonzatto e Frederick van Amstel, sobre proposta de uso de vídeos como criação.
Slides sobre o conceito de Técnica e Tecnologia, abordando diversas concepções, mas oferecendo enfoque ao conceito de tecnologia do filósofo brasileiro Álvaro Vieira Pinto, que apresenta a técnica como existencial do ser humano.
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…