Princípios de Design: O espaço E A Relação Figura-fundo

Sobre O Autor

Steven Bradley é o autor do Projeto de conceitos básicos: Elementos, Atributos, & Princípios e CSS Transições e Animações para a Web Moderna., Quando não …Mais aboutSteven Bradley↬

Design é um arranjo de ambas as formas e espaço. Para trabalhar de forma mais eficaz com o espaço, você deve primeiro tomar consciência dele e aprender a vê — lo-aprender a ver as formas que o espaço forma e como o espaço se comunica. Esta é a segunda parte de uma série sobre princípios de design para iniciantes. A primeira parte cobriu uma introdução à gestalt; o resto da série (incluindo este post) irá construir sobre esses princípios gestalt e mostrar quantos dos princípios fundamentais com que trabalhamos como designers têm sua origem lá.,

A relação figura-Solo

o princípio gestalt que se aplica mais ao espaço é o da figura-Solo. Tudo em um projeto seu será visto como um ou outro, e a relação entre eles é mutuamente exclusiva. Nenhum deles pode ser percebido excepto em relação ao outro, e mudar um é impossível sem mudar o outro também.

a relação figura-terreno também é complementar. Figura e terreno podem melhorar ou diminuir um do outro, e organizar os dois em relação ao outro é um dos aspectos mais importantes do design., Define um contexto para a forma como o seu design se comunica e como será interpretado.

“o espaço branco deve ser considerado como um elemento ativo, não como um fundo passivo.”
— Jan Tschichold

No terceiro painel, duas das linhas pretas foram removidos. Isto activa o espaço, fazendo-o parecer estar sentado no topo do campo cinzento., O solo tornou-se a figura e acrescenta mais profundidade ao design.

Existem três tipos de relações figura-Solo:

• estável (acima da esquerda)
  é claro o que é a figura e o que é o solo. Um ou outro geralmente domina a composição.tanto a figura como o chão atraem a atenção do espectador igualmente., Isso cria tensão, em que qualquer um pode ultrapassar o outro, levando a um design dinâmico.
• Ambíguo (acima da direita)
  os elementos podem parecer ser tanto a figura como o solo simultaneamente. Eles formam formas igualmente interessantes, e o espectador é deixado para encontrar seu próprio ponto de entrada na composição.

dependendo da relação que estabelece e da forma como equilibra tanto a figura como o chão, direcciona o público para olhar para diferentes partes do design e interpretar o que eles vêem em diferentes contextos.,

Figure-ground não é o único princípio gestalt no qual o espaço desempenha um papel proeminente. Dois outros são:

• proximidade
  proximidade usa o espaço para conectar e separar elementos, cercando alguns elementos no espaço. Um exemplo que podemos tomar como certo é parágrafos de texto na página. O espaço entre parágrafos é maior do que o espaço entre linhas de texto dentro de um parágrafo.
• Closure
  This makes use of space as gaps between elements. Os telespectadores preenchem as lacunas com a sua própria informação para completar um todo a partir das partes. Há muito espaço e não há fechamento., Muito pouco espaço e nenhum encerramento é necessário. Somente o equilíbrio correto entre espaço e espaço preenchido irá ativar o espaço e levar ao fechamento.

o Espaço Como Um Elemento de Design

Penso sobre a música por um momento. Se todas as notas ou acordes fossem tocadas ao mesmo tempo, não terias música. Terias barulho. A música ocorre quando os sons são contrastados com o silêncio. Variando o padrão de som e silêncio cria ritmo e melodia., Sem o silêncio, não há música.

O espaço desempenha a mesma função visualmente. Dá aos elementos positivos espaço para respirar. Dá ao olho liberdade para se mover através de um design e descobrir os elementos que ele está procurando. O positivo é visto apenas em contraste com o negativo. Sem espaço, você não tem design. Tem ruído visual.a menos que o ruído seja o que está a tentar comunicar, incline-se para o espaço. É menos provável que as pessoas se queixem de muito espaço do que de muito pouco.,

O espaço pode fazer o seguinte:

• estabelecer contraste, ênfase e hierarquia;
• gerar drama e tensão;
• proporcionar repouso visual entre grupos de elementos.

Como a relação figura-Solo implica, você tem espaço apenas quando algo está presente dentro dele. Antes da adição de elementos positivos, o espaço é indefinido. A relação figura-solo tem que ser estabelecida antes que o espaço possa existir e sua comunicação comece.uma das funções mais importantes do espaço é melhorar a legibilidade e legibilidade., Macro-espaço torna o texto mais convidativo. O Micro-espaço torna-o mais legível.este é o espaço dentro de elementos de um grupo. É o espaço entre letras, palavras e parágrafos.este é o espaço entre os elementos principais. Ele separa elementos ou grupos de elementos e fornece avenidas para o olho seguir e lugares para descansar entre os elementos.

o espaço está correlacionado com a qualidade. Mais espaço implica menos elementos ou uma raridade de elementos. Compare lojas de luxo e lojas de desconto., Qual deles normalmente tem mais espaço dentro, e qual embala produtos em cada pedaço de espaço disponível? O que é que o espaço te comunica?o espaço também pode transmitir outros atributos para além da qualidade, tais como: sofisticação, simplicidade, luxo, limpeza, solidão, abertura.

desperdiça espaço quando não o considera. Podes desperdiçar espaço ao sobrecarregá-lo. Você pode desperdiçar espaço prendendo-o dentro de elementos de um projeto e não permitindo que ele se conecte a outro espaço no projeto.,

Design é, em última análise, um arranjo de formas, e que inclui as formas formadas pelo espaço. Não tenhas medo de usar o espaço. Veja-o como um elemento de design importante sob seu controle.

alguns exemplos de espaço em sites

para melhor usar o espaço, você primeiro precisa se conscientemente consciente disso. Aprenda a reconhecer o espaço em diferentes projetos. Repare na forma que forma, e pense no que o espaço está a comunicar. Para isso, vamos olhar para o design de alguns sites, tendo em conta como o espaço é usado.,

Old Guard

o design da Velha Guarda de Tom Johnson usa muito espaço branco, dando texto e outros elementos espaço para respirar. Não há como confundir o que é figura e o que é terra.

a informação é contida e separada pelo espaço (lembre-se do princípio da proximidade), distinguindo grupos de elementos., Você pode facilmente dizer onde um post termina e o próximo começa, apenas pelo espaço entre eles.

O conteúdo principal está ligeiramente fora do centro da página, com generoso espaço em ambos os lados. Este espaço é ocasionalmente interrompido por elementos, ativando tanto o espaço quanto os elementos que interrompem. Isso ajuda a chamar a atenção para a área e especialmente para os elementos dentro.

a página Staus de Heroku

a imagem abaixo mostra parte da página de status para Heroku como sendo principalmente espaço., Por acaso apanhei o site num dia particularmente bom, porque elementos positivos adicionais significariam mais incidentes relatados na plataforma. Aqui, mais espaço branco significa melhor serviço.

Notice how the white space doesn’t need to be white. Embora a página seja excessivamente generosa com o espaço, é pouco provável que se queixe de que há muito dela., Apenas informações importantes — neste caso, atualizações de estado e relatos de incidentes-interrompem o espaço.o espaço no topo da introdução do romance é assimétrico e ativo. Observe como o grande bloco de espaço à esquerda leva seu olho diretamente para o conteúdo. Se você clicar no site e descer do topo, você verá que o espaço também é usado para separar e agrupar blocos de informação.

linhas de luz finas também são usadas para agrupar e separar estes blocos. Ao ver o site, observe como as linhas nem sempre se tocam, permitindo que o espaço flua em torno deles e se conecte a outro espaço. Isto evita que o espaço fique preso.Elliot Jay Stocks Elliot Jay o site de Elliot Jay Stocks deve ser familiar a todos vocês, uma vez que ele está por trás do projeto deste. Espaço assimétrico no site de Elliot novamente leva ao espaço ativo.,

A imagem grande no topo da página pode potencialmente servir como bloqueio temporário para acessar o conteúdo abaixo; no entanto, uma quantidade generosa de espaço ao lado da imagem oferece um amplo e convidativo, o quarto do olho para mover ao redor dele., Se a barra lateral à esquerda tivesse a mesma cor de fundo que o conteúdo principal, então provavelmente seria mais fácil para o olho se mover em torno da imagem, mas a mudança de cor dificilmente torna difícil.

tal como acontece com os sites acima, o espaço é usado tanto para encerrar e separar grupos de informação distinta, permitindo que cada grupo se destaque e permitindo que o olho para encontrar o que ele quer e para descansar no meio.

Phil Coffman

o conteúdo do site de Phil Coffman forma uma única forma que se encontra em espaço vazio., A ausência de muitos elementos positivos aumenta a importância daqueles que estão presentes.

mesmo dentro dos fundos retangulares coloridos, o texto tem espaço suficiente em torno dele para ser facilmente lido e não ser confundido com outra categoria de texto na página.,

a forma positiva (e a forma do espaço) ajusta-se responsavelmente a diferentes larguras de navegador, mas o padrão de uma única forma grande cercada pelo espaço permanece.

new Adventures in Web Design

como muitos dos sites aqui, o site de 2013 para as novas aventuras em Web Design conference deixa um espaço generoso em torno de elementos. Grupos distintos de informação São contidos pelo espaço, e o espaço está ativo durante todo o projeto.

algo interessante a notar é as setas circulares cinzentas entre a imagem na parte superior-esquerda e o conteúdo principal para a direita.estas setas bloqueiam o fluxo do espaço? Porque eles não se tocam e porque cada um é cortado onde interrompe o espaço, o espaço pode fluir através, embora seja claramente mais restrito nesse fluxo.

A cor mais clara-cinza ajuda. Impede que as flechas dominem, e não é difícil imaginar o espaço fluindo sobre as linhas.,

para ser justo, se o meu navegador fosse mais largo quando agarrei a imagem, as setas não se sobreporiam ao conteúdo principal. No entanto, cerca de 1280 pixels até onde o projeto se torna uma única coluna, eles fazem. No geral, funciona, embora eu me pergunte se o espaço fluiria melhor sem as setas presentes.

A Few Examples Of Logos

i’ll leave you with some logos in which space is incorporated as an integral part of the design. Em vez de apontar o uso do espaço em cada um, Vou fazer alguns comentários gerais e, em seguida, deixá-lo explorar os espaços para si mesmo.,

Notice how the logos below make use of the figure-ground relationship. Com alguns, até você ver a figura e o chão, você não vê o logotipo completo. Ambos são contribuintes necessários para o que está sendo comunicado.vários destes logótipos baseiam-se no princípio do encerramento. O que estás destinado a ver não está lá, mas mesmo assim vês. Alguns destes logotipos também brincam com a figura e o chão. O que é a figura quando você pega todo o logotipo contra o seu fundo torna-se terreno para uma figura menor dentro., Esta relação figura-Solo reversível é central para o que está a ser comunicado.

• Nuvem de Cama
• Gato Preto Lounge
• Shift
• Dolphin & logomarca do Selo Designer
• Implantes Dentários Guia
• Wineforest

Resumo

espero que você tirar duas coisas principais a partir deste post., Em primeiro lugar, a ligação entre o uso do espaço no design e o princípio gestalt do figure-ground. Os princípios da Gestalt subjazem muito do que fazemos como designers.

Em segundo lugar, e talvez mais importante, fazer um esforço para passar o tempo observando como o espaço é usado no design. Não deixes que o espaço seja um subproduto dos teus elementos positivos. Aprenda a projetar espaço tanto quanto, se não mais do que, elementos positivos. O layout de qualquer página é, em última análise, uma organização do espaço.

conscientemente analisar esse espaço, e deliberadamente usá-lo para criar um design melhor. Não deixes que seja o que resta., Veja-o como um elemento de design essencial, e então veja a relação entre o espaço e elementos positivos como um elemento de design que você forma.da próxima vez, adicionaremos mais princípios gestalt à mistura e exploraremos como os pontos focais, a continuação e o destino comum nos levam a ideias como o peso visual e o equilíbrio de composição.

• omo A Geometria influencia o desenho do logótipo

sobre a arte

(al, ml, il)