Le design d’un blog : vocabulaire, astuces et bonnes pratiques

by Marièke

Je ne suis pas très familière avec le design. Cependant, j’ai appris quelques petites choses au contact de mon associée, graphiste, et je pense qu’il était temps de le partager avec vous. Dans cet article, découvrez le vocabulaire du design, l’histoire du design de Mécanismes d’Histoires et quelques astuces pour créer ou faire évoluer votre blog.

*****

Le vocabulaire du design d’une marque

Au Studio Quatremain (mon entreprise), lorsque nous travaillons sur le design d’un blog, d’un site Web ou plus globalement, d’une entreprise, nous travaillons toujours autour de la notion de charte graphique et d’identité de marque. Il y a aussi un vocabulaire lié à la création d’un site web.

Identité de marque et charte graphique

L’identité de marque, c’est l’ensemble des éléments qui composent une marque. Ils sont à la fois visuels (logo, couleurs, polices d’écriture, visuels…) et textuels (wording, ton utilisé…). L’identité de marque est un juste milieu entre les envies de la personne qui crée l’activité et les goûts de ses clients idéaux / ses lecteurs idéaux.

Par exemple, il est difficile de proposer un logo rose fuchsia à une entreprise qui vend des produits pour des hommes de 35 à 55 ans. (Notez que ce n’est pas impossible, c’est juste que ce n’est pas le choix le plus immédiat.)

La charte graphique, ce sont les éléments visuels de l’entreprise : logo, couleurs, polices d’écriture, icônes, style des photos.

Design et web

Sur le web, enfin, deux notions sont importantes en design : le responsive design et l’ux design.

Le responsive design, c’est le fait d’avoir un design qui va évoluer selon la taille des écrans sur lesquels vos internautes consultent votre site (en général : ordinateur de bureau, tablette et téléphone).

L’ux design, c’est l’optimisation de l’expérience utilisateur sur le site. C’est réfléchir aux différents besoins des utilisateurs du site et aux différents scénarios de leur utilisation du site.

Le design de Mécanismes d’Histoire

En 2015, j’ai créé la charte graphique de Mécanismes d’histoires en quelques heures. J’ai choisi une palette de couleurs en ligne sur le site Design Seeds, j’ai créé un logo sur Canva et j’ai sélectionné des polices que j’appréciais sur Google fonts. Concrètement, je ne me suis ni posé la question de la réception de mes lecteurs ni des symboles que je mettais dans mon design. Je voulais simplement quelque chose qui me plaise, coloré et pas trop féminin. Ensuite, j’ai acheté un thème sur ThemeForest (Peligro puis Hickory deux mois après) et j’ai appliqué les différents éléments graphiques que j’avais choisi.

La spécialité du design de mon blog, plus que les couleurs, était son aspect « magazine » : sur la home, vous pouviez retrouver l’ensemble des derniers articles liés au différente catégories. J’aimais cette caractéristique mais il s’est avéré que c’était compliqué de retrouver le dernier article posté sur la home : c’est l’une des raisons pour lesquelles j’ai fait une révision de mon design samedi dernier.

Son évolution

Pour refondre mon site, j’avais plusieurs objectifs. Je voulais que les habitués puissent reconnaître mon site tout en en appréciant les modifications de design.

Pour cela, j’ai changé :

Les couleurs pour donner un coup de neuf (c’est dingue comme les couleurs se démodent vite !)

La police des titres pour rénover le design (comme les couleurs, certaines polices se démodent rapidement)

L’agencement de la page principale pour rendre plus visibles les derniers articles. Étant donné que j’écris régulièrement, je trouvais pertinent de mettre en avant mes nouveaux articles. En réduisant le nombre d’articles présentés, je souhaitais aussi donner une impression de clarté.

Le menu principal a enfin été beaucoup modifié. D’un menu, je suis passé à deux. Le menu du haut présente les pages fixes du site tandis que le menu principal (en dessous du logo) présente l’ensemble des rubriques du site.

Tout en conservant :

Le logo (j’ai modifié simplement ses couleurs selon la palette)

L’entête du site (le logo est centré, suivi d’une pub). Bien que les menus aient changé, l’apparence du site reste similaire à ce qui existait.

La police des textes : si elle vous semble différente, c’est parce que j’ai modifié l’espace entre les caractères.

Trucs et astuces pour le design de votre site

Pour commencer, sachez que si vous avez les moyens et l’envie de développer professionnellement votre blog, je ne peux que vous conseiller de vous tourner vers un graphiste pour vous aider à créer votre image.

Plus encore, je me permets de souligner quelques éléments que j’ai appris avec mon blog :

  • Mettez les icônes des réseaux sociaux en avant – d’autant plus si vous avez une communauté intéressante (il n’est pas forcément la peine d’afficher votre compte Google + si vous avez deux abonnés)
  • Mettez la loupe de la recherche assez haut sur le site
  • Mettez une sidebar (ou barre latérale) : ce n’est pas toujours hyper sexy mais c’est utile pour naviguer facilement dans le site. Mettez les éléments les plus importants de votre sidebar tout en haut.
  • Pour les annonces de publicité, mettez-les dans la sidebar et en en-tête. C’est personnellement ce que je trouve le plus beau. Je sais que ce n’est pas le plus rentable (Google préconise de les mettre aussi dans les articles) mais c’est le plus beau et le plus pratique pour les utilisateurs.
  • La lisibilité est l’un des aspects les plus importants pour un blog. Pensez à mettre une police facile à lire (au moins pour le corps de texte), mettez une taille suffisante, n’hésitez pas à espacer les lettres entre elles.
  • Pensez responsive design (adaptation du design aux téléphones et tablettes) : supprimez la sidebar, faites un joli pied de page avec les infos les plus importantes, évitez les pubs qui mangent tout l’écran des téléphones.

Il y a encore plein d’autres éléments (sur la hiérarchisation des informations, …) mais cela dépend aussi de votre site et de votre sujet.

*****

D’une façon générale, retenez que le plus efficace pour mettre en place le design de son site, c’est encore de passer par un professionnel qui connaît les différents éléments que je viens de vous indiquer et qui peut vous conseiller. Bien évidemment, il n’est pas forcément possible, lors du lancement d’un blog, d’investir à ce niveau, ce que je comprends. Dans ce cas, mon deuxième conseil niveau design, surtout si vous êtes un peu perdu, est : le plus simple sera le mieux. 

A demain,

Marièke

Crédit image : Une superbe succulente par Erol Ahmed (Unsplash, CC0)

Je m'abonne à la newsletter !

Abonnez-vous à la newsletter et recevez des ressources gratuites pour avancer sur vos projets d'écriture. Toutes les informations sur cette page.

Je ne spamme pas ! Consultez mes engagements pour plus d’informations.

À lire sur le même thème

2 comments

Dorian Lake 4 août 2017 - 8 h 03 min

« le plus simple sera le mieux. »

Je ne suis pas du tout expert en web design, mais en tant qu’utilisateur je ne peux que valider ce précieux conseil. Souvent les sites, principalement des TPE, veulent trop en faire, trop en mettre, et ça devient juste illisible. Alors que la simplicité et la clarté se montrent souvent largement suffisants, mais surtout plus agréables pour l’utilisateur. Et en plus, c’est plus simple à faire…

En tout cas, on sent que tu maîtrises le sujet, ta charte graphique me paraît claire et homogène depuis le début, et ton site plus pro que pas mal de pros.

Reply
Marièke 5 août 2017 - 7 h 59 min

Merci 🙂

(En même temps, c’est un peu mon boulot quand même : je ne conseille pas niveau design mais je conseille au niveau des contenus et de l’ergonomie ^^)

Reply

Leave a Comment