Utilisateur de ce CMS (système de gestion de contenus web) depuis plus de 5 ans, il était temps de contribuer à ce logiciel libre. Suite à une discussion à Paris Web 2010 et aux encouragements de Romy Duhem-Verdière et Jacques Pyrat, je me suis lancé dans l’aventure.
Les anciennes icônes :
Les contraintes étaient les suivantes : créer un pack d’icônes basé sur les métaphores, avec une forte identité, adaptable aux couleurs de l’espace privé de l’utilisateur et adapté aux normes d’accessibilité en terme de contraste. Sans oublier qu’il fallait qu’elles soient acceptées par la communauté des développeurs de SPIP et qu’elles soient données sous licence libre.
Des icônes basées sur la métaphore :
Sur les 7 icônes, trois symboles ont été repris de l’ancien pack : la maison pour l’accueil, la bulle de bande dessinée pour les discussions et le crayon pour l’édition. Il a fallu rechercher 4 nouveaux pictogrammes pour représenter la publication, les squelettes, la maintenance et l’espace de configuration.
L’espace de configuration et la zone de publication sont venus assez rapidement car déjà normés : le symbole « validé » pour la publication, l’« engrenage » pour la configuration.
Une courbe cardiaque a été retenue pour la maintenance. Cette zone permet de maintenir le site en vie et à jour. C’est en quelque sorte le scope du site qui affiche son rythme, s’il y a besoin de l’injection d’une nouvelle mise à jour ou s’il faut sauvegarder les élément.
Le problème posé par les squelettes était différent. En effet, les squelettes sont une particularité de ce logiciel, on ne pouvait donc se baser sur aucun élément existant. Utiliser un squelette en petite taille aurait été illisible. Il fallait travailler avec "autre chose". Le # est une symbole fort des squelettes : on le retrouve en préfixe de chacune des balises ainsi que des coordonnées des couleurs en css. La métaphore était trouvée.
Une identité pour les icônes :
Ce sont des icônes volontairement très ouvertes : les formes ne sont pas limitées dans un espace définissant la zone de l’icône. Elles sont cadrées par l’utilisation de la grille et par l’utilisation d’un même arrondi pour l’ensemble des angles initialement droits.
Chacune comporte deux zones au minimum : une claire et une foncée permettant de jouer sur deux plans.
Cette identité avait une contrainte supplémentaire : que l’icône ait une largeur de 16px ou de 300px, il faut qu’elle soit visible et compréhensible.
Des couleurs adaptables et adaptées :
Dans SPIP, les différents utilisateurs ont la possibilité de changer les couleurs de l’espace privé. Il fallait que les icônes puissent respecter cela. Elles ont donc été créées avec des effets de transparence. Ce qui leur permet de s’adapter au fond choisi par l’utilisateur. Qu’il soit blanc, noir ou jaune et rouge à petit pois.
De plus, les deux filtres d’opacité (blanc 20 % et noir 50 %) ont été choisis pour que quelque soit la couleur de fond, l’élément principal (ou au premier plan de l’icône) soit visible par les personnes ayant des déficiences de vision liées aux contrastes.
Et alors ?
Une fois les premières esquisses dessinées, j’ai eu la chance d’avoir un très bel accueil de la part de la communauté SPIP. Après de nouvelles étapes de retouches et de finalisation, elles sont embarquées dans SPIP 3 !
Merci à toute la communauté SPIP. #SHARETHELOVE
Cet article est également disponible sur le blog de l’agence sev communication.