Um concorrente parece cuidado em todos os ecrãs. Outro parece apertado e desatualizado, apesar de ambos venderem serviços semelhantes. A diferença costuma estar no tema «o que é uma hero image» e nos hábitos que estão por trás. Notas logo a diferença, mesmo que ainda não saibas dizer todas as regras.
Uma hero image num website refere-se, em concreto, ao banner visual principal das páginas-chave. 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 «hero image» se encaixa no mesmo quadro. Vamos vê-lo passo a passo.
O que é uma hero image num website
Uma hero image num website refere-se, em concreto, ao banner visual principal das páginas-chave.
Na prática, o tema «o que é uma 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 hero image, ligam-se diretamente a isto. Tem-nas presentes ao ler o resto deste módulo.
Deve reforçar a clareza da oferta, não distrair dela.
Porque é que uma hero image num website importa 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 ficheiros de hero image têm de ser comprimidos para carregarem depressa.
Evita fundos carregados atrás de títulos longos no telemóvel.
Se queres ver como isto se liga a temas vizinhos, lê a seguir SEO de imagens e exemplos de texto alternativo.
Lista prática que podes usar hoje
Evita fundos carregados atrás de títulos longos no telemóvel.
Quando reveres uma página, pergunta-te se o tema «o que é uma 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 o tema «o que é uma hero image» no teu site.
Partilha esta lista com quem atualiza o teu site, para que o tema «hero image» 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 ficheiros de hero image têm de ser comprimidos para carregarem depressa.
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 tipos de ficheiro de imagem para comparares notas com um capítulo relacionado deste módulo.
Deve reforçar a clareza da oferta, não distrair dela.
Perguntas que muita gente ignora
Termos secundários como hero image e above the fold ajudam-te a procurar exemplos mais aprofundados e a comparar o teu trabalho com os padrões habituais.
Os ficheiros de hero image têm de ser comprimidos para carregarem depressa.
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 o tema «o que é uma 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 SEO de imagens e exemplos de texto alternativo, para que o módulo continue ligado na tua cabeça.
Já tens uma forma prática de olhar para o tema «o que é uma hero image». Usa-a quando reveres o teu site, aprovares materiais de marketing ou briefares um designer. Continua com exemplos de texto alternativo e tipos de ficheiro de imagem para manteres o ritmo neste módulo.
Perguntas frequentes
Quanto tempo leva a melhorar o tema «o que é uma 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 no tema «o que é uma hero image»?
Um designer ajuda em rebrandings complexos, mas muitas correções relacionadas com o tema «o que é uma hero image» podem ser feitas por ti, quando sabes o que procurar. Usa SEO de imagens em conjunto com este capítulo para teres orientações relacionadas.
O WEMASY pode ajudar-te a aplicar o tema «o que é uma 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 do tema «o que é uma 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ê exemplos de texto alternativo para a melhoria seguinte.
Como é que o tema «o que é uma 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 do tema «o que é uma hero image», o que deves aprender a seguir?
Continua com SEO de imagens e exemplos de texto alternativo neste livro, para construíres um sistema visual completo para a tua marca online.