Para quem utiliza internet há alguns anos já deve ter percebido evoluções consideráveis quanto a legibilidade dos sites e facilidade de navegação. Isso acontece devido o aprimoramento diário da web, tanto na aplicação de novos padrões quanto nos desafios por uma internet melhor. Uma das tendências importante é o espaçamento no design dos sites.

Por que os espaçamentos são importantes?

Os espaçamentos favorecem uma melhor legibilidade, são capazes de separar áreas distintas e podem ser utilizados ainda como estratégia para dar mais destaque a uma região específica do layout. Veja as dicas a seguir.

1. Mantenha um padrão para os espaçamentos

Procure estabelecer um valor fixo para o tamanho de cada espaçamento, por exemplo, entre cada coluna e/ou bloco do seu site defina uma distância de largura e altura igual. Veja o exemplo a seguir do layout do tema para Wordpress WP Polaroid.

Observe que todas as margens de largura são iguais (nesse tema a margem é de 25px entre cada coluna), facilitando a leitura e ajudando a identificação de blocos de conteúdo sem a necessidade de bordas. O site também ganha em redução da folha de estilos (css), pois as margens sendo iguais basta definir uma única vez o valor das mesmas.

2. Margens que geram boa legibilidade

O tamanho das margens dependerá obviamente do tipo de conteúdo e design. Em geral o tamanho das margens varia de 10px a 20px em sites para resolução 800×600 e de 15px a 30px em sites para resolução 1024×768. Lembrando que estas margens citadas não são regra e é muito comum encontrar margens maiores que até mesmo facilita a leitura.

3. Cuidado com exageros

As margens também podem ser prejudiciais caso seu uso seja excessivo ou despadronizado. Imagine que uma margem muito grande poderá fazer um “buraco” no design. A despadronização de margens poderá confundir a leitura do site, fazendo com que o visitante não saiba onde deve procurar o conteúdo.

4. Observações

Cuidado para não confundir padronização com sempre utilizar o mesmo tamanho de espaçamentos e margens iguais para altura e largura em todos os blocos de conteúdo.

5. Exemplos de sites com margens bem aplicadas

Globo – www.globo.com

Mugg – www.mugg.com.br

Magnus Jepson – www.jepson.no

Existem inúmeros fatores que devem ser levados em consideração no desenvolvimento de um site, dentre eles a organização e legibilidade do conteúdo. É necessário estar sempre atento a Tipografia, espaçamentos, alinhamentos e organização entre os elementos.

A legibilidade é uma qualidade que determina a facilidade de leitura de alguma coisa. A partir desta definição devemos fazer uma série de análises para que a leitura de nossos textos sejam mais legíveis, consequentemente mais eficazes.

Tipos e Tamanhos de fontes

É natural que quanto menor seja uma fonte, menor será sua legibilidade. Por isso uma das primeiras regras no desenvolvimento do seu site é evitar ao máximo a utilização de fontes pequenas.

Até onde uma fonte é pequena para web? Para textos corridos, recomenda-se o tamanho mínimo de 12px. Além disso é importante lembrar das duas fontes mais utilizadas na internet, que são Arial e Verdana. Ambas não possuem serifa, o que facilita na leitura. Ainda é muito utilizado o tamanho 11px em rodapés ou em locais que o conteúdo apresente menor relevância para o site.

Contraste entre cores

Na web o constraste entre cores é fundamental para legibilidade de um texto. Utilizar plano de fundo claro com fontes claros prejudicará a leitura, o mesmo ocorre quando utilizamos plano de fundo escuro com fontes escuras.

Com base nisso é utilizado o contraste entre cores. Contrastar exageradamente também não é aconselhável, por exemplo, caso esteja utilizando plano de fundo branco (#FFF) não recomenda-se a utilização de uma fonte com 100% de preto (#000), pois este contraste tornará a leitura cansativa. Neste exemplo com o plano de fundo branco (#FFF) é recomendável a utilização de um tom de cinza (#444), mantendo um constrate visível porém menos irritante aos olhos.

Alinhamento

O alinhamento do texto em um layout é fundamental para definir o nível de legibilidade do mesmo. Embora o padrão de alinhamento justificado possa ser o mais fácil de ser trabalhado e fique mais bonito, ele poderá reduzir a facilidade de leitura do texto. Na web, quando um texto está utilizando o alinhamento justificado, os navegadores tentam compensar os espaços entre as palavras, desta forma, a medida que estes espaços aumentam o cérebro precisa se adaptar a nova formatação causando um atraso na leitura.

Espaçamento entre linhas

Quanto maior o espaço entre as linhas maior será a definição, o agrupamento e a diferenciação das mesmas. É preciso ter cuidado com o excesso de espaçamento , pois este poderá tornar a leitura cansativa. No caso do layout RGB Magazine foi escolhido a fonte Verdana, tamanho 12px e espaçamento entre linhas de 20px.

Organização de elementos

Além dos textos é importante ficar atento a separação de todo e qualquer elemento presente no layout da página. É através dos espaçamentos que o usuário poderá distinguir facilmente as áreas do conteúdo exibido. Procure definir espaçamentos padrões de largura e altura, isto poderá tornar o layout mais agradável e ainda melhorar a legibilidade.

Quando é feita uma leitura de um site e se chega ao fim de um determinado elemento, o usuário procura imediatamente o próxima linha de texto ou o próximo elemento, por isso, é importantíssimo organizar as informações de acordo com a relevância que queira passar para o visitante do site.

Estes são alguns critérios básicos para que consiga desenvolver um site legível e de fácil navegação.