Flagfox – Concilier vexillologie et ergonomie

S’il existe un domaine de l’emblématique qu’on peut considérer comme assez familier, c’est bien celui de la vexillologie. Cette « science des drapeaux », héritière de l’héraldique née au Moyen Âge, s’intéresse aux combinaisons de signes et de couleurs sur une surface donnée formant des représentations symboliques, souvent officielles. Tout comme la « science des blasons », son aînée, la vexillologie est particulièrement codifiée, voire relativement rigide, et chaque dépositaire d’un drapeau détermine les spécifications précises quant à sa forme, son contenu, son usage, etc.

Comme bien des domaines de la vie courante, l’informatique fait usage de drapeaux quand il est nécessaire de représenter graphiquement un État1. Cependant, le plus souvent, les conventions officielles ne sont pas respectées stricto sensu : les proportions ou les couleurs, notamment, sont souvent harmonisées dans le but de rendre l’ensemble homogène2, et ne correspondent, dès lors, plus aux normes officielles établies.

Flagfox est une extension pour le navigateur Firefox qui va bien au-delà de ce qu’annonce explicitement son titre – elle permet notamment, par un clique sur son icône, d’avoir accès à une large palette de ressources utiles concernant la page visitée. Cette « icône » – accessible dans la barre d’adresse – est justement, comme son nom le laisse supposer, un drapeau, lequel représente le « pays où est situé le serveur du site ».

Depuis son lancement, Flagfox utilisait des icônes spécifiques : tout d’abord un seul ensemble, conçu avec de « faux airs » de bouton, complété ensuite par une série alternative moins contrastée3. Toutes ces icônes possédaient des points communs avec d’autres drapeaux utilisés dans de nombreuses applications informatiques : une palette réduite – deux nuances par type de couleur – ainsi que des proportions standardisées – un rectangle aux dimensions identiques.

Flagfox 4.2.17

Récemment, à quelques semaines de la publication de la cinquième version de l’extension, un renouvellement de ces jeux d’icônes a été annoncé4. Changeant complètement de philosophie, le nouvel ensemble se base désormais entièrement sur du matériel issu du domaine public, en l’occurrence, des images conçues par les contributeurs de Wikimedia, permettant ainsi une couverture plus étendue et une indéniable facilité de maintenance. Parmi les raisons invoquées, figurent aussi l’exactitude des couleurs et le respect des proportions, favorisant donc une concordance plus forte entre le rendu visuel final et les prescriptions propres à chaque drapeau.

Flagfox 5.0b1

Au-delà du simple changement d’habitude, l’utilisation de ce qu’on pourrait appeler des « drapeaux réalistes » au sein de l’interface d’un logiciel pose la question de la conciliation entre les nécessités de l’ergonomie et les exigences de la vexillologie. Si on peut comprendre les contingences techniques – ensemble aussi complet que possible et plus aisément maintenable – et approuver le principe d’une approche plus fidèle aux normes officielles, leur intégration ne se fait peut-être pas totalement sans heurts. Si les couleurs réalistes ne posent pas véritablement de problème – quoique le liseré grisâtre, ajouté par réglage aux icônes pour les faire ressortir du fond blanc de la barre d’adresse, ne soit peut-être pas du meilleur effet –, il me semble en être autrement quant au respect des proportions des différents drapeaux, lequel donne parfois une impression de flottement du contenu lors d’un changement de page. À cela s’ajoute le fait que la taille de base de ces nouveaux drapeaux, est désormais sensiblement plus importante que les autres icônes utilisées par le logiciel – y compris par d’autres extensions –, ce qui les fait évidemment apparaître, par contraste, bien plus imposantes.

Bien entendu, un tel changement ne va pas sans réaction de la part des utilisateurs5, quand bien même ces modifications restent limitées, n’affectant, après tout, qu’une partie du fonctionnement d’une extension au sein d’une application dont l’utilisation reste bien plus large. Il s’agit certes d’un détail mineur, mais qui pointe la difficulté de concilier l’ergonomie, liée par essence au confort d’usage, à une « science » aussi codifiée que la vexillologie, dont les règles imposent des contraintes fortes. Accorder la flexibilité indispensable à l’une avec une fidélité aux normes de l’autre ne semble pas aller de soi…


  1. Les drapeaux, dans leur acception la plus large, ne se limitent bien entendu pas à la seule représentation des « pays » en tant qu’organisations politiques et juridiques d’un territoire donné, mais aussi à certaines de leurs subdivisions internes, ainsi qu’à divers organismes, comme des associations, notamment sportives ou culturelles. En revanche, utiliser le drapeau d’un État pour symboliser une « langue » dans son ensemble relève de la méprise : l’Union Jack – emblème du Royaume-Uni – ne peut en aucun cas représenter la langue anglaise dans son ensemble, celle-ci étant présente officiellement dans de nombreux autres États. On notera que, pour compliquer la situation, certaines langues, comme l’espéranto, possèdent un drapeau plus ou moins officiel. 

  2. Les ensembles de ce type sont relativement nombreux, bien que souvent inégaux quant à la quantité d’États qu’ils recouvrent. En guise d’exemple, on peut citer notamment, parmi les plus connus et utilisés, ceux réalisés par Mark James (247 icônes, 2005-2007), Eugen Buzuk (284 icônes, 2007-2013) ou Dave Shea (192 icônes, 2008-2010)

  3. En consultant les fichiers internes de l’ancienne version de l’extension, on découvre que l’auteur du premier jeu de drapeaux est Matthias Slovig, dont le travail est toujours disponible sur son site personnel, à la rubrique small flags. Le second ensemble semble quant à lui être une adaptation des icônes réalisées par Mark James, précédemment mentionnées, probablement modifié par Marco Guadagnini qui est indiqué parmi les crédits. 

  4. David Garrett, “New Flags”, A blog for the Flagfox extension and its development (18.01.2014). 

  5. Comme souvent dans ce genre de cas, les critiques constructives semblent se faire assez rares, perdues entre les louanges flatteuses et les apostrophes parfois peu amènes. Je me suis pour ma part contenté d’indiquer n’être pas totalement convaincu par cette modification substantielle, proposant l’éventualité du retour d’une option permettant de choisir l’ensemble d’icônes à afficher : “Not actually convinced by the new set of flag icons in Flagfox 5.0.0”, Mozilla Add-ons (21.03.2014). 

Markdown – Réduction explicite

Les compagnies, les organisations, les marques ou les logiciels ne sont pas les seules entités du monde de l’informatique à utiliser des emblèmes : les technologies ou les langages ont aussi, bien que peut-être plus rarement, recours à ce bref condensé illustratif, notamment pour leur communication. Si la création de ces « métaphores visuelles » revient le plus souvent à l’auteur ou l’initiateur d’un projet, il n’en va pas toujours ainsi, et certaines initiatives individuelles émergent parfois.

Il en est peut-être ainsi pour Markdown, en passe de devenir un standard « de fait », notamment depuis son adoption par des plates-formes d’échange aussi importantes que GitHub ou Tumblr. Markdown, tel que décrit par son auteur principal John Gruber1, est « un outil de conversion [qui] permet de rédiger en utilisant du texte brut lisible et facile à écrire, puis de le convertir de manière structurellement valide en XHTML ou HTML2 », bref, un « langage de balisage léger » comme le défini Wikipedia.

Cependant, bien que documentée et implémentée de manière croissante, Markdown n’a officiellement aucun emblème – plusieurs applications utilisent simplement un dérivé de l’insigne du site de John Gruber – pas plus que d’extension de nom de fichier définie – l’usage de .md semble cependant tenir la corde, ne serait-ce que grâce à son intensive utilisation sur GitHub. Dustin Curtis ayant fait ce constat – « il n’y a actuellement aucun symbole universel pour identifier le support de Markdown3 » –, il a donc décidé d’en créé un, en le portant dans domaine public4.

The Markdown Mark

Le nom même de Markdown combine deux idées. D’abord, au sens littéral, markdown est une remise, une réduction de prix. Mais comme une boutade, markdown répond aussi à markup, traduit en français par « balisage ». Markdown, rien que par son libellé, est donc un genre de double métaphore : il s’oppose aux langages de « balisage » plus complexes par une syntaxe « réduite ».

Le symbole mis au point par Dustin Curtis synthétise bien ce concept. Dans un genre de cartouche – qui pourrait schématiquement représenter une étiquette à accoler sur un produit en réduction –, deux caractères aisément identifiables sont juxtaposés : la lettre « M » et une flèche pointant vers le bas. Bien sûr, on pourra arguer qu’il s’agit là, pratiquement, d’une « traduction graphique » mot à mot. Il semble cependant assez difficile de trouver un moyen de dépeindre de manière universelle le terme mark. Quant à la flèche indiquant une direction, elle est un symbole unanimement reconnu – qu’on pense notamment à celle pointant au contraire vers le haut, et qui indique le passage en majuscule sur probablement tous les claviers du monde.

Plus qu’un insigne sophistiqué, c’est donc un symbole explicite et aisément identifiable qu’a voulu mettre au point Dustin Curtis – l’ajout d’une « approximation » purement textuelle5 va d’ailleurs dans ce sens. D’un point de vue conceptuel, l’objectif semble atteint : reste à voir si, sur le plus long terme, l’idée va s’imposer.


  1. Aaron Swartz (1986–2013) est souvent mentionné comme un « contributeur substantiel ». John Gruber indique d’ailleurs dans ses remerciements qu’il mérite « énormément de crédits pour ses commentaires sur la conception de la syntaxe du format Markdown » : John Gruber, “Markdown”, Daring Fireball (17.12.2004). 

  2. Traduction partielle du premier paragraphe présentant le projet. Toutes les spécifications sont accessibles sur la page de l’auteur, op. cit.

  3. Dustin Curtis, “The Markdown Mark” (14.03.2012). 

  4. Toutes les sources nécessaires à l’utilisation de ce symbole sont disponibles sur GitHub

  5. Littéralement, l’auteur évoque une « approximation Unicode » permettant d’indiquer Markdown en utilisant la suite de caractères [M↓] dans le cas où l’usage d’une illustration serait impossible. 

Publié le : 24 mai 2013

Référence : dcurt.is

Commentaires: Voir les commentaires

Catégories : icônes,langage,

Steampunk Storage – Informatique rétro-futuriste

Parmi les « tendances » graphiques du moment, le vintage semble s’être fait une place, si ce n’est importante, à tout le moins, remarquable. Paradoxalement, c’est probablement grâce à de nouvelles possibilités techniques que des sites internet à l’aspect ouvertement « rétro » ont pu voir le jour. Bien que ces innovations n’aient pas été nécessaires en matière d’emblématique informatique, les cas ne sont cependant pas si fréquents.

David Lanham – bien connu notamment pour la création du petit oiseau bleu qui sert d’emblème au logiciel Twitterrific1 –, s’est essayé à transposer la thématique steampunk2 à certains périphériques de stockage. L’ensemble, baptisé Steampunk Storage3, est assez éloigné de son style habituel, qu’on pourrait qualifier schématiquement comme « organique » – ses créations semblent plus souvent marquées par des sources d’inspirations animales ou végétales que mécaniques ou technologiques. C’est que le « genre » se nourrit plus de mélanges de textures issues de l’industrie – acier, cuivre, cuir, etc. – que de créatures fabuleuses aux atours colorés ou à la morphologie exotique.

Steampunk Storage

Cette livraison se compose de huit icônes tentant chacune d’appliquer des métaphores steampunk à des types de périphériques – courant sur les systèmes Apple, plus particulièrement :

  1. Airport représente un genre de ballon qui n’est pas sans rappeler une montgolfière – le zeppelin est probablement plus répandu dans l’iconographie rétro-futuriste, mais plus délicat à mettre en scène dans la quadrature traditionnelle d’une icône informatique
  2. Drive semble représenter un genre de chaudière, probablement sous pression, comme une pièce du moteur d’un engin, ainsi que le laisse supposer un bout d’engrenage apparent
  3. FireWire joue sur la présence de flammes visibles à travers la grille de ce qui semble être un fourneau, le tout complété par une prise portant l’insigne moderne de ce type de connexion
  4. Internal se présente sous la forme d’un hublot hermétiquement clos, grâce à deux verrous apparents, derrière lequel on aperçoit une sphère métallique
  5. Network symbolise la complexité du réseau par un entrelacement de tuyau, probable rappel du système de transport par tube pneumatique
  6. Removeable présente un mécanisme, peut-être d’horlogerie, sertit dans un coffret finement ouvragé et muni de deux poignées indiquant sa mobilité
  7. Time Machine est probablement la moins ouvertement steampunk, puisqu’à défaut de flamme ou de fumée, des faisceaux électriques violacés symbolisent des capacités spécifiques, le tout dans un appareil qui semble moins « cuivré »
  8. USB reprend plusieurs aspects visuels utilisés pour Drive, mais avec un appareil de mesure plus imposant et, surtout, l’ajout d’un branchement bien visible, flanqué de l’emblème actuel de ce type de connexion

Du strict point de vue de la réalisation, ces créations sont incontestablement une réussite. Cependant, la relative homogénéité de forme – les icônes sont pour la plupart circonscrites dans un cercle – et de ton – métallique, cuivre ou laiton –, les rend potentiellement difficiles à distinguer les unes des autres. Le phénomène s’accentue un peu plus lors d’une utilisation en résolution réduite : les détails – jauge, compteur, branchement, etc. – visibles sur la taille la plus importante deviennent dès lors souvent imperceptibles.

Bien que tout à fait utilisables, ce lot d’icônes est probablement plus un exercice de style – surtout pour un artiste dont le principal de la production ne semble marqué du sceau de l’hyperréalisme –, et c’est sans doute perçu comme tel qu’il a été considéré, par d’autres acteurs du domaine, comme une source d’inspiration4.


  1. Pour ceux qui ignoreraient tout de l’aspect de cette mascotte, surnommée Ollie et souvent confondue dans les médias avec celle de Twitter elle-même, l’auteur présente la dernière mouture sur son portfolio : David Lanham, “Twitterrific”, Drawings and other creations (05.12.2012). 

  2. Il n’est pas question de revenir ici en détail sur la définition, l’histoire ou l’esthétique de ce qui est au départ une sorte de jeu littéraire. En dehors des nombreux liens aisément consultables sur le réseau, on peut noter deux récents essais conséquents sur le steampunk en particulier et le « rétro-futurisme » en général : par Étienne Barillier, Steampunk ! L’esthétique rétro-futur et, sous la direction de Raphaël Colson, Rétro-futur ! Demain s’est déjà produit, tous deux chez les moutons électriques, respectivement en 2010 et 2012. 

  3. L’annonce de la parution, ainsi qu’une brève note de l’auteur à ce propos, sur son site personnel Drawings and other creations (07.12.2010). Le set est disponible en téléchargement gratuit sur The Iconfactory

  4. À titre d’exemple, et par simple ordre chronologique, on peut mentionner un « rebond » de l’icône Drive par l’Indien Pranav Pramod, visible sur son compte Dribbble (31.12.2011), ou une icône pour navigateur internet d’inspiration steampunk par un Japonais répondant au nom de Wakaba, disponible sur son compte deviantArt (27.01.2012). 

Publié le : 15 mai 2013

Référence : dlanham.com

Commentaires: Voir les commentaires

Catégories : icônes,

Git – Bifurcation vers la modernité

Dans le domaine du logiciel libre, les différents aspects liés à l’identité, notamment graphique, ne sont fréquemment guère développés, pour dire le moins. Sans association, organisme, voire société commerciale, soutenant un projet, identités visuelles et autres chartes graphiques passent souvent pour quantités négligeables, la majorité des ressources allant logiquement aux aspects les plus utilitaires.

Le logiciel de gestion de version Git faisait partie de ces « enfants pauvres » du branding. Longtemps cantonné à un cercle restreint de développeurs professionnels ou avertis, principalement parce que sans application « grand public » pour les systèmes les plus répandus, il se contentait d’une identité presque purement symbolique – trois signes de soustraction rouges superposés à trois d’addition verts. Cependant, les temps changent, notamment grâce à la rapide expansion de la plate-forme GitHub, véritable « réseau social des développeurs », basé précisément sur ce logiciel. À l’occasion de la mise en ligne de la refonte du site de Git, on a donc pu prendre connaissance de la naissance d’une nouvelle identité visuelle1.

Happy Git Family (par Jason Long)

Abandonnant la symbolique mathématique des soustractions et des additions, le nouvel emblème conçu par Jason Long utilise une figure qui n’est pas sans rappeler celle de son « concurrent » Bazaar2. En effet, là où l’icône de Bazaar représente assez fidèlement – notamment en raison du choix de la palette de couleurs – un panneau routier qui indiquerait un embranchement rejoignant une route principale, le nouvel insigne conçu pour Git utilise certes la forme rhombique, mais de manière moins manifeste, et les lignes qui s’y trouvent semblent plutôt diverger que converger. Par ailleurs, le tracé de ces lignes – ainsi que les trois cercles symbolisant des commits – est en réalité une découpe de la forme du losange : peut-être peut-on y voir un genre de rappel du temps des cartes perforées.

Cette « rénovation » de l’image du logiciel Git ne se limite pas au seul insigne. Outre l’intégralité du site, entièrement revu de manière moderne et homogène, la charte graphique s’étend aussi à d’autres outils liés, comme libgit2, dont l’emblème est particulièrement riche de métaphores13. Outre la jonction de version, reprise de la nouvelle icône, on y voit ainsi un empilement de trois niveaux – pouvant symboliser la notion de « livre », elle-même liée au concept de « bibliothèque », en même temps qu’un travail qui s’effectuerait par enrichissement de strates successives. Par ailleurs, les cercles en creux de l’insigne du logiciel se transforment en plots, dont seulement trois sont utilisés pour joindre les lignes désormais colorées en blanc, donnant à l’ensemble l’aspect d’une pièce d’un jeu de construction – symbolique assez évidente des « briques logicielles ».

L’air de famille – parenté, filiation ? – entre cette nouvelle icône de Git et celle de Bazaar semble assez évidente : elles partagent bien entendu la même inspiration. Cependant, par sa réalisation géométrique volontairement simple, la volonté de décliner le concept à d’autres éléments graphiques, voire à l’intégralité du site du logiciel, la démarche est bien plus ample et donne un salutaire coup de modernité à un outil libre.


  1. Scott Chacon, “New Git Homepage”, The GitHub Blog (07.05.2012). 

  2. Pour s’en faire une idée, il suffit de consulter la page dédiée au logo sur le site officiel du logiciel Bazaar. Quant au nouvel insigne de Git, il est téléchargeable ainsi que son logotype sur le site officiel de l’application – on peut regretter que seul un fichier EPS récent soit disponible. 

  3. Jason Long présentait sur son compte Dribble le concept de cette nouvelle représentation complétée, quelques semaines avant la mise en ligne du site, par la déclinaison proposée pour cet outil, conjointement à celui du logiciel principal. C’est cette seconde image qui est utilisée ici en guise d’illustration. 

Publié le : 15 avril 2013

Référence : github.com

Commentaires: Voir les commentaires

Catégories : icônes,marque,logiciel,

Haut de la page