Atualizas a tua página inicial numa terça-feira à noite. O título está bem, as fotos estão bem, mas os visitantes continuam a sair em segundos. Começas a perguntar-te se a hero image será a peça que tens andado a ignorar. Muitas vezes é. Pequenas decisões visuais moldam as primeiras impressões mais depressa do que a maioria dos donos de negócio imagina.
Uma hero image é o grande elemento visual no topo de uma página que apoia a mensagem principal. Este capítulo explica o que isto significa em linguagem simples, porque afeta o teu website e o teu marketing e como aplicar isto sem te perderes em jargão. Vais ver também como o tema «imagens de fundo para websites» se encaixa no mesmo quadro. Vamos vê-lo passo a passo.
O que é uma hero image e como escolher uma
Uma hero image é o grande elemento visual no topo de uma página que apoia a mensagem principal.
Na prática, a hero image aparece nos cabeçalhos do teu website, nas páginas de serviços, nos gráficos para redes sociais e nos materiais impressos. Quando usas o termo certo, consegues briefar designers mais depressa e rever rascunhos com confiança.
Ideias relacionadas, como imagens de fundo para websites, ligam-se diretamente a isto. Tem-nas presentes ao ler o resto deste módulo.
Define o ambiente antes de os visitantes lerem o texto.
Porque é que a hero image e a forma de a escolher importam para o teu negócio?
Os clientes avaliam a credibilidade pelo layout antes de lerem cada palavra. Uma estrutura visual clara reduz o atrito e torna as ofertas mais fáceis de perceber.
Os layouts acima da dobra dependem muito da escolha da hero image.
Escolhe fotos com um assunto claro e com espaço para sobrepor o texto do título.
Se queres ver como isto se liga a temas vizinhos, lê a seguir o que é uma hero image e SEO de imagens.
Lista prática que podes usar hoje
Escolhe fotos com um assunto claro e com espaço para sobrepor o texto do título.
Quando reveres uma página, pergunta-te se a hero image aparece logo no primeiro scroll no telemóvel. Se não, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez a diferença para a hero image no teu site.
Partilha esta lista com quem atualiza o teu site, para que o tema «imagens de fundo para websites» se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para que as alterações de design se liguem aos resultados do negócio e não apenas ao gosto pessoal.
Como este tema se liga à tua marca em geral
As escolhas visuais raramente vivem numa só página. Os layouts acima da dobra dependem muito da escolha da hero image.
As tuas publicações nas redes sociais, os teus emails e as tuas peças impressas devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras tipográficas que usas na web.
Quando os elementos visuais da marca se vão afastando uns dos outros, os clientes sentem uma discrepância subtil, mesmo que não saibam explicá-la.
Usa exemplos de texto alternativo para comparares notas com um capítulo relacionado deste módulo.
Define o ambiente antes de os visitantes lerem o texto.
Perguntas que muita gente ignora
Termos secundários como imagens de fundo para websites e above the fold ajudam-te a procurar exemplos mais aprofundados e a comparar o teu trabalho com os padrões habituais.
Os layouts acima da dobra dependem muito da escolha da hero image.
Escreve uma alteração de antes e depois que vais testar numa página real esta semana. Pequenos ajustes medidos valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre a hero image reduz os ciclos de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para resolver muitos problemas de layout e de estilo. Um editor visual permite-te ajustar espaçamentos, cores e tipografia enquanto vês a pré-visualização em telemóvel e em computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperares por um programador a cada pequeno ajuste. Abre o criador de websites quando quiseres aplicar o que aprendeste.
Quando publicares atualizações, volta a ver o que é uma hero image e SEO de imagens, para que o módulo continue ligado na tua cabeça.
Já tens uma forma prática de olhar para a hero image. Usa-a quando reveres o teu site, aprovares materiais de marketing ou briefares um designer. Continua com SEO de imagens e exemplos de texto alternativo para manteres o ritmo neste módulo.
Perguntas frequentes
Quanto tempo leva a melhorar a hero image?
A maioria das pequenas empresas vê páginas mais claras ao fim de algumas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela tua página inicial e depois estende as mesmas regras às páginas de serviços e de contacto.
Precisas de um designer para trabalhar na hero image?
Um designer ajuda em rebrandings complexos, mas muitas correções relacionadas com a hero image podem ser feitas por ti, quando sabes o que procurar. Usa o que é uma hero image em conjunto com este capítulo para teres orientações relacionadas.
O WEMASY pode ajudar-te a aplicar a hero image no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares o layout, as cores e a tipografia sem código. Abre o criador de websites para atualizares modelos e pré-visualizares as alterações no telemóvel.
Qual é o erro mais comum quando se trata da hero image?
As pessoas tentam corrigir tudo de uma vez em vez de uma página de cada vez. Escolhe uma única prioridade, como a legibilidade ou o contraste, e depois vê SEO de imagens para a melhoria seguinte.
Como é que a hero image se liga ao SEO?
Uma hierarquia visual clara e uma tipografia legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de pesquisa acompanham. Combina as correções de design com uma boa estrutura de conteúdo para obteres os melhores resultados.
Depois da hero image, o que deves aprender a seguir?
Continua com o que é uma hero image e SEO de imagens neste livro, para construíres um sistema visual completo para a tua marca online.