Como usar o espaço negativo para criar sites impressionantes

Sites e aplicativos têm todos os tipos de elementos visuais que precisam coexistir - botões, colunas, ícones, imagens, linhas, mídia e tipografia. Todos esses elementos precisam de uma tela (a página da web em branco), e essa tela precisa de um espaço em branco, ou seja, negativo ou espaço em branco. O olho do espectador não consegue processar o que vê sem ele.

Inscreva-se no nosso canal no Youtube

O que é espaço negativo?

O espaço positivo é a parte do trabalho que é preenchida com o assunto ou outros pontos focais. O espaço negativo ocupa o resto. Pode ser em branco ou branco, contrastando em cores ou design, uma imagem de fundo sutil - seja o que for, parecerá vazio em vez de cheio ou desordenado. No entanto, só porque o espaço negativo é vazio, isso não significa que não seja importante - ele chama a atenção para o espaço positivo e, às vezes, até se torna o próprio espaço positivo quando olhado de forma diferente.

Exemplos de Espaço Negativo

O espaço negativo - e sua contrapartida, o espaço positivo - está em todos os tipos de arte e design, incluindo web design. Vejamos o logotipo da FedEx. Você vê letras roxas e laranja, certo? No entanto, há uma flecha ali, no espaço em branco:

Essa seta FedEx oculta usa o espaço negativo de maneira semelhante ao desenho e à pintura - o contorno é criado da mesma forma que o espaço positivo é criado. Em um exemplo como este, o espaço negativo não é criado simplesmente porque é onde o espaço positivo não está .

O pavão da NBC faz a mesma coisa:

Embora o objetivo do espaço negativo geralmente seja colocar o foco no espaço positivo, às vezes ele se torna o foco em designs inteligentes. Aqui está outro exemplo - veja como os dentes do lobo formam uma árvore:

Existe um termo para isso: reversão figura-fundo. Basicamente, significa que as cores do primeiro plano e do plano de fundo trocam de lugar para mudar a perspectiva e as interpretações. Se você gosta disso, verifique o trabalho de MC Escher, especialmente suas impressões de transformação.

O espaço negativo desempenha o mesmo papel na fotografia. Veja este retrato que tirei do filho do meu primo, Julian. O fundo preto coloca todo o foco nele:

Você pode encontrar espaços negativos na natureza, como no espaço entre as pétalas das flores, e no design funcional, como no espaço através da alça de uma caneca de café.

Também o usamos em nosso site. Nossa página inicial tem um monte de informações, mas não é esmagadora por causa da maneira como as espaçamos. E mesmo que o fundo tenha dicas de cor e algumas formas para adicionar ao design, não é de forma alguma distrativo - ainda dá a aparência de ser agradavelmente vazio sem ser chato ( e é de marca).

Tipos de Espaço Negativo

Existem alguns tipos de espaço negativo. Micro e macro referem-se ao tamanho do espaço negativo em uma composição. Ativo e passivo referem-se ao que essas áreas fazem pelo usuário.

Espaço Micro vs. Macro Negativo

O espaço micro negativo refere-se aos pequenos espaços entre os elementos - o espaçamento entre as linhas de texto ou a área entre os links em um menu de navegação. Isso afeta a forma como o conteúdo é legível para o leitor. Se não houver espaço suficiente entre as linhas ou se o texto sair das margens, o usuário terá dificuldade em lê-lo e entendê-lo.

O espaço macro negativo é maior; é o espaço ao redor do layout e os espaços entre grandes elementos de design. Um exemplo é a área entre os blocos de conteúdo. São as partes vazias do contêiner que contêm todo o design.

Os sites com pequenas quantidades de espaço macro negativo tendem a ser altamente informativos. Os sites com grande quantidade de espaço macro negativo costumam ser minimalistas ou vitrines de luxo. O primeiro exemplo é de um pequeno espaço macro negativo e o segundo é de um grande espaço macro negativo:

Espaço negativo ativo vs. passivo

O espaço negativo ativo adiciona à estrutura da página, melhora o fluxo de conteúdo e orienta o usuário para onde você deseja que ele vá. O espaço negativo passivo melhora a aparência do site, mas não move o usuário por nenhum fluxo específico. Quando o espaço está descentralizado e assimétrico, geralmente está ativo. Quando é equilibrado e simétrico, geralmente é passivo - evoca menos movimento, o que não força o usuário a olhar para ele de uma determinada maneira. Aqui está um exemplo de espaço negativo ativo:

E aqui está um exemplo de espaço negativo passivo:

Espaço Negativo e Composição

O espaço negativo é importante para a composição por vários motivos:

• Você precisa ver o espaço em uma composição para mantê-la bem proporcionada.
• Ele também permite que você brinque com as relações entre diferentes objetos em um design.
• Em web design, pode desempenhar um papel tão importante manter as pessoas em sua página.
• A quantidade de espaço ao redor de um elemento determina quanto foco está no elemento - mais espaço significa mais foco.

Escolhendo o equilíbrio certo de espaço negativo e positivo

A quantidade de espaço negativo e positivo que você usará dependerá da aparência que você está procurando e do que deseja evocar no visualizador.

• Se você deseja um design esteticamente agradável, provavelmente usará partes iguais de espaço negativo e positivo.
• Para um design que parece propositalmente austero e minimalista, você escolherá um espaço mais negativo.
• Para parecer irresistível e frontal, você pode optar por um espaço mais positivo.

Os designers precisam brincar com o espaçamento até encontrar o equilíbrio certo para a marca e os objetivos pretendidos do site.

Organizando sites com muito texto e espaço negativo

Quando você precisa espremer uma tonelada de informações em uma página, descobrir onde colocar o espaço negativo torna-se complicado - especialmente se as informações contiverem muito texto, o que pode parecer confuso rapidamente. HostingDude é um ótimo exemplo de muito espaço positivo:

O New York Times, por outro lado, descobriu como embalar sua página inicial com as notícias sem enlouquecer os olhos, e tudo graças ao espaçamento (e às opções de cores). Embora não haja muito espaço para o espaço macro, eles aproveitaram o espaço micro:

Mesmo que os elementos no HostingDude estejam mais próximos, os elementos no site do New York Times parecem mais unificados graças ao espaço extra entre eles. O olho tem mais facilidade para entender a página, o que lhe confere um design mais completo e coeso. Quando o olho tem a oportunidade de descansar, fica mais apto a captar o que está vendo. O espaço negativo acredita que menos é mais.

Quebrando texto com espaço negativo

Você viu como os designers podem criar uma página inicial esteticamente agradável e cheia de texto, mas e os próprios blocos de texto mais longos? Misturar parágrafos curtos com longos, manchetes em negrito, criar listas e adicionar mídia ao longo de um artigo ajudam a construir um espaço negativo em torno das palavras, tornando-o mais convidativo para o leitor. A aparência é importante, mesmo com cópia, e grandes designers levam isso em consideração.

Explicando o ponto de espaço negativo para os clientes

Os designers de sites podem entrar em conflito com os clientes sobre o espaço negativo. Os clientes veem ainda mais espaço para inserir informações importantes e lucrativas. Eles sentem que o espaço em branco é espaço desperdiçado. Os designers, por outro lado, veem a quebra visual de que o olho precisa para realmente absorver as informações que já existem. Eles sabem que todo o espaço em um site é importante, até mesmo o espaço que está livre de conteúdo.

É aqui que as ferramentas de maquete e prototipagem são úteis. Mostre ao cliente duas versões do site, uma com uma quantidade agradável de espaço negativo e outra sobrecarregada com espaço positivo. Peça-lhes que olhem os sites lado a lado e peça que brinquem com eles. Meu palpite é que eles terão facilidade para navegar em um site bem projetado e se sentirão perdidos naquele que foi mal projetado.

Empacotando

Os sites têm vários elementos diferentes e, se você quiser que esses elementos vivam em harmonia e atraiam o visualizador, precisa de um espaço em branco ao redor deles. A quantidade de espaço em branco que você usa e como ele funciona dependem (a) de sua marca e (b) de quais ações você deseja que o usuário execute. Você também pode ser criativo com o espaço em branco, invertendo as cores ou desenhando com um espaço negativo para defini-lo de uma forma interessante ou surpreendente.

Qualquer que seja a abordagem que você adote, o espaço em branco deve parecer equilibrado - isso não significa necessariamente simétrico. Em vez disso, significa que os elementos existem em uma página sem competir entre si e ao mesmo tempo que chamam o tipo de atenção que você deseja que eles tenham. Para o visualizador, equilíbrio significa ser capaz de olhar para um site sem ficar confuso ou oprimido.

Experimente o espaço em branco em seu site. Adicione um pouco, retire um pouco. Reduza macro e aumente micro, ou vice-versa. Teste como mais ou menos espaço em branco ao redor de certos elementos incentiva o usuário a agir. A beleza do espaço em branco é que ele é uma técnica artística, o que significa que não existem regras rígidas e rápidas.

Projetando um site de viagens? Você provavelmente vai usar muito espaço de macro. Confira nosso resumo de temas infantis Divi para sites de viagens.

Imagem em destaque via StockVector / Shutterstock.com