Free Press

O cabeçalho desempenha um papel fundamental no design de um website e define o tom para todos os seus outros aspectos. Especialmente agora na era do minimalismo triunfante, quando vários doces para os olhos muitas vezes são impiedosamente, mas bastante expulsos. Às vezes não há mais nada para os olhos captarem, por isso o papel do design do cabeçalho do site aumentou significativamente.

Designers de sites colocaram muito esforço no design desta parte de um site com criatividade e produtividade em mente. Segundo o Google, são necessários apenas 50 ms para formar uma opinião sobre um site e algumas opiniões se desenvolvem dentro dos incríveis 17 ms. O conhecimento dos consumidores sobre uma marca começa aqui.

Para aprender a desenhar um cabeçalho de website que funcione, e quais os elementos que ele deve incluir, leia, haverá exemplos.

“A vida é uma primeira impressão. Você tem uma tentativa.

Faça-a eterna”

– J.R. Rim

>

Um cabeçalho de website é a seção superior da página web. Antigamente, as pessoas entendiam os cabeçalhos como tiras estreitas nas partes superiores dos websites que continham um logotipo, uma chamada à ação e informações de contato. Mas no design moderno, todo o espaço acima da dobra da página inicial é considerado um cabeçalho.

Sendo a parte estratégica da página que as pessoas vêem nos primeiros segundos de carregamento de um website, um cabeçalho funciona como uma espécie de convite. Ele deve fornecer informações básicas sobre um site para que os usuários possam entender o que ele oferece em segundos.

Alguns designers fazem cabeçalhos separados para várias seções do site. Por exemplo, você pode fazer um cabeçalho grande para uma página inicial e deixar uma pequena faixa para outras páginas. Mas mantenha-o consistente. O design do cabeçalho na página interna deve ser uma versão abreviada do cabeçalho na página principal. Esta é uma boa prática de design de website.

O que inclui um cabeçalho de website?

A tarefa do cabeçalho é dar respostas aos usuários às perguntas básicas: que marca é representada, que bens e serviços são oferecidos, como entrar em contato com os funcionários da empresa, se existem acordos atuais, e assim por diante.

Parte disso, também representa a qualidade e até mesmo a identidade de um website. Se o cabeçalho evoca uma boa resposta emocional, e o espectador sente que tem algo de valor, então você passou no teste inicial.

Os principais elementos do cabeçalho de um website geralmente são:

• logo ou identificador de marca
• call to action
• texto ou cabeçalho
• elementos da navegação
• pesquisar.

Você não precisa adicionar todos de uma só vez. É necessário encontrar um equilíbrio entre a abundância de informação e a sua disposição harmoniosa. Use apenas os dados que você precisa, sobrecarregar um cabeçalho não seria benéfico, por mais importantes que todos os links pareçam.

Deixar o cabeçalho muito vazio também não é uma boa idéia. Um usuário que não consegue descobrir sua interface em poucos segundos provavelmente irá embora e não retornará. Um cabeçalho ruim pode empurrar os visitantes para outro site com conteúdo inferior.

No design minimalista dos cabeçalhos, apenas os links para as seções principais do site e o logotipo da empresa são apresentados. Esta técnica é especialmente útil ao desenhar páginas de destino.

Melhor práticas de design de cabeçalho de website

Nada limita a sua criatividade quando se trata de desenhar a secção de cabeçalho. O cabeçalho do site é uma área aberta para um amplo campo de decisões de design criativo, que deve ser memorável, conciso e útil.

Vejamos os pontos principais.

Tamanho do cabeçalho

Não há resposta definitiva para a questão do tamanho que uma imagem de cabeçalho de site deve ter. Alguns recursos tentam fornecer conjuntos de números precisos, mas hoje em dia um dos aspectos mais difíceis da construção de um website é garantir a eficácia de cada tamanho de tela. E mesmo que duas telas sejam do mesmo tamanho, a resolução pode ser diferente, para que os usuários não vejam a mesma coisa.

Não se fixe no conceito exato de pixel, siga regras simples de senso comum.

O cabeçalho deve ser de tal altura que não interfira com a percepção do conteúdo. Para recursos informativos, um cabeçalho pequeno seria uma ótima escolha, enquanto para aterrissagens o cabeçalho pode ser maior.

No caso de cabeçalhos volumosos, é melhor deixar algum espaço sob a dobra para que o usuário tenha um vislumbre do que vem a seguir na página e comece a rolar.

Hierarquia visual

Nielsen Norman Group formulou pela primeira vez sua teoria sobre o padrão de leitura em forma de F na web em 2006, e não perdeu sua relevância até hoje.

Uma pessoa que se encontra num novo site desconhecido começa sempre a sua jornada visual a partir do canto superior esquerdo da tela. E se não encontrar lá a informação esperada, então a página será automaticamente percebida como complicada e não-standard, exigindo muito esforço para entender.

Logo. Outro estudo realizado pelo NN/g descobriu que os usuários se lembrariam muito mais facilmente das marcas cujos logotipos são colocados à esquerda em comparação com o centro ou a colocação da parte direita.

Se você tiver um logotipo redondo, então é aceitável colocá-lo no centro da tela, embora sua eficácia ainda seja menor em comparação com os colocados à esquerda.

Navigação. Preste muita atenção para não sobrecarregar esta seção de um site. Demasiados links sobrecarregam os visitantes. Às vezes, toda uma remodelação da estrutura de um website pode ser para limpar algum espaço para as categorias mais importantes.

Fazer com que os visitantes compreendam facilmente onde estão, e como encontrar o seu caminho mais distante. Use efeitos de pausa para guiar os usuários enquanto navegam.

Chamada para a ação. Implementar os princípios da hierarquia visual para destacar naturalmente um CTA.

>

Cabeçalho fixo (pegajoso)

Barras de navegação persistentes, ou em outras palavras, “cabeçalhos pegajosos”, significam que a navegação segue você ao redor da página enquanto você rola. Este é agora um padrão de web design.

Faça o cabeçalho fixo se ele não violar o seu conceito geral de design. É uma boa idéia para ambos os designs desktop e móvel:

• Sites de comércio eletrônico – o carrinho está sempre na frente do usuário.
• Sites de serviço – o número de telefone ou um CTA estão constantemente em exibição.

Cabeçalhos fixos melhoram a experiência do cliente, mantendo os usuários orientados e dando-lhes mais controle.

A mensagem transmitida por um cabeçalho

Antes de desenhar um cabeçalho, considere o estilo geral do site e sua principal finalidade.

Se for um website promocional destinado à apresentação de um produto, o design do cabeçalho pode conter links para as seções principais, combinados com uma grande imagem de herói na primeira tela, já que o objetivo principal de tal website é apresentar efetivamente o produto. No caso de websites de comércio electrónico ou de negócios, a situação pode ser diferente. Um utilizador precisa de navegar facilmente, conhecer as últimas ofertas, como contactar rapidamente o gestor e onde ver as encomendas que já fez, por isso, neste caso, o cabeçalho pode ser mais conciso dando lugar a outras categorias.

Existem várias mensagens possíveis que um cabeçalho pode transmitir:

• agir um consumidor a fazer algo
• trabalhar na construção de confiança
• encorajar um visitante a saber mais
• ser engraçado, etc.

A escolha depende do objectivo de um determinado website.

Imagens relevantes

A imagem no cabeçalho deve transmitir directamente informação sobre o negócio. Por exemplo, se representa o serviço de entrega de alimentos, então a imagem pode retratar um mensageiro organizado com alimentos esteticamente atraentes. Em geral, o visitante, tendo visto o seu site, deve querer comprar algo de si.

Fotos de alta qualidade. A fotografia é uma ferramenta poderosa para web designers. Ela pode contar uma história, evocar emoções e motivar os seus visitantes a rolarem mais. Para sites com imagens poderosamente marcantes, tente fazer um cabeçalho transparente. Ele exibe melhor as imagens, mantendo os links principais.

Sliding images. Se você tem várias fotos ótimas representando o negócio do site, vá em frente! Os utilizadores podem percorrer um conjunto de imagens requintadas de alta resolução.

Illustrações. Imagens de cabeçalho para websites têm que acertar o acorde certo e estabelecer uma conexão pessoal. Melhor se uma imagem for distinta e facilmente reconhecível, mesmo se cortada do cabeçalho do website. Você pode conseguir isso capitalizando a tendência atual para ilustrações.

>

Vídeo ou animação

Não focalize sua atenção apenas em imagens estáticas.

Adicionar vídeo está entre as ideias de cabeçalho de site mais eficientes. Se possível, tente adicionar um material de vídeo temático em um cabeçalho. Muitos sites o utilizam para cativar o público enquanto apresentam sua empresa ou produto da melhor maneira possível.

Uma outra maneira de tornar seu design ainda mais atraente, vívido e memorável é adicionar animação. Ele pode fazer cabeçalhos de sites muito legais. Se você está procurando por uma página interativa que envolva os espectadores, a animação é uma ótima alternativa.

Uma chamada à acção bem desenhada

Enquanto desenha um cabeçalho web, o designer adiciona lá alguma chamada a elementos de acção como “log-in”, “sign-in”, “get in touch”, etc. Para atrair a atenção do usuário para que resulte na ação necessária, o botão deve conter uma inscrição compreensível para o cliente e ser perceptível entre outros conteúdos.

Uma chamada para colocação de ação em um local estrategicamente significativo é uma oportunidade perfeita para incitar os usuários a agir logo no início, aumentando assim a sua taxa de conversão. Alguns CTAs podem ser usados por um período de tempo para promover negócios especiais, outros têm uma presença de longo prazo.

Best fonts for website headers

Primeiro de tudo, o cliente percebe os nomes das seções e as informações fornecidas pela empresa: detalhes de contato, ofertas interessantes. Portanto, você precisa escolher fontes claras e legíveis que não prejudiquem a percepção e que possam ser compreendidas à primeira vista.

Para grandes cabeçalhos de páginas iniciais, você pode usar algumas tipografias arrojadas e elementos imaginativos para chamar a atenção dos usuários, caso contrário, é melhor não escolher fontes extravagantes que podem se mostrar difíceis de ler.

Simples design de cabeçalho

Mantendo um cabeçalho bem definido e limpo, seus visitantes sentirão que você não tentará sobrecarregá-los com suas ofertas. Um cabeçalho de website criativo pode ter uma aparência muito simples.

>

>

>

Navegação oculta (menu hambúrguer)

Esta é uma solução cada vez mais utilizada para o design de websites. O menu de hambúrgueres é um pequeno ícone de três faixas, que exibe o menu completo quando clicado. Esta técnica é utilizada pelos designers quando eles precisam focar na tela principal.

Do ponto de usabilidade do site, esta é uma boa opção. Tal menu veio do design móvel e já é familiar aos usuários. O hambúrguer é adequado para sites promocionais, onde a ênfase principal é na apresentação de alta qualidade do produto usando fotos ou vídeos. Para lojas online, esta opção pode ser menos adequada, pois é importante para o cliente ter um cesto, produtos selecionados e um campo de busca em acesso rápido.

Design do cabeçalho móvel

O cabeçalho deve ser exibido corretamente não apenas na versão desktop do site, mas também na versão móvel. Portanto, ele tem que ser responsivo e capaz de se ajustar bem a qualquer dispositivo móvel.

O uso diário de dispositivos móveis levou a designs de websites que parecem ser orientados para o celular, mesmo em suas encarnações na área de trabalho. Por exemplo, a implementação de imagens de grandes heróis e menus de hambúrgueres tem as suas origens no design móvel.

>

>

>>

>

>

>

Em conclusão

>

O website é apresentado pelo seu cabeçalho. É como um cartão de visita único. Portanto, ao desenhar um website, preste a máxima atenção ao cabeçalho.

E uma última melhor prática de design do cabeçalho de um website: faça alterações regulares para manter o seu website fresco e actualizado. Use alguns insights deste artigo.