Cabeçalhos do Blog: 20 Grandes Exemplos e Melhores Práticas
O cabeçalho é provavelmente a primeira coisa que um novo visitante vê em um blog, por isso é a primeira impressão - mas por que um cabeçalho de blog é muito mais importante, ou pelo menos diferente, do que o cabeçalho de um site básico?
Cabeçalhos de blogs precisam de mais funcionalidade. Outros designs da web podem diferir em termos de uso e, portanto, o que está incluído no cabeçalho do site e como é apresentado pode variar muito.
Com um blog especificamente, no entanto, existem práticas recomendadas que podem ajudar o leitor a navegar pelo blog e se envolver melhor.
Isso é exatamente o que este artigo fará. Nós vamos ajudá-lo a definir o que deve fazer parte do cabeçalho de um blog e como finalmente implementá-lo , e depois veremos vinte exemplos incríveis que fazem exatamente isso.
Para determinar como um cabeçalho de blog deve ser projetado e o que colocar nele, precisamos fazer algumas perguntas sobre o blog:
- Que humor precisa ser definido para atrair o público-alvo correto?
- Como a primeira impressão através do cabeçalho pode comunicar o conteúdo do blog?
- Como o cabeçalho do blog pode dar a primeira impressão: "Sou diferente dos outros".
- Quais partes do conteúdo precisam ser imediatamente percebidas para criar uma ação melhor? (clicar em links, inscrever-se, etc.)
Vamos cavar um pouco mais fundo ...
Que humor precisa ser definido para atrair o público-alvo correto?
Quando um visitante entra pela primeira vez em qualquer tipo de site, a primeira coisa que eles determinam é a “personalidade” do blog - e se é certo ou não para eles.
Isso é essencial para o design do blog, porque os blogs exigem que o público-alvo correto seja bem-sucedido .
Por exemplo: com conteúdo na indústria criativa, o design de um blog deve ter um cabeçalho de criativo para impressionar e inspirar os novatos. Um blog mais técnico ou de negócios vai querer um cabeçalho direto e sofisticado que seja esteticamente atraente, mas ao mesmo tempo bastante sutil.
Como a primeira impressão através do cabeçalho pode comunicar o conteúdo do blog?
Temos uma parte disso envolvida no desenvolvimento do clima geral que o cabeçalho deve criar, mas um cabeçalho pode fazer mais do que isso para esclarecer ao novo leitor sobre o que é este blog.
A primeira impressão descobre a personalidade do blog, mas o que é exatamente isso? Pode-se incluir um slogan com um logotipo que o diga, ou incluir um pequeno parágrafo / frase dizendo ao leitor o que é esse blog e para quem ele é.
Como o cabeçalho do blog pode dar a primeira impressão: "Sou diferente dos outros"?
Outra maneira de colocar isso é: “Como esse blog vai ser lembrado? “
Se ele se misturar a todos os outros blogs da Internet, esse não é um bom tema de blog. É por isso que o cabeçalho é um local privilegiado para o logotipo, o slogan e qualquer outra marca.
A aparência geral e o conteúdo apresentado à primeira vista é o que vai ficar, se bem apresentado.
Quais partes do conteúdo precisam ser imediatamente percebidas para criar uma ação melhor? (clicar em links, inscrever-se, etc.)
O cabeçalho deve ser, em geral, simples em termos de conteúdo, mas algumas formas de conteúdo podem estar presentes para ajudar em sua chamada à ação. Depois que um novo leitor julga a impressão inicial do blog e decide ficar, ele começa a procurar por conteúdo e por onde navegar.
Quando as categorias estão imediatamente presentes, o espectador as examinará e localizará as áreas que as interessam. Quando um campo de pesquisa está presente ou um feed RSS, eles podem não se inscrever ou fazer uma pesquisa imediatamente, é claro, mas eles fizeram uma nota subconsciente de seu posicionamento e onde encontrá-lo no futuro.
As opções variam muito além disso, mas basicamente qualquer conteúdo colocado no cabeçalho é a primeira impressão para o conteúdo , por isso deve ser o mais importante e bem projetado.
Vamos agora dar uma olhada em alguns ótimos cabeçalhos de blogs e discutir seus benefícios.
1. Tutorial9
O Tutorial9 apresenta praticamente todos os benefícios discutidos acima. O logotipo e o slogan exibem instantaneamente o assunto do blog e como ele pode ajudar o leitor.
As principais peças de navegação estão em guias enormes e visíveis com ícones incluídos para atrair os olhos. Isso leva o usuário instantaneamente ao conteúdo e promove a busca mais profunda no blog.
O design de plano de fundo é criativo e até tem um tema de criação artística - exatamente para o que os tutoriais são destinados. Além disso, há conteúdo essencial à direita, incluindo o feed RSS, o formulário de pesquisa, as páginas do blog e muito mais.
2. Home Design Encontrar
Esse cabeçalho usa um ótimo uso da hierarquia visual para mostrar o ponto. O título do blog é quase o suficiente para dizer ao leitor do que se trata, e promove ficar e ver com mais detalhes do que se trata.
O olho é então levado ao primeiro conjunto de navegação, onde a página sobre é claramente notada, assim como a página de contato. As imagens à direita, em seguida, definir o clima e fornecer inspiração para os interessados neste tópico do blog.
Finalmente, as imagens à direita levam o olhar para uma frase mais descritiva para o blog.
Blog Blog de Design
As características mais notáveis deste cabeçalho são o logo e o slogan. O público-alvo específico deste blog o torna mais exclusivo e, ao afirmar o que o blog tem a ver à primeira vista, um novo leitor vê isso e está convencido de que é diferente dos outros.
Um pouco mais adiante, e em texto menor, está o número de leitores e o link para o feed RSS, bem como a navegação primária para aprofundar o conteúdo do blog ou sobre o próprio conteúdo.
4. Kevin John Gomez
O recurso e a foto desenhados à mão fazem com que o tema deste blog pareça pessoal e corresponde ao nome do site - o próprio webmaster. Este é um blog pessoal de uma pessoa criativa, e o cabeçalho comunica isso perfeitamente.
A navegação completa está no cabeçalho, pois é uma navegação limitada e é capaz de dar mais ênfase a ela.
5. Gráficos Naldz
Este cabeçalho fornece um ótimo logotipo e uso efetivo de conteúdo no cabeçalho. A maior parte do cabeçalho é o logotipo, ou nome do blog, e isso torna mais fácil lembrar.
O olho é então levado à navegação, onde o leitor pode ir mais fundo no blog ali mesmo, ou pelo menos ter uma ideia do que é o blog. Navegação e categorias são uma ótima maneira de dizer aos novos leitores sobre o que o blog é, se eles são bem definidos.
Um gráfico à direita ajuda a definir o clima do blog e também leva o olho para o número de assinantes e o link RSS. Com um blog com uma contagem de feeds moderada a alta, é uma boa ideia mostrar essa contagem no cabeçalho, pois, de certa forma, valida o conteúdo do blog e dá credibilidade a ele.
Há também conteúdo adicional no topo, em um local tradicional para esse tipo de conteúdo, para que seja facilmente encontrado.
6. Pro Design Blog
Os dois elementos verdes contrastantes neste cabeçalho fazem mais do que se pode pensar. A maioria vê o logotipo com o pop verde da cor à esquerda, onde lêem o título do blog e o título. Esta é mais uma grande manchete que diz aos novos leitores como esse blog pode ajudá-los.
Em seguida, grandes abas de grandes dimensões são colocadas em foco com 1) seu tamanho óbvio e 2) que outro pop de cor verde. A outra guia verde diz ao leitor que este não é apenas um blog que pode ajudar a criar um design de blog melhor, mas também oferece serviços de design de blog. Acima disso, ícones de mídia social que o leitor pode tomar nota para ação posterior.
7. Octwelve
Esse cabeçalho de criativo ilustrado define o clima do blog rapidamente. A ilustração é do webmaster e dá ao blog uma abordagem pessoal. Começamos a ter uma ideia sobre o conteúdo do blog, antes mesmo de ser apresentado.
Esse design coloca uma pequena frase introdutória no cabeçalho, definindo exatamente o que é esse blog. A navegação principal está logo abaixo do logotipo, por isso é notado quase imediatamente. Há também outros detalhes no cabeçalho que são divertidos e levam o espectador a observar o cabeçalho por mais tempo.
8. Mark Forrester
Esse cabeçalho divertido, peculiar e criativo define um clima e é exclusivo o suficiente para realmente chamar sua atenção.
O espectador, à primeira vista, está examinando imediatamente o cabeçalho, seus detalhes e a história que apresenta. Nele, vem o logotipo e o slogan, onde a visualização descobre sobre o que é o blog.
Ao terminar de aproveitar o cabeçalho, eles podem ver a navegação no topo e os marcadores sociais à direita. O cabeçalho também leva muito bem ao conteúdo, levando o visitante a rolar a tela e conferir mais.
9. Culto-Foo
Este é apenas um cabeçalho bonito que chama a atenção de muitos leitores diariamente. O clima é definido como um tema criativo e inspirador e atrai apenas o público certo. O logotipo neste cabeçalho é a "fonte" do restante do cabeçalho - uma caixa que leva ao restante do design.
A barra de pesquisa fica logo abaixo para facilitar o acesso e as duas áreas de conteúdo são definidas à direita.
A navegação é o que é realmente legal sobre este cabeçalho, no entanto. Tem mais de uma sensação de nuvem de tags, com as categorias maiores sendo o texto maior. Dessa forma, quando um novo leitor vê a nuvem de tags, ele vê os itens maiores primeiro.
Em troca, eles fazem uma conexão com essas palavras e o conteúdo do blog. Agora, o conteúdo apresentado no blog tem o que há de mais memorável em seu conteúdo. Não deixe de conferir a versão ao vivo deste site: a área da nuvem de tags do cabeçalho foi movida com a rolagem do usuário, com uma borda decorativa e discreta.
10. Vectips
Esse cabeçalho é bastante minimalista, o que coloca mais ênfase nos bits de conteúdo que ele contém. O logotipo é decorativo e delineado em uma cor contrastante, tornando-o memorável.
Ele é seguido por uma linha de tag que compartilha o assunto do blog e, depois, pela navegação simples que define isso. A navegação é ótima, pois possui ícones individuais para chamar a atenção de cada um, à medida que o leitor passa sobre eles.
A ilustração divertida à direita define o humor e leva o olho para a navegação no topo.
11. Part Time Post
Em contraste com o Vectips, esse cabeçalho tem muita coisa acontecendo. O logotipo no canto superior esquerdo inclui um slogan e, em seguida, leva o olho para a navegação. Antes de clicar na navegação, o cabeçalho continua a mostrar como o site pode ajudar os novos visitantes e, abaixo disso, apresenta mais navegação. Através desta hierarquia, o leitor acaba de obter uma excelente visão geral de como navegar por todo o site.
A ilustração à direita, em seguida, leva o espectador a tomar nota do feed RSS e, em seguida, o olho é levado ainda mais à direita para promover a página de fãs do Facebook da empresa.
12. TutCandy
A maior característica do cabeçalho do TutCandy é sua imagem criativa, colorida e detalhada. Com isso, define o clima e cria credibilidade para um blog como esse. O nome está entrelaçado na ilustração colorida e pode ser considerado o logotipo.
À direita, há um slogan que explica o que é o blog e como ele é diferente: “Apenas os Tutoriais de Design mais saborosos.” Apesar de ser um jogo simples e divertido de palavras, há algumas palavras-chave que levam o leitor a causar um julgamento positivo. "Only" - é único, original e único.
Ele responde a pergunta "Como é que este blog é diferente dos outros?". “O mais saboroso” - o slogan poderia ter sido “Tutoriais de design saboroso”. Isso não apenas soa um pouco estranho, como também não implica precedência sobre outros tutoriais de design ou outros blogs de tutoriais.
Acima, também há navegação sobre o blog e uma barra de pesquisa à direita. Diretamente abaixo, o conteúdo é definido e organizado, levando o leitor a cavar mais fundo no blog.
13. Yoast
Este blog oferece excelente conteúdo no cabeçalho. O wireframe exclusivo permite que o cabeçalho contenha gráficos e conteúdo suficiente para fazer uma conexão com um novo leitor. O personagem e a ilustração por trás dele é uma das primeiras coisas que um novo visitante notará, e eles fazem uma boa chamada fazendo com que o personagem aponte para o conteúdo do cabeçalho à esquerda.
Depois que o olho é levado ao conteúdo do cabeçalho, eles vêem o logotipo e as formas de se inscrever ou se conectar com o blog. Em seguida, ele lê exatamente como um conteúdo normal de “sobre a página”, exceto o destaque direto na primeira página, o que significa que não apenas os leitores interessados em acessar a página pessoal fazem essa conexão pessoal - como todos os novos leitores. O conteúdo explica sobre o assunto do blog e, em seguida, exibe alguns conteúdos populares e em destaque.
Abaixo da ilustração à direita, o feed RSS é exibido novamente, mas desta vez com um gráfico mais reconhecível. Observe como essa segunda exibição de feed é mostrada à direita, depois que o leitor teria acabado de ler alguns títulos de conteúdo, um pouco sobre informações e depois de já ter feito uma conexão com o blog.
14. Que Cara Indie
O personagem neste cabeçalho, como todos os outros cabeçalhos com caracteres, fornece um toque pessoal e atua como uma ótima introdução ao blog. É a primeira coisa que um novo leitor notará, e sua alta qualidade, bem como os recursos de design que o cercam, fazem uma declaração sobre o estilo desse designer e o que esperar dele.
À esquerda, está o logotipo, o que leva a atenção para o slogan que explica o conteúdo apresentado no blog. O olho é levado mais uma vez a um conteúdo que compartilha a personalidade do blog.
15. Ozon3
O tema deste cabeçalho é único e, nesse sentido, cria um design web memorável - uma primeira impressão realmente excelente. Depois de apreciar a ilustração, o olho é levado ao logotipo para memorização da marca e, em seguida, leva diretamente para a navegação principal e depois para o conteúdo.
Os espectadores da primeira vez podem ver que esse blog está focado em um portfólio de design da Web e descobrem isso depois de realmente visualizar o trabalho do designer no cabeçalho.
Apesar de sua simplicidade, este cabeçalho é muito eficaz em termos de hierarquia visual e define uma declaração enorme para os espectadores.
16. nDesign Studio
Este cabeçalho colorido é a principal atração para este web design, e o logo diz ao visitante que é um estúdio de design.
O incrível cabeçalho valida as habilidades do designer e sua marca. A navegação, os feeds e a barra de pesquisa estão muito interligados com o cabeçalho, tornando-os um dos primeiros elementos visíveis.
A navegação principal está na forma de guias e é reconhecida pela primeira vez como parte do cabeçalho. Porque é na forma de abas, porém, parece conectado ao conteúdo também, trazendo o olho do visitante para baixo no conteúdo importante do blog.
17. Web Designer Wall
Este é outro ótimo blog de Nick La do nDesign Studio, e vemos uma técnica similar: um fundo / cabeçalho grande e surpreendente, validando os talentos e a experiência do designer. O logotipo é maior aqui, fornecendo um slogan ligando o nome do blog ao seu propósito.
O restante do conteúdo no cabeçalho é a navegação inicial, contato / RSS e a barra de pesquisa. Eles são todos decorados de forma semelhante ao cabeçalho, conectando-os.
Esses elementos também têm características semelhantes ao conteúdo (mais plano de fundo, textura semelhante a papel), para que também sintam que fazem parte do conteúdo. Esta seção do cabeçalho conecta o cabeçalho introdutório à área de conteúdo.
18. Ma.tt
Parece haver uma regra de web design definitiva para não criar cabeçalhos acima de 200 a 250 pixels. Essa é uma ótima regra a seguir por vários motivos, mas esse cabeçalho mostra como quebrar efetivamente essa regra.
Ao não exibir nenhum conteúdo no início, Matt está usando seu design para causar a maior impressão no visualizador de primeira viagem. O seu detalhe elegante e formas criativas criam uma primeira impressão memorável.
O logotipo é grande e, como o site é um nome, ele assume a posição de um blog pessoal. O feed RSS também está no canto superior esquerdo, dizendo ao espectador que é realmente um blog desde o início. Finalmente, a navegação é o que é visto por último, e isso faz com que o visitante continue pelo blog.
19. Resort de Pixel
O estilo de ilustração detalhada deste cabeçalho torna divertido, mas limpo e profissional. É até animada à medida que a cena passa dia e noite, lembrando o visitante de continuar olhando para o cabeçalho, que apresenta o logo (marca) e a navegação. Esse método pode facilmente promover mais atividade no blog.
Abaixo da navegação que é colocada na linha de frente, há uma sub navegação com uma seta “conectando-a” ao resto do cabeçalho. Ajuda ainda mais a definir categorias e ajuda o leitor a encontrar o conteúdo que mais lhe interessa.
20. Webdesigner Depot
Ah, sim - o blog que você está vendo no momento. Seja você um visitante pela primeira vez, ou tenha lido o Webdesigner Depot por muito tempo, o cabeçalho definitivamente atrai sua atenção.
O que é ótimo nesse cabeçalho é que ele não é apenas um cabeçalho com um apelo criativo, mas os elementos dentro dele indicam que é um cabeçalho com um apelo criativo focado em computadores ou na Web. As ilustrações dos laptops, o “www.” E outras peças de tecnologia trazem o público-alvo mais especificamente.
O cabeçalho realmente não tem muito a oferecer em termos de conteúdo, exceto por um link para a página inicial. No entanto, por ser tão complexo, qualquer recurso adicional pode sobrecarregar o design e torná-lo muito confuso.
No entanto, esse cabeçalho é perfeito: definir o clima, inspirar o espectador e é curto o suficiente para levar o espectador ao resto do conteúdo.
Empacotando
Esperançosamente, examinar esses vinte exemplos pode ajudar a definir melhor as perguntas apresentadas no início deste artigo e ajudar todos os web designers a prestar mais atenção aos cabeçalhos dos blogs.
O conteúdo para incluir em um cabeçalho pode variar muito de blog para blog e é importante ter em mente as metas do blog, o tema e o que um visitante de primeira viagem estaria procurando ao visitar o blog.
Escrito exclusivamente para WDD por Kayla Knight .
Sinta-se à vontade para compartilhar suas próprias dicas sobre o design do cabeçalho, além de exemplos adicionais.