No passado, um “cabeçalho” no design da web referia-se tipicamente à faixa sempre presente no topo dos websites que continham o logotipo, barra de navegação e talvez alguns detalhes de contato e barra de pesquisa. Hoje em dia, um “cabeçalho” refere-se mais frequentemente a todo o espaço acima da dobra na página inicial.
Sem que alguém tenha encontrado o seu site através de um post de blog compartilhado em mídias sociais ou a partir de uma referência em outro site, as chances são boas de que eles vão entrar nele através da página inicial. E a primeira coisa que eles vão ver é aquele imóvel de primeira linha, deitado a nu.
Eu já escrevi antes sobre como os visitantes respondem melhor à colocação previsível de certos elementos em seu site (como o logotipo e CTA). Ao criar um website com o objectivo de satisfazer as suas expectativas e aumentar o seu conforto, tornando a experiência um pouco mais previsível, pode efectivamente melhorar as taxas de click-through e conversão.
Pense agora nesse espaço de cabeçalho na página inicial.
A maior parte das pessoas tem vindo a confiar nas páginas iniciais para lhes dar uma visão aérea do que é uma empresa ou website, o que significa que você não pode desperdiçar esta oportunidade de cumprir com essa expectativa. Claro que o design do cabeçalho da sua home page pode ser exclusivo da sua marca, mas os elementos encontrados dentro dela 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, o seu cabeçalho deve ser uma história de 10 segundos que prove aos seus visitantes o valor que o site terá para eles.
Então, o que fará com este espaço para cativar o interesse dos seus visitantes?
Vamos falar sobre algumas das tendências no design do cabeçalho em 2017, o que pode fazer para fazer uso deste imóvel altamente visível, e dar uma olhada em alguns exemplos interessantes de cabeçalhos pelo caminho.
14 Tendências em Design de Cabeçalhos em 2017
Não é como se os seus visitantes não estivessem cientes da sua capacidade de percorrer uma página ou de clicar através de uma navegação para saber mais sobre a marca por detrás de um site. Mas porque é que eles têm de fazer isso? Há espaço suficiente no cabeçalho para fornecer uma mensagem sucinta que lhes diga tudo o que precisam de saber. E se 50 palavras ou menos não for suficiente, a imagem de fundo ou design comunicará o resto da história.
Acima de tudo, o cabeçalho da página inicial pode fazer ou quebrar as primeiras impressões dos seus visitantes, e é por isso que é tão importante pregar esta secção.
Se você está lutando para encontrar uma maneira de iniciar o seu site com bang, talvez você encontre alguma inspiração nas seguintes tendências de design de cabeçalho de 2017:
Oversized Hero Image
O estilo modular de projetar sites para ser responsivo, a maioria dos designs são agora divididos em blocos e seções distintas. Este estilo de design se presta bem a estas imagens heróicas de largura total que povoam tantos websites.
Take the Cleverbird Creative website, por exemplo. Ele faz uso de uma imagem singular e marcante sobreposta a um texto simples para receber os visitantes. Não há dúvidas sobre o que eles pretendem aqui: beleza simplificada.
>
Sliding Images
>
Eu acho que houve um tempo, não muito distante no passado, em que muitos de nós questionavam o slider como um elemento de design viável. No entanto, muitos designers têm feito um grande trabalho fazendo uso dele em cabeçalhos. Há imagens deslizantes que rolam automaticamente de uma bela imagem de alta resolução para a próxima e há aquelas como as de Pierre que imploram aos visitantes para que eles mesmos tomem o controle dessa experiência.
Transformative Parallax Imagery
Parallax scrolling ainda está crescendo forte e o cabeçalho provou ser o lugar perfeito para aplicar este tipo de “ilusão” visual a webdesigns. O que você verá mais recentemente, no entanto, é designers dando ao seu parallax scroll uma vantagem transformadora, provavelmente para surpreender os visitantes com o resultado inesperado do scroll. A agência australiana de design UX August fez exatamente isso com seu header.
Video Backgrounds
O background do vídeo é outra daquelas tendências recentes que realmente funcionam melhor quando aplicado ao cabeçalho da página inicial. Este do Le 28 faz um ótimo trabalho de definição do ambiente para o site do restaurante, exibindo vídeos da frente e de trás do estabelecimento de jantar.
>
Navegação oculta
Embora se possa argumentar que o menu de hambúrgueres 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 para o cabeçalho. O site +rehabstudio é um bom exemplo disso. Ao ocultar a navegação, o seu foco imediato é atraído pelo visual excitante dentro do símbolo mais… e então você percebe que há pequenos toques de animação em torno dele.
Brand Mascot
Se o cabeçalho é o lugar para introduzir os visitantes ao seu site, que melhor maneira de dar o pontapé de saída do que introduzindo-os nos “personagens” que vão encontrar pelo caminho? Se o seu site usa mascotes de marca como o site WPMU DEV faz, esta é a hora e o lugar para mostrá-los.
>
Eye-Catching Typography
Há muito que pode ser feito para dar um facelift à tipografia do seu site. Dito isto, às vezes não se trata de escolher a fonte cursiva mais extravagante para atirar na cara das pessoas. Se você olhar para o exemplo de Slack acima, você verá que é tudo sobre o tamanho da fonte. Não há nada de realmente especial na tipografia que escolheram, mas é tão limpa e clara. Isso aliado ao tamanho da mensagem principal é o que a torna tão atraente.
Content First
Para websites com um foco principal na entrega de conteúdo aos visitantes (pense em qualquer site ou blog de notícias importantes), uma estratégia de conteúdo em primeiro lugar para o cabeçalho fará o maior sentido. Realmente não adianta minar palavras aqui. As pessoas vieram ao seu site para ler seu conteúdo, elas não precisam ficar atoladas por leituras adicionais na página inicial, para que você possa ir direto ao assunto como o Glamour faz.
Produtos Primeiro
Dentre essas mesmas linhas, os sites de comércio eletrônico não precisam se preocupar em usar o cabeçalho para escrever uma manchete atraente ou fornecer um explicador de vídeo sobre a empresa. Os visitantes sabem para que vieram ao site, para que você possa entrar diretamente nele. Ao contrário dos provedores de conteúdo, porém, os varejistas de produtos podem usar este excelente imóvel para exibir seus produtos mais vendidos ou os lançamentos mais recentes para atrair os visitantes, como a Apple faz.
CTA Front-and-Center
É possível que chegue um momento em que seu site tenha algo verdadeiramente especial para mostrar aos visitantes, algo que você queira que eles baixem ou comprem. Agora, mesmo que isso possa não ser a atração principal do seu site, você pode usar o cabeçalho temporária ou permanentemente para destacar esta chamada especial para ação como a blogueira Everywhereist faz com o seu livro.
Cores e Texturas vibrantes
Talvez uma das coisas mais agradáveis a sair do Google Material Design seja a nossa vontade de usar cores, camadas e gradientes mais vibrantes no web design. Eles não precisam mais ser relegados a botões de chamada para ação, eles podem ser usados para blocos inteiros no site, como Stripe faz com seu cabeçalho colorido e texturizado.
Animação
Não há absolutamente nada de errado em ter um design estático de cabeçalho de página inicial, especialmente se você quiser que o foco seja desenhado para um CTA ou vídeo. Mantenha-o simples para que não haja distracções que impeçam os visitantes de tomarem a acção que pretendia. Mas para sites que querem uma forma interessante de partilhar a sua mensagem com os leitores, as animações podem ser uma escolha sábia. O Baianat usa uma pequena animação para compartilhar um número de mensagens dentro do mesmo espaço, o que o impede de parecer desorganizado ou superlotado com informações.
Designs geométricos
Geometric web design acontece ser realmente grande neste momento, pois se presta bem às linhas lógicas e limpas necessárias para um design responsivo. Portanto, não é surpresa que estejamos vendo mais websites, como o da API Perspective, integrar elementos geométricos no design do cabeçalho. Existem outros, como Stripe e WPMU DEV, que usam linhas diagonais para criar uma paisagem visual única e inesperada para os visitantes.
Experimental
Finalmente, chegamos aos designs experimentais do header. A chave para estes geralmente não é que o cabeçalho seja estranhamente estranho e incomum. Isso seria muito perturbador para os visitantes. Em vez disso, o seu foco deveria estar na criação de algum efeito inesperado causado pelo simples movimento através do cabeçalho.
Take the Teamgeek design, por exemplo. Você pode ver que há algo “desligado” sobre o logotipo e a mensagem dentro do centro da página, mas não é até que você se envolva com ele que você perceba que há uma reviravolta especial embutida.
Wrapping Up
Como você pode ver, há uma variedade de maneiras que você pode projetar um cabeçalho para um site WordPress. Se você olhar atentamente para os exemplos acima, no entanto, você vai notar que os designers foram muito estratégicos sobre qual estilo de cabeçalho eles usaram e quais elementos foram incluídos dentro dele. Quando chegar a hora de desenhar um cabeçalho para o seu próximo projeto de site, considere se você vai precisar do seguinte:
- Logo
- Tradicional vs. oculto
- Secção de cabeçalho do Herói vs. ir direto para o conteúdo
- Tagline ou declaração de missão
- Informação de contato
- Ligações de mídia social
- Barra de pesquisa
- Multilingual toggle
- Cesto de compras
- Marca de mascote
- Fototografia de stock vs. fotografia real da empresa, pessoas ou produto
- Imagem estática vs. imagens deslizantes vs. vídeo de fundo
- Vídeo promocional embutido
- Botão de chamada para acção
- Formulário de contacto
- Barra de olá
>
>
Pode encontrar outros itens que pertencem a esta secção de cabeçalho superior da sua página inicial, também. Resume-se realmente ao que faz mais sentido para o seu site. Em outras palavras, que elementos irão contar a história da sua marca, educar e engajar o seu público diretamente para fora do portal e inspirar confiança suficiente para impulsioná-los para frente através do seu site?
Tags:
- design
- headers