La plupart des designs de blogs échouent de la même manière insidieuse. Le texte est correct, les photos sont correctes, et pourtant la page reste une simple liste de liens que personne n'a envie de parcourir.
Un bon design de blog corrige cela grâce à une mise en page claire, et non à des décorations superflues. Une grille claire, un titre lisible, une image percutante par article, et le lecteur reste captivé.
Les 12 exemples de design de blog ci-dessous sont tous de véritables sites web en ligne. Chacun d'eux résout le même problème : comment rendre la lecture d'articles agréable et captivante, mais chacun y parvient à sa manière.
Leurs sujets couvrent la photographie culinaire, l'architecture, les mariages et même un blog sans aucune photo. Inspirez-vous de leurs mises en page pour créer le blog idéal.
Comment réussir le design d'un blog ?
Au-delà du style, les blogs les plus performants partagent les mêmes choix structurels :
- Une grille, pas une pile. Une grille à deux, trois ou quatre colonnes permet au lecteur de parcourir plusieurs articles simultanément. Une seule colonne verticale masque tous les articles situés sous le premier.
- Des titres qui ont du poids. Sur un blog, le titre est plus attractif que la miniature. Les meilleurs designs lui accordent une taille et un espace conséquents.
- Une image par publication, bien réalisée. La présence d'une image principale identique sur chaque fiche transforme une liste de liens en galerie.
- Un système de cartes qui se répète. Même format d'image, même position du titre, même espacement sur chaque publication. La cohérence est essentielle pour un rendu conforme à la conception.
- Une entrée par sujet. Les catégories, les étiquettes ou une barre latérale permettent au lecteur de choisir un parcours de lecture au lieu de faire défiler le contenu à l'aveuglette.
Blogs de la grille éditoriale
La mise en page de type magazine : une grille à plusieurs colonnes qui présente les articles comme des reportages. Elle convient aux blogs disposant d’archives importantes et d’images de qualité.
Anwita + Arun
Anwita + Arun Ils utilisent une grille de quatre colonnes, et c'est cette structure qui fait toute la différence. Leurs publications mêlent des photos verticales d'emballages de produits à des images panoramiques de plats.
Une grille rigide les tronquerait complètement. La disposition en mosaïque permet à chaque image de conserver sa forme, ce qui donne à la page un aspect dynamique et aéré. La date, le titre et un court extrait figurent sous chaque carte.
Emprunter ceci: Si vos images ont des formes variées, utilisez une grille en maçonnerie. Cela permet de conserver les proportions naturelles des photos au format portrait et paysage au lieu de tout recadrer en carré.
In the Ether
Dans l'éther L'ouvrage s'ouvre sur un titre surdimensionné « Dans l'éther » en caractères fins à empattements, puis bascule vers une grille à deux colonnes de grandes images. L'échelle est au cœur du concept.
Logo imposant, images de grande taille, quasiment aucun autre élément graphique. On dirait la couverture d'un magazine plutôt qu'un flux RSS, ce qui correspond exactement au style recherché par un blog soigné.
Emprunter ceci: Un grand bandeau typographique en titre structure le blog comme une publication, et non comme un simple flux de mises à jour. Veillez à ce que le titre soit suffisamment haut avant le premier article.
Atul Pratap Chauhan
Atul Pratap Chauhan L'ouvrage présente quatre colonnes de photos d'intérieur et d'hôtellerie, ce qui pourrait facilement donner une impression de surcharge. Des titres en petites capitales centrés et un espace blanc généreux évitent cet effet.
Le texte est discret, l'espacement est large, et ce sont les images qui parlent. C'est une grille dense qui conserve une impression de calme, un équilibre difficile à trouver.
Emprunter ceci: Une grille à quatre colonnes peut rester apaisante. Centrez les titres, utilisez une police de petite taille et laissez l'espace blanc s'exprimer pour éviter que la densité ne devienne ingérable.
Kalina's Photography
La photographie de Kalina À l'opposé de la discrétion, le résultat est réussi. Les titres des publications sont énormes, écrits dans une police à empattements grasse qui domine chaque carte plus que la photo elle-même.
Pour un blog consacré à la maternité et aux nouveau-nés, ce choix de mettre en avant le titre est judicieux. Les internautes recherchent ce sujet (« planifier sa séance photo de grossesse »), ce qui justifie la taille du titre. Une barre latérale « Articles récents » permet de consulter les publications les plus récentes.
Emprunter ceci: Mettez en valeur les titres de vos articles. Sur un blog que l'on découvre via un moteur de recherche, le titre est plus convaincant que la vignette ; il doit donc être mis en avant.
Templates de blogs minimalistes
La sobriété comme choix de conception. Ces annonces sont épurées au maximum, ne conservant que l'essentiel.
Ryan Hainey
Ryan HaineyLe blog de [nom d'utilisateur] est le plus sobre de cette liste. Un titre « Blog » en caractères à empattement, une grille à deux colonnes et, sous chaque image, la seule mention d'une date. Pas de titres, pas d'extraits, pas de tags.
Pour un photographe d'architecture, cette assurance est synonyme de bon goût. Les images se suffisent à elles-mêmes et, sans métadonnées, elles captent toute l'attention.
Emprunter ceci: Si vos photos sont de qualité, une fiche quasiment sans texte (image et date) est la mise en page la plus judicieuse. Chaque élément supprimé met davantage en valeur l'image.
Daniel Pullen
Daniel Pullen Il comporte une barre latérale gauche fixe avec des liens vers les catégories (Surf, Paysages, Culture) tandis que les articles remplissent le reste de l'écran sous forme de cartes pleine page avec le titre superposé à l'image.
C'est une manière claire de naviguer dans des archives volumineuses. Le lecteur peut accéder directement à un sujet, et les titres superposés permettent de conserver chaque fiche comme une unité cohérente.
Emprunter ceci: Une barre latérale de catégories permanente permet aux lecteurs de naviguer plus facilement par sujet sur un long blog, évitant ainsi de devoir faire défiler la page à l'aveuglette. Superposez le titre à l'image pour que chaque article apparaisse comme un bloc clair.
Blogs dirigés par des héros
Ces pages s'ouvrent sur une image pleine largeur avant le flux, utilisant le premier écran pour donner le ton ou énoncer le propos.
Strike the Lights
Frappez les lumières La page s'ouvre sur une photo pleine page des coulisses, sur laquelle est superposée une simple phrase : elle présente le blog et son auteur. Puis les articles commencent.
Ce blog exceptionnel accomplit une tâche que la plupart des blogs négligent. Avant même de lire un seul article, on comprend qu'il s'agit du blog d'un photographe professionnel, un blog sur sa formation et les coulisses de son métier. La présentation est claire et donne le ton dès le premier coup d'œil.
Emprunter ceci: Commencez par une image d'accroche qui résume le sujet du blog. Une phrase concise, accompagnée d'une photo percutante, incite le nouveau lecteur à rester.
Madison LaRoc
Madison LaRoc Le site utilise ici la mise en page la plus classique, et c'est bien là l'objectif. Une bannière « Dernier article de blog » surplombe une photo de couple éclairée par des vagues, puis une grille épurée à trois colonnes affiche la date et le titre en caractères à empattement.
Rien de particulièrement original, et c'est tant mieux. Pour un photographe de mariage, un blog sobre, facile à parcourir et organisé en trois colonnes est exactement le modèle de base que la plupart des sites devraient adopter avant de se lancer dans des projets plus sophistiqués.
Emprunter ceci: Une simple bannière légendée sur une grille à trois colonnes constitue la solution par défaut sûre et lisible pour la plupart des blogs. Mieux vaut opter pour cette solution avant de choisir quelque chose de plus élaboré.
Systèmes de vignettes et de cartes exceptionnels
Une carte de blog est bien plus qu'une simple photo redimensionnée. Ces trois éléments considèrent la carte elle-même, son calque, son étiquette et sa couleur, comme faisant partie intégrante du design.
Misha Martin
Micha MartinLe blog de voyage de [Nom de l'entreprise] mélange vidéos et photos, d'où l'importance de les identifier clairement. Chaque fiche, présentée dans une grille à deux colonnes, est accompagnée d'une étiquette de catégorie (« Vidéo »), d'une date et d'un lien « Lire la suite ».
Ce petit détail fait toute la différence. Un lecteur qui parcourt la grille sait, avant même de cliquer, quels articles sont des films et lesquels sont des articles écrits, ce qui lui fait gagner du temps.
Emprunter ceci: Indiquez clairement le format de chaque article (Vidéo, Guide, Récit). Lorsqu'un blog propose différents types de médias, une petite étiquette permet aux lecteurs de choisir ce qu'ils souhaitent regarder ou lire.
Waterhouse Wade
Wade-Waterhouse Le site arbore un bandeau de couleur vive reprenant les couleurs de la marque (une bande jaune chaude) et conserve une barre latérale « Derniers articles » directement sur la page de l’article, et non pas seulement dans la liste.
Cette barre latérale est l'astuce ingénieuse. Lorsqu'un lecteur termine un article, les articles suivants s'affichent immédiatement, ce qui permet une navigation fluide. La couleur vive de l'en-tête assure une visibilité optimale de la marque tout au long de la page.
Emprunter ceci: Intégrez une barre latérale « Articles récents » sur vos pages d'articles, et pas seulement sur la page d'accueil du blog. Cela permet de faire le lien entre la fin d'un article et le début du suivant.
Sinclaire Street
Rue Sinclaire Son blog, intitulé « Musings », se présente sous la forme d'une grille à deux colonnes de grandes photographies de rue en noir et blanc. Les titres des articles, en caractères à empattement, sont superposés aux images, et le monochrome s'étend sur toute la hauteur.
La sobriété est essentielle. Une seule palette de couleurs, une seule typographie, de grandes images et aucun élément superflu. L'ensemble forme un tout cohérent plutôt qu'une série de publications isolées.
Emprunter ceci: Optez pour une seule palette de couleurs. Un blog entièrement réalisé en noir et blanc se perçoit comme un ensemble cohérent, et non comme une accumulation de publications disparates.
Blogs à texte continu sans photographie
Tous les blogs n'ont pas de photos à afficher. En l'absence de photos, le design doit se suffire à lui-même.
Danielle Berggren
Danielle Berggren est un auteur qui ne dispose d'aucune photographie, et le design répond directement à cette lacune. Chaque article bénéficie d'une vignette illustrée personnalisée, intégrant le titre à l'image.
« Interview de l’auteur avec moi-même » et « Que faire quand l’obscurité devient trop pesante » se présentent sous forme de graphismes conçus sur un thème étoilé, d’un violet foncé.
C'est l'identité de marque la plus forte de cette liste, et elle existe précisément parce qu'il n'y avait aucune photo sur laquelle s'appuyer.
Emprunter ceci: Pas de photos ? Créez des vignettes personnalisées avec le titre intégré. Votre blog littéraire bénéficiera ainsi gratuitement de la même cohérence visuelle qu’un blog photo.
Points communs des meilleurs designs de blog
Mettez les 12 côte à côte et la tendance apparaît clairement. Le meilleur design de blog n'est pas le plus chargé. C'est celui où un visiteur peut parcourir la grille, lire un titre et comprendre immédiatement le contenu.
Ils s'en tiennent à un seul système de fiches et le respectent scrupuleusement. Ils accordent une place suffisante au titre ou à l'image pour qu'ils aient du sens, et vous n'aurez jamais à vous battre pour les obtenir.
Ils proposent une navigation par sujet, via une barre latérale, des étiquettes ou des catégories. Et ils adaptent la mise en page au contenu : gros caractères pour les blogs optimisés pour le référencement, grilles quasi sans texte pour la photographie, graphismes personnalisés pour les textes.
La sobriété l'emporte sur l'exubérance. Les créations les plus réussies ici privilégient la simplification à l'ajout.
Adaptez le design de votre blog à ce que vous publiez.
Il n'existe pas de mise en page idéale. Le design de blog adapté dépend du contenu et de la fréquence de vos publications. Voici un guide honnête :
Si la mise en page est en adéquation avec le contenu, la page paraîtra intentionnelle. Si le regard est attiré par un contenu inapproprié, le lecteur le ressentira, même sans pouvoir l'expliquer.
Comment créer son propre blog
Vous n'avez pas besoin d'un designer pour tout cela. Commencez par la grille et la carte, car ces deux décisions déterminent l'essentiel du design.
Choisissez un nombre de colonnes adapté à vos images, un format d'image à la une et une taille de titre que vous souhaitez conserver. Veillez ensuite à respecter ces règles pour chaque article.
Pour la création du site, un outil de création de sites web axé sur le portfolio vous propose des mises en page de blog déjà conçues sous forme de grilles, vous permettant ainsi de choisir parmi de bonnes options plutôt que de partir de zéro.
Si vous pesez des outils, notre sélection des meilleures plateformes de blogging pour les créatifs c'est par là que vous commencerez. Une fois que vous en aurez choisi un, vous pourrez commencer votre création de site web de blog voyage.
Chaque blog ci-dessus a été construit sur Pixpa, ce qui témoigne de l'étendue des possibilités offertes par les agencements intégrés, de Ryan Haineyla grille dépouillée de Danielle Berggrencartes illustrées de .
Quel que soit votre choix, commencez par soigner la grille et la carte. Le reste n'est que peaufinage.
Conclusion
La conception d'un blog repose essentiellement sur quelques choix judicieux et répétés : une grille adaptée à vos images, un titre aéré, une image percutante par article et une navigation claire par sujet.
Les douze exemples présentés ici vont d'un blog d'architecture minimaliste à un flux RSS illustré sur le thème cosmique, tenu par un Écrivain. Leur efficacité repose sur un principe commun : la mise en page est en adéquation avec le contenu, et le système de cartes reste toujours pertinent.
Choisissez le modèle le plus proche de ce que vous publiez, copiez la structure et appropriez-vous-le.
FAQ sur la conception de blogs
Qu'est-ce qui fait un bon design de blog ?
Un bon design de blog facilite la lecture et la consultation des articles. Cela implique généralement une grille à plusieurs colonnes, une image principale identique pour chaque article et des titres de taille appropriée.
Il offre également aux lecteurs une manière claire de naviguer par catégorie ou par étiquette, et adapte la mise en page au contenu, en utilisant une police de grande taille pour les blogs textuels et de grandes images pour la photographie.
Quelle est la meilleure mise en page pour un blog ?
Il n'existe pas de mise en page idéale, mais une grille à deux ou trois colonnes convient à la plupart des blogs. Elle permet aux lecteurs de parcourir plusieurs articles à la fois sans avoir à faire défiler indéfiniment.
Les blogs à forte composante photo privilégient les images plus grandes et un nombre réduit de colonnes, tandis que les blogs à forte composante textuelle bénéficient de titres plus grands et de vignettes personnalisées.
Combien de colonnes un blog doit-il comporter ?
Deux à quatre colonnes conviennent à la plupart des blogs. Deux colonnes sont idéales pour les articles longs et riches en images, trois colonnes offrent une lecture confortable par défaut, et quatre colonnes sont parfaites pour un blog avec de nombreuses photos.
Au-delà de quatre publications, chaque message a tendance à se rétrécir jusqu'à ce qu'aucun ne se démarque.
Chaque article de blog doit-il comporter une image à la une ?
Oui. Une image mise en avant identique sur chaque article est l'élément le plus important qui transforme une simple liste de liens en une page de blog soignée.
Si vous n'avez pas de photos, comme c'est parfois le cas pour un auteur, créez plutôt une vignette personnalisée pour chaque article. La cohérence prime sur la source.
Où puis-je trouver de l'inspiration pour la conception de mon blog ?
Au-delà des 12 présentées ici, les galeries en direct constituent la meilleure source, car elles montrent de vrais blogs plutôt que des concepts. Notre collection de exemples de sites web de blog c'est un bon endroit pour naviguer.
Lorsque vous regardez, étudiez la grille et le système de cartes, et pas seulement les couleurs. C'est la partie que vous pouvez réellement réutiliser.
Combien coûte la conception d'un blog ?
Si vous le créez vous-même à l'aide d'un créateur de sites web, un blog coûte le même prix qu'un petit site : environ le prix d'un forfait plus un nom de domaine. Consultez… Tarifs des derniers forfaits pour les chiffres actuels.
Faire appel à un designer pour un blog personnalisé coûte entre quelques centaines et quelques milliers d'euros, selon la complexité du travail. Pour tous les sites de cette liste, un modèle et des choix judicieux ont suffi.