Layout para blog: dicas e modelos

Está pensando em criar um blog ou reformar o seu? Confira dicas e exemplos de layout para blog! Também separei alguns modelos para blog que você poderá usar.

Layout para blog deve ser profissional também! Não é só porque é um “blog” que não precisa ser profissional, não é mesmo?!

Sempre que surge uma nova rede social alguém diz que os blogs irão acabar… mas vejo essa possibilidade muito remota. Cada vez mais grandes portais tem investido mais em formato de blog (e contratado blogueiros), e há vários segmentos de blogs que não param de crescer, como de moda e viagem.

Muita gente também escreve por hobby em blogs, também. Seja lá qual for o foco, como disse no início do post, um layout para blog tem que ser profissional. Até porque um dia seu hobby pode ser monetizado, por que não?

Nesse post irei falar sobre a estrutura de um blog, o que envolve não só o visual, mas diversas outras técnicas e conceitos. Mas se você chegou até aqui buscando por um profissional para fazer a criação do layout do seu blog, fale comigo!

O que é layout para blog?

De maneira direta: é uma imagem ilustrativa de como será o blog quando ele for programado para funcionar como um blog.

Sim, antes do desenvolvimento de qualquer tipo de projeto online, o layout é feito. Apenas uma imagem (ou várias, contando com as telas internas) onde é feito uma série de estudos de estrutura, posicionamento de anúncios, usabilidade, design responsivo e por aí vai.

Só depois que o layout é concluído a programação começa. Ou seja, a fase do layout é importantíssima, e ainda passa por algumas fases anteriores como rascunhos e wireframes.

Escrevi sobre o assunto aqui, caso queira se aprofundar mais: O que é layout?

Layout de blog: cada detalhe é importante

layout para blog
Layout para blog: Dicas e exemplos práticos (imagem: Corbis)

Parece clichê, além de ser muito óbvio… mas cada detalhe é importante mesmo.

Um segmento específico pede um layout específico. Estrutura, cores, call to actions, ferramentas… é muito mais complicado do que parece. Isso porque muita gente acha que um layout trata apenas a estética do projeto.

Não, vai muito além disso!

A internet é um meio rápido — seu blog precisa ser também, em todos os sentidos

Acesso blogs diariamente, e o que eu vejo é um contraste. Alguns layouts são muito bonitos, outros são bem feios — mas a grande maioria tem algo em comum, que é falta de organização.

Pra um blog, que define um layout profissional não é ele ser bonito. É ter boa usabilidade, ter um bom equilíbrio visual e, é claro, ser organizado e ir direto ao ponto: quando alguém acessa um blog, esse alguém quer ver o conteúdo. Básico.

Atendo muitos clientes que têm redes de conteúdo com diversos blogs de nicho. Um erro muito comum que vejo entre todos eles assim que recebo um pedido de orçamento de criação de novo layout é: excesso de anúncios e falta de espaços em branco.

Se o foco do blog é conteúdo para monetização, não significa que seu site deverá ser 50% texto e 50% anúncios. Nem que tudo deve ficar espremido na tela para que seu visitante consiga ver todo o conteúdo logo, mas todos os anúncios também. Essa sede por cliques pode, na verdade, acabar reduzindo suas receitas. Quanto mais banners em uma página, menor o CTR por banner.

E quanto mais banners em uma página, mais pesada e lenta sua página fica.

E quanto mais pesada e lenta sua página fica, maior a taxa de rejeição.

Um blog tem que ser leve e rápido em todos os sentidos. Como assim? Deve ser leve de elementos por página (quanto menos, melhor) e leve visualmente (mais espaços em branco facilitam a leitura e dão a impressão de que os textos são menores do que parecem ser). Deve ser rápido de velocidade de carregamento e de facilidade para o visitante encontrar o que procura.

Priorize seu leitor. Sempre.

Se você souber inglês, confira algumas dicas nesse vídeo bastante útil:

Tipos de blogs e nichos específicos definem layouts diferentes

Um layout para blog deve ser trabalhado conforme o conteúdo deste blog.

Por exemplo, se o blog tiver posts curtos e frequentes, não faz sentido fazer com que o visitante precise clicar para ler cada post, é demorado e desgastante.

Se o blog tiver posts mais longos e um intervalo maior de postagens, o uso do “continue lendo” é válido, pois mantém o blog mais limpo e o visitante vai precisar clicar uma vez só quando ele acessar esse blog, já que só lerá um post.

Em relação a organização, o uso de categorias pode ser muito útil em alguns casos. Mas nem tanto em outros casos. Nossa, quem diria?!

Por exemplo, em blogs que postam conteúdos muito distintos, pode ser que alguns leitores prefiram apenas um tipo de conteúdo — assim, basta esse leitor abrir apenas a categoria de posts que o agrada. Pra isso, as categorias devem estar bem destacadas.

No caso de blogs com conteúdo uniforme — é o caso de blogs de humor, por exemplo — as categorias já não são tão necessárias, porque é um conteúdo mais rápido, mais dinâmico. Mas mesmo assim elas devem existir e serem fáceis de acessar. Afinal, se um leitor gostar de um tipo de post, ele vai querer ver mais posts sobre o assunto.

Esse tipo de coisa também se resolve com posts relacionados, mas não para por aí: uma hora a lista começa a repetir. Então, ter as categorias bem visíveis e organizadas é muito válido.

A publicidade deve ser posicionada em pontos estratégicos, que estejam a vista mas que não atrapalhe o usuário. Não há nada mais incômodo do que janelas abrindo na frente do conteúdo quando você está lendo algo. Em vez de se interessar pelo anúncio, o visitante vai ficar incomodado com seu blog e com o anunciante.

Por isso, no geral, perceba que o maior foco aqui é o leitor. E é verdade, porque é ele quem vai ler seu conteúdo e clicar em seus anúncios! Então o layout precisa ser agradável e ter uma navegação boa, porque seu conteúdo pode agradar uns e não agradar a outros… mas a usabilidade de seu blog será sempre unanimidade.

Reforçando: O foco do blog é sempre o leitor, que busca o conteúdo. Quanto mais o conteúdo é valorizado no layout, melhor para o leitor. E quanto mais o leitor sentir-se a vontade no seu blog, melhor pra você!

Design responsivo ou versão mobile?

Costumo tentar ser imparcial aqui, já que cada caso é um caso. Porém, são raríssimas as vezes em que um blog precisa ter uma versão mobile em vez de responsiva. Normalmente quando precisa, o blog é mais um portal que um blog em si.

Como a maioria dos blogs foca em conteúdo, a meu ver a “versão mobile” mais viável é AMP. Ajuda bastante nas buscas.

Mas, claro, se seu blog tiver alguma ferramenta, como um simulador de investimentos, talvez ele precise de uma versão mobile mais resumida do que a para telas maiores. Afinal, algumas ferramentas são impossíveis de serem “responsivadas”.

O ideal é fazer uma análise profunda e ver o que valerá mais a pena. Falei mais sobre isso aqui: Design responsivo ou versão mobile: qual é a melhor opção?

Exemplos de layouts para blog

Agora vamos ver o que foi dito acima na prática, em exemplos de layouts para blog em que trabalhei, além de outros adicionais.

Criações de minha autoria

Abaixo, dois exemplos de layout para blogs que desenvolvi.

Blog magazine

hypescience
Hypescience (WordPress) — fiz a criação de layout, logo e identidade visual além de todo o desenvolvimento.

O Hypescience é um blog com um visual mais dinâmico, magazine.

O design é bastante moderno e arrojado, com destaques de formatos alternados na home. Quando você acessa o blog, tudo parece “saltar”, foge do comum — e isso só foi possível com um estudo de espaços negativos, gestalt e muitos testes.

E, no geral, adivinha?! O visual em si é extremamente simples. O que faz a maior parte do trabalho estético são justamente as imagens. Ou seja, o conteúdo trabalha para o visual — o que faz todo sentido, já que o destaque é ele.

Blog de saúde e qualidade de vida

seu corpo em dia
Seu Corpo em Dia (WordPress) — fiz a criação de layout e desenvolvimento front-end e WordPress.

Já o Seu Corpo em Dia segue um visual mais “padrão” de blog, com uma lista de posts à esquerda e uma barra lateral à direita.

Seguir um visual padrão é ruim? Claro que não! Esse é o modelo que “mais funciona”, já que é o mais utilizado. Todo mundo já se acostumou a esse formato de blog, e algumas variações visuais fazem toda a diferença.

O design foi trabalhado para acompanhar o conceito do blog. Ele dá uma sensação de movimento, com curvas alternando entre si, alinhamentos que fogem um pouco do padrão e visual bem leve e com cores vivas.

Caso queira ver mais trabalhos de criação de layout para site, confira meu portfolio.

Mais exemplos de design para blog

Também separei outros três blogs para uma análise.

Rede de “blogs”

blog medium
Medium — revolucionou os blogs.

Pode parecer demais, mas na minha opinião o Medium revolucionou os blogs.

Com uma simplicidade rara, o foco é totalmente no conteúdo. O Medium em si traz um coletado de posts de blogs criados na plataforma, mas é um ótimo exemplo de layout para blog porque funciona como um.

Hoje em dia é possível trabalhar diferentes estruturas no Medium, mas algumas características se mantém. Principalmente no que diz respeito à diagramação dos textos em si.

Blog de humor e entretenimento

blog boredpanda
BoredPanda — a estrutura “hype” atual.

Há tempos o BoredPanda utiliza uma estrutura muito parecida com essa atual, sendo que hoje em dia esse é um dos modelos mais utilizados por blogs na internet. Principalmente os do nicho de humor e entretenimento.

O visual é muito simples, dando bastante destaque à imagens (o que faz toda a diferença na estética final), além de ser bastante dinâmico com ferramentas de votação e posts interativos.

O topo é extremamente minimalista, sendo que a ilustração dá outra cara ao restante do blog. Sem ela, o visual ficaria mais monótono.

Blog sobre web design

blog smashing magazine
Smashing Magazine — Não!

Nessas minhas análises, sempre tento exibir exemplos que têm mais pontos positivos a negativos. Meu foco é dar exemplos que possam ser referências, mas tive que abrir uma exceção com o Smashing Magazine. Afinal, é muito fácil achar blogs mal feitos… mas é surpreendente quando esse exemplo é um blog da área.

Vamos começar pela home gritante. Esse vermelho é excessivo, irrita os olhos — não faz sentido isso. Aí tem um botão ali, “Seriously, red?”, que quando clicado remove a cor. Ou seja, já sabem que o vermelho vai incomodar muita gente. Então, em vez de fazer essa gambiarra, por que não eliminar de vez?

A estrutura da home, no geral, é confusa e em algumas partes não parece seguir um grid. Mas o que surpreende mesmo é a página de post, que tem um destaque desproporcional para o autor no topo título alinhado à direita do texto. Abaixo da primeira linha de conteúdo. Preciso falar alguma coisa?

Depois de um trecho, o texto, que originalmente era deslocado à esquerda, passa para o centro. Em tablets, fica mais estreito. Não é exagero quando digo: esse é um dos piores layouts de blog que já vi na vida. Me desculpem, colegas de profissão, mas esse foi só um resumo dos pontos negativos que encontrei no projeto de vocês.

Bom, pra concluir: um layout para blog tem que ser coerente, ter uma estrutura simples e livre de possíveis confusões e/ou distrações, e as cores devem respeitar os olhos dos visitantes também!

Claro, eu já fiz muita coisa ruim — aliás, costumo dizer que eu sou apenas muito esforçado. O que fiz aqui são críticas construtivas, não ataques. Espero que ninguém leve a mal, porque não tem como mostrar exemplos de o que não fazer sem mostrar o que é ruim — o que envolve a minha opinião.

Modelos prontos para blogs

blog pessoal
Alguns exemplos de modelos prontos para blog.

Na FicaOn você pode conferir alguns modelos para blogs (que são templates para WordPress) que seguem boa parte das dicas que dei no post.

O blog da imagem acima, por exemplo, é o modelo de blog pessoal, que tem um visual bem moderno e diversas ferramentas que podem deixar seu blog bastante profissional.

Já o modelo de blog clean lembra um pouco mais a pegada do Medium, com um visual mais minimalista e foco no conteúdo.

Se você navegar no site poderá ver outros modelos, inclusive alguns segmentados para nichos específicos. A seleção é muito boa e, além de serem ótimas referências, os modelos podem ser utilizados no seu blog!

Quanto custa um layout para blog?

No post “Quanto custa um layout?” você vai poder ver mais detalhes sobre o que eu costumo falar quando vou responder essa pergunta: “Depende. É preciso orçar.”

Claro, conforme o tópico acima, você pode optar por um template pronto para blog e já ver o preço dele na hora. Na grande maioria das vezes, é a melhor opção para quem está começando agora e não tem muita grana para investir em algo profissional.

Claro, contratar alguém para fazer um layout para blog profissional sempre é a melhor opção, mas nem sempre é a mais viável financeiramente. Reconheço isso e indico templates prontos, que não chegam a ser uma “concorrência” pra mim. Também presto serviço para instalação e configuração de templates. Além disso, faço serviços como criação de logo, dentre outros materiais.

Mas se você quiser saber quanto custa um layout porque acha que é hora de contratar um profissional para fazer o serviço, me peça um orçamento!

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Quero um orçamento

Leia também...

...alguns textos que têm a ver com o assunto:

Blog de Saúde e Nutrição – Viva + Crica Coelho

Saiba mais sobre o Viva + Crica Coelho, blog de Saúde e Nutrição da Crica Coelho. Criação e desenvolvimento de logo e blog pela ANDALE!

5 dicas para seu blog ter um design profissional

O que define o sucesso de um blog é seu conteúdo, mas um design profissional só tem a ajudar em vários aspectos. Saiba mais e tenha não só um design, mas um blog profissional!

WordPress ou Blogger?

Qual é melhor para criar um blog: Wordpress ou Blogspot? Quais as diferenças entre o WP e o Blogger? É de graça? É barato? É caro?

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento