O que é uma imagem hero de landing page?
A imagem hero de uma landing page é o grande visual no topo da página, a primeira coisa que o visitante vê. Ela define o clima, apresenta a oferta e decide se a pessoa continua rolando ou vai embora. Como pesa tanto, uma foto genérica de banco de imagens raramente resolve.
O Morphic gera uma imagem hero feita para a sua página, em vez de emprestada de uma biblioteca. Descreva a cena, o clima e o espaço para o título. Gere opções no navegador, refine a que servir e baixe em HD. O resultado combina com a sua mensagem, e não com a foto mais parecida que existia. Funciona bem em páginas de captura, de venda de um curso online ou de lançamento de produto.
Planeje a composição em torno do texto
A imagem hero divide o quadro com um título e um botão. Decida onde o texto vai ficar e planeje o visual para essa área continuar limpa. Pedir espaço livre em um lado da imagem mantém o título legível por cima.
Descreva a cena e o clima
Diga ao Morphic o que a imagem deve mostrar e como deve parecer. Pode ser clara e cheia de energia, calma e sofisticada ou ousada e dramática. Nomeie o assunto, o cenário e a luz. Gere algumas direções para comparar os climas antes de escolher.
Refine até combinar com a marca
Ajuste a opção escolhida até as cores e o tom combinarem com a sua marca. Mexa na paleta, na luz ou no estilo para o hero parecer parte do site, e não um encaixe de banco de imagens. Quando uma direção está perto, refaça o estilo em vez de recomeçar.
Exporte nos tamanhos que a página pede
O hero costuma pedir uma versão larga para o desktop e um corte mais alto para o celular. Adapte a imagem às duas proporções para o assunto continuar enquadrado em qualquer tela, e baixe cada uma em HD. Como o acesso pelo celular pesa muito no Brasil, comece pela versão vertical. Confira se a área do texto fica livre nas duas.
O mesmo produto no hero, com espaço livre para o texto em lados opostos.
O que faz uma boa imagem hero
| Qualidade | O que significa | Por que importa |
|---|---|---|
| Espaço para o texto | Área limpa para o título e o botão | A mensagem continua legível sobre a imagem |
| Ponto focal claro | Um assunto que o olho vê primeiro | O visitante entende a oferta num relance |
| Tom da marca | Cores e clima combinam com o site | A página parece pensada, e não montada de pedaços |
| Enquadramento responsivo | Funciona em telas largas e altas | O hero se sustenta no desktop e no celular |
Morphic vs banco de imagens
| Morphic | Bibliotecas de banco de imagens | |
|---|---|---|
| Custo | Uma só ferramenta no navegador | Licenças por imagem que se acumulam |
| Tempo | Um hero sob medida em uma sessão no navegador | Horas procurando algo parecido |
| Habilidade necessária | Escrever um prompt claro | Habilidade de busca e edição para encaixar |
| Adequação à mensagem | Gere exatamente a sua cena | Ceder à foto mais próxima do banco |
Perguntas frequentes
Peça espaço livre no lado em que o texto vai ficar. Planejar a composição em torno do texto mantém o título legível, em vez de brigar com um fundo carregado.
Pode. Refine a imagem gerada até a paleta e o tom combinarem com a marca. Mexa nas cores e na luz em vez de recomeçar, quando a direção está perto.
Em geral, sim. Exporte uma versão larga para o desktop e um corte mais alto para o celular. Assim o assunto continua enquadrado e a área do texto fica livre em qualquer tela.
Exporte em HD para a imagem continuar nítida em telas grandes e de alta densidade. Partir de uma geração limpa mantém a qualidade em todos os tamanhos.
Pode. Escreva o prompt em português e descreva o produto, o cenário, o clima e o lado em que o título vai ficar. Gere algumas versões e escolha a que combina com a oferta da página.
Pode. As imagens hero que você cria com o Morphic são suas para publicar nas páginas de marketing e nas campanhas.