O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ler imagens (Gestalt e composição para Design de Interfaces)

195 visualizações

Publicada em

Princípios de linguagem visual para Design de Interfaces. Um pouco de semiótica e vários exercícios para entender Gestalt aplicada para composição de interfaces. Ao final, alguns princípios para tipografia, grid, alinhamento, hierarquia de informação, etc.

Publicada em: Design
  • Login to see the comments

Ler imagens (Gestalt e composição para Design de Interfaces)

  1. 1. 
 rodrigo@gonzatto.com rodrigo gonzatto gonzatto.com ler
imagens
  2. 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)
  3. 3. René Magritte,“A traição das imagens” (1928–1929)
  4. 4. René Magritte,“Os dois mistérios"
  5. 5. 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
  6. 6. que faz uma varinha mágica? o que ela faz no software de edição de imagens?
  7. 7. cada signo remete a outro signo
  8. 8. 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?
  9. 9. pessoa nova = flor (amarela) novinha = flor
  10. 10. “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
  11. 11. diferentes formas de representação
  12. 12. alguém “outro” alguém você
  13. 13. Percepção visual
  14. 14. Qual círculo interno é maior?
  15. 15. Contexto importa
  16. 16. 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”
  17. 17. https://medium.muz.li/optical-effects-9fca82b4cd9a
  18. 18. https://medium.muz.li/optical-effects-9fca82b4cd9a
  19. 19. https://medium.muz.li/optical-effects-9fca82b4cd9a
  20. 20. 2D ou 3D?
  21. 21. Princípios da 
 Gestalt
  22. 22. 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
  23. 23. Qual a 1ª unidade visual que você viu? →
  24. 24. O que é Gestalt? • Unidade: perceber algo como uma unidade. • Segregação: capacidade de isolar cada uma das partes
  25. 25. Princípios
  26. 26. • A distância relativa (proximidade) entre objetos 
 afeta a percepção de como estão organizados • Objetos próximos parecem agrupados. Proximidade
  27. 27. Itens próximos parecem agrupados como linhas ou colunas
  28. 28. Livro: Designing with the Mind in Mind: ✓ X ✓
  29. 29. 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
  30. 30. Similaridade + Proximidade ✓✓
  31. 31. Proximidade e semelhança
  32. 32. Outros?
  33. 33. Cores indicam semelhança
  34. 34. 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
  35. 35. 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?
  36. 36. Percepção de continuidade do slides mesmo com cores diferentes ✓ ✓Slider é entendido como uma única linha e não como dois segmentos
  37. 37. X
  38. 38. 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
  39. 39. Ver apenas as partes, mas enxergar o todo
  40. 40. Mesmo vendo apenas um pedaço da carta de trás. Ela é percebida como inteira
  41. 41. X
  42. 42. 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
  43. 43. Menus e grids
  44. 44. Figura-fundo • Separamos o campo visual entre figura e fundo, entre o que é “primário" para a atenção o que é "secundário"
  45. 45. Escher
  46. 46. contraste e legibilidade Legível? Legível? Legível? Legível? Legível? Legível? Legível? Legível?
  47. 47. uso de figura fundo para hierarquizar informações
  48. 48. 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
  49. 49. • 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
  50. 50. Composição
  51. 51. “Nada deve ser colocado 
 arbitrariamente em um layout”
  52. 52. http://visualliteracytoday.org/learning-to-look-across-disciplines-visual-literacy-for-museum-audiences-by-kate-blake/?print=print
  53. 53. Hierarquia visual
  54. 54. OSCAR 2017: Melhor filme O vencedor é…
  55. 55. MISS UNIVERSO 2015 A vencedora é…. ?
  56. 56. Consegue propor um design melhor para esse cartão?
  57. 57. 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
  58. 58. Grids e 
 amarras visuais
  59. 59. Alinhamento Alinhamento Alinhamento Alinhamento Alinhamento Alinhamento
  60. 60. ver guidelines Apple material design guidelines https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
  61. 61. Espaço negativo
  62. 62. https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203
  63. 63. https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203
  64. 64. Contraste
  65. 65. Existem diferentes jeitos de criar contraste. Isso é um exemplo de contraste. contraste. Contrastes podem ser gerados de várias formas. Muitos modos de contraste.
  66. 66. Existem diferentes jeitos de criar contraste. Isso é um exemplo de contraste. CONTRASTES podem ser gerados de várias formas. Muitos modos de contraste.
  67. 67. 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.
  68. 68. Existem diferentes jeitos de criar contraste. Contraste.ste. Existem diferentes jeitos de criar contraste. Existem diferentes jeitos de criar contraste.
  69. 69. Cor
  70. 70. cor luz RGB mistura aditiva branco: ausência total de cor cor pigmento CMYK mistura subtrativa preto: ausência total de luz
  71. 71. Esquemas de cores, combinações, paletas, contraste…
  72. 72. Tipografia
  73. 73. https://www.nexojornal.com.br/expresso/2019/02/04/Este-gráfico-mostra-a-evolução-das-letras-até-o-alfabeto-latino
  74. 74. • 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…
  75. 75. Com serifa Sem serifa Sem serifa Com serifa
  76. 76. Cursiva Cursiva Cursiva dingbats

×