Melhorar Seus Projetos Com Os Princípios De Encerramento E Figura-fundo (Parte 2)

• 12 min de leitura
• Inspiração,Design,Criatividade,Princípios de Design
• Guardada para leitura off-line
• Compartilhar no Twitter, O LinkedIn

Na primeira parte desta série, estamos focados nos princípios de semelhança e proximidade para entender como os princípios gestálticos trabalho na criação de relações entre elementos., Hoje, vamos nos concentrar nos princípios de fechamento e figure-ground, que jogam com espaço positivo e negativo para construir relacionamentos e criar integrais com a soma de suas partes. Como no primeiro artigo, vamos olhar como os princípios funcionam e, em seguida, passar para exemplos do mundo real para ilustrá-los em uso.

Não é por acaso que um design convincente parece funcionar., O que a maioria destes projetos têm em comum é o uso de princípios de agrupamento gestalt para organizar informações que nos ajudam a entender as relações e diferenças entre os elementos. Como designers, podemos usar estes princípios para criar o nosso próprio trabalho envolvente e de sucesso.vamos começar com o princípio Gestalt do encerramento.

Fecho

de acordo com os princípios universais do Design, este princípio afirma que temos uma tendência para perceber um conjunto de elementos individuais como um único padrão reconhecível, em vez de múltiplas partes individuais., O uso de fechamento efetivamente diminui a complexidade ao reduzir os elementos para o menor número possível de peças necessárias para completar um objeto. Fornecido com informações suficientes, vamos preencher as partes em falta para criar um todo. Isto é conseguido através do uso de espaço positivo e negativo.

no exemplo abaixo, nossas mentes completam as linhas para formar um círculo, mesmo que a forma não exista. O espaço positivo e negativo se combinam para formar a nossa percepção do círculo.,

Fechamento pode ser usado para nos fazer perceber objetos ou padrões, utilizando a menor quantidade de informações. Nossas mentes estão tão ansiosas para preencher a informação em falta que pode ser feito com muito poucos elementos. No entanto, se não fornecermos informação suficiente para completar o padrão, então não podemos perceber o objeto e o fechamento falha, tornando o círculo muito mais difícil de formar em nossas mentes. Dê uma olhada e veja se você pode completá-lo em sua mente. É muito mais difícil, não é?, Não podemos juntá-lo agora com a escassa quantidade de informação dada.

a Criação Eficaz de Fechamento

Os exemplos acima são muito básicos ilustrações de como percebemos os padrões de formulário de encerramento. Na realidade, existem muitos elementos visuais que podemos usar para nos ajudar a formar um fechamento efetivo:

• espaço positivo e negativo. Como mencionado anteriormente, o espaço positivo e negativo se combinam em fechamento para formar um todo., Isto pode ser conseguido procurando as formas ocultas no espaço negativo de um projeto ou dentro do tipo. Além disso, remover elementos do primeiro plano pode criar formas negativas interessantes, e ao fazê-lo, simplificar um design.
• contraste. A chave para formar fechamento é criar um forte contraste entre os elementos de primeiro plano e de segundo plano. Como sempre, preto e branco cria o melhor contraste, mas você também pode experimentar com cores complementares para forte contraste também.cor., A cor não só adiciona vida a um design, como também pode ser usada para reforçar relações, especialmente se usar formas abstratas para representar formas.

todo o encerramento usa muitos, se não todos os elementos visuais acima. Usando estes e experimentando com redução em seus projetos irá ajudá-lo a descobrir novas formas. Vamos agora dar uma olhada no encerramento do mundo real e ver como tudo se junta.

Closure In Practice

Using closure, we can reduce the elements needed to transmit visual information, reducing complexity and making designs more engaging., Um dos usos mais comuns do fechamento é o design de logotipos da empresa, precisamente porque o fechamento pode simplificar um design para transmitir rapidamente a identidade de uma marca.

visto abaixo é o famoso logo que reconhecemos como o pavão da NBC. Ao comparar o logotipo atual (à direita) com o logotipo antigo, você pode ver que eles não são muito diferentes. Mas reduzindo os elementos e trabalhando com espaço negativo, o logotipo atual se torna muito mais simplificado e elegante., O fechamento é conseguido com sucesso usando formas positivas e bem agrupadas como penas, com a nossa percepção do corpo do pavão formado através do uso do espaço branco negativo no meio.

outro logótipo bem reconhecido que emprega Fechamento com sucesso é da FedEx., Neste Logotipo, O fecho é alcançado com espaço branco negativo, usando as partes da maiúscula e e a minúscula x para formar a familiar seta em movimento para a frente. O designer experimentou com muitos projetos, eventualmente puxando as letras cada vez mais perto, até que ele viu a seta se formando entre o e e X. Isso mostra que experimentar com redução em seus projetos, e olhando para os espaços no meio, pode produzir resultados fantásticos. Para a história por trás da criação do logotipo, confira O grande artigo de Matthew May na Fast Company. Consegues ver a seta no logótipo?, A partir de agora, nunca mais vais perder!

os exemplos acima são logotipos bem conhecidos que usam fechamento de formas um pouco óbvias. No entanto, há logotipos menos famosos que usam fechamento mais sutilmente. Por exemplo, Houzz emprega fechamento mais conceitualmente. À primeira vista, as formas verde, preto e branco podem se assemelhar a uma prateleira, parte de um edifício, ou padrão de parede, sugerindo o que o site é sobre., Mas um olhar mais atento revela outra coisa também. O desejo da nossa mente de preencher os espaços e os padrões completos permite-nos combinar as formas separadas num todo, formando um H maiúsculo no espaço tridimensional.

While closure is great for the creation of interesting logos, it can work in other ways as well., Os sites também podem usar espaço positivo e negativo no projeto de suas interfaces para produzir fechamento eficaz. Abaixo, o logo Unrate usa espaço positivo contra um fundo preto, negativo para formar as letras de seu logotipo e criar a marca do site. Este é também um bom exemplo de figura-ground que vamos entrar em breve.

Usando o Encerramento Ao Criar Ícones

os Ícones são úteis para quando precisamos transmitir uma mensagem ou reforçar um conceito dentro de um pequeno espaço. Eles precisam ser simples e despojados de seus elementos básicos para ajudar as pessoas a entender rapidamente seu significado. O fechamento funciona bem na criação de ícones, utilizando espaço positivo e negativo para diminuir a complexidade, enquanto ainda sugerindo formas ou objetos que percebemos como inteiros, como nestes exemplos do site do projeto Noun.,

Abstract Closure

Closure can get quite abstract and still allow us to form recognizable patterns. Um dos meus usos favoritos do encerramento é no Google doodle., O Google emprega fechamento muitas vezes em seus doodles, confiando em nossa necessidade inerente de preencher as informações em falta para criar um objeto inteiro. O Google doodles depende da nossa familiaridade com o logótipo do Google, que nos permite ler a imagem abaixo, apesar de conter formas muito abstratas. Aqui, a cor ajuda a reforçar a relação entre cada letra do logotipo do Google também.,

como você pode ver, usando espaço positivo e negativo criativamente, e reduzindo elementos em nossos projetos, podemos criar alguns projetos realmente interessantes com fechamento. Podemos aproveitar a necessidade de preencher as partes em falta para diminuir a complexidade e simplificar os nossos projetos., Em seguida, vamos dar uma olhada em como podemos usar espaço positivo e negativo para criar boas relações figura-Solo.

Figure-Ground

Qual é o princípio da figura-ground? De acordo com princípios universais de Design, figura-solo é o estado em que percebemos os elementos como os objetos de foco ou o fundo. Como o fechamento, o figure-ground trabalha através do uso de espaço positivo e negativo. Figura-terreno existe em praticamente tudo o que percebemos visualmente, seja uma cena, uma composição, um site, um logotipo ou um ícone.,

figura-terra é estável quando os objetos são distinguíveis do fundo e o fundo não tem interesse. A figura-Terra estável fornece um cenário para objetos e nos permite focar a atenção onde queremos. Por exemplo, percebemos a imagem abaixo como um círculo sobre um fundo. O círculo é o foco e mantém a nossa atenção enquanto o fundo é de pouco interesse. Este exemplo exibe uma forte estabilidade figura-solo como a figura tem forma e é percebida como estando na frente, enquanto o fundo é sem forma, continuando atrás da figura em uma profundidade maior.,

Quando a figura-terra não é estável, como no exemplo abaixo, percepção de ambiguidade é introduzido e as relações entre os elementos de tornar-se claro. Neste exemplo deliberadamente simplificado, a figura e o solo são reversíveis, fazendo-nos alternar entre ver um item e, em seguida, o outro como a figura e, em seguida, o chão.

no Entanto, a ambiguidade não é necessariamente uma coisa ruim., Esta falta de estabilidade pode ser usada para nossa vantagem ao projetar. Desestabilizar propositadamente a relação figura-solo pode introduzir discórdia ou tensão, acrescentando excitação e interesse aos nossos projetos. Um dos meus usos favoritos desta tensão em figure-ground é na série de posters do submundo do crime de Simon C. Page. Aqui, Page deliberadamente desestabiliza a figura e o chão, colocando o princípio contra si mesmo como figura e terreno batalhando-o para a nossa atenção, assim como o herói e vilão na batalha poster um contra o outro.,

Criação de Boa Figura-fundo Relacionamentos

Existem muitos elementos visuais que podemos usar para reforçar a relação figura-fundo em nossos desenhos. A utilização destes elementos pode ajudar-nos a concentrar a atenção onde a quisermos, ajudando na memorização de um website ou outro design:

• contraste., Branco ou preto, emparelhado com cor, como visto nos cartazes do submundo do crime, cria um contraste muito forte. Da mesma forma, cores complementares são excelentes para criar contraste. Se as cores puras são muito intensas, alterar o valor (como escuro ou luz a cor é) para criar um contraste mais eficaz.cor. Cores quentes, como amarelos, laranjas e vermelhos, são percebidas como aproximando-se e podem ser usadas para fortalecer a figura. Cores frias, como púrpuras, azuis e verdes, são percebidas como recuando e podem ser usadas para fortalecer o solo.
• Tamanho., Quando um grande elemento preenche a maioria do solo, ele será percebido como a figura. Inversamente, um pequeno elemento dentro de um terreno grande será percebido como a figura.posição. Os elementos posicionados em áreas mais baixas serão percebidos como figura, enquanto os elementos posicionados em áreas superiores serão percebidos como solo. Isso joga com a nossa percepção da distância, pois percebemos objetos posicionados em áreas mais baixas para estar mais perto de nós e objetos posicionados em áreas mais altas para estar mais longe.foco., Os elementos que estão em foco serão percebidos como figura, enquanto os elementos que estão fora de foco, desfocados, ou tingidos, serão percebidos como solo.

a maioria das boas relações figura-solo são criadas com uma combinação de muitos destes elementos visuais. Em seguida, vamos dar uma olhada em alguns exemplos do mundo real e ver como esses elementos trabalham juntos para criar uma figura-ground bem sucedida.,

Figure-Ground In Practice

the example of figure-ground in the Criminal Underworld poster series above shows the principle in an unstable state, where figure and ground battle each other for attention. A figura-solo instável funciona bem quando há poucos elementos e o design é simples. No entanto, este pode não ser necessariamente o uso desejado do princípio quando estamos projetando sites, embora isso dependa do conteúdo e contexto do site. Os sítios Web precisam de transmitir informação complexa e ainda ser claros e utilizáveis., Com a figura-ground estável, podemos orientar a atenção onde queremos e evitar qualquer ambiguidade da mensagem que estamos tentando comunicar.

dê uma olhada no exemplo abaixo no site da Apple Music. Muito provavelmente, seu olho é atraído para a imagem do smartphone, que, juntamente com a cópia à esquerda dele, são os elementos de figura. Enquanto o fundo começa a lutar pela nossa atenção, os elementos da figura são melhorados através do uso de vários elementos visuais. Primeiro, a figura é reforçada através de grande cópia e o grande tamanho do smartphone., Posicionar o smartphone na parte inferior da tela também ajuda a trazer a figura para a frente. A figura é reforçada ainda mais por colorir a animação de vídeo em segundo plano, fazendo com que o chão recue. Finalmente, o contraste entre a tela brilhante e o fundo escuro proporciona uma boa separação entre a figura e o solo.

no próximo exemplo, a partir do site da Naya, o tamanho da figura é o elemento visual mais forte usado para criar uma boa figura-Solo. Aqui, percebemos a mulher (e seu chapéu muito grande!) como figura como ela preenche a maioria do solo. Além disso, o uso de uma cor legal no fundo, bem como o uso inteligente de elementos sobrepostos, ajuda a ajudar o fundo a recuar. Finalmente, como o exemplo da música da Apple, há um bom contraste separando o primeiro plano do fundo.,

finalmente, excelente contraste entre a figura e o chão é a força do site da Escola de Design de R/M. Aqui, o menu exibe forte contraste, usando cores brilhantes e preto para separar a figura do chão. Além disso, a cor quente é usada para fortalecer a percepção da figura que vem na nossa direção. Não queres ir buscar os azulejos vermelhos?,

Conclusão

noções básicas de como usar encerramento e figura-fundo irá ajudar você a desenvolver fortes relações e diferenças entre os elementos em seus projetos.,

• Olhar para o espaço negativo, assim como o espaço positivo para descobrir interessante formas;
• Brincar com a remoção de elementos em primeiro plano e usar o espaço negativo para formas do formulário em vez disso;
• por último, misture elementos visuais, tais como o contraste, a cor, o tamanho, a posição e o foco para criar estável e instável figura-fundo relacionamentos.

Agora que você sabe como usar estes dois princípios em seu trabalho, vá em frente e crie seus próprios projetos envolventes e bem sucedidos!,na terceira e última parte desta série, vamos focar-nos nos princípios da continuação e do destino comum, que envolvem movimento, implícito e animado, para criar relações.

Resources And Good Reads

• “Gestalt Principles” on Scholarpedia.princípios universais de Design revisados e atualizados: 125 maneiras de melhorar a usabilidade, a percepção de influência, aumentar o apelo, tomar melhores decisões de design, e ensinar através do design por William Lidwell, Kritina Holden e Jill Butler. Rockport Pub, 2010.,visualização da Informação: percepção para o design por Colin Ware. Elsevier, 2012.

• Princípios de Design: a Percepção Visual E Os Princípios De Gestalt
• Conectando-se E Separando os Elementos de Contraste E Semelhança
• Composição de Equilíbrio, a Simetria E a Assimetria
• Como Melhorar o Seu e-Mail de Fluxo de trabalho Com Design Modular