Voltar para todos os artigos
UX/UIComponents

Imagens: Por que sua foto de stock do hero está fazendo seu produto parecer barato

Fotos de stock genéricas fazem os visitantes saírem antes de ler seu título. Escolha imagens que criem confiança, aqui está como escolher as que aumentam a conversão.

6 min read
Imagens: Por que sua foto de stock do hero está fazendo seu produto parecer barato

Imagens: Por que sua foto de stock do hero está fazendo seu produto parecer barato

Você lançou sua página de destino. O hero tem uma foto de stock genérica de pessoas apontando para um laptop. Os visitantes chegam, olham uma vez e decidem que seu produto é esquecível antes de ler a headline.

As imagens definem o tom emocional de sua página em milissegundos. Os visitantes as processam antes de palavras. Imagens ruins não apenas parecem feias, fazem seu produto parecer barato, genérico ou não confiável. Boas imagens fazem o trabalho pesado que sua cópia não consegue. Este guia quebra como escolher essas imagens.

O que design de imagem bom realmente é

É a escolha deliberada de cada visual em sua página, hero, thumbnails, ilustrações, infográficos, para apoiar o que o visitante deveria sentir e entender.

Se uma imagem não está fazendo um trabalho, não deveria estar na página.

"Ilustrações e imagens em interfaces precisam ser intencionais: cada pixel deve ter um propósito." , Brad Frost

Os visitantes encontram significado em padrões. Visuais fortes reduzem trabalho mental, os visitantes chegam na mensagem sem ler. Visuais fracos adicionam ruído.

Por que imagens importam em uma página de destino

As imagens certas fazem três coisas de uma vez.

Confiança e emoção

Rostos, ambientes reais e fotografia autêntica sinalizam confiança. Uma fintech com ilustrações amigáveis reduz ansiedade. Uma ferramenta premium com screenshots nítidos sinaliza qualidade.

Capacidade de digitalização

Os visitantes não leem, eles digitalizam. Imagens viram âncoras que param o olho. Um screenshot claro, um diagrama rotulado, uma ilustração de recurso, tudo funciona como marcos visuais.

Conversão

Fotos de stock genéricas causam "cegueira de banner", os visitantes assumem que são anúncios e as pulam. Imagens autênticas (produto real, time real, screenshots reais) criam prova que converte.

Suas imagens estão funcionando?

Obtenha uma análise de IA instantânea de sua página contra 80+ princípios de conversão.

Escaneie Seu Site Grátis

Como usar imagens em sua página

Você precisa de uma abordagem em camadas, diferentes tipos de imagem para diferentes trabalhos.

1. Escolha o tipo de imagem certo

a. Imagens de hero

O rosto de sua página. Alto impacto, alta qualidade. O hero reforça a proposta de valor ou desperdiça espaço premium.

Imagem de hero reforçando proposição de valor

b. Thumbnails

Visualizações rápidas, em cards, listas ou galerias. Consistência de proporção importa mais que a imagem em si.

Thumbnails guiando usuários para conteúdo

c. Avatares

Representam usuários ou marcas. Logos para empresas, fotos reais ou gráficos limpos para usuários.

Avatares representando usuários e marcas

d. Gráficos e infográficos

Números e formas que explicam dados mais rápido que um parágrafo consegue.

Infográficos comunicando dados visualmente

e. Ilustrações

Para conceitos abstratos que fotografia não consegue capturar. Estilizadas, marcadas, customizadas, elas sinalizam personalidade.

Ilustrações estilizadas para identidade visual

2. Melhores práticas

Defina um ponto focal claro

O olho deveria saber onde pousar primeiro. Em layouts responsivos, garanta que o ponto focal não se corta no móvel.

  • Faça isto: object-fit: cover e temas intencionalmente enquadrados.
  • Não faça: Deixe a parte importante da foto se cortar em um viewport de 375px.

Otimize tamanho de arquivo

Alta qualidade não significa arquivos enormes. Imagens lentas matam UX e SEO.

  • Faça isto: WebP ou AVIF. Use srcset para servir arquivos menores para telas menores.
  • Não faça: Solte um PNG de 5MB para um thumbnail.

Acerte acessibilidade

Sempre forneça texto alt. Leitores de tela dependem disso.

  • Faça isto: Descreva a intenção, "fundador usando laptop em café" bate "imagem".
  • Não faça: Entupa palavras-chave ou deixe alt vazia em imagens importantes.

Maneiras comuns de quebrar isso

Fotos de stock fofas

  • O erro: Boardroom de genérico high-fives, "diverse team sorrindo para laptop".
  • O conserto: Screenshots de produto reais, fotos reais de time ou stock autêntico curado do Unsplash.

Overlays de texto ilegível

  • O erro: Texto branco sobre uma imagem de hero ocupada. Os visitantes não conseguem ler a headline.
  • O conserto: Overlay de gradiente escuro, blur, ou escolha imagens com espaço negativo intencional para texto.

Estilos visuais mistos

  • O erro: Ilustrações 3D, ícones flat e fotos grainy tudo na mesma página.
  • O conserto: Escolha um estilo e use em todos os lugares, minimalista, line art, claymorphism, seja qual for o fit da marca.

Como produtos reais fazem isso

Airbnb

Airbnb usa imagens de hero para vender aspiração. O visitante se imagina na rentabilidade antes de ler a headline. As fotos fazem o marketing.

Airbnb - Imagem de hero mostrando experiências inesquecíveis

Strava

Strava transforma dados em imagens, mapas de rotas, gráficos de performance, avatares de atletas. Os visuais fazem realizações parecerem pessoais e compartilháveis.

Strava - Mapas visuais e avatares personalizados

Veja como seu site se compara

Nossa IA verifica sua página contra os mesmos padrões usados por Airbnb e Strava.

Obtenha Sua Pontuação UX Gratuita

Princípios relacionados

Imagens vivem dentro de um sistema. Estes moldam como o seu se sente:

Iconografia

Quando um ícone pequeno faz o trabalho melhor que uma imagem pesada.


Recursos e leitura adicional

Storyset

Um banco massivo de ilustrações customizáveis.

Unsplash

Fotos de stock de alta qualidade livres de royalty.

Perguntas frequentes

Não Adivinhe Seu UX. Escaneie-o.

Envie suas telas ou cole sua URL para obter uma revisão de página de nível sênior em menos de 3 minutos.

Iniciar Escaneamento Grátis

Artigos relacionados