Design Digital Exemplos de guestalt no Design Digital

773 visualizações

Publicada em

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
773
No SlideShare
0
A partir de incorporações
0
Número de incorporações
67
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design Digital Exemplos de guestalt no Design Digital

  1. 1. Exemplos da guestalt no Design Digital Gestalt aplicada no design de interfaces: exemplos práticos Material retirado da revista Wide Edição de n°83www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/
  2. 2. Unidade e Pregnância: “A composição inteira é percebida como manchavisual harmônica, cujas linhas visuais de leitura se resolvem internamente,sem remeter a algo externo, gerando ruído. Dá a impressão que não faltanem sobra nada. Também se percebe que, mesmo com a riqueza deformas, tudo é assimilado imediatamente como uma entidade visualharmônica de alta pregnância.”Unificação, Continuidade e Proximidade: “É um caso interessante detrês níveis perceptivos, com micro-elementos (ícones, textos, boxes,detalhes menores das ilustrações), as subcomposições, formadas peloque se vê no campo visual dentro das dimensões do monitor, e acomposição macro, que é gigante, representando a união de todas aspartes.Segregação e Semelhança: “Temos um verdadeiro caos controlado aqui.Percebemos uma riquíssima paleta de cores, formas e elementos visuais,mas que, pela genialidade do profissional, conseguem ser nitidamentepercebidas individualmente por seguirem uma semelhança estética,graças ao uso de tipografia única, uma área de fundo sólida (em contrastecom a composição repleta de linhas e formas), bem contrastada evariando entre círculos e caixas com arestas arredondadas.”http://200.186.92.250/awards/2007/havaianas/havaianas/port/index.html#
  3. 3. Continuidade: houve a preocupação com dois detalhes que quebraram a‘dureza’ das duas áreas, dando grande continuidade a elas de uma forma sutil:primeiro, angulou em uns 15 graus a linha, desestabilizando propositalmente avisão, tirando o aspecto formal da separação e deslocando o peso visual parao lado esquerdo da composição, onde inseriu um elemento pictórico formadopor caracteres gráficos na mesma cor do fundo, vermelho. Mas, ao mesmotempo, inseriu uma ilustração baseada num revólver que sobrepõe parte dasduas áreas, vermelha e branca, servindo como elo entre as áreas, como umaponte. Criamos assim, grande continuidade entre as áreas.Unidade e Similaridade: “Após termos percebido a unidade do layout, quedistribuiu os elementos de maneira a criar um ritmo não-linear na percepção docampo visual, evitando estacionar o olhar em um ponto específico, vemos aquia disposição cognitiva do conteúdo textual: nota-se que títulos sãosemelhantes, usando o mesmo estilo, porém, dentro da categoria WORDS,encontramos um novo estilo com fontes de maior tamanho, denotandoconteúdo mais importante, mais humanizado, mais atualizável do que osdemais, geralmente automatizados. É a similaridade e suas modulações.”http://www.newtoyork.com/
  4. 4. Segregação, fechamento e pregnância: “O pontilhismo tridimensional nosmostra, de maneira deliciosa, como as partes formam o todo, ponto culminanteda Teoria da Gestalt. Se observarmos os pontos isoladamente (falo da imagem3D que gira pela tela), jamais notaremos nada inteligível; porém, vendo-ascomo uma unidade (pelo princípio do fechamento), fica claro que se trata deum livro.Vemos também que o posicionamento das estruturas inteligíveis dainterface foram dispostas de maneira magistral, usando alta pregnância, semruídos e sem muito texto para demonstrar os controles usados para manipulara interface, criando itens isolados de alta pregnância, de grande assimilaçãocognitiva.”Proximidade e Similaridade: “Os livros que ficam ao lado esquerdo estãotodos próximos e possuem forma extremamente parecidas. Porém, aodestacarmos propriedades específicas de um ou mais deles, como no caso,brilho e contraste, criamos similaridades que distanciam tais elementos do seugrupo original, colocando-o num status de item ativo, mas sem rompertotalmente com sua origem comum aos demais elementos.”http://www.concavescream.com/
  5. 5. Unidade e Continuidade: “À primeira vista, temos a sensação exata de que acomposição está absolutamente estabilizada. Sim, formas estáveis, centralizadas,quadradas e ainda sustentadas por linhas, são, sem dúvidas, composições dasmais estáveis possíveis. Quase impossível desviarmos nossos olhos da manchavisual central. A unidade então fica claríssima, tudo parece fazer parte de ummesmo objeto; é tudo muito harmônico e relacionado, até mesmo o logotipo naparte superior direita, que mesmo não fazendo parte do polígono interno delimitadopelas linhas, acabou por ser a única referência direcionadora do olhar nacomposição. Outra coisa: percebam claramente o princípio e a continuidade ao leros itens de menu. Ainda que haja espaçamentos enormes entre algumas letras,nada disso nos impede de compreender o texto, justamente porque o fechamentose dá buscando em nosso subconsciente, a imagem do que pode ser mais próximoentre um C ,um ONT e um ACT -> contact!”Pregnância: “A utilização do elemento humano (a moça), criando uma ideia detridimensionalismo ao arrancar parte do ‘papel’, é fator de alta pregnância. Remeteao mundo real e não há nada que tenha mais pregnância do que elementosrelacionados ao mundo real, tridimensional – uma vez que o bidimensional é maisrelacionado ao mundo das abstrações, demandando muito mais paciência – eporque não dizer – talento, para criar mais pregnância usando elementos douniverso abstrato. E podemos falar dos elementos que remetem aos adesivos, aospapéis sujos, que reforçam ainda mais a tridimensionalidade da proposta.”
  6. 6. Unidade, Segregação, Unificação: “Por mais caóticos que pareçam estar oselementos dessa interface, eles estão, na verdade, extremamente bemposicionados, criando uma grande unidade visual. Não há elementos faltantes enem sobrando. O que, na verdade, parece poluído, na prática é extremamentelimpo e objetivo.Vejamos o seguinte: A leitura do campo visual se faz em uma linhadiagonal que vai do canto superior esquerdo até o canto inferior direito. Há umagrande unidade na proposta, justamente porque ao fazemos essa varredura,percebemos que os itens possuem grande unidade gestáltica, não nos remetendoa nenhum outro ponto específico dentro da interface, fazendo-nos, na verdade,‘passear’ de modo modularizado por entre os elementos. E é aí que notamos apreocupação na segregação dos submódulos da composição para que estes‘conversem’ harmonicamente com os demais itens, gerando a unidade.Vejamos o grupo MAIS RECENTES, formado por quadrados de arestasarredondados com baixo contraste, e disposição numa matriz irregular. Existe,nessa irregularidade, um espaço para o filtro de exibição dos itens, tudo muitopróximo, gerando a unificação cognitiva pela proximidade. Os itens que ficampróximos foram trabalhados de tal maneira a criar um alto contraste, rompendo oprincípio de semelhança para mostrar que, ainda que estejam próximos, trata-se deitens completamente diferentes cognitivamente.Cores como lilás, azul claro evermelho foram usadas com grande eficácia para separar semanticamente itenscuja prioridade perceptiva são maiores. Some-se a isso uma área bem arejada dolado esquerdo onde os vídeos são exibidos, evitando que haja ruídos por parte dainterface na hora de usufruir da experiência com o conteúdo.”

×