En-têtes de blog: 20 excellents exemples et meilleures pratiques
L'en- tête est probablement la première chose qu'un nouveau visiteur voit sur un blog, c'est donc la première impression - mais pourquoi un en-tête de blog est-il beaucoup plus important, ou du moins différent, que l'en-tête d'un site Web de base?
Les en-têtes de blog ont besoin de plus de fonctionnalités. Les autres conceptions Web peuvent différer en termes d'utilisation et, par conséquent, les éléments inclus dans l'en-tête du site Web et la manière dont ils sont présentés peuvent varier considérablement.
Avec un blog en particulier, cependant, il existe des meilleures pratiques qui peuvent aider le lecteur à naviguer dans le blog et à s'impliquer davantage.
C'est exactement ce que fera cet article. Nous vous aiderons à définir ce qui devrait faire partie d'un en-tête de blog et à la mettre en œuvre , puis nous examinerons vingt exemples impressionnants.
Pour déterminer comment un en-tête de blog doit être conçu et ce qu'il faut y mettre, nous devons poser quelques questions sur le blog:
- Quelle humeur faut-il définir pour attirer le bon public cible?
- Comment la première impression via l'en-tête peut-elle communiquer le contenu du blog?
- Comment l'en-tête du blog peut-il donner la première impression, "je suis différent des autres".
- Quels éléments de contenu doivent être immédiatement visibles pour créer une meilleure action? (en cliquant sur les liens, en vous inscrivant, etc.)
Creusons un peu plus loin ...
Quelle humeur faut-il définir pour attirer le bon public cible?
Quand un visiteur arrive pour la première fois sur un site Web, la première chose qu’il détermine est la «personnalité» du blog - et sa pertinence.
Cela est essentiel pour la conception de blogs , car les blogs requièrent un public cible correct pour réussir .
Par exemple: avec le contenu de l'industrie créative, la conception d'un blog devrait avoir un en-tête créatif pour impressionner et inspirer les nouveaux arrivants. Un blog plus technique ou professionnel voudra un en-tête simple et haut de gamme, à la fois esthétique et assez subtil.
Comment la première impression via l'en-tête peut-elle communiquer le contenu du blog?
Nous avons une partie de cela couvert en développant l’ambiance générale que l’entête devrait créer, mais un en-tête peut faire plus que cela pour clarifier au nouveau lecteur de quoi parle ce blog.
La toute première impression découvre la personnalité du blog, mais de quoi s’agit-il exactement? On pourrait inclure un slogan avec un logo qui le dit, ou inclure un petit paragraphe / phrase indiquant au lecteur ce qu'est ce blog et à qui il est destiné.
Comment l'en-tête du blog peut-il donner la première impression, "je suis différent des autres"?
Une autre façon de le dire est: "Comment se souviendra-t-il de ce blog? "
Si cela se mêle à tous les autres blogs sur Internet, ce n’est pas du tout un bon thème de blog. C'est pourquoi l'en-tête est un lieu privilégié pour le logo, le slogan et toute autre marque.
L'aspect général et le contenu présenté à première vue sont ce qui restera, s'ils sont bien présentés.
Quels éléments de contenu doivent être immédiatement visibles pour créer une meilleure action? (en cliquant sur les liens, en vous inscrivant, etc.)
L'en-tête doit être globalement simple en termes de contenu, mais certaines formes de contenu peuvent être présentes pour faciliter leur appel à l'action. Après qu'un nouveau lecteur ait jugé l’impression initiale du blog et décide de rester, il commencera à chercher des éléments de contenu et à naviguer.
Lorsque les catégories sont immédiatement présentes, le spectateur les regarde et trouve les zones qui les intéressent. Lorsqu'un champ de recherche est présent ou un flux RSS, il se peut bien entendu qu'ils ne soient pas abonnés ou qu'ils effectuent une recherche immédiatement, mais ils ont pris note inconsciemment de son emplacement et de son emplacement futur.
Les options varient beaucoup au-delà de cela, mais fondamentalement, tout contenu placé dans l'en-tête est la première impression de contenu . Il devrait donc être le plus important et le mieux conçu.
Voyons maintenant quelques excellents en-têtes de blog, puis discutons de leurs avantages.
1. Tutorial9
Tutorial9 présente à peu près tous les avantages décrits ci-dessus. Le logo et le slogan affichent instantanément ce qu’est le blog et comment il peut aider le lecteur.
Les principaux éléments de navigation se trouvent sur d’énormes onglets remarquables avec des icônes pour dessiner dans l’œil. Cela conduit instantanément l'utilisateur au contenu et les encourage à approfondir le blog.
Le design de fond est créatif et a même un thème de création artistique - à quoi servent les tutoriels. De plus, il existe des contenus essentiels à droite, notamment le flux RSS, le formulaire de recherche, les pages du blog, etc.
2. Home Design Trouver
Cet en-tête utilise beaucoup la hiérarchie visuelle pour faire passer le message. Le titre du blog est presque suffisant pour dire au lecteur de quoi il s'agit, et cela favorise le fait de rester et de voir plus en détail ce dont il s'agit.
L'œil est ensuite dirigé vers le premier ensemble de navigation, où la page à propos est clairement notée, ainsi que la page de contact. Les images à droite définissent alors l'ambiance et inspirent ceux qui s'intéressent au sujet de ce blog.
Enfin, les images à droite conduisent l'œil vers une phrase plus descriptive pour le blog.
3. Blog Design Blog
Les principales caractéristiques de cet en-tête sont le logo et le slogan. Le public cible spécifique de ce blog le rend plus unique, et en indiquant ce qu’est le blog à première vue, un nouveau lecteur le voit et est convaincu qu’il est différent des autres.
Plus bas, et dans un texte plus petit, se trouve le nombre de lecteurs et le lien vers le flux RSS, ainsi que la navigation principale pour approfondir le sujet du blog ou le contenu lui-même.
4. Kevin John Gomez
L'appel dessiné à la main et la photo font que le thème de ce blog est personnel et correspond au nom du site Web - le webmaster lui-même. Ceci est un blog personnel d'une personne créative, et l'en-tête le communique parfaitement.
La navigation complète se trouve dans l’en-tête, car la navigation est limitée et l’accent est plus important.
5. Naldz Graphics
Cet en-tête fournit un excellent logo et une utilisation efficace du contenu dans l'en-tête. La plus grande partie de l'en-tête est le logo ou le nom du blog, ce qui facilite sa mémorisation.
L'œil est alors dirigé vers la navigation, où le lecteur peut approfondir le blog immédiatement, ou au moins avoir une idée de ce qu'est le blog. La navigation et les catégories sont un excellent moyen de dire aux nouveaux lecteurs de quoi parle le blog, s’ils sont bien définis.
Un graphique à droite aide à définir l'ambiance du blog et attire également l'attention sur le nombre d'abonnés et le lien RSS. Avec un blog ayant un nombre de flux modéré à élevé, il est conseillé d’afficher ce nombre dans l’en-tête, car il valide en quelque sorte le contenu du blog et lui donne de la crédibilité.
Il y a également du contenu supplémentaire, dans un endroit traditionnel pour ce type de contenu, ce qui permet de le retrouver facilement.
6. Pro Blog Design
Les deux éléments verts contrastés de cet en-tête font plus que l'on ne peut le penser. La plupart voient le logo avec la couleur verte de la couleur en premier lieu, où ils lisent le titre du blog et le titre. C'est un autre grand titre qui explique aux nouveaux lecteurs comment ce blog peut les aider.
Ensuite, de grands onglets surdimensionnés sont mis au point avec 1) leur taille évidente et 2) cet autre pop de couleur verte. L'autre onglet vert indique au lecteur qu'il ne s'agit pas seulement d'un blog qui peut vous aider à concevoir un blog de meilleure qualité, mais il offre également des services de conception de blogs. Au-dessus de cela, les icônes de médias sociaux que le lecteur peut prendre en compte pour une action ultérieure.
7. Octwelve
Cet en-tête créatif illustré met l'ambiance du blog assez rapidement. L'illustration est du webmaster et donne au blog une approche personnelle. Nous commençons à avoir une idée du contenu du blog avant même qu’il ne soit présenté.
Cette conception met une petite phrase d'introduction dans l'en-tête, définissant ce qu'est exactement ce blog. La navigation principale est juste en dessous du logo, elle est donc remarquée presque immédiatement. Il y a aussi d'autres détails dans l'en-tête qui sont amusants et amènent le spectateur à regarder l'en-tête plus longtemps.
8. Mark Forrester
Cet en-tête amusant, original et créatif donne le ton et est suffisamment unique pour attirer votre attention.
À première vue, le spectateur examine immédiatement l'en-tête et ses détails, ainsi que l'histoire qu'il présente. En cela, vient le logo et le slogan, où la vue découvre ce qu'est le blog.
Une fois que vous avez profité de l’en-tête, ils peuvent voir la navigation en haut et les signets sociaux à droite. L'en-tête mène également au contenu, ce qui amène le visiteur à faire défiler et à vérifier davantage.
9. Cult-Foo
Ceci est juste une belle en-tête qui attire l'attention de nombreux lecteurs quotidiennement. L'ambiance est un thème créatif et inspirant, et attire le bon public. Le logo dans cet en-tête est la "source" du reste de l'en-tête - une boîte qui mène au reste du dessin.
La barre de recherche est juste en dessous de celle pour la facilité d'accès, et les deux zones de contenu sont définies sur la droite.
La navigation est ce qui est vraiment cool à propos de cet en-tête, cependant. Il a plus l'impression d'être un tag-cloud, les plus grandes catégories étant le texte plus grand. De cette manière, une fois qu'un nouveau lecteur voit le nuage de mots-clés, il voit d'abord les plus gros éléments.
En contrepartie, ils font un lien avec ces mots et le contenu des blogs. Maintenant, le contenu présenté sur le blog a le plus de ce qui est maintenant le plus mémorable sur son contenu. N'oubliez pas de consulter la version en direct de ce site: la zone de nuage de balises d'en-tête s'est déplacée avec le défilement de l'utilisateur, avec une bordure décorative mais discrète.
10. Vectips
Cet en-tête est plutôt minimaliste, ce qui met davantage l'accent sur les bits de contenu qu'il contient. Le logo est décoratif et a une couleur contrastante, ce qui le rend mémorable.
Il est suivi par un slogan qui partage le contenu du blog, puis une navigation simple qui le définit davantage. La navigation est géniale car elle contient des icônes individuelles pour attirer l’attention sur chacun d’eux, alors que le lecteur les survole.
L'illustration amusante à droite donne le ton et dirige le regard vers le haut.
11. Poste à temps partiel
Contrairement à Vectips, cet en-tête a beaucoup à voir. Le logo en haut à gauche comprend un slogan, puis conduit le regard vers la navigation. Avant de cliquer sur la navigation, l’en-tête continue d’aider le site Web à aider ses nouveaux visiteurs, puis à afficher plus de navigation. Grâce à cette hiérarchie, le lecteur a simplement un aperçu de la navigation sur le site Web.
L'illustration à droite amène ensuite le spectateur à prendre note du flux RSS, puis l'œil est davantage autorisé à promouvoir la page de fans de la société sur Facebook.
12. TutCandy
La plus grande caractéristique de l'en-tête TutCandy est son imagerie créative, colorée et détaillée. Avec cela, il donne le ton et crée de la crédibilité pour un blog comme celui-ci. Le nom est entrelacé dans l'illustration colorée et peut être considéré comme le logo.
À droite, il y a un slogan qui explique ce qu'est le blog et en quoi il diffère: "Seuls les tutoriels de conception les plus savants." Bien qu’il s’agisse avant tout d’un jeu de mots simple et amusant, provoquer un jugement positif. "Only" - c'est unique, original, unique en son genre.
Il répond à la question "Comment ce blog est-il différent des autres?". "Tastiest" - le slogan aurait pu être "Tutorials Design Tasty." Non seulement cela semble un peu étrange, mais cela n'implique aucune préséance sur les autres tutoriels de conception, ou d'autres blogs de tutoriel.
Ci-dessus, il y a aussi une navigation concernant le blog et une barre de recherche à droite. Directement ci-dessous, le contenu est défini et organisé, ce qui amène le lecteur à approfondir le blog.
13. Yoast
Ce blog fournit un excellent contenu dans l'en-tête. La structure filaire unique permet à l'en-tête de contenir des graphiques et un contenu suffisant pour établir une connexion avec un nouveau lecteur. Le personnage et l'illustration derrière lui sont l'une des premières choses qu'un nouveau visiteur remarquera, et ils font un bon appel en faisant pointer le caractère sur le contenu de l'en-tête à gauche.
Une fois que l’œil est dirigé vers le contenu de l’en-tête, ils voient le logo et les moyens de s’abonner ou de se connecter au blog. Il se lit alors comme un peu de contenu "à propos de la page", sauf qu'il est présenté directement sur la page d'accueil, ce qui signifie que tous les nouveaux lecteurs sont concernés. Le contenu explique en quoi consiste le blog et affiche ensuite du contenu populaire et présenté.
Sous l'illustration à droite, le flux RSS est à nouveau présenté, mais cette fois avec un graphique plus reconnaissable. Remarquez que ce deuxième affichage de flux apparaît à droite, après que le lecteur ait terminé de lire certains titres de contenu, un peu d'informations et après avoir établi une connexion avec le blog.
14. Indie Dude
Le caractère de cet en-tête, comme tous les autres en-têtes avec des caractères, apporte une touche personnelle et constitue une excellente introduction au blog. C'est la première chose qu'un nouveau lecteur remarquera, et sa haute qualité, ainsi que les caractéristiques de conception qui l'entourent, font une déclaration sur le style de ce créateur et sur ce qu'il faut attendre de lui.
À gauche se trouve le logo, qui permet de voir le slogan expliquant le contenu du blog. Le regard est à nouveau porté sur un contenu partageant la personnalité du blog.
15. ozone3
Le thème de cet en-tête est unique et, en ce sens, il crée un site Web mémorable - une première impression vraiment géniale. Après avoir apprécié l'illustration, l'œil est dirigé vers le logo pour la mémorisation de la marque, puis directement vers la navigation principale, puis vers le contenu.
Les téléspectateurs découvrent pour la première fois que ce blog est axé sur un portefeuille de conception Web et ils le découvrent après avoir véritablement vu le travail du concepteur sur l’en-tête.
Malgré sa simplicité, cet en-tête est très efficace en termes de hiérarchie visuelle et établit un énoncé énorme pour les téléspectateurs.
16. nDesign Studio
Cet en-tête coloré est l'attraction principale de ce design web, et le logo indique au visiteur qu'il s'agit d'un studio de design.
L’en-tête incroyable valide les compétences du designer et sa marque. La navigation, les flux et la barre de recherche sont également étroitement liés à l’en-tête, ce qui en fait l’un des premiers éléments visibles.
La navigation principale se présente sous la forme d'onglets et est d'abord reconnue comme faisant partie de l'en-tête. Parce qu'il se présente sous la forme d'onglets, il semble également être connecté au contenu, ce qui permet aux visiteurs de voir le contenu important du blog.
17. Web Designer Wall
Ceci est un autre excellent blog de Nick La de nDesign Studio, et nous voyons une technique similaire: un arrière-plan / un en-tête impressionnant, validant les talents et l'expertise du concepteur. Le logo est plus grand ici, fournissant un slogan reliant le nom du blog à son objectif.
Le reste du contenu de l'en-tête est la navigation initiale, contact / RSS et la barre de recherche. Ils sont tous décorés de manière similaire à la tête, les reliant.
Ces éléments ont également des caractéristiques similaires à celles du contenu (arrière-plan plus simple, texture semblable à du papier), de sorte qu’ils ont également l’impression de faire partie du contenu. Cette section de l'en-tête connecte l'en-tête d'introduction à la zone de contenu.
18. Ma.tt
Il semble y avoir une règle de conception Web ultime pour ne pas créer d’en-têtes de plus de 200 à 250 pixels. C'est une règle à suivre pour différentes raisons, mais cet en-tête montre comment briser efficacement cette règle.
En ne montrant aucun contenu au début, Matt utilise son design pour faire la plus grande impression sur le premier visiteur. Ses détails élégants et ses manières créatives créent une première impression mémorable.
Le logo est grand et, comme le site Web est un nom, il prend la position d’un blog personnel. Le flux RSS est également en haut à gauche, indiquant au téléspectateur qu’il s’agit bien d’un blog depuis le début. Enfin, la navigation est ce qui est vu en dernier, et cela provoque le visiteur à continuer à travers le blog.
19. Pixel Resort
Le style d'illustration détaillé de cet en-tête le rend amusant, mais propre et professionnel. Il est même animé lorsque la scène traverse le jour et la nuit, rappelant au visiteur de continuer à regarder l’en-tête, qui contient le logo (marque) et la navigation. Cette méthode peut facilement promouvoir plus d'activité sur le blog.
Sous la navigation qui est mise au premier plan, il y a une navigation secondaire avec une flèche "connectant" au reste de l'en-tête. Cela aide à mieux définir les catégories et aide le lecteur à trouver le contenu qui les intéresse le mieux.
20. Webdesigner Depot
Ahh, oui - le blog que vous consultez actuellement. Que vous soyez un visiteur pour la première fois ou que vous lisiez Webdesigner Depot depuis longtemps, l’en-tête retient très certainement votre attention.
Ce qui est génial à propos de cet en-tête, c'est qu'il n'est pas seulement un en-tête avec un attrait créatif, mais les éléments indiquent qu'il s'agit d'un en-tête avec un attrait créatif axé sur les ordinateurs ou le Web. Les illustrations des ordinateurs portables, les "www." Et autres éléments technologiques attirent plus spécifiquement le public cible.
L'en-tête n'a vraiment pas beaucoup à offrir en termes de contenu, sauf pour un lien vers la page d'accueil. Cependant, comme il est si complexe, toutes les fonctionnalités supplémentaires peuvent surcharger le design et le rendre trop encombré.
Cet en-tête est tout simplement parfait: définir l'ambiance, inspirer le spectateur, et il est assez court pour mener le spectateur au reste du contenu.
Emballer
Nous espérons que ces vingt exemples vous aideront à mieux définir les questions posées au début de cet article et à aider chaque concepteur Web à accorder une plus grande attention aux en-têtes des blogs.
Le contenu à inclure dans un en-tête peut varier considérablement d'un blog à l'autre et il est important de garder à l'esprit les objectifs du blog, le thème et ce qu'un visiteur novice recherchera lorsqu'il visitera le blog.
Écrit exclusivement pour WDD par Kayla Knight .
N'hésitez pas à partager vos propres astuces pour la conception des en-têtes, ainsi que des exemples supplémentaires.