C’est une évidence : la première impression graphique que donnera votre module e-learning est importante. Mais comment faire pour rendre vos interfaces plus agréables à regarder quand vous n’avez pas de graphiste professionnel à votre disposition ?

Le guide intitulé Notions de design de l’interface utilisateur souligne à juste titre que le graphisme doit avant toute chose servir le contenu et il serait bien difficile de prétendre le contraire quand il s’agit de contenu pédagogique ! Les couleurs ont notamment pour fonction de mettre l’information importante en évidence, de regrouper visuellement des informations de même nature ou au contraire d’exprimer une différence par le recours aux contrastes.

Si l’aspect esthétique d’un module e-learning reste secondaire, vous admettrez avec moi que rien ne l’oblige pourtant à être horrible à regarder Qui n’a jamais été rebuté par une ressource - au contenu excellent pourtant - dont l’auteur n’était visiblement pas doué pour le coloriage ?

Entendons-nous bien : le graphisme est un métier à part entière et ce billet n’a pas d’autre ambition que de suggérer quelques outils et astuces aux concepteurs pédagogiques qui ne peuvent pas s’assurer le concours d’un professionnel…

Où trouver des sources d’inspiration ?

Une bonne idée sans doute est de s’inspirer des créateurs de sites web. C’est ce que nous invite à faire ce billet qui s’est amusé à décortiquer 60 palettes de couleurs élégantes. Impressionnant ! Vous devriez également consulter Kuler, qui est une sorte de bibliothèque collaborative de palettes graphiques. Autrement, avec une recherche sur Google pour “nuanciers de couleurs”, vous n’aurez que l’embarras du choix !

Où trouver des outils ?

Les couleurs ne sont-elles qu’une question de goût ? Je n’en suis pas certain… et j’ai pris l’habitude de ne pas fier qu’à mon seul jugement Et là certaines ressources sur le web peuvent s’avérer très utiles :

• ColorBlender : vous partez d’une couleur de votre choix et l’outil calcule automatiquement une palette de 6 couleurs qui s’accordent.
• Chromafiltre : une roue chromatique qui vous permet de choisir et d’accorder visuellement des couleurs. J’apprécie particulièrement les gammes qui proposent près de 140 accords de couleurs prêts à l’emploi, que vous pouvez obtenir en choisissant conjointement un effet (exemple : “calme”) et un type d’accord (exemple : “contrasté”) et hop le tour est joué !
• Color Hunter (signalé récemment sur le blog d’Onlineformapro) peut être intéressant quand votre contenu prévoit des illustrations. Il suffit de charger une photo sur le site et un nuancier extrait automatiquement la palette des couleurs qu’elle contient.

Et concrètement ?

Une fois que vous avez trouvé des couleurs qui vous plaisent s’accordent entre elles, il s’agit de les intégrer dans votre interface. Pour reproduire exactement la couleur choisie, il faut dans un premier temps récupérer leur code. En général, vous avez le choix entre le code HTML (hexadécimal) ou le code RGB (Rouge-Vert-Bleu), comme vous pouvez le voir sur l’illustration ci-dessus. La plupart des outils auteurs permettent d’éditer les couleurs et vous n’avez plus qu’à recopier le code, par exemple :

Enfin, si vous avez envie d’en savoir plus sur le monde des couleurs, je vous invite à consulter l’excellent pourpre.com.

Mais la charte graphique ne concerne pas seulement les couleurs, elle définit également les polices de caractères, les illustrations, les icônes… mais cela fera l’objet de prochains billets !

Et vous, comment élaborez-vous vos chartes graphiques ? N’hésitez pas à enrichir ce billet par vos suggestions.

A consulter sur le même thème :

• Vos prototypes avec Pencil Project

Ce bulletin a été publié le Jeudi 8 janvier 2009 23:19 et est classé dans Boîte à idées, OutilsVous pouvez suivre les réponses à ce bulletin avec le fil RSS 2.0. Vous pouvez répondre, ou faire un rétro-lien depuis votre site.