Como criar banners para loja virtual que vendem

Os banners, principalmente aqueles rotativos que ficam no início da página principal do site ou da loja, são a área nobre do seu site ou loja virtual.

Eles têm o poder de conquistar um visitante e transformá-lo em cliente ou espantá-lo para muitas vezes nunca mais voltar, então, é imprescindível ter banners de qualidade.

Assim como em um anúncio em rede social temos em média 3 segundos para chamar a atenção do usuário até que ele decida se vai continuar vendo seu anúncio ou avançar para o próximo conteúdo, o banner de um site tem o mesmo princípio.

Por isso, preparei esse guia prático para te ensinar a criar banners de qualidade para seu site e loja virtual, mesmo que não seja um profissional de designer.

Apenas uma chamada por banner

Fale apenas de um assunto no banner e com apenas uma chamada para ação.

Menos é mais… Também no layout

Quanto mais informações e complexidade houver no banner, mais tempo será necessário para o visitante assimilar toda a informação e isso pode fazer ele desistir antes de conseguir receber toda a mensagem que o banner quer passar.

Imagem é legal, mas não exagere. Se for uma imagem conceitual ou apenas ilustrativa, pode deixá-la menos evidente priorizando a chamada para ação (CTA).

Sempre coloque link

Em vez de tentar colocar todas as informações no banner, destaque aquela que é mais atrativa e coloque o botão de chamada para ação com link para o conteúdo que complementa o assunto e avança o usuário na jornada de compra.

Contraste de cores e tamanho de fontes

Cuidado na escolha das cores. Procure sempre contrastar bem as cores dos textos com o fundo. Por isso é importante que o fundo do texto não tenha grandes variações de cores para não dificultar a leitura.

O tamanho das fontes é importante para ficar legível para todos, mas não coloque também exageradamente grandes a ponto de ficar desproporcional aos outros textos e títulos no site.

Responsividade

Procure sempre fazer os banners para a versão desktop (tela horizontal, notebook, PC, TV, etc.) e também para versão mobile (smartphones, tablets), pois atualmente a maioria dos acessos são de dispositivos móveis, mas ainda há grande percentual de compras que são feitas por desktop. Então, os dois formatos são importantes e precisam estar bem apresentados.

Tamanhos de banners recomendados para Nuvemshop

Cada tema da Nuvemshop tem o seu tamanho ideal predefinido para banner. Eu, porém, recomendo para os temas Amazonas, Simple e Rio os seguintes tamanhos:

• Desktop: 1600×500
• Mobile: 500×550

OBS: Para que ele seja exibido de forma completa é necessário a inclusão de um pequeno código CSS.

Ferramentas para criar banner

Existem inúmeras opções pagas e gratuitas. Eu recomendo duas muito fáceis de utilizar, com versões gratuitas e pagas, mas com valor acessível: Canva e Figma.

Exemplos e padrões de banners

Como uma imagem fala mais que mil palavras, vale observar alguns padrões que funcionam bem no e-commerce brasileiro:

• Fundo homogêneo com leve iluminação ao centro, fotos representando os produtos, um benefício principal (ex.: 20% de desconto) com uma seta apontando para o produto e uma informação complementar (preço e parcelamento) que já se torna uma chamada para ação não explícita.
• Banners mais ilustrativos com uma mensagem curta sobre um benefício oferecido pela loja e elementos visuais contextualizando-o sem tirar o foco da mensagem principal — sempre com um botão com CTA clara, tipo: CLIQUE E APROVEITE!
• Formato dividido em dois blocos (útil quando o produto está em uso e não fica bom retirar o fundo): um espaço para a foto e outro com fundo sólido para a mensagem e a CTA.
• Foto do produto com fundo retirado (transparente) aplicada diretamente em um fundo trabalhado, utilizando uma leve marca d’água sem poluir e prejudicar a leitura.

Se precisar de ajuda para criar os banners da sua loja, fale com a gente no WhatsApp.