A internet está repleta de blogs e sites de todos os tipos e gostos. Alguns são claros, outros escuros. Alguns são largos, outros estreitos. Alguns são simples, outros extremamente profissionais. Olhando para esse contexto, existem blogs que nos atraem e blogs que nos afastam. Se eu fizer uma pergunta, tenho quase certeza de receber um “sim” como resposta. Você já visitou algum site ou blog cujo conteúdo era excelente, mas que não lhe agradava visualmente a ponto de fazê-lodesistir da leitura? Pense um pouco mais e me diga, quantos blogs realmente atraem seu interesse no momento em que você bate o olho?

Vou fazer você pensar ainda mais sobre isso através de outra pergunta que talvez bata de frente com a situação anterior: por que será que alguns blogs tão desarrumados e desestruturados apresentam um conteúdo de forma clara e super legível? Veja que antes eu falava de uma situação onde a estrutura do blog era ruim, agora eu digo que alguns blogs têm uma estrutura ruim, mas uma apresentação boa.

Levando em consideração esses dois cenários, imagine que existam 4 seguintes situações:

•  – Um blog  estruturado e com conteúdo  apresentado1bembem
• 2 – Um blog mal estruturado e com conteúdo mal apresentado
• 3 – Um blog bem estruturado e com conteúdo mal apresentado
• 4 – Um blog mal estruturado e com conteúdo bem apresentado

Na imagem acima você pode notar que o primeiro site apresenta um conteúdo muito bem organizado e agradável, com espaçamentos similares e uma boa proporcionalidade. O segundo mostra um site mal estruturado, com poucos espaços, desalinhado e desproporcional. O terceiro mostra um site bem estruturado, mas com alguns problemas de alinhamento e disposição do conteúdo. O quarto mostra um site mal estruturado, porém com uma relativa melhora na apresentação do conteúdo, se comparado com os dois anteriores.

Mas, afinal, por que estou falando disso e mostrando essas diferenças? Porque já foi falado em muitos artigos, de vários blogueiros, que manter um blog bem estruturado é extremamente importante para a experiência do leitor. Cada página em um blog tem uma série de seções diferentes. Cada seção tem uma finalidade específica. Por exemplo, o título dá o nome ao artigo, os subtítulos dividem os assuntos de um mesmo artigo, os parágrafos representam o conteúdo referente ao subtítulo anterior, as imagens ilustram o texto ao seu redor, a área de anúncios mostra os banners, os artigos recomendados mostram uma lista de links, etc.

Note na figura 1, da imagem acima, que podemos ver claramente 4 áreas: o logo, o banner do topo, os artigos e os anúncios laterais. Em contrapartida, note que na figura 2 não conseguimos dizer o que significa a imagem que está atrás do logo, onde começam e terminam os artigos e o que significam os quadros da lateral. Isso significa que o usuário que chegasse no primeiro site teria uma noção clara, e às vezes inconsciente, de que o conteúdo é bom, simplesmente porque ele está bem disposto. Muitas vezes o conteúdo é péssimo, mas, baseado na primeira experiência, o leitor acaba criando um vínculo com o site através da assinatura do Feed, de um curtir na página do Facebook ou subscrevendo a newsletter.

O que é proximidade?

Antes de mostrar porque um site é “perfeito” à primeira vista, quero explicar o que significa o conceito de proximidade. Para isso vou dar um exemplo bem simples. Observe os objetos abaixo:

Note que cada um dos logos está em uma posição diferente. Olhando desta forma o que vemos são apenas quatro figuras separadas uma da outra. Agora, se reorganizarmos essas logos aproximando umas das outras e alinhando-as você verá que não são apenas quatro figuras separadas, mas um conjunto de logotipos.

O princípio da proximidade diz que se um número de objetos estão fisicamente próximos, seu cérebro vai classifica-los como um único grupo.

O modelo básico de proximidade

A proximidade deve ser utilizada para definir as diferentes seções de um blog. Elementos de uma mesma seção devem ser todos posicionados próximos uns dos outros enquanto que elementos de seções separadas devem ter espaço suficiente entre eles. Isso pode ser visto em praticamente todas as áreas do blog e impacta diretamente a maneira como o leitor o vê.

Quando você escreve um artigo, os parágrafos têm sempre o mesmo espaçamento entre eles? E as margens, são suficientemente grandes para destacar o texto? E as imagens, estão a uma distância boa do texto ou muito afastadas? Veja que tudo é teoricamente muito simples, porém praticamente muito complexo porque exige que você altere muito mais do que o simples formato do artigo. Veja como seria um blog ideal, do ponto de vista da proximidade:

Note que todos os blocos, ou seções, são formados por elementos semelhantes. Cada um está separado do outro por uma distância de 23 pixels. Não importa para qual área olhamos, sempre veremos seções padronizadas com um espaçamento de 23 pixels. Então, se levássemos ao pé da letra essa regra teríamos um blog que não precisa ser bonito para chamar a atenção do leitor, mas muito bem apresentado.

É claro que, do ponto de vista de design, é muito complicado deixar um blog com esse padrão. Porém, quanto mais você seguir essa regra, maiores serão as chances de o leitor se sentir bem em seu blog já na primeira visita.

Como é possível utilizar a proximidade em um blog?

Em um blog existem três áreas críticas nas quais é muito interessante cuidar da proximidade: topo, artigo e barra lateral.

Artigo

O artigo é, na maioria das vezes, a porta de entrada para seu blog. Se você olhar no seu Google Analytics, a maioria das pessoas não entram em seu site pela homepage, mas por um determinado artigo através de uma certa palavra chave. Considerando esse fato interessante, é de extrema importância que o artigo tenha uma padronização dos espaços em branco. Veja um exemplo:

Note que nesse caso uma seção representa o conjunto (SUB)TÍTULO + PARAGRAFO(S). O espaçamento entre as seções é de 23 pixels, porém, dentro da seção, o espaçamento é de 10 pixels. O mesmo ocorre com uma imagem, que estará abaixo de um título ou subtítulo e também deverá ter um espaçamento de 10 pixels.

A barra lateral

A barra lateral é composta basicamente por blocos onde você a organiza da maneira que achar conveniente. Normalmente ela é totalmente fixa e para mexer é necessário conhecimento de WordPress, PHP e HTML. Muitos temas já vem bem espaçados, por isso vamos nos atentar a pequenos detalhes que nós mesmos deixamos passar desapercebidos. Veja o exemplo abaixo:

Uma barra lateral não deve se apresentar desalinhada ou deixar dúvidas no leitor. É muito importante que ela esteja sempre em perfeito estado, com itens bem organizados e espaçados de maneira que o visitante consiga distinguir todas as seções da barra. Veja o exemplo de uma barra organizada:

O topo

O topo, assim como a barra lateral, é visível em qualquer lugar do site e deve estar em um estado impecável. Muitas vezes encontramos blogs com banners mal posicionados ou logotipos desproporcionais que acabam manchando a imagem do blog como um todo.

O ideal é sempre manter a proporcionalidade. Na dúvida, é melhor deixar um espaço em branco do que colocar uma imagem mal alinhada.

Conclusão

O trabalho para deixar tudo isso em perfeito estado é realmente grande. Sinceramente, nunca vi um blog sequer com a proximidade perfeita porque me parece que isso não caminha junto com um design inovador. Devemos seguir o máximo que pudermos, mas não nos preocupar em sermos perfeitos. Muitas vezes o próprio perfeccionismo atrapalha.

E você, conseguiu identificar alguns pontos a melhorar em seu blog? Compartilhe conosco deixando seu comentário.

Abraços!

 
Use a proximidade a favor do seu blog e ganhe mais leitores