Dicas de design de imagens de herói e como usá-las em todo o Divi

Publicados: 2017-06-19

No tutorial de hoje, vamos compartilhar algumas dicas sobre como projetar uma boa imagem / seção de herói. As dicas que serão compartilhadas podem ajudá-lo a criar seções de herói eficazes para o seu próprio site ou o site de um cliente.

Em geral, há muitas maneiras diferentes de estilizar uma imagem de herói e a maneira como você estiliza geralmente depende do assunto do site. É por isso que lidaremos com algumas dicas gerais de design que se aplicam a todos os tipos de sites e que todos devem conhecer.

Depois de dar uma olhada nas diferentes dicas, também compartilharemos uma seção de herói de exemplo que segue as dicas e mostraremos como recriar este exemplo com Divi como seu construtor de site.

O exemplo que mostraremos a você como fazer, passo a passo, se parece com isto:

Escolhendo a imagem certa

Ao projetar um site, e uma imagem de herói em particular, é tudo uma questão de voltar ao básico. Você deve levar em consideração que a seção de heróis será a primeira coisa que as pessoas verão e experimentarão ao visitar seu site. Isso influenciará o comportamento deles e determinará quais sentimentos eles vinculam ao seu site.

Relevância

Para começar, encontre uma imagem que esteja de acordo com o tema do seu site. É a primeira coisa que eles verão no seu site e a qual associarão.

Para encontrar relevância, pergunte a si mesmo duas perguntas:

  • Qual é o principal valor agregado que meu produto / serviço / site oferece?
  • Que tipo de imagem reflete esse valor agregado?

Sempre se trata do que seus visitantes gostariam de ver e da facilidade com que eles podem entender a imagem completa. As pessoas tendem a visualizar tudo; até mesmo uma empresa ou negócio. É por isso que você deve ser aquele que lhes dá uma imagem de herói relevante desde o início de sua estada.

Alguns dos estilos de imagens de herói mais comuns baseiam-se em uma (ou mais) das seguintes coisas:

  • Produto (apresentando um produto como uma imagem)
  • Contexto (apresentando uma imagem que conta uma história junto com o conteúdo fornecido)
  • Emoção (usando gatilhos emocionais, como pessoas que sorriem)
  • Ação (usando uma imagem que expressa uma determinada ação vinculada ao tema do seu site)

Escolha um desses focos e tente passar a mensagem da melhor e mais criativa possível. Veja se você pode encontrar imagens gratuitas que sejam relevantes o suficiente e, se não for, compre fotos de banco de imagens ou tente fazer as suas próprias.

Quanto mais relacionada à empresa for sua imagem de herói, melhor. É por isso que fazer suas próprias imagens de forma profissional geralmente é a coisa mais recomendável. Mas, nos casos em que faltam recursos, imagens de banco de imagens ou imagens gratuitas também podem ser suficientes.

Alta qualidade

Outro fator realmente importante para fazer a escolha certa para a imagem do seu herói é a qualidade. É óbvio, mas você ficaria surpreso ao ver quantos sites não estão à altura disso.

Você deseja que a aparência seja o mais profissional possível porque deseja que essa qualidade seja associada aos serviços ou produtos que você representa em seu site.

Recomendamos o uso de uma imagem com largura mínima de 1920 px, conforme mencionado em nosso guia definitivo para o uso de imagens no Divi.

Considere o modo de tela inteira

Usar a imagem do herói em uma seção do herói que está no modo de tela inteira também é usado com frequência. Ao tornar sua seção de herói em tela cheia, você tem a oportunidade de interagir com seu público em um nível mais profundo. Você está colocando mais foco no que está sendo fornecido na seção de heróis, então realmente deve valer a pena.

Se você está pensando em fazer uma seção de herói em tela cheia, certifique-se de que é a melhor parte do seu site, pois será a parte do site onde você terá mais interação. Ao interagir com eles em um estágio inicial de sua visita, você aumenta as chances de interagir com eles em todo o restante do site. Da mesma forma, se uma seção de herói em tela cheia não valer a pena, pode desencorajar as pessoas a continuarem sua permanência em seu site.

Centralizar ou não centrar

A maioria das pessoas pode concordar com o fato de que a simetria é muito atraente para os olhos. No entanto, vemos tanto isso na web que podemos não pensar mais nele como especial. Você pode fazer muitas coisas bonitas mesmo quando não está centrado.

Mas, se você não quer correr o risco, você sempre pode voltar a centralizar todo o conteúdo que está criando para a seção do seu herói, incluindo tornar a imagem do herói simétrica.

Criar contraste

A imagem do herói geralmente contém três coisas: a própria imagem, o conteúdo e o CTA. Você quer que cada um deles desempenhe seu próprio papel na experiência de cada visitante, então eles precisam ter um senso de harmonia entre eles. É por isso que é importante criar um certo equilíbrio com o uso de cores. Adicionar uma sobreposição de cor ou gradiente à imagem geralmente resolve.

Desde que as novas opções de design de plano de fundo foram disponibilizadas com o construtor Divi, criar contraste se tornou realmente fácil. Você pode brincar com as cores que estão sendo usadas em sua imagem de fundo para criar a melhor combinação possível de cor e contraste para sua seção de herói, mas voltaremos a isso quando estivermos recriando a seção de herói abaixo.

Em vez disso, tente um fundo de vídeo

Se você gostaria de dar uma vida extra ao seu site, você também pode considerar o uso de um vídeo em vez de uma imagem. Ao escolher um vídeo para a seção do herói, aplicam-se as mesmas dicas das imagens.

Você pode encontrar diferentes vídeos online que podem corresponder ao site que você está criando ou pode criar o seu próprio. Coverr é um site que fornece vídeos que podem ser usados ​​para seções de heróis em particular. Eles fornecem ao seu público diferentes tipos de vídeos curtos que são excelentes para construir sites sem muitos recursos.

Eles enviam 7 novos vídeos todas as segundas-feiras e os vídeos que compartilham são de uso gratuito - mesmo para fins comerciais.

CTA que faz a diferença

Uma grande imagem e seção de herói sempre acaba tendo um propósito. Esse objetivo é mais comumente uma interação entre o visitante e a pessoa ou empresa por trás do site. Você deseja conhecer seus visitantes e, com sorte; transformá-los em visitantes leais ou clientes potenciais.

Para ter certeza de que você realmente alcançou essa meta e cumpriu o propósito, um bom CTA pode ser útil. Ao projetar um CTA, também há coisas a serem levadas em consideração. Você deseja aumentar a eficácia do seu CTA e garantir que a imagem do herói forneça os resultados pretendidos.

Ao projetar um CTA, leve o seguinte em consideração:

  • Certifique-se de que o CTA é uma das primeiras coisas que as pessoas notam (por meio da cor e do contraste)
  • Pense na cópia do CTA que você está usando. Você quer que seja persuasivo
  • Certifique-se de que o que segue depois de clicar no CTA vale a pena (agregue valor para obter resultados)

Vamos começar a criar (área de trabalho)

Agora que examinamos as dicas gerais sobre imagens de heróis, é hora de colocá-las em prática. O exemplo que fizemos é voltado para o produto, mas incluímos outros fatores também (como contexto).

Verificamos se há contraste suficiente, um bom CTA, uma imagem de alta qualidade e, embora tenhamos usado uma seção padrão em vez de uma seção de largura total, ajustamos manualmente as subcategorias de Espaçamento para garantir que a seção do herói pareça estar em tela inteira nos desktops.

Escolha uma seção

Escolha entre uma seção de largura total ou uma seção regular. Como a seção padrão é mais flexível, vamos escolher uma seção padrão e transformá-la em uma seção hero que atenda às nossas necessidades.

Opções de fundo

A imagem que será representada em nossa seção de heróis é um produto, mas também usamos o contexto e a emoção. Você pode ver que o ambiente em que a foto foi tirada pode estar relacionado à aventura. Também estamos usando emoção por meio do conteúdo fornecido na imagem do herói.

Você está dizendo às pessoas para 'levarem seu tempo' enquanto vivem seu estilo de vida aventureiro. Você também está dizendo a eles que não há problema em buscar as coisas que mais desejam na vida e que este relógio é o toque final ideal para essa jornada.

A imagem usada neste exemplo vem do Unsplash. Escolha qualquer imagem que deseja usar como imagem de fundo e abra as configurações da seção em que está trabalhando. Na guia Conteúdo, você encontrará a Subcategoria do plano de fundo. Comece adicionando a imagem de fundo.

Em seguida, queremos colocar uma sobreposição de cor na imagem que estamos usando. Isso remete à dica 'Criar contraste' que discutimos acima. Vamos adicionar uma certa escuridão à imagem para criar um melhor equilíbrio com os Módulos de Texto e Módulo de Botão que usaremos.

Na maioria dos casos, uma cor de sobreposição cinza é usada. É a cor mais padrão para usar como sobreposição, o que não mudará muito as cores da imagem. O código de cor que usamos é '#BFBFBF'.

Em seguida, volte para a imagem de fundo e aplique Background Image Blend. Nesse caso, usaremos 'Multiply'. Altere a posição da imagem de fundo para 'Superior esquerdo' também.

Configurações de linha

Continuando, vamos adicionar uma linha de largura total à seção que criamos. Abra as configurações e adicione '10% 'ao preenchimento superior na subcategoria Espaçamento da guia Design.

Em seguida, vá para a guia Avançado e desative a linha para telefone e tablet na subcategoria Visibilidade.

Módulo de Primeiro Texto

Depois disso, vamos adicionar o primeiro Módulo de Texto. Abra as configurações e digite o título que deseja usar na caixa de conteúdo na guia Conteúdo. Vá para a guia Design e faça as seguintes modificações na subcategoria Texto:

  • Orientação do texto: direita
  • Fonte do Texto: Lagosta
  • Tamanho da fonte do texto: 80
  • Cor da fonte do texto: #FFFFFF
  • Altura da linha de texto: 1,7em

Role para baixo na mesma guia, adicione '25% 'à Margem superior e' -12% 'à Margem direita na subcategoria Espaçamento.

Segundo Módulo de Texto

Adicione outro Módulo de Texto, digite o texto na caixa de conteúdo e vá para a guia Design. Na subcategoria Texto, aplique as seguintes alterações:

  • Orientação do texto: direita
  • Fonte do texto: Montserrat
  • Tamanho da fonte do texto: 15
  • Cor da fonte do texto: #FFFFFF
  • Altura da linha de texto: 1,7em

Role para baixo na mesma guia e adicione '4%' à Margem superior e '-12%' à Margem direita na subcategoria Espaçamento.

Módulo de Botão

Continue adicionando um Módulo de botão e digitando o texto do botão. Em seguida, vá para a guia Design e altere o Alinhamento do botão para 'Direito'.

Role para baixo na mesma guia e faça as seguintes modificações na subcategoria do botão:

  • Usar estilos personalizados para botão: Sim
  • Tamanho do texto do botão: 20
  • Cor do texto do botão: #FFFFFF
  • Cor de fundo do botão: # E02B20
  • Largura da borda do botão: 2
  • Cor da borda do botão: # E02B20
  • Raio da borda do botão: 3
  • Fonte do botão: Montserrat
  • Estilo da fonte do botão: maiúsculo

Versão para celular e tablet

Ao criar uma imagem principal para uma tela de desktop, existem muito mais possibilidades. Para telefones e tablets, por outro lado, você precisa, de alguma forma, encontrar uma maneira de fazer tudo parecer bom de uma forma simples.

Vamos centralizar tudo quando alguém visitar seu site com telefone ou tablet. Vá em frente e clone a linha que criamos para desktop e coloque-a na mesma seção.

Configurações da seção

Abra as configurações de suas seções e desative a seção da área de trabalho na subcategoria Visibilidade da guia Avançado.

Módulo de Primeiro Texto

Vá para a guia Design e faça as seguintes alterações na subcategoria Texto:

  • Orientação do Texto: Centro
  • Tamanho da fonte: 50

Role para baixo na mesma guia, apague a margem direita e altere a margem superior para '20% '.

Segundo Módulo de Texto

Na guia Design do segundo Módulo de Texto, altere a Orientação do Texto para 'Centro'.

Role para baixo na mesma guia, apague a Margem Direita e mantenha a Margem Superior.

Módulo de Botão

Por último, mas não menos importante, abra o Módulo de Botão e altere o Alinhamento de Botão para 'Centro' também.

Pensamentos finais

Neste post, examinamos algumas dicas de design que você deve levar em consideração ao criar uma imagem / seção de herói. Também compartilhamos um exemplo de seção de herói que segue essas dicas. Se você tiver alguma dúvida em relação a este tópico ou se tiver sugestões, deixe um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!