Quantcast
Channel: Blog na Carteira » Design e Usabilidade
Viewing all articles
Browse latest Browse all 2

7 Dicas rápidas para fazer seu Blog mais legível

$
0
0

Se você já leu um livro na praia, você vai entender que o ambiente desempenha um grande papel na forma de como é agradável ler. O mesmo se aplica ao seu blog, exceto, é controlar todos os elementos que compõe o ambiente. Uma das maneiras mais fáceis para melhorar a qualidade do seu blog é o de aumentar a legibilidade do design. Então agora eu quero compartilhar 7, dicas de design para blogs que aumentara legibilidade de seus artigos e seus leitores sairão felizes.

1. SEDUZIR OS OLHOS COM UMA CAPITULAR

Se você folhear uma revista, você provavelmente vai perceber que muitos dos artigos iniciam com uma capitular (Escrever a primeira letra em maiúsculo). Eles fazem isso para chamar a sua atenção para o início do artigo. O que é mais fácil encontrar o início do artigo, o mais provável que você vai ler. É uma técnica antiga que deve ser usada em nossos blogs.

Como criar uma capitular

Coloque esse código no seu tema style.css (ou equivalente no seu tema):

.drop_cap { color:#888; float:left; font-family:Georgia; font-size:3em; font-style:normal; text-shadow:#333 1px 1px;}

Ajuste o CSS para ajustar as cores do seu tema. Isso é apenas um bom ponto de partida.

Na primeira letra de seu post adici0ne <span class=“drop_cap”>A letra aqui</span>

Vai ficar algo como isso: <span class=“drop_cap”>N</span>ovidade…

2. INICIAR A LEITURA COM TEXTO INTRO BIG

Depois de atrair os olhos dos leitores, você precisa fazer o possível e o impossível para eles deslizarem a barra de rolagem para continuar lendo o conteúdo. Uma maneira de fazer isso é simplesmente aumentar o texto do primeiro parágrafo.

Isso, juntamente com a capitular, vai dar ao seu post intros um toque revista e estilo profissional.

Como postar texto Intro

Coloque esse código no seu tema de style.css (ou equivalente seu tema):

p.intro { color:#333; font-size: 1.4em; line-height:1.4em; }

Mais uma vez, ajustar o CSS para o estilo do seu tema.

No primeiro parágrafo do seu post:

<p class=“intro”><span class=“drop_cap”>N</span>ovidades…</p>

Nota: optei por não incluir uma capitular ou texto de introdução neste post, porque não seria coerente com o resto dos posts aqui no Blog na Carteira essa é uma dica para começar um blog no caminho certo.

3. MANTER PARÁGRAFOS CURTOS

Eu sei que este conselho é um pouco redundante, mas eu acho que é importante o suficiente para mencionar. Olhando ao redor da web, é como se todos nós tivemos professores que nos disse que os parágrafos são compostas de 8-10 frases. Escrevendo na web é um pouco diferente de escrever em papel porque as pessoas estão constantemente se distraíndo.Você precisa manter alguém focado, através do conteúdo. Um parágrafo muito cumprido pode repelir esses leitores.

Solução: parágrafos com  1-3 frases.

4. ESCOLHA UMA FONTE LIMPA

É um consenso geral de que sans-serif, como Arial e Verdana, são as melhores fontes para o conteúdo do corpo de uma página da web, porque eles são fontes limpas e não dificulta na hora da leitura.

É logico que você pode suar fontes diferentes para títulos que da um charme a mais e atrai olhares, mas aqui está alguns dos principais sites do mundo e as fontes que usadas em suas páginas:

  • Google: Arial
  • Wikipedia: Sans-Serif
  • CNN: Arial
  • Yahoo: Arial (casa), Geórgia (conteúdo)
  • MSN: Arial
  • New York Times: Geórgia
  • Wall Street Journal: Arial

Ao escolher o tipo de fonte, você pode ser criativo ou você pode ir testado e ver qual funciona melhor. Pessoalmente, eu uso Arial para quase todos os sites que eu construo.

5. TAMANHO DA FONTE NOS POSTS

Só sei que 14 pixels é o mínimo absoluto para fácil leitura do conteúdo do corpo, tempos atrás era o tamanho 12px. Mais atualmente coisa mudou um pouco subimos duas unidades, um dos motivos ao meu ponto de vista e pelo grande número de usurários, com monitores de grandes resoluções, então uma letra minúscula não é bem vinda e ai o leitor vai embora. Pode parecer estranho, mas mesmo uma alteração tão simples acaba fazendo toda a diferença.

6. DEFINA ESPAÇOS ENTRE AS LINHAS

Depois de definir o tamanho da fonte, você precisa estabelecer a sua altura da linha baseada na proporção áureaA proporção áurea (1,618) ajuda a determinar a quantidade ideal de espaço entre as linhas.

No estilo css do texto adicione:

line-height: 30px;

O valor 30px é um bom espaçamento mais cada caso é um caso então teste pra ver se fica bom.

7. ESCOLHA UMA COR DE FUNDO CALMANTE

É importante que você escolha uma cor calmante, se você quiser que os seus leitores a responder positivamente à sua mensagem, na de tons muito fortes e fundos coloridos, podem ser fundo personalizados mais nada extravagante.

Uma dica de ouro: Use listras em qualquer direção como fundo, pois gera um certo desconforto e desse modo nos obriga a olhar ao centro.

Como alterar a cor de fundo

Seu tema provavelmente tem uma funcionalidade interna para controlar a cor de fundo. Se não, você pode colocar esse código no seu tema  style.css (ou equivalente seu tema) ou alterar:

Para cores: body {background: #f0f0eb;}

Mais uma vez, ajustar a cor para combinar com seu site.

Para imagens: body { background: url(“endereço da imagem“);}

LEITURAS COMPLEMENTARES

Para complementar o assunto, separei mais abaixo dois artigos que consideram ser de essencial leitura para qualquer blogueiro que queira ter uma logomarca bonita e elegante:

  • Dicas para desenvolver uma boa logo
  • O que faz um logotipo ter sucesso?

CONCLUSÃO

Como blogueiro, tenho certeza que você gasta uma grande quantidade de tempo criando o seu próprio site. Isso é bom, mas gastar alguns minutos aplicando algumas destas dicas vão melhorar drasticamente a capacidade de leitura de cada post que você escreveu. Se você tiver alguma dúvida sobre como fazer qualquer uma dessas alterações, deixe-me saber nos comentários e eu vou tentar te ajudar.

JA SEGUIA ALGUMAS DAS DICAS ACIMA?

O post 7 Dicas rápidas para fazer seu Blog mais legível apareceu primeiro em Blog na Carteira.


Viewing all articles
Browse latest Browse all 2

Latest Images





Latest Images