29 juin 2016

Améliorer le design de son blog

Tiens, mais ne seraient-ce pas les vacances qui approchent ? 

C'est l'occasion de se poser un moment devant son ordinateur et de donner un petit coup de peinture à son blog ! Dans cet article, nous vous donnons quelques astuces pour vous occuper du design de votre blog, lui donner une seconde jeunesse, tout en le gardant lisible pour vos lecteurs. 

Votre design est une source d'informations pour vos visiteurs. Plus il sera simple et efficace à lire, plus il sera agréable d'y naviguer !

CB design

Pour changer le design de votre blog CanalBlog, rendez-vous dans votre espace de gestion de blog, puis dans "Apparence" et enfin dans "Style". Voici un tutoriel pour vous aider : 

 

1) Choisir la couleur principale de votre blog

Pour construire l'apparence de votre blog, songez à une couleur ou à une teinte sur laquelle vous baserez votre design. Cette couleur sera utilisée pour le fond de votre blog et/ou le fond de la colonne principale (celle où se trouve le contenu). Aujourd'hui, beaucoup de blogs sont blancs. Mais selon vos goûts, vous pouvez préférer du bleu, du jaune, du rouge...

La thématique de votre blog peut rentrer en compte dans votre choix ! Un blog de jardinage sera souvent vert. Les blogueurs photographes, eux, choisiront plutôt le noir ou le blanc pour mettre en valeur leurs clichés. 

Si vous le souhaitez, cherchez à vous démarquer et cassez les codes. Attention à ne pas trop surprendre pour autant ! La couleur porte une information. Des visiteurs qui arriveraient sur un blog de jardinage rouge risqueraient de ne pas en comprendre le thème au premier coup d'oeil. De plus, comme la couleur rappelle aussi des sentiments, le rouge risque de paraître agressif.

 

2) Choisir une couleur pour la police d'écriture

Une fois votre première couleur sélectionnée, réfléchissez à une autre couleur très importante : celle de la police d'écriture. 

Elle doit être suffisamment contrastée avec le fond pour être lisible. Il est très compliqué de lire une police presque invisible. Cela demande un effort de concentration supplémentaire.

Pour savoir si votre contenu est assez lisible, regardez votre blog et plissez les yeux. Si vous arrivez à lire ce que vous avez écrit, félicitations, votre choix de couleur est bon ! Sinon, adaptez la couleur de la police pour pouvoir la différencier de votre fond.

 

3) La palette de votre blog

Comme dit précédemment, chaque couleur est une information. Ainsi, il vaut mieux éviter les profusions de couleurs. 

Nous vous conseillons d'utiliser de 3 à 5 couleurs pour le design de votre blog. Lorsque vous sélectionnez une couleur, notez bien son code, pour pouvoir la réutiliser sur d'autres éléments du design. 

Si vous avez des difficultés à trouver des jolis ensembles de couleurs, voici trois outils (malheureusement en anglais, mais simples à comprendre) : 

  • Coolors est très pratique si vous n'y connaissez rien. En cliquant sur "Start the generator", il vous propose une palette de 5 couleurs. Appuyez sur la touche entrée pour en avoir une autre, jusqu'à trouver quelque chose qui vous convient. Les codes des couleurs (par exemple : #D6A184) s'affichent directement sur le site. Il suffira de les copier sur l'espace "Apparence" puis "Style" de votre blog.
  • Paletton a plus de possibilités, mais il demande un peu plus de connaissances. On apprécie beaucoup une de ses options, la "vision simulation" qui permet de visualiser comment les daltoniens voient les couleurs sélectionnées. 
  • COLOURLovers ressemble davantage à une bibliothèque. Ce site vous décrit les palettes de couleurs utilisées par des grands sites internet, pour pouvoir vous inspirer et connaître les tendances.

coolours

Une proposition de palette par Coolors

4) Créer une bannière

Lorsque vous créez votre blog, CanalBlog mettra automatiquement votre titre en bannière. 

Si vous souhaitez ajouter votre propre bannière à votre blog, voici un article de l'Aide qui vous expliquera comment faire et vous donnera quelques astuces : 

Comment insérer une bannière en haut de mon blog ? - Aide de CanalBlog

Pour personnaliser votre blog, vous pouvez lui ajouter une bannière de votre création. Sans bannière, votre titre de blog est affiché sur un fond simple, comme ici : Pour ajouter votre bannière, il vous faut d'abord vous rendre dans l'espace d'administration de votre blog, puis aller sur l'onglet " Apparence".

http://aide.canalblog.com

Nous vous conseillons de choisir une image dont les couleurs se marient bien avec celles de votre palette !

 

5) Choisir sa police d'écriture

Jusqu'ici, nous avons beaucoup parlé de couleurs ! La police d'écriture est elle aussi importante. CanalBlog vous propose une petite centaine de polices pour l'apparence de votre blog. 

Difficile de choisir, n'est-ce pas ?

Songez que certaines polices sont plus simples que d'autres à lire. Rappelez-vous de notre conseil : plissez les yeux devant votre écran. Si vous avez du mal à déchiffrer, ce n'est pas la police idéale, ou alors, augmentez la taille des caractères. 

Choisissez une police simple et lisible pour le contenu de vos messages (notre liste de "polices classiques" est une bonne sélection). Si vous voulez mettre une police avec un brin de folie et vous amuser, vous pouvez l'appliquer à vos titres de messages et de blocs dans vos colonnes. Effet garanti ! Et en plus, vos messages se liront aisément. 

beemade

Un joli design simple à lire sur CanalBlog : le blog de Bee made.

 

N'oubliez pas !

Quand on travaille sur le design de son blog, on a tendance à faire comme on le sent, à mettre toutes nos couleurs préférées les unes à côté des autres sans y penser. Si vous avez de la chance, cela peut être très joli ! Mais parfois, le mélange n'est pas agréable à regarder. 

Chaque visiteur de votre blog est différent : certaines personnes voient mieux que d'autres, il y a plusieurs formes de daltonisme, et même les personnes avec une vue parfaite peuvent être fatiguées après une journée sur l'écran. Chaque écran d'ordinateur est différent : tout le monde ne le règle pas de la même manière, il peut être placé à des endroits plus ou moins éclairés, fonctionner plus ou moins bien. 

C'est pour cela qu'il faut songer à la facilité de lecture de votre blog. Des couleurs trop saturées (trop "flashy") seront fatiguantes. Un manque de contraste entre votre police d'écriture et le fond demandera un effort de lecture supplémentaire. 

Lorsque vous visitez d'autres blogs et d'autres sites web, essayez de décrypter ce que vous aimez et ce que vous n'aimez pas dans leurs apparences. Vous y trouverez des bonnes sources d'inspiration ! 

 

N'hésitez pas à partager vos propres astuces et à nous poser des questions dans les commentaires ! 

Posté par Staff Melyonen à 16:30 - - Commentaires [16] - Permalien [#]
Tags : , , , , ,




Commentaires sur Améliorer le design de son blog


    Merci pour votre article très instructif.
    Moi je n'arrive pas à mettre en lien dans une colonne le badge ou motif à la place du lien texte moins joli, je ne sais pas si je suis bien claire...

    Posté par Vivie, 29 juin 2016 à 17:16 | | Répondre
    • Bonjour ! Avez-vous essayé avec les blocs personnalisés http://aide.canalblog.com/archives/2014/02/18/29245801.html ? Si je comprends bien, vous cherchez à mettre un badge avec un lien sur ce badge.
      Dans ce cas, ajoutez l'image du badge dans votre bloc personnalisé, puis sélectionnez l'image et cliquez sur le bouton pour ajouter un lien dessus.

      Posté par Staff Melyonen, 29 juin 2016 à 17:22 | | Répondre
  • Merci pour cet article ! Ca me rappelle que je n'ai pas changé le look de mon blog depuis 6 ans, il serait temps que je fasse quelque chose... Je vais m'inspirer de vos conseils.

    Posté par Pastellle, 29 juin 2016 à 22:45 | | Répondre
  • oui merci pour ces tuyaux

    Posté par Bilichou, 01 juillet 2016 à 19:17 | | Répondre
  • Excusez-moi, je rencontre un problème : Des images ont disparu de mon blog (au moins une par post !!) et sont inaccessibles quoi que je fasse...

    Posté par Laure Selina, 11 juillet 2016 à 02:15 | | Répondre
    • Bonjour Laure,
      Nous sommes en train de regarder d'où vient le problème !

      Posté par Staff Melyonen, 11 juillet 2016 à 10:25 | | Répondre
  • Article très intéressant, merci.

    Posté par Patrick L, 13 juillet 2016 à 17:53 | | Répondre
  • Merci pour tous ces conseils !

    Posté par flowerpower14, 14 juillet 2016 à 17:19 | | Répondre
  • Je sais mettre une bannière....?

    Posté par issoire63, 19 juillet 2016 à 17:49 | | Répondre
  • Bonjour, je suis tout nouveau blogeur et ne vois pas comment ajouter ou supprimer des photos, des textes et commentaires et autres...ce serait sympa de me donner un petit coup de pouce, merci, François

    Posté par Frankieops, 06 août 2016 à 16:44 | | Répondre
  • du coup j'ai cree unne nouvelle banniere au design simple mais je me suis lancee ☺

    Posté par Bilichou, 04 septembre 2016 à 17:17 | | Répondre
  • Bonjour je n'arrive pas a augmenter la police de mes commentaires ou à la changer, pour qu'elle ne soit pas identique à la police du corps du message, comment faire?? Merci par avance.

    Posté par Sincerite777, 08 décembre 2016 à 11:00 | | Répondre
    • Bonjour,
      La police des commentaires est la même que celle de la police du corps de message, pour plus de lisibilité (comme vous l'avez certainement trouvée, elle est dans "Apparence" > "Style" > "Corps de Message"). Elles peuvent éventuellement être différenciées en mode avancé, mais nous vous déconseillons ce mode si vous n'êtes pas à l'aise en HTML et en CSS.
      Si vous souhaitez qu'elle soit différente de celle du corps de message, le plus simple reste d'en choisir une spécifique quand vous rédigez le message (en sélectionnant le texte et en cliquant sur "police").

      Posté par Staff Melyonen, 08 décembre 2016 à 11:49 | | Répondre
Nouveau commentaire