Crie a imagem Perfect Hero usando o contraste
Quer fazer uma ótima primeira impressão? Começa com o cabeçalho do seu site. A imagem que um usuário vê deixa uma impressão - boa ou ruim - e determina se o usuário clica e continua ou sai do site.
Essa é uma tarefa difícil para uma única imagem.
O elemento chave para criar uma imagem de herói que atraia os usuários e os mantém se movendo em torno do design é o contraste. (Sério! Tudo volta à teoria do design 101.) Uma cabeça que apresenta elementos contrastantes em tamanho, cor e escala fornece a mistura certa de interesse visual e informa aos usuários como interagir com o design. Aqui estão algumas maneiras de maximizar o contraste no caminho para criar uma imagem de herói perfeita.
Colheita Estrategicamente
A imagem do herói não precisa preencher a "primeira" tela nos dispositivos. Não seja pego nessa armadilha.
Cortar a imagem para impacto com base no conteúdo nela. Considere os outros elementos que são importantes para os usuários quando eles acessam a página e também fazem acomodações para eles. Dependendo desta estrutura, isso pode significar que a imagem do herói é dimensionada para ser maior ou menor que a janela do navegador (vamos considerar mais resoluções padrão para fins de argumentação).
Antes de recusar a ideia, considere por um momento.
- Uma imagem superficial ajudará a visualizar outro conteúdo.
- Uma imagem incomumente profunda incentivará os usuários a rolar por mais.
- Qualquer forma incomum chamará atenção.
Considere a animação
Você não precisa criar uma experiência cinematográfica completa para adicionar imagens em movimento ao cabeçalho do herói. Os menores toques de movimento criam contraste suficiente para atrair os olhos.
Movimentos sutis, como o avião voando através da imagem para o Bar Z Winery, fornecem esse elemento de contraste sem ser esmagador. É uma alternativa simples para alguns dos cabeçalhos de vídeo mais chamativos que se tornaram populares. O elemento de contraste é duplo: o design é diferente do que muitos dos outros aos quais os usuários estão expostos e o movimento sutil é delicioso e bastante inesperado.
Por outro lado, você pode ir all-in com animação ou vídeo para uma imagem de herói. O movimento pode ser particularmente atraente e é uma opção popular. Use-o da mesma forma como faria uma imagem estática quando se trata de adicionar efeitos como tipografia e chamadas para ação.
Pense em tipografia ousada
A tipografia na imagem do herói deve impressionar o usuário. Precisa ser ousado, impactante e memorável.
Você pode criar isso com a seleção de tipo de letra e as palavras na tela. (Nenhum cabeçalho Arial que diga "Olá" aqui.)
A combinação de estilo de letras e mensagens precisa ter impacto direto e atrair o usuário. Você já ouviu falar que as pessoas têm menos tempo de atenção que o peixinho dourado; É seu trabalho pegá-los com letras e linguagem bonitas.
Quando se trata de negrito, os elementos-chave do contraste são a cor e o tamanho.
- O tipo precisa ser uma cor que se destaca do plano de fundo. Luz no escuro ou escuro na luz são as melhores opções quando se trata de legibilidade.
- Ousada é uma digressão da norma. Considere a tipografia excessiva ou subdimensionada no cabeçalho do herói para o impacto.
- Escolha palavras com significado. A menos que seja a chave para sua mensagem, você não precisa de um parágrafo no cabeçalho. Opte por algumas palavras-chave que motivam os usuários a aprender mais. (O número de palavras afetará o tamanho ou tamanho das letras).
Escolha a cor com cuidado
Uma imagem de herói pode não ser uma imagem. Pode ser um bloco de cores ou uma textura legal.
Escolha uma cor cuidadosamente que retrate o significado exato que você pretende. Um cabeçalho hero em negrito pode impressionar os usuários, mas a cor errada pode ser desativada.
Opções brilhantes e modernas são uma boa alternativa. O bom desta opção é que você pode misturá-la de tempos em tempos apenas alterando a cor do plano de fundo. Uma grande base de cores também pode ajudar a reforçar a identidade da marca - especialmente se ela tiver uma forte associação de cores - e se presta à legibilidade devido à natureza simples do design.
A cor também é uma consideração importante quando usada com outra imagem ou vídeo. De tipografia colorida a elementos de interface de usuário coloridos, é importante garantir que as opções de cores na imagem correspondam ao restante do design. Muito disso remonta à teoria das cores e à compreensão da roda de cores para que as escolhas de imagem e cor funcionem juntas no design.
Mas e se a imagem do herói e as cores da marca não se mesclarem? Pense de maneira criativa sobre como usar as partes da imagem do herói juntas. Tente uma sobreposição de cores na foto; considere preto e branco para a imagem ou texto. Mova os elementos de alta cor para uma barra de navegação que seja branca ou preta para mantê-los fora da imagem real. Quando a imagem e as cores exigidas não funcionam bem, a melhor opção é eliminar ou separar a cor.
Pense em espaços claros e escuros
A contabilização de espaços escuros e claros em uma imagem pode ser a tarefa mais difícil ao adicionar elementos para criar contraste em uma imagem de herói. Particularmente com formatos responsivos e pontos de interrupção, a colocação de texto ou botões em uma imagem pode mudar e você não pode sempre encontrar um ótimo local.
O que é um designer para fazer?
- Escolha outra imagem;
- opte por um tipo diferente de família, tamanho ou cor;
- adicione uma sobreposição de cores;
- faça o melhor disso.
Cada um dos itens acima é uma opção viável. A melhor opção pode variar por projeto.
The Society Inc. A solução no slider de imagens do herói - com muita variação entre os espaços claros e escuros - era incluir uma sobreposição de logotipo com texto branco em uma forma preta. Isso não diminui as imagens e é muito menos intrusivo do que você imagina ao ouvir a ideia. O logotipo no centro também ajuda a estabelecer marca e identidade visual.
Inclua uma chamada à ação distinta
Não esqueça o CTA!
O que você quer que os usuários façam depois de ver sua imagem de herói legal? Diga a eles.
A chamada à ação deve ser clara, seja para preencher um formulário, rolar por mais conteúdo ou clicar em um link para outra página. Deve incluir definição e contraste suficientes para que seja facilmente visto no fundo da imagem. (Qual é o objetivo de um CTA se ninguém o vê?)
Cor e tamanho são de particular importância aqui. A cor do botão (uma sugestão comum do CTA) deve se destacar do resto da imagem. As palavras que dizem aos usuários o que fazer precisam ser excepcionalmente legíveis, simples e claras.
Conclusão
O contraste é uma das principais técnicas para qualquer bom design. Cria separação entre elementos e ajuda a direcionar os usuários para a ação desejada.
Tome cuidado especial para criar contraste suficiente ao projetar uma imagem de herói para que os usuários saibam exatamente quais ações executar na página. Analise suas métricas e, se essas conversões não estiverem acontecendo, repensar a quantidade de contraste no design. Pode ser hora de aumentar ainda mais.