Tiros de herói da página de destino: 18 exemplos perspicazes para ajudar a orientar o seu [2022]

Em 1911, o Syracuse Advertising Men's Club organizou um banquete para discutir jornalismo e publicidade. Um de seus membros (Arthur Brisbane) foi citado no jornal dizendo: “Use uma foto. Vale mais que mil palavras.”

Não confuso, rei Salomão, Einstein ou Aristóteles, mas um publicitário. (Diga isso aos seus pais.)

Avanço rápido de mais de 100 anos e as palavras proverbiais de Arthur ainda soam verdadeiras, especialmente quando se trata de páginas de destino.

Digite: a foto do herói da página de destino.

Se o título e o subtítulo comunicam sua proposta de valor, a foto do herói da sua página de destino dá vida a ela de uma maneira que apenas uma imagem pode. É por isso que uma foto de herói forte é um dos pilares do design da página de destino.

Entenda errado e veja suas taxas de conversão despencarem.

Faça certo (como Arthur sabia por experiência) e veja suas taxas de conversão dispararem.

Em nome de acertar , vamos deixar Arthur orgulhoso explorando os diferentes tipos de imagens de heróis, as etapas necessárias para criar as suas próprias e exemplos de imagens boas, ruins e falsas.

Vamos lá.

A foto de herói da sua página de destino refere-se à imagem ou vídeo principal usado para comunicar o valor de sua oferta e é a primeira imagem que seus visitantes encontrarão ao chegar.

Por exemplo, observe como a imagem de herói da Divvy apresenta um cartão de crédito e um aplicativo móvel, os quais adicionam contexto ao título que diz: “O crédito e o software que sua empresa precisa para prosperar”.

Uma imagem de herói vai seduzir alguém a comprar?

Não por si só.

Mas junto com seu título, subtítulo, oferta e call-to-action (CTA), sua foto de herói pode fornecer o contexto, a emoção e a clareza necessários para levar seus visitantes até a linha de chegada.

Isso significa que uma foto de herói de alta qualidade não apenas preenche o espaço; dá vida à sua oferta de uma forma que as palavras sozinhas nunca poderiam, e cria uma primeira impressão indelével .

Não confunda uma foto de herói com uma seção de herói.

A seção herói da sua página de destino refere-se à seção "acima da dobra", ou à seção da página de destino que seus visitantes encontram pela primeira vez antes de começarem a rolar para baixo.

Sua seção de herói inclui sua foto de herói, título, subtítulo e CTA (no mínimo), mas a foto de herói e a seção de herói se referem a dois elementos separados de toda a sua página de destino.

Seja uma fotografia animada, personalizada, um vídeo ou algum outro estilo, as fotos de herói da página de destino se enquadram em cinco categorias principais:

1. focado no produto
2. metáfora
3. "terra prometida"
4. focado no processo
5. resumo

Vamos explorar exemplos de cada um.

As páginas de destino focadas no produto destacam o produto em ação. Surpresa surpresa.

Para um produto novo ou complicado, uma foto de herói focada no produto pode ajudar a desmistificar sua oferta, tornando o abstrato concreto.

Por exemplo, a foto de herói do Editor X apresenta sua interface de editor visual real:

As tomadas metafóricas de heróis usam imagens que representam ou simbolizam o valor da oferta, mas não no sentido literal.

Por exemplo, o herói filmado em nossa página de destino do plano de marketing gratuito apresenta nossos emojis de marca na forma de notas de dólar e cérebros sorridentes:

As fotos de heróis da terra prometida retratam o resultado desejado do uso de seu produto ou serviço, seja destacando um cliente bem-sucedido ou um estado futuro desejável.

Por exemplo, o remédio para queda de cabelo da Keeps apresenta um cliente satisfeito e sorridente, presumivelmente depois de usar o remédio para queda de cabelo:

Normalmente, você vê tomadas de herói focadas no processo para serviços ou software em que a ilustração do produto pode não ser possível. Em vez disso, você visualiza o processo responsável pelo valor ou eficácia do serviço.

Por exemplo, GatherContent usa um gráfico personalizado para ilustrar o processo de gerenciamento de conteúdo de seu software:

Nossa foto de herói menos favorita: imagens abstratas de heróis (ou imagens de heróis compostas por elementos visuais como formas ou padrões).

Por que eles são o nosso menos favorito? Porque eles apenas preenchem o espaço. Não muito mais.

Por exemplo, Semrush apresenta duas formas abstratas como seu principal elemento visual, nada mais. Oportunidade perdida.

Uma foto de herói de alta qualidade não apenas preenche o espaço; ele adiciona contexto, comunica relevância, evoca emoção e enriquece a experiência do usuário. E faz isso usando uma combinação de

• concretude
• relevância
• contexto
• emoção
• costumização
• alinhamento

Vamos explorar cada um.

Fotos abstratas de heróis fazem duas coisas bem: 1) absolutamente nada e 2) aumentam a carga cognitiva (o tempo que leva para os visitantes compreenderem sua oferta).

É isso.

As fotos de herói da página de destino de alta qualidade devem retratar seu produto, serviço, resultado desejado ou proposta de valor em ação, no mundo real ou o mais próximo possível da realidade. Simples.

Não faça seus visitantes pensarem muito. Evite a arte pela arte. E mantenha seus visuais concretos.

Por exemplo, Dollar Shave Club usa sua imagem de herói para ilustrar os produtos incluídos em seu $ 5 Razor Starter Set. Simples mas eficaz.

Uma foto de herói da página de destino de alta qualidade deve ressoar imediatamente com seu público-alvo, ao mesmo tempo em que sinaliza “Isso não é para mim” para mais ninguém.

Seus visitantes tomam decisões em frações de segundo principalmente influenciadas por suas mentes inconscientes. Se sua foto de herói não esclarecer imediatamente para quem é e para quem não é, tente novamente.

Isso também significa combinar a foto do herói da sua página de destino com a mensagem e o criativo que enviaram as pessoas para lá (ou seja, correspondência de mensagem).

Por exemplo, quando você olha para a foto de herói da Beauty Box da Allure, há alguma dúvida de que é para pessoas especificamente interessadas em beleza?

O herói da sua página de destino fotografou vidas para apoiar seu título e subtítulo. Período.

Melhor ainda, pense nisso como a representação visual de sua proposta de valor.

Isso significa que sua foto de herói precisa dar vida à promessa que você faz em seu título, não a alguma promessa que você faz em outro lugar da página.

Por exemplo, o Canva adiciona contexto ao título “criatividade e produtividade” com uma foto de herói focada no produto que ilustra colaboração, modelos e design em movimento (aplicativo móvel):

Quando dizemos emotivo, não queremos dizer levar alguém às lágrimas; queremos dizer criar um sentimento positivo sobre sua marca e oferta.

Muito disso se resume à qualidade do seu design gráfico – um web design de qualidade cria confiança e estabelece credibilidade.

Mas você pode evocar sentimentos positivos como confiança, segurança, felicidade e confiança diretamente de sua foto de herói usando imagens de escolha.

Por exemplo, o Namogoo apresenta uma variedade de “compradores” despreocupados, como se dissesse: “É assim que seus clientes se sentirão depois que você começar a usar o Namogoo”.

Ao espelhar emoções positivas associadas à “terra prometida” de sua proposta de valor, a Namogoo provoca emoções positivas de seus clientes em potencial.

Ou você pode apresentar provas sociais, como depoimentos de clientes, classificações por estrelas ou prêmios, diretamente em sua foto de herói para evocar sentimentos de confiança.

Sem estoque. Fotografia.

Mantenha as fotos dos heróis da sua página de destino personalizadas para sua marca.

Se você precisar de ajuda da fotografia de banco de imagens devido a recursos, pelo menos, trabalhe a fotografia de banco de imagens em um gráfico personalizado para que ela se ajuste ao estilo e à sensação da sua marca.

Por exemplo, Monday.com usa várias fotografias de ações de pessoas, mas elas as editam em sua foto de herói da página de destino de uma maneira que parece original e única.

Por fim, as melhores imagens de herói da página de destino não distraem a cópia; eles se alinham com bom gosto em torno de manchetes e CTAs de uma forma que chama a atenção para (não para longe) deles.

Por exemplo, observe como Apostrophe apresenta um dermatologista olhando para a manchete e o CTA?

Direcionar o corpo e o olhar para a direita cria uma sugestão visual sutil que chama a atenção do visitante na mesma direção – direto para o título e o CTA.

Agora justaponha isso com a foto do herói da página de destino do VanMoof. Não destaca o título e o CTA; os enterra.

Agora, a parte divertida: exemplos de fotos de heróis da página de destino.

Dividimos esta seção em três categorias distintas:

1. O Bom (10 exemplos)
2. O Mau (4 exemplos)
3. O falso (4 exemplos)

Por quê?

Porque nem todas as tomadas de heróis são super-heróis, e aprender o que não fazer é tão importante quanto aprender o que fazer.

Marque-os. Adicione-os ao seu arquivo de furto. Diga a todos os seus amigos.

1. Canva Pro
2. Doo
3. Público
4. Nuvem Criativa Adobe
5. KlientBoostName
6. Squarespace
7. Spline
8. SnapCall
9. Tipo de letra
10. Tatu

O que amamos: foto de herói focada no produto que adiciona contexto ao título, não distrai do CTA e evoca emoções positivas.

O que amamos: Doo mostra capturas de tela reais de seu aplicativo de lembrete. Simples, concreto, contextual, personalizado, eficaz.

O que adoramos: Public apresenta um vídeo em loop que mostra capturas de tela do aplicativo junto com usuários reais e autênticos. Este vídeo combina o foco no produto com a terra prometida para capturar artisticamente sua facilidade de uso, mercado-alvo e compatibilidade com dispositivos móveis.

O que amamos: Não há melhor maneira de demonstrar o poder do seu software de design do que apresentando os designs reais que ele facilitou. Bem, talvez uma maneira: tornando seu logotipo o assunto do design. Bravo, Adobe.

O que amamos: Adoramos fotos metafóricas de heróis da página de destino no KlientBoost. Principalmente porque criamos uma família inteira de mascotes de marcas que precisam de seus 15 minutos de fama, mas também porque ilustram nossas propostas de valor de maneira distinta e divertida. Quem não gosta de sorrir páginas de destino e chover dinheiro?

O que amamos : Squarespace prioriza o design, sempre. Portanto, não é surpresa que as imagens dos heróis da página de destino se pareçam mais com arte moderna do que com a maioria da arte moderna. Mas, como mencionamos anteriormente, a arte pela arte não é suficiente quando se trata de fotos de heróis da página de destino. Não, a menos que você tenha capturado seu produto na vida real dentro dessa arte. E é exatamente isso que o Squarespace faz aqui.

O que nós amamos: É um pouco difícil dizer a partir desta imagem (sugiro que você visite a página da web), mas a foto do herói 3D da Spline se move quando você clica e arrasta o mouse sobre ela. Muito legal, considerando que eles vendem ferramentas colaborativas de design 3D.

O que amamos: o SnapCall usa sua foto de herói para ilustrar um caso de uso comum (ou ponto problemático) que seu mercado-alvo pode achar valioso (como interagir remotamente com seus clientes). Faz sentido, considerando que seu subtítulo promete “oferecer uma experiência inovadora ao cliente com videochamadas com um clique”.

O que amamos: falar sobre foco no produto. O Typeform usa um formulário Typeform incorporado na vida real como sua imagem de herói. Os visitantes podem clicar no botão “Experimente-me” e experimentar o formulário por si mesmos. Brilhante.

O que amamos: Alerta de metáfora. Um tatu enrolando seu corpo em volta de uma casa como se a estivesse protegendo como se fosse seu próprio bebê. É possível comunicar a promessa da marca e a proposta de valor de uma maneira melhor? Sem chance.

Já vimos pior, mas essas fotos de heróis da página de destino ainda não são suficientes.

1. Semrush
2. InVision
3. MURAL
4. PocketGuard

O que não gostamos: Aqui está o que acontece quando as metáforas falham. A Semrush usa uma caixa de ferramentas, presumivelmente para destacar sua proposta de valor “Ferramentas para qualquer desafio de SEO”. Apenas a caixa de ferramentas é preenchida com uma régua, uma lupa e uma engrenagem. Você está vendendo ferramentas de encanamento? Ou ferramentas de SEO?

O que não gostamos: E é isso que acontece quando o resumo falha. Nós entendemos, porém, uma vez que esta página de destino promove o novo software “Freehand” da InVision. Mas por que apenas mostrar uma mulher “mão livre” em uma parede? É, não. Oportunidade perdida. As pessoas querem ver o software na vida real, especialmente quando é um novo tipo de software.

O que não gostamos: Está sobrecarregado. No que nós focamos mesmo? MURAL tenta usar uma foto de herói focada no produto, mas eles espremem demais, tornando difícil discernir o que cada recurso faz. Eu posso ver agora: muitas pessoas querem muitos recursos representados, então o designer disse: “Eff, vamos colocá-los todos lá”.

O que não gostamos: O que é mais perturbador nesse design abstrato é que ele se parece com uma espécie de onda sonora. Mas o PocketGuard é um aplicativo de finanças pessoais. A lição? Certifique-se de que sua foto de herói não pareça um serviço diferente à primeira vista, mesmo que por acidente.

Sim, não podemos esquecer do falso. Essas fotos de heróis desperdiçam a parte mais valiosa da página de destino.

1. Interfone
2. SurveyMonkey
3. Agir sobre
4. ZoomInfo

O que odiamos: Uma mulher enchendo um balão? É assim que você vai ilustrar sua proposta de valor “Converter mais visitantes do site em clientes pagantes”? Swing e uma falta.

O que odiamos: as páginas de destino nem sempre precisam de fotos de herói para serem convertidas. Portanto, não os aperte apenas porque você “precisa de algo visual”. Diga não aos preenchimentos de espaço (ahem, SurveyMonkey).

O que odiamos: é um funil, suponho. Mas parece mais uma lâmpada. Em uma página de destino com muito texto que poderia se beneficiar de um visual forte, o Act-On perde o ponto. Sem mencionar que eles nem incluem seu logotipo nesta página de destino.

O que odiamos: é um drone da Amazon entregando meu novo cabo de extensão? Caramba. Sem mencionar que o posicionamento (canto superior direito) desvia sua atenção do CTA na parte inferior, não em direção a ele.

Linha inferior?

Embora as fotos de herói da página de destino sejam de todas as formas e tipos, as melhores incorporam uma combinação de

• concretude
• relevância
• contexto
• emoção
• costumização
• alinhamento

Seja você uma pequena empresa ou uma organização global, priorize esses elementos para acertar na foto do herói da sua página de destino.

Quer saber se o seu tiro de herói atinge a marca?

Experimente o teste de tiro do herói.

Encontre um amigo ou colega (de preferência alguém que nunca tenha encontrado o produto que sua página de destino promove), carregue a página de destino e dê a ele de cinco a dez segundos para revisar a foto do herói.

Se eles não puderem descrever com precisão sua proposta de valor e o herói que o acompanha em duas frases, é hora de começar a testar diferentes variações A/B.

Agora vá em frente e deixe Arthur (e nós) orgulhosos.

Só não se esqueça de dominar os títulos da sua página de destino enquanto estiver nisso. Leia tudo sobre como fazer isso em nosso próximo blog aqui.