Tudo o que você precisa saber sobre o design de imagens de heróis

As imagens principais são as imagens grandes ou uma série de imagens exibidas com destaque em uma página inicial e, às vezes, usadas em designs de e-mail. Eles realmente desempenham um papel muito importante para todas as empresas, por isso é importante saber uma coisa ou duas sobre design de imagem de herói.

Por que você deve ter uma imagem de herói?

• Ele pode ajudá-lo a construir sua marca e contar a história da sua marca. Você pode usar essas imagens para fornecer informações sobre a história por trás de sua marca.
• Você também pode usá-lo para responder às perguntas mais frequentes de seus clientes ou resolver um problema sensível ao tempo.
• Imagens de herói também podem ser usadas para informar seus clientes sobre a proposta de valor de sua marca.
• Se você tiver um anúncio importante para fazer, como por exemplo, uma venda que acontecerá em breve, isso pode ajudar. Essa é uma ótima ideia para os e-mails que você enviará também.
• As imagens de herói podem ser usadas para apresentar um produto ou uma linha de produtos completa.

O que deve ser incluído em um design de imagem de herói?

Existem três elementos principais que você precisa ter em seu design de imagem de herói para torná-lo perfeito para sua marca. Na verdade, ele funcionará como uma imagem de chamada para ação se for executado corretamente.

• A imagem em si deve apresentar fotografia de alta resolução, design gráfico ou imagens atraentes. A resolução da imagem será listada para que você saiba o tamanho que as imagens devem ter.
• Você também deve ter um conteúdo curto, conciso e poderoso que possa ser adicionado na imagem. Isso deve levar imediatamente a mensagem para casa.
• Todas as imagens de heróis precisam apresentar um texto ou botão de chamada para ação muito poderoso. Alguns bons exemplos seriam “Compre agora”, “Saiba mais”, “Leia nossa história” ou “Compre agora”.

Práticas recomendadas para criar imagens Hero

Use imagens de alta qualidade

É muito importante que suas imagens sejam de alta qualidade, sejam elas em um site ou em um e-mail. Devido ao tamanho das telas de computadores e smartphones hoje, os clientes podem facilmente dizer se o design da sua imagem de herói parece confuso ou pixelado. Se você quiser evitar esses problemas, sempre poderá redimensionar suas imagens reduzindo-as de tamanho. Mas nunca aumente o tamanho. Assim que você fizer isso, sua imagem ficará pixelizada.

Quando se trata da altura e largura da imagem do herói, isso dependerá do layout específico que você possui. Talvez você queira que sua imagem principal ocupe toda a largura da página? Nesse caso, use VW ou VH (o que significa a largura ou altura total da área da janela de visualização).

Você também deve certificar-se de personalizar todas as imagens de estoque usadas e de que o plano de fundo não esteja excessivamente ocupado, especialmente se você estiver adicionando texto. Usar contraste de cores por meio de sobreposições e telas também é uma ótima maneira de trazer clareza ao texto e ao plano de fundo. Por exemplo, observe o texto em branco na imagem abaixo.

Tempos de carregamento das imagens

Quando você está usando imagens de alta qualidade, os tempos de carregamento desempenham um papel crítico. Quando o tempo de carregamento sobe de 0,4 para 0,9 segundos, reduz o tráfego em 20%. Portanto, algumas das práticas recomendadas que você deve seguir para evitar isso são:

• Redimensionando a imagem você mesmo e não deixando o navegador fazer isso automaticamente.
• Comprimindo a imagem que você escolheu usando o Photoshop. Você também pode usar ferramentas de compactação destinadas especificamente para isso.
• Experimente e trabalhe com imagens PNG e JPG para ver qual tipo funciona melhor sem aumentar o tempo de carregamento.

Demonstração para atrair apelo

Seu design de imagens de herói deve mostrar ao público o que você está vendendo exatamente como é. Por exemplo, se você deseja vender guarda-chuvas personalizados, pode exibir uma imagem de pessoas usando-os na chuva.

Se sua imagem estiver indicando um slogan ou informando aos clientes sobre uma venda, certifique-se de que haja apenas uma pequena quantidade de cópia usada. Outra coisa importante a ser observada é que as legendas em suas imagens serão lidas 300% mais do que a cópia do corpo. Então, deixe que isso lhe dê uma ideia de quão precisa, compatível e direcionada sua legenda deve ser para a imagem do herói.

Outra tática que você pode tentar é usar uma série de banners de heróis, em vez de uma única imagem, que combine imagens de alta qualidade com um apelo à ação forte e atraente.

Manter a relevância

Sua imagem de herói é como uma introdução à sua mensagem. Isso ajudará seus clientes a entender o que eles podem esperar do restante do seu e-mail ou do seu site. Se a imagem não transmitir claramente sua mensagem, ela também não entregará valor ao cliente.

Também seria um desperdício completo do espaço que você usou para o design. Ainda mais perigoso é, se a imagem não corresponder ao preconceito do cliente sobre o produto ou serviço. Então será apenas confuso.

Para manter a relevância, você precisará considerar o seguinte:

• A imagem usada é uma visualização da sua palavra-chave alvo?
• Sua imagem dá clareza sobre o propósito do seu site ou e-mail?
• O fluxo da página ou do e-mail, levando até o call to action, está sendo suportado pela imagem usada?
• Quanta credibilidade e autenticidade a imagem traz para sua marca?
• Os benefícios e a relevância são potencializados pela imagem?
• A imagem desencadeia emoções que vão obrigar os clientes a fazer essa chamada à ação?
• Sua imagem pode retratar o cliente como o herói depois de adquirir o produto ou serviço?

Colocando ênfase na chamada para ação

Anteriormente, apontamos que é importante ter o apelo à ação no design da imagem do seu herói. Agora, vamos ver o que você pode fazer para chamar a atenção imediatamente para isso. Por exemplo, seu call to action não deve competir com a imagem. No entanto, deve realmente se destacar. O exemplo abaixo é a combinação perfeita de entregar uma mensagem relevante e emocional, mantendo o peso do botão de call to action em proporção à imagem geral. O uso da cor aqui também é muito importante.

Para garantir que o CTA se destaque, você pode realizar um teste de desfoque na imagem. Isso ajudará você a ver se os olhos do cliente serão atraídos para onde você precisa. Você só precisa fazer uma captura de tela do site ou do design do e-mail e aplicar um efeito de desfoque usando o Adobe XD. Quando a imagem estiver desfocada, veja o que chama sua atenção. Não gosta do que vê? É hora de revisar então.

Mostre pessoas reais, não pessoas 'realmente falsas'

Se você for incluir pessoas em seu design de imagem de herói, mostre imagens de pessoas reais que representam sua marca. Evite imagens de banco de imagens que mostrem apenas uma pessoa com aparência profissional com um sorriso largo olhando para a tela. Essas imagens são uma dúzia e apenas parecem sem sentido e falsas. Testes de usabilidade realizados mostram que tais imagens são apenas decorativas, e que não agregam nenhum valor real. Também pode tirar aspectos positivos da experiência do usuário.

Considere usar ilustrações que tenham uma sensação pessoal

As ilustrações também estão se tornando uma escolha popular para o design de imagens de heróis. Se você pode adicionar esse toque pessoal a uma ilustração, eles podem realmente trazer muita personalidade à sua imagem. O uso de ilustrações lhe dará um melhor controle sobre os aspectos técnicos e relacionados ao conteúdo da imagem, pois você pode personalizá-los o quanto quiser. Na verdade, se você quiser ter um melhor recall da marca, considere ilustrações personalizadas para sua imagem de herói.

Para que uma ilustração seja funcional, ela deve ser facilmente reconhecível. A mensagem que ele envia deve ser vista de forma semelhante, não importa quem seja o usuário. Se houver mais de uma ilustração, todas devem ter consistência. Em outras palavras, precisa parecer que a mesma pessoa criou todas as ilustrações.

Se você precisar de ajuda com seus designs de imagens de heróis, uma equipe dedicada do Kimp está sempre pronta para ajudar.

Imagens impressionantes de heróis para inspiração

Agora que você conhece o básico, aqui estão alguns ótimos exemplos de imagens de heróis que funcionam muito bem.

Esta imagem usa um conceito 3D. Ele também tem um fundo nítido e atraente com ótima funcionalidade.

A Apple, como todos sabemos, é uma marca que tem tudo a ver com o seu design. Como tal, faz todo o sentido que eles mostrem seus produtos em suas imagens de heróis – com estilo.

O Spotify realmente causa impacto aqui por meio do uso de um belo contraste de cores que funciona bem para tornar essa oferta realmente pop. Além disso, os usuários também podem percorrer várias imagens de heróis em vez de apenas uma.

Este design de imagem de herói da marca Fivefootsix é uma tela preta cheia que possui um slogan destacado que é colocado bem no centro. A natureza deste design e o posicionamento do texto chamam sua atenção imediatamente.

Seja um herói e acerte o design da imagem do seu herói

Criar um ótimo design de imagem de herói é muito importante. Isso não apenas ajudará você a projetar a personalidade da sua marca e a criar reconhecimento, mas também a aumentar as vendas! Você também deve pensar em quantas vezes você gostaria de alterar o design da sua imagem principal para que as pessoas que visitam repetidamente a página do seu site sintam que há algo novo para elas conferirem. Com e-mails, certifique-se de que suas imagens sejam atraentes o suficiente para fazer o leitor navegar e não apertar o botão de exclusão.

Quando se trata de seu design, deixe sua imagem clara, poderosa, cuidadosamente pensada e única. O principal objetivo aqui é que seu cliente se sinta atraído pela imagem e compelido a ler o que você tem a dizer.