15 Exemplos de Conteúdo Acima do Dobrar para Inspirar o Seu Próprio

Oito segundos – em média, é a duração da atenção de um humano. Isto significa que se você é um comerciante, seu conteúdo tem que inspirar, encantar e ser visto como útil pelo seu público alvo … em menos de oito segundos.

Talvez seja nas mídias sociais, seu conteúdo está funcionando bem. Está a ressoar com o público e a ganhar o seu envolvimento. Mas é possível que quando você olha as métricas do site, há uma história diferente sendo contada.

Se o tempo da sua sessão é baixo e a sua taxa de retorno é alta, você pode estar demorando mais de 12 segundos para atrair a atenção do visitante, o que, para gerar leads, não é o melhor.

Você pode estar perdendo tráfego porque o conteúdo que os visitantes do site vêem quando visitam sua página pela primeira vez não é interessante o suficiente para mantê-los lá. Suas páginas de destino podem ser atraentes quando os navegadores começarem a rolar, mas se elas não forem deslumbrantes e fáceis de usar, os navegadores podem facilmente clicar para longe.

Isso significa que seu conteúdo acima da dobra pode provavelmente ser refeito para atrair visitantes.

Se o seu site tiver um conteúdo atrativo acima da dobra, você provavelmente verá taxas de conversão mais altas e taxas de retorno mais baixas. Se você não tem certeza, tente auto-testar olhando para o seu site de uma nova perspectiva – se você fosse um novo visualizador, você ficaria no seu site à primeira vista?

Se a sua resposta for “Não tenho a certeza”, não se preocupe, vamos rever isso, mas primeiro, vamos discutir o que significa estar acima da dobra.

Conteúdo que está acima da dobra é o que vai puxar o navegador para dentro do seu website. Uma página web que é lenta de carregar, está congestionada de informação, e difícil de usar provavelmente não vai atrair o leitor da mesma forma que uma página com o design oposto iria.

Vamos falar sobre algumas formas de garantir que o conteúdo acima da dobra atordoa os navegadores web.

Acima das Melhores Práticas de Design de Websites Dobrados

Quando você desenhar a sua página web, mantenha estas práticas em mente. Eles vão manter a atenção do navegador e encorajá-los a explorar o resto do seu site.

Calme seu design simples.

Acima do conteúdo da dobra não deve estar extremamente ocupado – se estiver, os leitores podem não saber onde procurar primeiro e clicar longe da página. Alternativamente, se eles não forem capazes de encontrar a resposta ao seu desafio rapidamente, eles provavelmente escolherão outro website.

Para manter sua página com aparência profissional, organizada e de fácil utilização, tente adicionar uma imagem ou multimídia em destaque, como um GIF ou vídeo, à sua dobra. Depois, adicione uma pequena manchete que introduz a sua página web, e uma frase abaixo que descreve a sua página com mais detalhes.

Faça com que o conteúdo seja envolvente.

Páginas web simples são uma forma de manter a atenção de um navegador. Mas quando elas chegam lá, aproveite as oportunidades para encantá-las. Por exemplo, quando você escreve seus cabeçalhos e texto corporal, eles devem ecoar a voz da sua marca.

Você não tem que fazer grandes mudanças para encantar o navegador. Por exemplo, se houver um botão CTA na sua página, em vez de ler “Learn more”, tente “Ready to get started?”.

Se a foto em destaque na sua página web for estática, veja se você pode entregar a mesma mensagem com um GIF em vez disso. Além disso, se toda a sua cópia for de uma cor, tente adicionar mais uma ou duas – uma boa regra geral é incorporar as cores da sua marca para profissionalismo e consistência com o resto do seu site.

Desenhar o seu conteúdo para usabilidade.

Acima de tudo, o seu conteúdo deve ser fácil de interagir com. Por exemplo, se você está trabalhando na página acima o conteúdo da dobra de um produto. certifique-se que o conteúdo da dobra acima está funcionando como deveria.

Vamos dizer que a página do seu produto acima do conteúdo da dobra é um vídeo. Ele carrega corretamente, inclui legendas, e opções de som?

Adicionalmente, pense na experiência do usuário. Se o seu conteúdo de dobra acima apresenta um vídeo que se auto-reproduz, ele irá interromper a interação do usuário com a página? Para combater esse problema, certifique-se de que o vídeo seja reproduzido em silêncio e inclua legendas, se necessário.

Solver desafios para o leitor.

Seu conteúdo acima da dobra deve responder ao desafio do navegador. Para ilustrar, digamos que você trabalha para um provedor de serviços de e-mail marketing, e um navegador procura “software de e-mail marketing” e aterrissa em sua página inicial.

Seu conteúdo, então, deve incluir algumas, se não todas, as palavras-chave “software de e-mail marketing automatizado” de alguma forma. Por exemplo, o seu cabeçalho poderia ler “Email Automation for Marketers”, e expandir sobre isso no texto de suporte.

Então, essas são algumas diretrizes para ter em mente quando projetar seu conteúdo. A seguir, vamos ver exemplos de alguns websites com ótimo conteúdo acima da dobra.

15 Exemplos de Conteúdo Acima da dobra para Inspirar o Seu Próprio Conteúdo

Wistia

Wistia permite que seus usuários criem vídeos dinâmicos para campanhas de marketing. Seu conteúdo acima da dobra introduz os serviços da Wistia usando uma mistura de multimídia: GIFs, vídeos e cópia curta, para mostrar as capacidades do serviço:

Image Source

O vídeo da página inicial pára o navegador em suas faixas. Eles provavelmente vão passar mais tempo assistindo o clipe inspirado no talk-show que explica os serviços da Wistia. Como consumidor, quando vejo pessoas reais em uma página web, é convidativo, e me obriga a explorar mais.

Uma página inicial simples como a do Wistia se sente casual. A atmosfera acolhedora da página inicial simplista transmite uma vibração profissional. E, após o vídeo, os navegadores terão uma idéia das ofertas do software, direto dos especialistas em marketing.

Velocity Partners

Velocity Partners, uma agência de marketing B2B, não tem um vídeo com a visão geral da empresa por seu conteúdo acima da dobra. Em vez disso, a página inicial tem um fascinante slideshow interativo que explica porque os marqueteiros inovadores devem aproveitar novos formatos de conteúdo para contar histórias mais refrescantes:

Image Source

“Grandes movimentos de marketing”, descrevem o que o negócio é, e é curto, simples, e ao ponto, deixando o slideshow fazer o trabalho pesado quando se trata de atrair visitantes. Velocity Partners’ acima da mensagem dobrada desperta a curiosidade, e por sua vez, o incentivo para continuar rolando.

É importante notar, no entanto, que se você quiser usar acima do conteúdo dobrado semelhante ao Velocity Partners, certifique-se de que os primeiros segundos do seu slideshow, bem como a sua cópia, são os mais envolventes. Se não forem, o navegador provavelmente não se sentirá inclinado a ficar no site depois de ler a manchete.

VeryGoodCopy

VeryGoodCopy é uma agência criativa que elabora artigos, páginas de destino, páginas web e e-mails para marcas. Acima da dobra, o website deixa a cópia descrever o que a empresa pode fornecer para os usuários:

Image Source

A manchete transmite a oportunidade para os marqueteiros aprenderem como persuadir alavancando amplo espaço branco, uma manchete sedutora, uma breve descrição de seus tópicos de conteúdo, prova social, e uma viva chamada para ação. Este design simples e envolvente acima da dobra atrai a atenção dos seus visitantes e convence-os a verificar os seus microartigos.

Shopify

Images são como o conteúdo acima da dobra no site da Shopify convida o leitor a explorar. Shopify permite aos empresários iniciar o seu próprio negócio de comércio electrónico, confiando neles, em vez de copiar, para explicar as características do software:

Image Source

A página inicial inclui imagens artísticas e um vídeo sedutor para causar uma impressão duradoura no browser. E, embora a cópia seja escassa, o slogan está repleto de propósito e obriga os visitantes a clicar naquele CTA verde para iniciar um teste.

Ann Handley

Esta autora e parceira mais vendida do Wall Street Journal no MarketingProfs, Ann Handley, usou a página inicial do seu site para impressionar os navegadores, destacando as proezas de marketing. Hyperlinking e links são heróis aqui – links para outras páginas de um site podem ganhar mais cliques em várias páginas de um site, como os cabeçalhos de Handley:

Image Source

Ela também aproveita o espaço branco, uma imagem acolhedora de si mesma, um slogan atraente, uma cópia convincente e uma vibrante chamada para a ação para persuadir seus visitantes a considerarem trabalhar com ela. A partir desta página inicial, o visitante sabe como é Handley, o que fez e como contactá-la. Quanto ao conteúdo da dobra acima, é um home run.

Menta

Acima do conteúdo da dobra pode maximizar a simplicidade, como faz para a Casa da Moeda, uma abordagem orçamental & software de planeamento. A página inicial simples, mas profissional, transmite eficazmente a empresa e como podem ajudar os clientes.

Nota a cópia na manchete – liga emocionalmente ao leitor em duas frases, abrindo-lhes a porta para explorarem o website de uma empresa que os conhece:

Image Source

Menta também tem uma foto da sua aplicação em acção para captar a atenção dos visitantes do seu website. Isto ajuda o navegador a visualizar como o aplicativo ficará se eles decidirem se inscrever.

InVision

Como você mostra histórias de clientes dinamicamente acima da dobra? Vamos dar uma olhada no exemplo elegante da InVision:

Image Source

InVision é uma empresa de design de produtos digitais que ajuda os usuários a construir facilmente sites impressionantes e elegantes, por isso a equipe de design da empresa sabia que a página inicial tinha que impressionar os visitantes. Ele faz, auto jogando uma versão silenciosa do vídeo de visão geral da empresa, completa com depoimentos de tomadores de decisão em empresas como Uber e Twitter.

A cópia que está em camadas acima do vídeo faz um ótimo trabalho de explicar concisamente o que a empresa faz pelos usuários, e o CTA “Free Forever” até me atrai, um comerciante que não está procurando desenhar um site, para começar a aprender mais sobre as ofertas de software. Também não esconde os títulos desses decisores do vídeo – “Dantley Davis, Netflix Design Director” é um terço inferior suficientemente grande que pode chamar a atenção dos utilizadores quando não estão a olhar (os meus definitivamente foram apanhados).

Animalz

Similiar ao VeryGoodCopy, Animalz é uma agência de marketing de conteúdo cujo website não bombardeia os visitantes com mensagens sobre os seus serviços no design da dobra acima. Em vez disso, os visitantes são recebidos com a manchete “O melhor marketing de conteúdo do mundo acontece aqui”, o que convida um comerciante como eu a ler mais para saber como:

Image Source

A cópia CTA é diferente dos botões CTA de série. “Vamos conversar”, em vez de “Clique aqui para saber mais!”, implica que quando os visitantes clicam no CTA, serão levados a uma pessoa real que lhes pode oferecer mais informações sobre o serviço.

O site também aproveita o espaço em branco, e usa imagens simples, desenhadas à mão, para atrair o leitor a rolar para baixo. O rabisco roxo percorre a página web para apresentar os principais clientes da Animalz, e leva a um formulário para entrar em contato com a empresa.

Ahrefs

Talvez você trabalhe para uma empresa que queira uma página inicial sem disparates, que transmita os sinos e apitos do produto sem congestionar a página com uma sobrecarga de informação. Se essa descrição se encaixa em você, dê uma olhada no Ahref’s acima da abordagem dobrar:

Image Source

O cabeçalho da página web descreve o que o serviço faz: ajuda os utilizadores a melhorar o seu SEO. Isto é ainda apoiado pela manchete menor, e CTA comunica aos navegadores informações sobre preços.

Os clientes satisfeitos são listados na parte inferior, bem antes da dobra, para dar uma visão completa de como Ahrefs pode ser um benefício para as empresas de sucesso. Se você quiser que sua página inicial use mais cópia, ao invés de visuais, tente apresentá-la de uma forma simples que não use mais de 30 palavras, como Ahrefs fez.

Twitch

Após digitar em Twitch.tv em seu navegador, você é imediatamente imerso no que o site oferece: fluxos ao vivo para os jogadores. Isto porque assim que o seu browser acede ao website, uma transmissão ao vivo em destaque começa a ser reproduzida automaticamente:

Image Source

Embora possa ser um pouco chocante ouvir de repente vozes vindas do seu browser, o Twitch’s acima da dobra não utiliza qualquer cópia para descrever os seus serviços. Ao invés disso, os usuários podem pular e fazer a demonstração do conteúdo por conta própria, navegando pelos fluxos sem ter que fazer uma conta ou ler nada. Eles podem continuar rolando para ver streams populares, clicar em um e explorar os recursos do site a partir daí.

Por causa de como o site funciona ao todo, esta abordagem acima da dobra funciona. Twitch oferece aos visitantes para testar seus serviços sem fazer nenhuma leitura. Plataformas visuais similares ao Twitch podem se beneficiar deste método, atraindo alunos visuais e não-visuais.

Skillshare

Skillshare usa vídeo para explicar a maior parte de seus serviços acima da dobra. Como o software oferece aulas on-line em uma variedade de assuntos, o vídeo mostra uma visão geral do que Skillshare pode ajudar você a realizar, aprender e sentir:

Image Source

O vídeo destaca adultos de aparência confiante mergulhando em suas paixões, que é o que Skillshare ajuda os usuários com. O texto em camadas inspira os visitantes a explorar sua criatividade com o software – e começar de graça.

Flock

Se você sabe que o site da sua empresa vai se beneficiar de uma mistura de mídia de conteúdo acima da dobra, considere abordar isso como o aplicativo de mensagens Flock faz. A chave para usar uma mistura de conteúdo em uma página inicial é desenhá-la para que a informação não interrompa a experiência de um visitante pela primeira vez no seu website:

Image Source

Note como os gifs são usados para destacar o texto em mudança que exibe as características do aplicativo. A imagem desenhada a mão ilustra como Flock funciona, e o texto CTA exibe um pouco de personalidade. Usando uma mistura de mídia para apimentar sua página inicial pode ser tão simples quanto uma imagem em movimento, um botão clicável, e um desenho para exibir uma visão geral de sua empresa para os visitantes.

King Arthur Flour

O conteúdo da dobra acima deste fornecedor de ingredientes para panificação baseado em Boston, King Arthur Flour, é de primeira linha. Ela dá aos visitantes a escolha de assistir a um tutorial em vídeo sobre como fazer pão de massa com as ofertas da empresa:

>

Image Source

Pude ter uma idéia das ofertas da empresa: uma página no Facebook (que abriga o show de panificação da empresa), receitas, um FAQ de panificação, produtos para compra, e até mesmo uma “Baker’s Hotline”, que funciona como uma página de Fale Conosco.

Os recursos do slideshow, equipados com uma foto brilhante e seu próprio CTA, me deram uma visão completa de tudo o que a empresa pode fazer para os aspirantes a panificadores. Ele vai além dos produtos da empresa e, em vez disso, oferece informações úteis para padeiros em geral, o que é acolhedor para alguém que pode se sentir intimidado com o cozimento de pão.

Clarkisha Kent

Você é um freelancer se perguntando como fazer seu conteúdo acima da dobra se destacar entre seus concorrentes? Se sim, ao desenhar a sua página inicial, certifique-se de que ela realiza duas coisas: mostrar personalidade, e fácil navegação.

Isso é porque, enquanto o seu trabalho tem que precedê-lo, também a sua personalidade, especialmente como freelancer. Se você é um escritor, como Clarkisha Kent, sua cópia tem que vendê-la, como faz o site dela:

Image Source

A inclusão de um headshot e manchete interessante mostra rapidamente mais de quem Kent é como escritora, e o ângulo que ela provavelmente tomará como contribuinte de websites. Sua barra de navegação inclui links para tweets virais que ela fez e recortes de outras publicações, de modo que sua página inicial não precisa fazer.

Em vez disso, sua página inicial serve como uma introdução, que pode precedê-la antes do resto de seu site. Quando os navegadores são atraídos por uma página minimalista com texto cliffhanger, eles provavelmente vão estar interessados em explorar o site para preencher essa lacuna. Por exemplo, quando eu li, “Chaos bringer”, eu quis saber imediatamente como, o que me levou a olhar para seu trabalho passado.

Good Witch Kitchen

Este é outro exemplo de como transmitir a personalidade de sua marca se você é um freelancer ou dono de uma pequena empresa. Good Witch Kitchen é o nome de uma nutricionista holística, Kristen Ciccolini’s, empresa. Logo abaixo da dobra está um rápido slideshow de publicações que têm apresentado o trabalho de Ciccolini, antes de mergulhar numa introdução:

Image Source

O logotipo de Ciccolini, uma imagem brilhante relacionada com o seu ofício, e uma cópia que proporciona uma visão rápida da atmosfera que Good Witch Kitchen transmite: Uma abordagem não-dietífica para a gestão da nutrição por um especialista.

Agora você tem alguma inspiração sobre como manter seus clientes engajados em suas páginas de desembarque, qual estratégia você vai usar para a sua? Mal posso esperar para ver o que você vai encontrar.