Razões pelas quais os espaços em branco são bons nos projetos web | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Razões pelas quais os espaços em branco são bons nos projetos web

Publicado na categoria Artigos com 7.138 visualizações e 9 comentários

No contexto do webdesign, o espaço em banco refere-se aos espaços entre diferentes elementos do design. A área entre os textos, parágrafos, imagens, links e rodapés, dentre outros, são chamados de “espaços em braço”. Espaço em branco não é necessariamente um espaço em “branco”.

Razões pelas quais os espaços em branco são bons nos projetos web - André Buzzo Webdesign

Utilizar esses espaços ajuda na hora de definir seções do website e de suas páginas. Enquanto estão projetando um layout para um website,  os designers normalmente se esquecem da importância do espaço em branco. Eles reduzem a quantidade de informações que o usuário tem de filtrar ao ter o primeiro contato com o conteúdo. A separação visual dos elementos pode ser feita com a utilização do espaço em branco.

Um website que utiliza esses espaços de maneira concisa tem uma aparência clean, organizada e agradável! Vamos explorar alguns aspectos dos espaços em branco (também chamados de “espaços negativos”) que são relevantes ao projeto web.

Razões pelas quais os espaços em branco são bons nos projetos web - André Buzzo Webdesign

REALÇE

Enquanto estiver projetando o design de um layout, o espaço em branco deve ser utilizado para organizar o texto, gráficos que contenham contraste, destacando e guiando os olhos do usuário de um tópico a outro.  Isso melhora o escopo do “onde olhar” e consequentemente, sua leitura.

 Espaço positivo – o espaço entre o posicionamento das imagens e do texto pode ser evidenciado utilizando o espaço negativo! O espaço em branco também pode ser usado para criar uma sofisticada elegância para marcas de grande importância. O espaço em branco está associado com algo que tem valor elevado e grande qualidade!

TIPOS DE ESPAÇO EM BRANCO

Existem dois tipos de espaços em branco no webdesign. O espaço em branco ativo é o espaço intencionalmente deixado de lado para melhorar a estrutura de um website. Ele também é usado para enfatizar determinado conteúdo. O espaço em branco passivo é o espaço ao redor das páginas ou as áreas em branco que são automaticamente geradas no desenvolvimento do layout.

ESPAÇAMENTO ENTRE LINHAS

Um fator que proporciona uma melhor leitura e fácil compreensão  do website é a utilização de espaços entre linhas do texto. Se as linhas estiverem muito próximas, a leitura se torna difícil. Quando as linhas estão muito distantes entre as frases ou as palavras, passam um sentido de desagrupamento e a navegação se torna confusa. A otimização desse espaçamento entre as linhas pode ser realizado através de configurações no CSS do projeto.

O espaçamento entre linhas também é chamado de – principal.  Normalmente o valor utilizado é torno de 120% a 150% do tamanho do tipo da fonte. Sendo assim, uma fonte com 10pts que tenha um espaçamento de 12-15pts é considerada otimizada. Um espaçamento principal que seja menor que isso não torna seu texto melhor legível ou imprimível. Um espaçamento maior talvez leve os olhos do visitante para longe do seu conteúdo, causando uma parcial perda do interesse sobre determinado assunto.

MARGENS

Este é o espaço ao redor de um elemento em particular enquanto desenvolvemos o projeto. Ele pode ser controlado via CSS. Tente manter uma margem concisa por todo o layout. Com um espaçamento rigoroso, um site pode ter uma aparência mais organizada e profissional. Pense nas separações horizontais e verticais durante o planejamento para as margens.

Margens grandes criam um sentimento desconecto. Quando for projetar um site você deverá tomar cuidado com a quantidade de pixels utilizada para não ultrapassar o limite da tela! Não é desejável usar muita margem e perder proveito do seu campo visual.

Ainda, você precisa pensar na hora do desenvolvimento em não deixar o conteúdo pressionado pelas margens,  barras laterais e cabeçalho. Use as margens para dar ao seu visitante um “respiro” na hora da leitura. As resoluções podem variar bastante, desde o clássico 800×600 até os mais atuais, 1280×800.

CABEÇALHOS

Os cabeçalhos são perfeitos para separar os conteúdos em partições! Como existem diferentes tipos de cabeçalhos, como o H1 até o H6, eles podem destacar diferentes conteúdos. O espaço em branco usado acima ou abaixo dos cabeçalhos é muito prático para separar os conteúdos uns dos outros.

BALANCEANDO O LAYOUT

Razões pelas quais os espaços em branco são bons nos projetos web - André Buzzo Webdesign

O uso do espaço em branco balanceia um layout. Sem esses, os usuários não encontram espaços para descansar os olhos. O layout de um website deve preocupar-se em manter um balanço entre os espaços em branco e o conteúdo. Agências online têm diagnosticado que grandes espaços em branco em locais errados, bem acima do rodapé do site podem confundir usuários! Eles têm que manter a linha de raciocínio ao se chegar ao final do site. Pessoas esperam menos espaços em branco em um conteúdo web do que em uma folha impressa.

O desenvolvimento de layouts usando espaços negativos ou positivos  ganhou certa importância recentemente.  A presença dessas áreas não é definida pela quantidade, mas pela maneira como é distribuída em um site. Alguns usuários vêem muitos espaços em branco e com isso, têm a impressão que o próprio é muito pobre de conteúdo!

Os espaços em branco estão ganhando importância no desenvolvimento web. Agora, ele é tratado como parte integral de um projeto, tão importante como o background. Vários designers estão usando-os para destacar conteúdos, deixar as páginas mais legíveis e balanceando o layout. Convenções e customizações estão sendo substituídas por inovações e por criatividade. Usar espaços em branco garante a conquista de resultados, e exagerar nesse quesito, pode arruinar ao invés de colaborar.

Traduzido do original: Reasons Why White Spaces are Good in Web Designing 

 

Voltar à página anterior!

  • Alyson A. Martins

    Ótimo post.. Sempre gostei de layouts clean.. Mesmo antes de virar moda :)

    • Fala Alyson … duro é você convencer o cliente a montar um desses …

  • Kelven Colares

    Mais uma vez um post admiravel ein André, hehe, gostei muito desse, tudo isso que falou é verdade, passei um tempo sem olhar seus posts mas sabia que quando visse iria ficar bem inspirado. Um abraço e Vlw !

    • Fala Kelven!!

      Obrigado meu velho!!!

      Agradeço a confiança depositada no meu trabalho!!

      Abraços!

  • Jacson Leite

    KKKKKKKKKK!

  • Jacson Leite

    Parcimônia! é profundo. rsrsrsrs…

  • Jacson Leite

    Parabéns por mais esse post de ótima qualidade.
    Confesso, não sou bom em montar layout. Sempre que pego um projeto para desenvolver por completo, eu pesquiso por sites semelhantes ao que vou desenvolver, para ter uma noção, e pelo que estou vendo usar espaços em brancos é uma tendência, que está sendo aceita.
    Porém, deve ser usada de forma que torne o layout agradável.

    Abraço.

    • Valeu Jacson!!

      Isso mesmo! Os espaços em branco devem mesmo ser utilizados, porém, com parcimônia….rs

      Abraços!