No passado, um “header” em web design referia-se à faixa sempre presente na parte superior dos sites que continha o logotipo, a barra de navegação e talvez alguns detalhes de contato e a barra de pesquisa. Hoje em dia, um “header” refere-se mais frequentemente a todo o espaço acima da dobra da página inicial.
A menos que alguém tenha encontrado seu site por meio de uma postagem de blog compartilhada nas redes sociais ou por uma referência em outro site, há boas chances de que ele o acesse pela página inicial. E a primeira coisa que verão é aquele imóvel de primeira linha exposto.
Já escrevi antes sobre como os visitantes respondem melhor ao posicionamento previsível de certos elementos em seu site (como o logotipo e o CTA ). Ao projetar um site com o objetivo de atender às suas expectativas e aumentar seu conforto, tornando a experiência um pouco mais previsível, você pode efetivamente melhorar as taxas de cliques e de conversão.
Agora pense no espaço do header na página inicial.
O que exatamente é um “cabeçalho” hoje em dia?
A maioria das pessoas passou a confiar nas páginas iniciais para ter uma visão panorâmica do que é uma empresa ou site, o que significa que você não pode se dar ao luxo de desperdiçar esta oportunidade para cumprir essa expectativa.
É claro que o design do header da sua página inicial pode ser exclusivo da sua marca, mas os elementos encontrados nela realmente não deveriam ser. Os visitantes esperam que a rolagem não seja necessária para descobrir o que um site fará por eles. Em essência, seu header deve ser uma história de 10 segundos que prove aos visitantes o valor que o site terá para eles.
Então, o que você fará com esse espaço para cativar o interesse dos visitantes?
Vamos falar sobre algumas das tendências no design de headers, o que você pode fazer para aproveitar esse espaço altamente visível e dar uma olhada em alguns exemplos interessantes de cabeçalhos ao longo do caminho.
Observação: nem todos os sites de exemplo listados abaixo usam WordPress, mas isso pode ser feito usando WordPress.
14 designs de cabeçalho da Web para sua inspiração
Não é como se seus visitantes desconhecessem a capacidade de rolar uma página para baixo ou clicar na navegação para saber mais sobre a marca por trás de um site. Mas por que eles deveriam fazer isso?
Há espaço suficiente no header para fornecer uma mensagem sucinta que diga tudo o que precisam saber. E se 50 palavras ou menos não forem suficientes, a imagem ou design de fundo comunicará o resto da história.
Acima de tudo, o header da página inicial pode fazer ou quebrar as primeiras impressões dos visitantes, e é por isso que é tão importante acertar nesta seção.
Se você está lutando para encontrar uma maneira de lançar seu site com força, talvez encontre alguma inspiração nos designs de header a seguir.
1. Hero image superdimensionada
Alguns cabeçalhos, como o da Cleverbird Creative, são enormes.
Graças ao estilo modular de design de sites para serem responsivos, a maioria dos designs agora está dividida em blocos e seções distintas. Esse estilo de design se adapta bem a essas imagens principais de largura total que povoam tantos sites.
Veja o site Cleverbird Creative , por exemplo. Utiliza uma imagem singular e marcante sobreposta a um texto simples para dar as boas-vindas aos visitantes. Não há dúvida do que eles procuram aqui: beleza simplificada. Além disso, ter a Mulher Maravilha não faz mal.
2. Sliders
Acho que houve um tempo, não muito distante no passado, em que muitos de nós questionávamos o controle deslizante como um elemento de design viável. No entanto, muitos designers fizeram um ótimo trabalho ao utilizá-lo em cabeçalhos. Existem imagens deslizantes que rolam automaticamente de uma bela imagem de alta resolução para a próxima e há aquelas como a de Pierre que imploram aos visitantes que assumam o controle dessa experiência.
3. Efeito Parallax
Parallax é uma característica do web design moderno há algum tempo. Embora considerado “quente” há alguns anos, o uso de efeitos de paralaxe ainda é popular e o header provou ser o lugar perfeito para aplicar esse tipo de “ilusão” visual em web designs. No entanto, o que você verá mais recentemente são designers dando à rolagem paralaxe um toque transformador, provavelmente para surpreender os visitantes com o resultado inesperado da rolagem. O Anakin Design Studio fez exatamente isso com seu header .
4. Fundos de vídeo
O site Brave People faz um ótimo trabalho ao incorporar vídeos.
O fundo do vídeo é outra daquelas tendências recentes que realmente funciona melhor quando aplicado ao header da página inicial. Este da Brave People faz um ótimo trabalho ao definir o tom de seu site, exibindo vários clipes.
5. Navegação Oculta
Embora se possa argumentar que o menu de hambúrguer pertence a sites visualizados em dispositivos móveis (como originalmente pretendido), há algo a ser dito sobre o que esse tipo de minimalismo de navegação faz pelo header. O site Canals é um bom exemplo disso. Ao ocultar a navegação, seu foco imediato é atraído para os visuais emocionantes.
6. Mascote da marca
Como diria Tony, o Tigre, sobre os cabeçalhos dos mascotes: “Eles são ótimos!”
Se o header é o local para apresentar o seu site aos visitantes, que melhor maneira de começar do que apresentando-lhes os “personagens” que encontrarão ao longo do caminho? Se o seu site usa um mascote de marca – como faz o site Kellogg’s Frosted Flakes – este é o momento e o lugar para exibi-los.
7. Tipografia atraente
Uma tipografia forte pode realmente fazer seu conteúdo brilhar.
Há muito que pode ser feito para dar uma nova cara à tipografia do seu site . Dito isto, às vezes não se trata de escolher a fonte cursiva mais sofisticada para jogar na cara das pessoas. Se você olhar o exemplo do Slack acima, verá que tudo se resume ao tamanho da fonte. Não há nada realmente especial na tipografia que escolheram, mas é muito limpa e clara. Isso combinado com o tamanho da mensagem principal é o que a torna tão atraente.
8. Conteúdo primeiro
A página inicial da Glamour prioriza o conteúdo, entre outras coisas.
Para sites com foco principal na entrega de grande quantidade de conteúdo aos visitantes (pense em qualquer grande site de notícias ou blog), uma estratégia que prioriza o conteúdo para o header fará mais sentido. Não há realmente nenhum sentido em medir palavras aqui. As pessoas vêm ao seu site para ler o seu conteúdo, elas não precisam se preocupar com leituras adicionais na página inicial, então você pode ir direto ao assunto como a Glamour faz.
9. Produtos primeiro
Enquanto isso, o foco da Apple é seu grande produto mais recente.
Na mesma linha, os sites de comércio eletrônico não precisam se preocupar em usar o header para escrever um título atraente ou fornecer um vídeo explicativo sobre a empresa. Os visitantes sabem por que vieram ao site, então você pode ir direto ao assunto. No entanto, ao contrário dos fornecedores de conteúdo, os varejistas de produtos podem usar esse espaço privilegiado para exibir seus produtos mais vendidos ou lançamentos mais recentes para atrair visitantes, como a Apple faz.
10. CTA frontal e central
O Everywhereist direciona os visitantes a clicarem em seu CTA ousado.
Pode chegar um momento em que seu site tenha algo realmente especial para mostrar aos visitantes, algo que você deseja que eles baixem ou comprem. Agora, mesmo que essa não seja a atração principal do seu site, você pode usar o header temporária ou permanentemente para destacar esta frase de chamariz especial, como a blogueira Everywhereist faz com seu livro.
11. Cores e texturas vibrantes
Uma das coisas mais legais do Google Material Design é nossa disposição de usar cores, camadas e gradientes mais vibrantes em web design. Eles não precisam mais ser relegados a botões de call to action, eles podem ser usados para blocos inteiros do site, como faz o Stripe com seu header colorido e texturizado.
12. Animação
O site da Disney costuma apresentar animações de seu projeto mais recente.
Não há absolutamente nada de errado em ter um design de header de página inicial estático, especialmente se você deseja que o foco seja direcionado para um CTA ou vídeo. Mantenha a simplicidade para que não haja distrações que impeçam os visitantes de realizar a ação que você pretendia.
Mas para sites que desejam uma forma interessante de compartilhar sua mensagem com os leitores, experimente a animação. Por exemplo, a Disney usa uma pequena animação para compartilhar uma série de mensagens no mesmo espaço, o que evita que pareça desordenado ou superlotado de informações.
13. Desenhos Geométricos
Cabeçalho simplificado da API Perspective.
O web design geométrico é realmente grande agora, pois se adapta bem às linhas lógicas e limpas necessárias para um design responsivo. Portanto, não é surpresa que estejamos vendo mais sites, como o da API Perspective , integrando elementos geométricos ao design do header . Outros, como Stripe e WPMU DEV, usam linhas diagonais para criar uma paisagem visual única e inesperada para os visitantes.
14. Experimental
Finalmente, chegamos aos designs experimentais de header . A chave para isso geralmente não é que o cabeçalho seja estranhamente estranho e incomum. Isso seria muito perturbador para os visitantes. Em vez disso, seu foco deve estar na criação de algum efeito inesperado causado pelo simples movimento no header .
Veja o design Teamgeek , por exemplo. Você pode ver que há algo “errado” no logotipo e na mensagem no centro da página, mas só quando você se envolve com isso é que percebe que há um toque especial embutido.
Conclusão
Como você pode ver, existem várias maneiras de criar um header para um site WordPress. Porém, se você observar atentamente os exemplos acima, notará que os designers foram muito estratégicos sobre o estilo de cabeçalho que usaram e quais elementos foram incluídos nele. Quando chegar a hora de criar um cabeçalho para o seu próximo projeto de site, considere se você precisará do seguinte:
- Logotipo
- Tradicional vs. oculto
- Seção de header principal vs. ir direto ao conteúdo
- Slogan ou declaração de missão
- Informações de contato
- Links de mídia social
- Barra de pesquisa
- Alternar multilíngue
- Carrinho de compras
- Mascote da marca
- Fotografia de banco de imagens versus fotografia real da empresa, pessoas ou produto
- Imagem estática x imagens deslizantes x vídeo de fundo
- Vídeo promocional incorporado
- Botão de chamada à ação
- Formulário de Contato
- Barra de boas-vindas
Você também pode encontrar outros itens que pertencem a esta seção do header superior da sua página inicial. Na verdade, tudo se resume ao que faz mais sentido para o seu site.
Em outras palavras, quais elementos contarão a história da sua marca, educarão e envolverão seu público desde o início e inspirarão confiança suficiente para impulsioná-lo em seu site?
0 comentários