Princípios da Gestalt no Design

Hoje, discutirei um a um os vários princípios principais da Gestalt no design , como proximidade, fechamento, continuação, figura e fundo.

Índice

• Princípios da Gestalt em Design | Proximidade
• Princípios da Gestalt em Design | Continuidade
  • Marcas como exemplos de continuidade
  • Pinturas como exemplos de continuidade
• Princípios da Gestalt em Design | Destino comum
• Princípios da Gestalt em Design | Fecho
  • Aplicando fechamento no design do relatório
• Princípios de Figura e Base
• Unilever: um ótimo exemplo de figura e fundo
• Conclusão

Princípios da Gestalt em Design | Proximidade

A proximidade ocorre quando os elementos são colocados próximos uns dos outros. Quanto mais próximos eles estão, mais relacionados eles parecem. Este princípio da Gestalt está entre os primeiros princípios a impactar nossa percepção e compreensão. 

A maneira mais simples de indicar parentesco em seus relatórios é manipular a proximidade. Este princípio é tão poderoso que até substituirá um dos princípios da Gestalt no design, que é a similaridade.

Vamos pegar o exemplo da cor que usamos anteriormente. Podemos ver que, com base no princípio da semelhança, agruparemos os elementos intuitivamente com base em sua cor.

Veja o que acontece se adicionarmos alguns espaços entre os elementos. A proximidade substitui a semelhança.

Onde usamos o princípio de proximidade nos relatórios do LuckyTemplates ? Podemos usá-los para criar um relacionamento entre dois gráficos ou para criar um gráfico.

No relatório que criei para organizado pela LuckyTemplates, fiz este tooltip. O gráfico na parte superior da imagem usa os princípios de proximidade e similaridade.

O que estou mostrando neste gráfico são todas as corridas vencidas por Hamilton desde 2007 até hoje. Podemos observar facilmente que a densidade da corrida vencida por Hamilton de 2015 a 2016 está aumentando. Podemos ver isso porque nossos olhos interpretam a distância e agrupam barras altamente densas. 

Neste exemplo, também usamos o mesmo princípio para criar uma relação entre o mapa que mostra a prevalência de asma em adultos e os pequenos gráficos múltiplos que mostram a prevalência da evolução da asma em crianças por etnia.

Da mesma forma, os botões de navegação estão usando esse princípio além da semelhança porque temos todos os elementos de perto. Sempre usamos a mesma distância entre os botões e uma distância mais importante para todo o resto.

Princípios da Gestalt em Design | Continuidade

O princípio da continuidade mostra como os elementos que se movem ou dão a ilusão de movimento na mesma direção são percebidos como relacionados.

O uso desse princípio no design pode ajudar a atrair a atenção do espectador e direcioná-lo para um design ou informação específica .

Conforme observado no exemplo, os elementos dispostos em uma linha ou curva são percebidos como mais relacionados do que os elementos que não estão na linha ou na curva.

Outro elemento importante a notar é que se o olho começar a seguir uma tendência ascendente de linha de pontos fechados ou linha contínua, continuará a fazê-lo até encontrar outro objeto que quebre essa continuidade.

Reconhecemos elementos seguindo uma linha contínua como um grupo. Quanto mais suaves os segmentos de linha, mais os vemos como uma forma unificada.

Nossas mentes preferem o caminho de menor resistência . Mostra como tentamos seguir o caminho mais simples para elementos contínuos conectados. Nosso cérebro segue o caminho mais lógico e simplificado. Perceberemos essas linhas como duas linhas diferentes, como no segundo exemplo.

Como esse princípio pode ser útil para nós? A continuidade nos ajuda a interpretar a direção e o movimento ao longo da composição. Ocorre ao alinhar elementos e pode ajudar nossos olhos a se moverem suavemente pela página. 

O princípio da continuidade fortalece a percepção das informações agrupadas, ordenando e orientando os usuários em diferentes segmentos de conteúdo.

A interrupção da continuidade pode sinalizar o fim de uma seção e chamar a atenção para um novo conteúdo .

Marcas como exemplos de continuidade

Conforme mostrado neste slide, podemos ver que o princípio da continuidade se aplica à composição do projeto. No primeiro exemplo, podemos ver como um grande título pode funcionar maravilhosamente bem com o princípio da continuidade.

Isso sugere que a Coca-Cola é um exemplo de longa tradição em qualidade, e devemos confiar nela. Esta é uma técnica de contar histórias muito poderosa e algo que todos podemos aplicar quando comunicada através de relatórios.

Permite que o usuário ligue os pontos à conclusão que desejamos; portanto, isso torna a mensagem muito mais poderosa.

A princípio vai focar os olhos do usuário logo após o título na última garrafa da Coca-Cola. Este é um exemplo perfeito de uma grande história e uma magnífica escolha de elementos e design.

O segundo e terceiro exemplos mostram o impacto da continuidade em como vemos as imagens. Nós digitalizamos naturalmente a página em um padrão F ou Z. Desta vez, digitalizamos a página de uma maneira completamente diferente. A interrupção da continuidade chama a atenção para um novo conteúdo.

No logotipo da Amazon, eles usaram a continuidade de forma eficaz. Nossos olhos se concentram quando a linha começa em A e depois pula para Z. A mensagem subjacente é que podemos encontrar de tudo na Amazon, todos os produtos de A a Z.

No exemplo do logotipo da ProQuest, podemos ver como o foco está na mensagem ao final, onde os olhos estarão baseados no princípio da continuidade.

Pinturas como exemplos de continuidade

Vamos aprofundar ainda mais nossa exploração das possibilidades de composição. Exploraremos um exemplo que usa tanto a continuidade quanto os princípios comuns da Gestalt no design.

A caça ao javali da Califórnia é uma verdadeira obra de arte e uma pintura famosa de Peter Paul Rubens em 1612. Além da regra dos terços, Rubens também usou a continuidade , os princípios gestálticos do destino comum e os atributos pré-atentivos à perfeição, tudo ao mesmo tempo.

Primeiro, vamos olhar para a pintura. O que vemos primeiro? 

Nosso olhar atrai o guerreiro pela cor da capa. Rubens usou a cor vermelha como um atributo pré-atentivo . Além disso, nossos olhos são atraídos para a lança e seguiremos naturalmente o caminho até o final em direção ao ombro do javali.

Princípios da Gestalt em Design | Destino comum

O assunto principal é o javali, que é o centro das atenções. Rubens enfatiza isso com o uso da regra dos terços e adicionando outros princípios da Gestalt no design – destino comum .

A lei da Gestalt do destino comum afirma que os humanos percebem elementos visuais que se movem na mesma velocidade ou direção como partes de um único estímulo.

Um exemplo comum disso é um bando de pássaros. Quando vários pássaros voam na mesma direção, normalmente assumimos que eles pertencem a um único grupo. Aves que voam em direções diferentes não parecem estar incluídas no mesmo grupo. 

Nesse caso, podemos ver que todas as pessoas na cena estão olhando e com a cabeça apontada para o javali.

O movimento da cena, o uso da regra dos terços e os princípios da Gestalt no design são usados ​​para aperfeiçoar esta obra-prima. Dá vida à cena e envolve a percepção e as emoções do usuário .

Princípios da Gestalt em Design | Fecho

O princípio do fechamento é bastante simples. O fechamento ocorre quando um elemento está incompleto ou um espaço não está fechado. Se o suficiente da forma for indicada, o visualizador preencherá inconscientemente as informações que faltam. 

Observe a imagem no slide. Você vê muitos pontos ou você vê um cachorro? Você também consegue ver o panda? 

Nossa mente está preenchendo os pontos. Podemos ver formas completas em um contexto incompleto. 

A segunda observação desse princípio é que os elementos que têm um limite ao seu redor são percebidos como mais relacionados. Percebemos um conjunto de objetos como um grupo quando eles estão incluídos em qualquer área visual que coloque uma borda ou sombra ao seu redor. 

Por exemplo, os pontos de dados em ambas as imagens são organizados de forma idêntica, mas são percebidos como agrupados de maneira muito diferente. Sua percepção do que vai junto é completamente diferente. O fechamento pode ser usado para separar ou amarrar as coisas .

Aplicando fechamento no design do relatório

Com base nessas observações, como podemos usar esse princípio em nosso relatório? Em primeiro lugar, entendemos agora a importância do layout do plano de fundo. Sabemos que se juntarmos dois gráficos dentro da caixa, podemos inferir uma relação.

Em segundo lugar, sabemos que podemos implicar o mesmo princípio dentro dos gráficos mostrados no exemplo. Em terceiro lugar, não precisamos incluir componentes separados completamente. Subconscientemente preenchemos as informações que faltam, e isso é muito útil para organizar nossos projetos.

Princípios de Figura e Base

Figura e fundo é um dos princípios da Gestalt mais difíceis no design, mas também um dos mais poderosos. É o estado em que percebemos os elementos como objetos de foco ou como pano de fundo. 

Assim como o fechamento, figura e fundo funcionam através do uso de espaço positivo e negativo . Ela existe em praticamente tudo que percebemos visualmente, seja vendo uma composição, um site, um logotipo ou um ícone. 

Nosso cérebro separa o primeiro plano do fundo para ver objetos e arredores. Também é chamada de relação espacial negativa-positiva.

As mesmas formas podem ser vistas como primeiro plano ou como plano de fundo. A cor não tem nada a ver com determinar se é um fundo ou uma figura. 

Vamos ver alguns exemplos para esclarecer as coisas. O pôster do Poderoso Chefão é o melhor exemplo de figura e fundo porque vemos um excelente contraste de cores.

Colocar a figura de foco perto da área central dentro do quadro dá equilíbrio. O primeiro plano é mais detalhado do que o plano de fundo. Temos um ponto focal de significado óbvio, que é a rosa vermelha.

O plano de fundo não compete com o primeiro plano por atenção. Portanto, neste caso, é fácil identificar o ponto focal e a simplicidade de fundo de toda a interface e a importância dos detalhes. Mantenha a simplicidade e concentre-se no que realmente importa . 

Podemos replicar este exemplo em nosso design de relatório. Muita coisa pode acontecer na página com muito poucos gráficos. Na verdade, adicionar mais elementos sem entender o efeito pode muitas vezes tornar a mensagem confusa. Conforme mostrado neste exemplo, o pôster é simplesmente perfeito, menos é mais.

Ok, vamos passar para outros exemplos. Você consegue identificar facilmente qual é a figura e qual é o fundo? 

É difícil saber porque as imagens são ambíguas. Há mais de uma solução para o que é a figura e o que é o fundo. Esses tipos de imagens envolvem o espectador e os fazem permanecer mais tempo em sua imagem, o que pode aumentar o engajamento na história que você deseja contar. 

Unilever: um ótimo exemplo de figura e fundo

Se olharmos para o logotipo da Unilever, entenderemos o quão rica pode ser uma história com base na figura e no fundo, mas também no princípio do fechamento.

O logotipo da Unilever se parece com uma grande letra U. Tendemos a ver isso porque nos é familiar e reconhecemos facilmente a letra. Além disso, o tamanho e o contraste da forma nos fazem focar nela e o U se torna a figura e o restante, o fundo.

Se olharmos mais de perto, veremos que o fundo é ambíguo e podemos identificar os detalhes. Podemos distinguir um pássaro, um coração, roupas e um peixe.

O usuário descobrirá a logomarca de uma empresa engajada com a preocupação ambiental e muito mais. Esse logotipo é ótimo porque é simples, mas transmite uma história muito rica sobre a empresa.

Esse princípio é muito poderoso e, embora seja usado com mais frequência no design gráfico e no design da informação, ele precisa ser compreendido.

A diferença entre o plano de fundo e o primeiro plano é algo que precisamos estar atentos em nossos relatórios.

Projetos do LuckyTemplates para relatórios atraentes
Visuais e efeitos : projetos de painéis do LuckyTemplates
Painel no LuckyTemplates: práticas recomendadas de design

Conclusão

Aplicar as técnicas corretas do princípio da Gestalt em nossos relatórios do LuckyTemplates pode produzir narrativas convincentes que podem ajudar os usuários a conectar os pontos e tornar a mensagem mais poderosa. Temos a liberdade de escolher qual princípio usar que melhor atenda às necessidades de nosso público.

Tudo de bom,