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.
E se você quer economizar ainda mais tempo e ter mais praticidade, eu montei um kit com centenas de banners prontos que você pode usar e editar como quiser diretamente no Canva.
Eles também estão disponíveis dentro do Nuvemshopeiros e tem feito sucesso por lá. Vale a pena dar uma conferida e fazer parte dessa comunidade.
Vamos então para o Guia.
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, mas 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 deixa-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 disponibilizado no final deste material.
Ferramentas para criar banner
Existem inúmeras opções pagas e gratuitas, eu recomendo dois 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, vamos ver alguns exemplos do que fazer e do que evitar, assim poderá visualizar e aplicar nos seus banners.
Nos dois banners a seguir tem as versões mobile e desktop, fundo homogêneo com leve iluminação ao centro.
Nestes banners acima foram utilizadas fotos representando os produtos relacionados à mensagem do banner, um benefício principal (20% de desconto) com uma seta apontando para as cadeiras, deixando a comunicação dinâmica sem precisar escrever muito, e mais uma informação complementar (Preço e parcelamento) que já se torna uma chamada para ação não explícita.
Esse já é um banner mais ilustrativo, com uma mensagem curta sobre um benefício oferecido pela loja e elementos visuais contextualizando-o sem tirar o foco da mensagem principal. Para deixar ainda melhor poderia ser retirado o carrinho com as caixas e incluído um botão com uma CTA mais clara, tipo: CLIQUE E APROVEITE!
Vamos para mais alguns exemplos
Esse formato é muito útil quando precisa utilizar uma foto em que o produto está em uso e não fica bom retirar o fundo, assim podemos deixar o espaço para a foto e outro com fundo sólido para a mensagem e a CTA.
Esse já ficou legal com a foto do produto retirando o fundo e aplicando diretamente em um fundo trabalhado, utilizando uma leve marca d’água com foto do produto sem poluir e prejudicar a leitura. Aqui a CTA (Call to Action = Chamada Para Ação) ficou subjetiva na palavra COMPRE.
Veja no vídeo abaixo como fiz para criar um banner ao vivo, você poderá ter várias dicas de Canva neste vídeo e aprender tudo sobre Nuvemshop se participar do Nuvemshopeiros.
