Imagens de herói são o que os criadores da web costumam usar para saudar os visitantes de seu site em um formato atraente.
Se você já se perguntou " o que é uma imagem de herói? ", Você está no lugar certo. Neste artigo, daremos uma olhada no tópico e como você pode criar belas imagens de heróis com efeitos visuais poderosos.
Uma imagem heroica é o termo usado pelos criadores da web para descrever o conteúdo superdimensionado na parte superior de uma página da web.
O papel de uma imagem de herói é dar as boas-vindas ao visitante assim que ele conhece sua empresa ou . A abundância de tipos de imagens principais no kit de ferramentas de autoria da Web traz muitos motivos para incluir uma imagem principal em seu site.
Vamos entender as principais vantagens de fazer isso e por quê?
O que é uma imagem de herói?
Abraçando a virtude de uma "boa primeira impressão", as imagens do herói normalmente têm uma ou mais das seguintes características:
- Uma imagem de alta qualidade
- Um vídeo cativante
- Um controle deslizante de imagem ou um carrossel multimídia
- Ilustração animada ou estática
- Cabeçalhos e descrições ao lado ou na frente do conteúdo visual
Em termos de estilo, os detalhes de design comuns que você verá aplicados às imagens principais incluem:
- Imagens de fundo ou vídeos com sobreposições de fundo
- Posicionamento fixo ou aderente
- Apontar afeta a mudança na transparência ou sobreposição
- Elementos de contraste que diferenciam a imagem do cabeçalho acima ou do conteúdo subsequente
A novidade das imagens heróis no web design é que por um lado você está trabalhando com um espaço muito específico e definido na página da web. Por outro lado, as opções de estilo, efeitos e técnicas a serem usados ao projetar esta parte do conteúdo da sua página são absolutamente infinitas.
Por que você deve usar uma imagem de herói?
Quando o design e a funcionalidade de sua imagem de herói são de alto calibre, você obtém automaticamente a credibilidade e a confiança do usuário. Sua imagem de herói e seu conteúdo de herói ao redor geralmente representam sua primeira oportunidade de transmitir o ponto de venda exclusivo de seu e o principal ponto de contato do usuário para a conversão.
Ao procurar desencadear determinados comportamentos do usuário, uma imagem de herói de primeira linha e poderosa que causa uma forte primeira impressão nos visitantes é a melhor maneira de começar.
Você pode causar uma primeira impressão duradoura
As primeiras impressões são importantes em muitas áreas da vida, mas especialmente quando se trata de como os usuários se relacionam com a estética do site.
Os resultados de especialistas em interação homem-máquina (HCI) e visualização em Pesquisa do Google atestar a influência das imagens heróicas no sucesso de um site:
Este estudo, " O papel da complexidade visual e da prototipicidade nas primeiras impressões do site : trabalhar na compreensão de julgamentos estéticos ”, Estuda como a complexidade visual e a prototipicidade impactam o design de um site e as primeiras impressões de seus usuários.
Os autores mostraram 119 capturas de tela reais do site para os participantes do estudo e descobriram que a complexidade visual e a prototipicidade afetam a percepção estética do usuário nas primeiras 50 imagens da exibição, e às vezes até em 17 ms.
Como criadores da web, nossa conclusão é bastante simples: a imagem de herói que escolhemos e a forma como a apresentamos em nossa página influenciam o sentimento e o comportamento do usuário de uma maneira importante.
Você obterá o máximo do seu conteúdo acima da dobra
A seção "acima da dobra" de uma página da web pode ser definida em termos simples: conteúdo que preenche sua tela / aparece acima da borda inferior da janela do navegador da web após o carregamento de sua página. Se o conteúdo requer rolagem para ser visto, significa que ele está localizado "sob a dobra".
O conceito de “acima da dobra” originou-se no design de impressão e publicação, muito antes da era da mídia digital. Todos nós sabemos o que é notar imediatamente algo na metade superior de uma primeira página, e é até seguro dizer que o conteúdo da primeira página é muitas vezes o que nos faz decidir se devemos comprar ou não, um jornal, ou simplesmente parar em uma banca de jornal.
É exatamente por isso que seu conteúdo acima da dobra pode ser um grande fator para o sucesso do seu site.
O que isso significa?
Se um visitante do site ficar confuso com o seu conteúdo e as imagens acima da dobra, ele sairá rapidamente do seu site. Se sua imagem de herói e seu ambiente acima da dobra forem claros, envolventes e bem representativos de sua proposta de valor, ele estará mais inclinado a permanecer por perto.
Em última análise, quanto mais você investe na imagem e no conteúdo de sua seção de heróis, menor é a probabilidade de os usuários saírem rapidamente.
Não se esqueça do Design Responsivo
Lembre-se de que a localização de um vinco na tela depende do tamanho da tela do dispositivo. Essa é uma consideração importante no design responsivo, já que o conteúdo acima da dobra deve ser personalizado e configurado de forma que seja aplicável a vários tamanhos de dispositivo.
Web designers e desenvolvedores costumam usar pontos de interrupção específicos do dispositivo para garantir essa capacidade de resposta. Isso lhe dá controle total sobre a adaptabilidade do design do seu site aos tamanhos de tela relevantes e evita o comprometimento da aparência ou o impacto da imagem principal.
Declare sua proposta de valor sem sobrecarga de informações
Você pode estar familiarizado com o conceito de "sobrecarga de informaçãoNo design do site e a experiência do usuário : Queremos evitar o uso de muito conteúdo, especialmente conteúdo escrito, ao representar nossa marca e nosso valor comercial.
Nesse sentido, o uso de uma imagem, ilustração ou vídeo vale 1 palavras. O ajuste fino de imagens de marca eficazes irá capturar toda a sua história em um meio visual. Em vez de verbalizar sua história e proposição de marca, você pode aliviar a carga cognitiva do usuário de uma forma simples e amigável.
A imagem acima foi tirada de Construção Millbrook, uma empresa de construção com sede em Perth, especializada em "construção residencial com acabamentos de alta qualidade e atenção aos detalhes". Para o site Elementor, a imagem principal na página inicial faz uso perfeito de sua interface “acima da dobra”. A fotografia nítida e atraente de uma casa moderna e feliz com uma piscina externa gera vibrações positivas e relaxantes.
Indo um passo adiante, as opções de estilo da imagem de fundo de altura total e o tamanho de um 'cobertor' indicam o talento robusto da empresa para criar propriedades residenciais luxuosas. A proposta de valor é tão clara quanto a água de uma piscina, e os usuários absorvem confortavelmente todas as informações necessárias.
Suas imagens de herói podem ajudar a converter leads
Pontos de contato atraentes e visíveis são um ingrediente básico para um fluxo de usuário de conversão-reprodução. É por isso que a relação entre a frase de chamariz da seção de herói e sua própria imagem de herói pode fazer ou quebrar seus objetivos de construção de site.
Deixe seus textos de CTA dizerem " Registe-se agora "," Mais informações "," Entre em contato conosco! », Etc., sua imagem de herói deve ser coordenada de forma transparente em todas as frentes: visibilidade, mensagem, esquema de cores, aparência, etc.
Conversas confiáveis e eficazes com clientes em potencial são baseadas em um ambiente confortável e natural; imagens visualmente agradáveis são a melhor maneira de conseguir isso.
Isso é exatamente o que vemos no site Elementor criado por STL Caricature, uma equipe de cartunistas que fornecem serviços de entretenimento para eventos. O título animado (texto do herói) retrata os clientes felizes em suas imagens de herói, mostrando o que os cartunistas fornecem para cada pessoa.
Então, depois de arregaçar as mangas e começar a entrar nos aspectos práticos, o que entra no processo de decidir que tipo de imagem de herói usar?
Vamos explorar os quatro tipos diferentes de imagens de heróis e como avaliar qual é a melhor para o seu site.
Imagem de herói do produto nº 1
Uma imagem principal do produto é uma imagem grande e alta definição do produto da marca. Estas imagens podem ser apresentadas de forma estática ou em movimento/em ação, desde que permitam visualizar a proposta de valor do produto.
Maneiras populares entre os web designers de mostrar e personalizar as imagens do herói do produto podem incluir:
- Um exemplo detalhado / instantâneo de um produto individual, como vemos acima no site da empresa amante australiano de avo por assinatura.
- Captura de tela de uma interface de produto digital, como um painel.
Imagens de heróis de produtos geralmente são encontradas nos sites dee-Commerce (mas não exclusivamente). Os compradores em potencial esperam ver exemplos de produtos reais, apoiando a tomada de decisões informadas sobre a adequação da loja às suas necessidades de compras.
O Avo lover usou a Elementor para criar seu site de comércio eletrônico, que seus clientes usam para comprar assinaturas semanais de abacates frescos entregues em sua porta.
A base de clientes do Avo lover é um nicho de mercado em uma área de interesse estreitamente definida, então a escolha da imagem do herói do produto faz todo o sentido. Os assinantes em potencial são entusiastas do abacate; ver uma fotografia detalhada e de perto dos produtos é exatamente o que eles procuram ver.
Melhores Práticas:
- Invista na qualidade das imagens de fundo
Quer a sua imagem de fundo seja uma fotografia, vídeo, ilustração, etc., o arquivo de imagem deve ser o mais leve possível, com resolução cristalina.
- Preste atenção aos níveis de contraste
Se você adicionar texto na frente da imagem da seção do herói (ou componente de qualquer tipo), certifique-se de que o contraste entre os elementos do site seja forte e facilmente visível. É aqui que as sobreposições de fundo e os efeitos de filtro podem ser extremamente úteis.
# 2 Imagem do herói do cliente
O seguinte tipo de imagem de herói usado por negócios online tem uma abordagem alternativa para mostrar seu valor agregado: mostrar seu cliente usando o produto. Essa perspectiva é uma forma estratégica de ter empatia com seus visitantes, demonstrando de forma sucinta que você entende seu ponto fraco e pode atender às suas necessidades.
O videoclipe acima foi retirado do site Elementor criado por Alexandre Fischer, um personal trainer baseado em Stuggart que fornece uma variedade de serviços relacionados à saúde e ao condicionamento físico.
A imagem de herói do cliente de Alexander mostra mais do que um cliente satisfeito desfrutando de um estilo de vida saudável e em forma. A imagem do herói vai um passo além, apresentando um vídeo que mostra o vínculo do cliente e a conexão com entes queridos.
Melhores Práticas:
- Compartilhe seus casos de uso e experiência do cliente
Diferencie seu produto mostrando seu caso de uso mais dominante. Uma imagem que transmite seus objetivos e valor de negócios mostra como o visitante se beneficiará de sua oferta exclusiva.
- Relacione-se com o seu público-alvo
Certifique-se de que seu público-alvo seja considerado ao selecionar o tipo de pessoa a ser destacada em sua imagem. Escolha uma imagem que comunique sua compreensão do campo e sua capacidade de encantar seus clientes.
# 3 Imagem do herói fundador
A imagem do herói fundador é uma grande imagem do fundador do proprietário da empresa, colocada na seção do herói para saudar o visitante do site.
As imagens dos heróis fundadores costumam ser usadas em sites de portfólio para freelancers, proprietários de empresas como psicólogos, maquiadores ou músicos, conforme mostrado no Site da Elementor por Jasmine Cain acima.
A maior virtude da imagem de um herói fundador é que ela dá um rosto a um nome; conecta o visitante do site ao provedor de serviço, criando uma dinâmica agradável entre os dois indivíduos.
A escolha das imagens para a imagem do herói fundador deve ser tratada com cuidado. Com muitas opções para escolher, que se resumem a:
o que vai transmitir a mensagem da sua marca da maneira mais forte possível?
Esta é uma foto do fundador olhando diretamente para a câmera e sorrindo, ou talvez olhando em uma direção diferente?
Ou uma foto sincera do empresário trabalhador seria mais adequada?
Melhores Práticas:
- Preste atenção ao dimensionamento e dimensões
Use uma imagem (ou vídeo) nítida e de bom tamanho que mostre aos visitantes os detalhes exatos que eles precisam ver. Se necessário, você pode se concentrar em áreas maiores de suas imagens, recortando-as e removendo conteúdo menos importante.
- Concentre-se no que sua imagem deve transmitir
O papel do plano de fundo deve ser o de enfocar a pessoa à sua frente, e não o contrário. As imagens do herói fundador mais impactantes mostrarão o empresário sorridente, sugerindo sua paixão por manter os clientes felizes.
# 4 Imagem principal não contextual
As imagens não contextuais do herói são, como o nome sugere, sequências que exibem algo aparentemente "não relacionado" ao proprietário do produto ou negócio. O objetivo de uma imagem de herói não contextual é causar uma impressão no visitante por meio de uma associação visual ou de uma mensagem subliminar. A visualização da imagem não contextual mostra ao usuário qual é o produto ou marca, mas de forma indireta.
Esta técnica é usada, por exemplo, no exemplo acima do site da Elementor construído pela empresa de marketing digital Tecnologia AP, com sede em Oklahoma. O site da empresa usa uma imagem de fundo ampla e nítida que mostra um ângulo único dos arranha-céus de Oklahoma City.
Esta fotografia representa a proposta de valor da empresa, conforme declarado no texto herói do site: Construa seu negócio e veja-o crescer, tão alto quanto as torres de escritórios mais altas da cidade.
Assim que o olho humano vê as estruturas físicas dominando o céu, ele entende que esses profissionais de marketing estão trabalhando para fazer os negócios decolarem, crescerem.
Melhores Práticas:
- Certifique-se de que os visitantes entendam por que a imagem é relevante
Embora você não exiba um visual direto de seu produto em si, certifique-se de que conectar o valor do seu produto com sua imagem de herói não contextual ainda seja fácil de identificar. Os usuários não devem perder tempo pensando sobre sua relevância.
- Faça uma ligação clara entre a imagem principal e o texto principal
O texto principal que você coloca em conjunto com sua imagem deve estar diretamente relacionado ao seu conteúdo visual. É uma necessidade, mesmo que requeira várias iterações de seu texto e a escolha da redação.
- Crie um esquema de design coeso
As cores que você escolhe para os textos e fundos dos botões, cabeçalhos ou descrições devem combinar com a imagem ou arte do herói. Isso também se aplica a acentos clicáveis em seu site:
os elementos do menu de navegação, o logotipo, etc ...
Todos nós sabemos a importância de uma linguagem visual consistente para o prestígio do nosso site, a presença da marca e a credibilidade profissional. É aqui que os guias de estilo de design podem ser realmente úteis, especialmente para garantir que as imagens dos heróis estejam alinhadas com o design do seu site.
Como testar sua imagem de herói: os métodos que gostamos
Depois de começar a experimentar várias opções para sua imagem de herói, você pode avaliar imediatamente qual opção gera mais engajamento e obter informações sobre o design mais eficaz - e, finalmente, ficar com aquele.
Aqui estão alguns métodos de teste obrigatórios que são fáceis de configurar e fornecem uma riqueza de conhecimento para garantir que você esteja usando a melhor imagem de herói possível.
Teste A / B sua imagem de herói
O teste A / B exige que o designer crie duas ou mais opções para a seção do herói (sejam duas versões dos títulos e sua cópia, a própria imagem do herói, a seção de layout, tamanho da fonte ou qualquer outra coisa que você possa imaginar) - depende totalmente de você.
Imagine que você decidiu usar um modo de mesclagem quando os usuários passam o mouse sobre a imagem do herói, mas não sabe qual modo melhorará mais a experiência do usuário.
Execute um Teste A / B entre duas opções de modo diferentes (existem 13 opções de modo de mesclagem, afinal), permite que você experimente mais de um modo para ver qual obtém mais focos, cliques e, finalmente, mais engajamento.
Uma das etapas mais comuns e importantes no teste A / B da seção do herói é também testar pelo menos duas opções de botão de CTA - para identificar qual botão obtém mais conversões.
Especificamente, testar a cor de um botão de CTA é sempre uma experiência útil que permite entender qual cor de botão atrai e envolve mais os usuários. O teste A / B de cor de botão é muito popular entre os web designers porque é rápido e fácil de executar e dificilmente requer recursos de design adicionais.
Use ferramentas de mapa de calor para descobrir o comportamento do usuário
As ferramentas de mapa de calor identificam e analisam os locais onde os usuários clicam em uma página da web. Essas ferramentas permitem que os proprietários de sites e páginas de destino vejam exatamente como os usuários estão navegando ativamente no conteúdo. Isso é realizado quando a ferramenta identifica se os usuários estão ou não interagindo com elementos-chave (e como), como links, botões, opções e, claro, CTAs.
Aqui estão algumas informações que os proprietários de sites podem obter com o uso de ferramentas de mapa de calor:
- Os itens não clicáveis distraem os usuários.
- Os tamanhos dos botões são muito grandes ou muito pequenos.
- As cores dos botões não são visíveis.
Seja o herói do seu site
As tendências dos sites estão em constante evolução, adicionando novos recursos às possibilidades de web design. É sempre importante manter sua seção de herói na vanguarda de suas considerações de design - certificando-se de que ela sempre alcance seu potencial ao apresentar seu site às multidões.
Obtenha o Elementor Pro agora!
Conclusão
Aqui ! É isso neste artigo que mostra como fazer uma imagem de herói. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
