Je donne quelques modestes conseils sur le forum « design et feuilles de style », les commentaires que je suis amené à faire sont souvent les mêmes. Aussi voici un article reprenant quelques règles élémentaires, en complément de l’article « Personnaliser votre design ».

1- La structure (ou template). La structure définit la position des différents éléments : en-tête, zone d’articles, colonnes. il existe deux types de structures : templates avec largeur de colonnes fixes, templates avec dimensionnement automatique en fonction de la résolution de l’écran de l’utilisateur. On peut ensuite choisir de placer une ou deux colonnes pour entourer la zone d’articles. Le choix de la strcuture a peu d’impact sur l’ergonomie du blog, cependant :

- une structure à taille de colonne fixe donne la possibilité de mettre un fond qui ne remettra pas     en cause la lisibilité du contenu (colonnes+zone d’articles).

Tendance : les colonnes fixes qui permettent plus de possibilité en termes de design même si son utilisation est elle aussi plus rigide (dimensions à prendre en compte pour chaque modification/placement d’élément).

2- Le fond. Le fond est la première chose modifiée par ceux qui souhaitent sortir des designs standards offerts par leur plateforme. Premier réflexe, mettre une grande et belle image. Mauvais réflexe. Deux cas de figure se présentent :
- le fond des articles et modules est transparent, tout ou partie du texte devient illisible en fonction des couleurs utilisées.
- Le fond des articles et modules est opaque, tout ou partie de l’image est masquée. La belle image est masquée…

Autres cas de figure : images de mauvaise qualité (résolution trop basse) ; photos utilisées comme motifs (images opaques et très contrastée). Il faut se résoudre à utiliser un fond neutre : couleur d’arrière plan, ou motif discret. Dans tous les cas il faut éviter que les zones de textes se retrouvent directement sur le fond. C'est-à-dire que l’on privilégiera un fond opaque derrière le texte.

Tendance : un fond uni avec une texture : tissu, tissu imprimé, et carbone ont la cote.

3- La bannière. La bannière est la vitrine de votre blog. la première chose que l’on voit. Il faut donc la soigner. Evitez les images de mauvaise qualité, et pensez « Produit » : votre blog est un produit, le design en est l’emballage et la bannière votre logo.

Tendance : le liseré au dessus de la bannière, les grosses bannières.

4- La couleur. C’est une des points clés d’un bon design. En général, pas plus de deux ou trois couleurs. Si vous utilisez deux couleurs différentes jouez sur le contraste (noir/blanc ; bleu/orange), ou sur les nuances (bleu foncé/bleu clair). En règle générale on utilise toujours en fond la couleur la plus froide pour le fond et la plus chaude en premier plan. Je vous renvoie vers cet article dans lequel je vous propose un générateur de thème de couleur.

Tendance : les tons pastels, les couleurs vives, le noir/blanc avec quelques touches de fuchsia.

5- Les polices. Comme pour les couleurs, on limitera leur nombre à deux ou trois maximum. Les polices devront être standards pour être lisibles par tous. Bannir les polices suivantes : Times New Roman (difficiles à lire sur écran), Comic sans MS (has been et infantile). Préférez les polices du type verdana, georgia, plus rondes et donc plus lisibles.

Si vous souhaitez une police personnalisée, vous avez deux possibilités : soit utiliser une image (.jpg, .png) sur laquelle se trouve votre texte, soit demander à tous vos lecteurs d’aller télécharger et installer votre police spécifique…

Gardez une cohérence entre la couleur des polices et le reste de votre design, pas plus de deux ou trois couleurs encore une fois.

Tendance : verdana, georgia, Arial

6- La mise en page des articles. Un article doit se lire très rapidement. Si votre article est long, créez une dynamique. Faites des paragraphes courts, mettez les éléments en gras et en couleur.
Si vous utilisez une image pour illustrer un article, faites-la encadrer par votre texte. Justifiez le texte pour avoir une harmonie entre les articles et les colonnes.
Utilisez les puces qui permettent d’aérer le texte et de scanner rapidement le contenu de l’article.
Utilisez un fond opaque derrière vos articles pour faciliter la lecture et pour le confort visuel.
Tendance : Noir sur blanc, bleu foncé sur blanc, gris foncé sur blanc, blanc sur noir

7- Les gadgets. Ce sont tous les éléments qui ont une faible valeur ajoutée sur l’ergonomie et la lisibilité de votre blog : curseur avec motif, gifs animés, menus dynamiques, animations flash, horloges, etc…il est très tentant de mettre en place ces gadgets sur un blog, beaucoup de gens les trouvetn sympa. Il faut savoir qu’avant tout ils perturbent l’attention du lecteur. Chaque gadget doit avoir sa place sur un blog et apporter quelque chose pour mettre en valeur le contenu, en termes de design ou de fonctionnalité. Si c’est pour vous faire plaisir : enlevez-le.

Tendance : la barre de recherche (blogbar par exemple), Google AdSense, le Dewplayer

8- Le son. Une grande majorité des internautes surfe en écoutant de la musique. Evitez tout déclenchement de la musique automatiquement. Si le son se déclenche automatiquement, il faut pouvoir le désactiver rapidement.

Tendance : un module avec Radioblog club, ou un podcast. Le son en fond de blog est has-been et très énervant : temps de visite moyen 5s.

9- Les images. Elles sont là pour servir le contenu et embellir votre blog. Proscrire : toute image de mauvaise qualité (résolution, contraste…), sans rapport avec le contenu, les gifs animés (ringards). Si vous avez des images de taille importante, ne mettez en ligne qu’une miniature (s’affiche plus vite) et permettez l’agrandissement par clic sur l’image : l’image grand format étant hébergée ailleurs que sur votre blog et s’affichant dans une nouvelle fenêtre.

Tendance : les maccarons, les images home-made, les images encadrées par le texte, les images encadrées…

10- La forme au service du fond. Le design doit mettre en valeur votre contenu. Il doit séduire le visiteur pour le retenir sur votre blog, mais ne pas le perturber pendant la lecture de vos articles. Un bon design, c’est trouver le bon équilibre.

Respecter ces règles ne rendra pas votre blog beau, mais fonctionnel et ergonomique. Vous pouvez enfreindre ces commandements allègrement dès que vous serez à l’aise.