Hero image (imagem de destaque)

A imagem grande no topo da tela, a primeira coisa que a pessoa vê ao chegar.

Hard

O que é

Hero image é o visual dominante no topo de uma página, landing ou tela de app. Ela geralmente ocupa a largura da viewport e costuma vir acompanhada de um título, uma frase de apoio e, às vezes, um botão de ação. O papel dela é causar impacto imediato, dar contexto e puxar a pessoa pra dentro da experiência.

Pra quem desenha produto, o hero é onde a estética encontra a clareza. Não basta ser bonita, porque ela precisa refletir o valor e a narrativa do produto. A escolha de imagem, a tipografia e o layout têm que conversar entre si, e tudo isso precisa funcionar no celular sem perder o sentido, já que é nele que a maior parte das pessoas vê o hero primeiro.

A acessibilidade também conta aqui. A imagem precisa de um alt descritivo, o texto sobre ela precisa de contraste e tratamento de fundo pra continuar legível, e um hero em vídeo que toca sozinho precisa oferecer controle de pausa.

Em uma frase

O hero precisa mostrar o produto em uso, não uma foto genérica de banco de imagem.

A pergunta que ele responde

Que imagem eu coloco no topo da página pra prender a pessoa nos primeiros segundos?

Quando usar

Ajuda no topo de landing, home ou tela de entrada, quando a primeira impressão precisa comunicar valor rápido.

Como não usar

O cuidado é não encher de imagem genérica de banco, sem relação com o produto, nem empilhar texto ilegível sobre uma foto de baixo contraste.

Na prática

Pense numa landing de SaaS. O hero mostra a interface em uso, com um título que diz o valor em uma frase só e um botão de teste logo abaixo, pronto pra quem se interessou.

Não confunda com

Vale separar hero image de pura decoração. Quando funciona de verdade, ela carrega contexto e direciona pra ação principal. Uma imagem bonita e vazia não chega a ser um hero, é mais um enfeite que ocupa espaço sem trabalhar.

D

Em inglês

Hero Image

Pronúncia

rí-ro

Também chamado de

hero, imagem hero, banner principal

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre hero images e usabilidade