5 recursos de design garantidos para aumentar as vendas e as conversões

Existe algo melhor do que um site bem projetado?

Na verdade sim, existe…

Um site com um design bonito que aumenta as vendas e as conversões.

Provavelmente, você pode estar usando um site ou página de destino que simplesmente é péssimo para converter visitantes em ações de meta concluídas ou, em termos mais simples, conversões. Como diz o ditado:

Você pode ter todo o tráfego do mundo, mas se o seu site não conseguir converter esse tráfego, então você tem um site lixo.

Na verdade, não tenho certeza de quem cunhou esse ditado, e posso ter inventado isso. Mas, é verdade mesmo assim.

Se você está lutando com seu site, tentando melhorar suas conversões e se deparou com uma parede de tijolos, quero ajudá-lo a corrigi-lo.

Hoje, vou revelar meus 5 melhores truques de design de todos os tempos que garantem aumentar as vendas e as conversões e tornar sua empresa incrível no processo. E o melhor de tudo, você vai amá-los.

Mas primeiro, quem sou eu e por que me ouvir?

Não estou aqui para falar de mim, então vou ser breve. Eu tenho projetado sites e páginas de destino de alta conversão e tudo mais desde 2005. Eu possuo e opero o Boost Design, um estúdio de design de sucesso que se concentra apenas em design de alta conversão.

Ao longo dos anos, aprendi e experimentei toneladas de truques de design e 'hacks' que podem aumentar seriamente as conversões e ajudar a melhorar os resultados de uma empresa.

Antes de mergulharmos na carne deste post, deixe-me fazer algumas perguntas rápidas.

O que um aumento de 20% nos assinantes da lista de e-mail significaria para o seu negócio? Que tal um 1% extra em cima das conversões da sua página de vendas ou um aumento de 150% nas consultas de leads?

Não tenho certeza sobre você, mas sei que esses números podem mudar os negócios.

E, é claro, não garanto que você verá os mesmos resultados, mas se você acompanhar e implementar esses recursos de design em seu site e empresa, estará no caminho certo.

Antes de prosseguirmos, só quero dizer que você não precisa ser um profissional de design para implementar esses recursos em seus sites e páginas de destino. O nível de personalização de design em muitos temas e construtores de páginas do Wordpress está em alta e você deve ser capaz de fazer um ótimo trabalho apenas com eles.

No entanto, sou tendencioso e recomendo totalmente a contratação de um designer profissional para fazer isso quando sua empresa atingir um certo nível.

Agora, com isso dito, vamos mergulhar nos meus cinco principais hacks e recursos de design:

1. Tipografia de alta conversão

A tipografia e as fontes que você escolhe usar em seu site podem ter um grande impacto na legibilidade, o que está diretamente relacionado às suas taxas de conversão.

Estamos em um momento em que a escolha de fontes nunca foi tão fácil e o volume de fontes boas e limpas – tanto gratuitas quanto premium – à nossa disposição nunca foi maior.

Sites de fontes gratuitas como Google Fonts e Font Squirrel e mercados de fontes premium como TypeKit e MyFonts significam que você nunca ficará preso em encontrar a fonte perfeita para sua marca e site.

Mas quando se trata disso. Selecionar tipografia para o seu site pode ser uma arte por si só.

Você precisa considerar as famílias de fontes, tamanhos, pesos e se deve ou não usar uma fonte com serifa ou sem serifa.

Tudo pode ser um pouco assustador, mas felizmente eu tenho algumas dicas para você.

Tipografia Faça e Não Faça

• Não use mais de 3 famílias de fontes em seu site. Escolha um para seus títulos e subtítulos e outro para seu corpo de texto e parágrafos. Você também pode querer usar outra família de fontes com moderação, como uma fonte de script para uso em promoções e gráficos secundários.
• Eu recomendo usar uma fonte limpa sem serifa, pois ela é ideal para telas e dispositivos portáteis, como telefones e tablets. Fontes com serifa, as fontes com 'mãos' e 'pés' saindo de seus caracteres são mais adequadas para leitura de formato longo, é por isso que você só verá fontes serifadas sendo usadas em livros impressos e e-readers.
• Para telas, um bom tamanho de fonte para texto de corpo e parágrafo é entre 15 e 18px. Nesse tamanho, não é muito pequeno para ser desconfortável e nem muito grande para que seus usuários rolem ou deslizem desnecessariamente.
• Visite seus blogs e sites favoritos e anote as famílias de fontes que eles usam. Uma boa ferramenta para descobrir qual fonte um site está usando é um plugin chamado Fount.

Fontes de corpo e parágrafo que eu recomendo

Próxima Nova

Uma fonte premium comum com preços razoáveis, mas absolutamente perfeita para o corpo do texto. Se você quer algo um pouco diferente e menos comum, sugiro a alternativa Proxima Nova Soft.

Calibre

Uma fonte requintada e que custará US $ 50 por estilo de fonte (por exemplo, Regular, Bold). O Calibre incorpora profissionalismo, modernismo e se você é especialista em marcas, é uma ótima opção a ser considerada para a tipografia do corpo e do título.

Roboto

A fonte 'oficial' do Google e semelhante à conhecida Helvetica, Roboto é uma boa fonte padrão, embora não haja nada de especial que eu goste nela, ela apenas faz seu trabalho.

Serifa Droid

Às vezes você pode usar uma fonte com serifa na tela, e muito raramente você pode fazer isso. Mas a fonte gratuita do Google Droid Serif faz exatamente isso. Se você deve usar uma fonte serif na tela, esta é a única.

Circular

Se você tem US $ 1.000 sobrando para gastar em uma família de fontes, não pode passar da Circular by Lineto. Escandalosamente cara, mas ainda mais bonita, a Circular está ganhando força como uma fonte popular com seu uso no logotipo do Air BnB.

Fontes de corpo e parágrafo que eu recomendo

Oswald

Outra fonte gratuita e tão comum quanto um dia chuvoso em Londres, a Oswald é fina, elegante e permite que você esprema muitos caracteres em uma linha, tornando-a ótima para títulos longos de páginas de vendas.

Gibson Bold

Uma fonte premium que você pode comprar ou sincronizar no TypeKit, a Gibson Bold é fantástica para títulos grandes, em negrito e direto. No entanto, eu não recomendaria os outros pesos desta família, eles simplesmente não parecem tão bons.

Sofia Pro

Outra fonte premium, esta é uma das minhas favoritas. É limpo, moderno e perfeitamente equilibrado para manchetes. Eu iria com o peso preto para as manchetes.

Montserrat

Outra fonte gratuita e, como tal, muito usada, Montserrat é outra daquelas fontes do Google que faz seu trabalho, no entanto, estou desanimado com o quão comum é usado.

Agora você tem uma educação em tipografia e algumas opções a serem consideradas quando se trata de seleção de fontes. Implemente o conselho e as fontes discutidas aqui e tenho certeza que você verá alguns bons aumentos na conversão e na legibilidade, o que reduzirá suas taxas de rejeição também.

2. Combinações de cores matadoras

Ahhh cor. Quem não aprecia a cor, além dos góticos?

Quando se trata de escolher quais cores usar em seus sites e páginas de destino, realmente não há regras rígidas e rápidas. A escolha da sua paleta de cores depende totalmente de você, sua marca e seu público-alvo.

Mas há alguns prós e contras para se manter em mente.

O que fazer e o que não fazer em cores

• Nunca use mais de 5 cores de marca, a menos que sua marca seja centrada no arco-íris, o que provavelmente não é. Um bom número de cores para usar é quatro, com um tom e destaque para cada cor. As cores da sua marca devem ser compostas por uma cor primária, uma cor secundária, uma cor de fundo e uma cor de destaque.
• Considere o seu público-alvo. Se eles são predominantemente do sexo masculino, você provavelmente deve evitar rosas e roxos. As indústrias de saúde funcionam melhor com cores calmantes e uso inteligente de espaço em branco, enquanto o fitness pode ser bastante aberto, dependendo da demografia. Eu poderia falar sobre psicologia das cores até ficar azul na minha cara, mas a regra geral é esta, o bom senso prevalece. Você não usaria uma paleta de cores rosa em seu site de fisiculturismo masculino usaria?
• Sempre tome nota dos códigos de cores que você usa. No mínimo, você deve ter seu código HEX gravado e, se planeja usar suas cores fora da tela, também deve anotar seus códigos Pantone e CYMK. Não fazer isso leva a uma marca inconsistente ao longo do tempo. Um grande não, não.

Este é um excelente artigo sobre Noções básicas sobre a teoria das cores

Quer saber quais cores ficam bem juntas?

A Roda de Cores do Canva facilita as combinações de cores.

Usar as cores certas juntas – aumentará as vendas e as conversões.

Como criar uma combinação de cores matadora

Se você não tem um osso criativo em seu corpo e não consegue coordenar uma paleta de cores para salvar sua vida, não se estresse. Existem ferramentas e aplicativos para ajudá-lo.

Aqui estão alguns dos meus lugares favoritos para encontrar inspiração quando estou criando uma nova marca para um cliente:

Adobe Color

Anteriormente conhecido como Kulur, você pode explorar uma biblioteca de combinações de cores interessantes enviadas por usuários. Esteja avisado, isso pode ser uma grande perda de tempo porque é muito divertido navegar.

Caça de cores

Semelhante ao Adobe Color, mas mais fácil de usar, a busca de cores apresenta belas combinações de cores todos os dias e permite que você envie as suas próprias.

Refrigeradores

Um aplicativo super legal para qualquer entusiasta de cores. Basta pressionar a barra de espaço para carregar uma nova paleta até encontrar “aquele”.

Cores por HailPixel

Este aplicativo simples é como um seletor de cores superdimensionado que permite mover o cursor pela tela para alterar a cor. Simples, bonito e ótimo para inspiração.

3. Fotografia de alta conversão

Percorremos um longo caminho desde os dias da fotografia de banco de imagens brega, excessivamente usada e digna de constrangimento.

Você sabe de quem estou falando, uma equipe corporativa sentada ao redor de uma mesa de diretoria com sorrisos largos, perfeitos e cheios de dentes e trajes formais de negócios perfeitos.

Agradeça às estrelas que seguimos em frente.

No entanto, a fotografia certa pode ser uma arma poderosa para aumentar as conversões em praticamente qualquer meio. Seus anúncios, sites e páginas de destino do Facebook podem se beneficiar de uma fotografia estrategicamente colocada.

Ao escolher sua fotografia, você precisa considerar onde a está usando. Se for para o seu site principal, pergunte a si mesmo, ele apoia sua marca ou causa disparidade?

Se você estiver escolhendo fotos para anúncios do Facebook ou páginas de destino, tente usar uma em que o assunto fique voltado para seus títulos ou texto em destaque. Isso tem o efeito psicológico arraigado de forçar os olhos de seus usuários para onde o assunto está voltado ou olhando e foi comprovado que aumenta as conversões e o engajamento.

Basta dar uma olhada neste anúncio da Sunsilk, por exemplo:

Mas como você faz para obter sua fotografia de banco de imagens? Qual site você deve usar? Existem tantas opções por aí e tantos prós e contras de cada um que pode ser um pouco assustador por si só.

Deixe-me tentar descompactar tudo para você, recomendando meus sites favoritos de fotos e os prós e contras de cada um.

Depósito de fotos

Este é o meu site de fotos Goto. Seu alcance é enorme e sua qualidade é muito boa. Você vai demorar um pouco mais para encontrar a imagem certa em comparação com os sites mais caros, mas na minha opinião vale a pena.

iStockPhoto

O avô dos sites de banco de imagens. A sua gama é enorme e a sua qualidade é impecável. Mas espere pagar um prêmio por apenas uma foto. Uma ótima opção para agências ou para quem trabalha com clientes e projetos de alto nível.

Estoque

Se eu tivesse que escolher meu site de fotos favorito com base apenas na qualidade, o Stocksy seria facilmente minha primeira escolha. A sua gama é super moderna e relacionável. No entanto, seus preços ainda estão na extremidade superior da escala.

Abrir

Talvez você não tenha dinheiro para gastar em fotos de banco de imagens? Sem problemas. Checkout unsplash para uma bela variedade de fotos gratuitas. O único problema que vejo com o unplash é que suas fotos podem ser um pouco impraticáveis ​​às vezes, pois apresentam predominantemente paisagens e cenas urbanas, mas acredito que isso está começando a mudar.

Pic Jumbo

Que? Outro site de fotos gratuitas? Sim, sim mesmo. O Pic Jumbo tem uma ótima seleção de fotos práticas e gratuitas, mas seu volume não é tão grande quanto o do unsplash.

Quando se trata de fotografia de banco de imagens, pergunte-se novamente: ela complementa minha marca e está estrategicamente posicionada para complementar qualquer conteúdo ou recursos importantes de cópia dentro do meio?

4. Seu layout de página inicial de alta conversão

As chances são muito altas de que você tenha um site 'hub' que atue como um silo central para todo o seu conteúdo e links para páginas de destino e páginas de compressão. As chances também são muito altas de que o layout do seu site não esteja otimizado para atender às suas metas de negócios na forma de conversões concluídas.

Abaixo está um wireframe de um layout de página inicial com foco em conversão. [Um wireframe é uma imagem ou conjunto de imagens que exibe os elementos funcionais de um site ou página]

5. Navegação do site

Um cabeçalho simples com seu logotipo e não mais de 6 opções de menu e ícones sociais opcionais funcionam melhor. Não fique tentado a usar tendências como o menu 'hambúrguer' em sites de desktop – isso prejudicará suas conversões e experiência do usuário.

Cada site é diferente, mas eu recomendo as seguintes páginas para incluir em sua navegação.

Comece aqui na página:

Se o seu site e blog têm muito conteúdo, você pode usar esta página para apresentar novos visitantes ao seu site e direcioná-los para as categorias mais populares e relevantes usando um mapa do site estilizado e amigável.

Como alternativa, você pode usar esta página como uma página de captura que fornece uma isca digital relacionada ao problema e à sua solução.

Página de produtos/serviços:

O próximo item na navegação seria o local perfeito para mostrar sua página de produtos ou serviços e vincular a qualquer página de destino externa (ou interna) que você possa ter para cada produto ou serviço. Se você tiver vários produtos e serviços, um menu suspenso seria ideal para isso.

Estudos de Caso / Depoimentos / Página do Portfólio:

Seus clientes e clientes querem saber se sua solução funciona certo? Dependendo do seu negócio, coloque estudos de caso, depoimentos, resultados ou página de portfólio em seu menu de navegação para criar confiança com novos visitantes e mostrar a eles que você realmente agrega valor.

Sobre a página:

Sim, a infame página sobre. Esta é a sua chance de falar sobre você, sua empresa, seus produtos, serviços e quaisquer prêmios e elogios que você conquistou e é uma obrigação para o seu menu de navegação, pois cria confiança e reduz o atrito.

Página do blog:

Quase todas as empresas podem se beneficiar do marketing de conteúdo e isso resultará em tráfego de longo prazo no site e, se feito corretamente, geração de leads na forma de atualizações de conteúdo, widgets opt-in e assim por diante. Se você blogar (o que você deveria!), é uma obrigação definitiva para a sua navegação.

Página de contato:

Um acéfalo absoluto, sua página de contato deve estar sempre em sua navegação. Se estiver faltando, espere que a confiança e as conversões também faltem. Dê aos seus visitantes várias maneiras de entrar em contato com você. Pense em e-mail, telefone, Skype, endereço comercial, mídia social, pombos-correio… Você entendeu.

A área do herói

Não deve ser confundido com uma tela de página inicial em tamanho real, sua área de herói deve ocupar uma grande parte da dobra e deve estrategicamente deixar totalmente claro sobre o que sua empresa faz, enquanto atua como um veículo para coletar novos leads por meio de um ímã de chumbo.

Como você pode ver, o título é curto e resume exatamente o que a empresa faz. Há um espaço para uma imagem profissional se for para um site de marca pessoal, ou pode ser substituído por qualquer outra imagem ou até mesmo um vídeo de introdução.

O próximo recurso que você notará é a área da isca digital. A ideia é exibir um ecover de sua isca digital com um título curto, algum texto de apoio e, finalmente, um botão que, quando clicado, abrirá um pop-up com seu formulário de inscrição. Existem muitas ferramentas por aí que podem fazer isso, como Popup Domination.

A barra 'autoridade'

Um recurso de design comum que você notará em muitos sites de propriedade e administrados por profissionais de marketing de autoridade é a 'Barra de autoridade'. O objetivo desta barra é obviamente construir confiança, autoridade e credibilidade. Está lá para dizer “Ei, eu sei do que estou falando quando se trata de [TOPIC] e tenho a confiança dessas grandes publicações e redes para me apoiar”.

Se você foi destaque ou blog convidado para qualquer site, blog, revista, jornal ou publicação respeitável, esta área é sua chance de demonstrar sua experiência.

A caixa 'Ações mais desejadas'

Então, agora você deixou claro exatamente o que você faz e o problema que você resolve, você forneceu uma oportunidade para os visitantes se juntarem à sua tribo e você mostrou sua experiência com a barra de autoridade.

O próximo passo é direcionar os visitantes para suas ações mais desejadas (MWA), na ordem da ação mais fácil, como um download de isca digital, para as ações de nível superior, como ingressar em seus programas de treinamento de alto nível.

Cada caixa ou ícone de MWA interno deve ter um link para sua página de destino ou página de captura correspondente que, em seguida, assume e incentiva seu visitante a realizar essa ação ou conversão específica.

A caixa "Mais informações"

Alguns visitantes do site precisam de cuidados antes de confiarem em você o acesso à caixa de entrada ou ao dinheiro arduamente ganho. A caixa 'Mais informações' foi projetada para fornecer mais informações sobre sua empresa e o problema que você resolve para seus avatares.

Uma boa combinação para essa área seria fornecer um vídeo, um subtítulo e um ou dois parágrafos de texto de apoio para falar com seus visitantes e fornecer uma visão mais completa de seus negócios, produtos e serviços.

Postagens no blog

Novamente, se você estiver usando o marketing de conteúdo como um canal para alcançar seu público, é fácil incluir suas postagens de blog mais recentes em algum lugar da sua página inicial. Há muitas maneiras de apresentar esteticamente suas postagens de blog e vários layouts para escolher.

Meu favorito, no entanto, tem que ser o layout de grade no estilo de cartão. Ele fornece um espaço para um gráfico de recursos, um título e permite que os visitantes verifiquem rapidamente as postagens do seu blog para ver qual parte do conteúdo é mais relevante para suas necessidades imediatas.

Depoimentos e breves estudos de caso

Para fazer backup de sua autoridade, influência e valor, você deve considerar adicionar uma área à sua página inicial que inclua de 4 a 6 depoimentos de alguns de seus clientes ou clientes existentes. Isso só contribuirá para construir mais confiança e demonstrar que o trabalho e os produtos que você fornece realmente geram resultados.

Caixa de ímã de chumbo inferior

De acordo com muitos estudos de mapas de calor, poucos visitantes rolarão até aqui em sua página inicial. Com as caixas e módulos já listados acima desta área, seus visitantes devem estar no caminho certo para explorar seus produtos, serviços e conteúdo.

No entanto, você ainda não deve negligenciar este último esforço para incentivar os visitantes a se juntarem à sua tribo.

Esta área de isca digital inferior irá ajudá-lo a fazer exatamente isso. Use este espaço para mostrar sua isca digital, forneça um título e dois ou três parágrafos de texto de apoio ao lado de um gráfico de capa da isca digital e um botão de chamada para ação que abre um formulário pop-up opt-in.

O rodapé do site

Ah, o que posso dizer? Todos nós sabemos o que é um rodapé, então nem é preciso dizer que ele deve ser a caixa ou área final do seu site.

Como prática padrão, adicionar seu logotipo e links de sites relevantes junto com links de SEO, informações de contato e caixas e ícones de mídia social é o caminho a seguir ao criar seu rodapé.

Então, esse é um layout típico de página inicial de alta conversão em poucas palavras e é adequado para quase qualquer tipo de modelo de negócios. Se você dedicar tempo e investimento para configurar seu site dessa maneira, quase posso garantir que você verá um grande aumento em seus resultados dentro de alguns meses.

Mantendo o design consistente com um guia de estilo

Até agora discutimos tipografia, cor, fotografia e seu layout de página inicial de alta conversão. Depois de definir todos esses elementos criativos, você precisa se esforçar para manter tudo perfeito e consistente.

É aí que o seu guia de estilo de marca entra em ação.

Um guia de estilo é um documento que declara explicitamente como sua marca deve ser representada visualmente em termos de logomarcas, tipografia e paletas de cores da marca.

Se você nunca usou ou aderiu a um guia de estilo antes, tenho certeza de que está ciente do processo degenerativo que seu site e outros materiais criativos levam. No primeiro mês tudo parece ótimo, mas 12 meses depois e sua marca assumiu uma aparência de Frankenstein e nada é consistente ou combina. Está em frangalhos.

A maneira de evitar isso é criar um guia de estilo de marca simples que estabeleça regras e critérios rígidos para seu logotipo, cores e tipografia.

Abaixo está um exemplo de um modelo de guia de estilo simples.

Em seu guia de estilo, você deve incluir todas as diferentes variações de logotipo que você usa, incluindo logotipos invertidos e logotipos em preto e branco, juntamente com até 5 cores de marca (e seus tons) e as fontes que você escolheu usar em sua marca.

Depois de criar seu guia de estilo, não o deixe em seu disco rígido para coletar poeira cibernética. Em vez disso, sempre que você contratar um novo funcionário ou contratado encarregado de qualquer trabalho criativo, certifique-se de que seu guia de estilo seja a primeira coisa que eles verão.

Quando você, seus funcionários e contratados trabalham com seu guia de estilo, sua marca é garantida para permanecer consistente, perfeita e bonita por muitos anos.

Espero sinceramente que você tenha gostado de ler este post e que você implemente um, dois ou todos esses recursos de design em seu próprio negócio e sites. Se você fizer isso, posso garantir que você só verá resultados positivos.

E lembre-se, quando sua empresa atingir um certo nível, você definitivamente deve considerar a contratação de um designer profissional para ajudá-lo com tudo isso. No momento, estou disponível para o trabalho de design, portanto, sinta-se à vontade para verificar meu perfil AwesomeWeb e entrar em contato com qualquer dúvida que tenha.

Leia mais: '10 elementos de design que todos os grandes blogs têm em comum'