Une logique fait main dans la création graphique sur le Web

☀ Designer-hacker

🡲 Les pratiques du détournement

Les langages de programmation dans le design graphique ont été une révolution dans la pratique des designers. Un lien très fort s’est établi entre les outils logiciels pour le graphisme et les productions graphiques résultant de leur utilisation. Les graphistes doivent, ou peuvent désormais, s’approprier la programmation afin de s’inventer leurs propres outils et donc, leurs propres réponses graphiques à des besoins bien spécifiques. Ce contexte invite les designers graphiques à s’approprier les textes de programmation et à se forger une culture graphique. Certains précurseurs ont exploité les techniques de programmation pour inventer des mécanismes permettant de retranscrire des éléments graphiques. Notamment, Jürg Lehni¹ est un designer, développeur qui expérimente au sujet de la création d’outil. Connu pour ses Machines à dessiner² où l’on retrouve une retranscription de la main du graphiste au travers de la machine. Ses œuvres prennent généralement la forme de scénarios de production et de recherche. Cette démarche, on la retrouve dans les deux outils de script : Scriptographer et Paper.js, dont il est le créateur. Le premier est un plugin de script pour Adobe Illustrator, créé en 2001. Il offre la possibilité à l’utilisateur d’étendre les fonctionnalités du logiciel en utilisant le langage JavaScript. L'utilisateur autrefois dirigé par les contraintes techniques du logiciel privatif Illustrator, se voit repousser les limites créatives de l'outil à l'aide de quelques lignes de code. Plutôt que de se contenter uniquement des outils proposés par le logiciel en question, utilisés par la plupart des graphistes, l'utilisateur peut désormais les détourner et les améliorer selon ses propres besoins. Scriptographer permet la création d’outils de dessin avec la souris, des effets pour modifier les éléments pré-existants et en créer de nouveaux. Il donne à l’utilisateur les mécanismes nécessaires pour confronter un logiciel privé avec la philosophie de l’open source. Malheureusement, ce projet a vu la fin en 2012, suite au lancement de CS6 sur Illustrator, qui va rendre impossible l’utilisation du plugin. Paper.js prendra le relais en proposant des services similaires à Scriptographer, mais cette fois-ci compatible avec HTML5 et l’élément Canvas. C’est une bibliothèque Javascript open source, qui offre des fonctionnalités puissantes pour la création vectorielle au sein même du Web. Les langages de script sont des niches dans les langages de programmation, ce qui va permettre de configurer un espace de travail qui va déterminer des fonctionnalités bien spécifiques. Comme ici, Paper.js qui rend possible le dessin vectoriel directement sur une page HTML.

🡱 Variantes des outils proposés par Scriptographer.

🡱 Aperçu de la librairie en ligne Paper.js.

Dans l’absolu, il existe trois types de designers : les créateurs d’outils, les utilisateurs de ces outils et les hackers/bricoleurs/bidouilleurs. Dans le domaine du design graphique, la création d’outils est de plus en plus présente, que ce soient des outils conçus expressément en réponse à un projet, des outils à but personnel ou encore, à but d’être communément utilisés par les autres. Tout d’abord, il nous faut qualifier le verbe hacker, et ce qu’est un hacker. Dans l’imaginaire collectif, le hacker est un individu surdoué en informatique qui lance des attaques électroniques pour dérober de l’argent, des informations ou des données privées, avec parfois l’intention d’endommager la structure d’une propriété numérique : site, compte. Pourtant, hacker n’est pas seulement une action négative qui consiste à voler, piller ou délabrer un contenu numérique. Un hacker est un explorateur à la recherche de connaissances, habité par une soif de liberté. C’est un activiste radical qui construit une nouvelle compréhension de la couche techno-politique et de la culture contemporaine. Il se caractérise par son anonymat et sa curiosité. Est-ce un crime d’être curieux, de vouloir comprendre et apprendre comment fonctionne une machine ?

«Nous existons sans couleur de peau, sans nationalité, sans préjugé religieux... et vous nous traitez de criminels. Vous construisez des bombes atomiques, vous faites des guerres, vous assassinez, trichez, nous mentez et essayez de nous faire croire que c'est pour notre bien, et pourtant nous sommes les criminels.» 🡲 The Mentor³, extrait de La conscience d'un hacker, (1986).

Au départ, hacker, de l’anglais «hack» veut dire : couper, tailler, élaguer. Il a pour synonyme : se débrouiller, voler de ses propres ailes, faire avec. Hacker, bricoler, bidouiller, sont des termes proches pour parler d’une manière de penser, de faire du design graphique au travers des outils numériques. Le hacker cherche à s’approprier les machines, le bricoleur se débrouille avec les connaissances qu’il possède et le bidouilleur se débrouille et fait avec les moyens du bord. La technique est au centre de leurs préoccupations, ils cherchent tous à la distordre pour la rendre malléable et accessible à leurs compétences. Cet esprit, on le retrouve dans les mouvements DIY qui prônent cette méthode du «hack». Leur façon de faire, passe par l'intervention ou la modification non-standard d’un objet électronique. Une appropriation des outils qui passe par de l’artisanal, propres au bricoleur qui bricole (tinkering).

«Essayer de réparer ou d’améliorer quelque chose sans avoir les compétences ou les connaissances appropriées.» 🡲 Massimo Banzi⁴, source inconnue.

Hacker va au-delà de toutes les définitions que l’on pourrait lui donner. C’est penser différemment, sortir du cadre et remettre en question ce que la société impose. En plus de l’informatique et de la programmation, il touche tous les domaines, comme une forme plus large de remise en question sur la manière d’être ensemble, de travailler, de produire ou de faire société. Avec lui, il amène une éthique que l’on pourrait qualifier d’élément fondateur d’une pensée de production ouverte, accessible, libre et décentralisée. L’éthique du hacker⁵ est une expression arrivée au même moment que les premiers hackers et les premiers ordinateurs, au sein du MIT⁶. On l’emploie pour parler davantage d’une attitude que d’une simple activité, insinuant un rapport passionné au travail et une organisation libre du temps, non subordonné et flexible. Elle s’accompagne d’une volonté de partage au travers de techniques libres pour rendre toute information accessible. Cette notion, on la retrouve dans le Whole Earth Catalog⁷ qui a été fondé sur l’idée de liberté et de responsabilité pour autrui. Le principe de ce catalogue est lié au mouvement Back-to-the-land, qui signifie «Retour-à-la-terre», basé sur la contre-culture, qui prône l’envie de donner accès à des outils et des connaissances. Ce catalogue aborde divers sujets, du jardinage au dépannage, avec la promesse d’instruire le lecteur à propos de techniques sophistiquées et de lui donner tous les outils en main pour qu’il acquière une autonomie dans la vie quotidienne, en comprenant l'importance de savoir utiliser ses propres outils. Au MIT, on disait «hacker» pour parler de détourner des machines, incluant l’idée de bricolage habile ou de bidouille virtuose. C’est une pratique que l’on retrouve beaucoup dans l’utilisation des outils numériques. Les fablabs ont été uns des premiers à rassembler des gens autour de ces notions : bricoler, explorer, détourner, au sein d’espaces de fabrication qui prônent un accès ouvert aux machines et à la technique. Ici, on parle de hacker des machines, c’est-à-dire, détourner leurs fonctions pour arriver à un résultat souhaité. C’est se servir des outils mis à sa disposition pour créer, fabriquer de nouveaux outils. L’autoproduction et l’invention technique personnelle ne sont pas uniquement le propre du MIT, mais également du fablab. Ces lieux ont la faculté de rassembler des personnes et de combiner des pratiques et des domaines différents. On y trouve un apprentissage par la pratique caractéristique des fabrications personnelles et/ou amatrices, qui sont réalisées au sein des fablabs, makerspaces ou hackerspaces. Tous, sont des lieux de productions qui prônent le partage, la bidouillabilité et l’appropriation des outils.

Avant de parler d’appropriation, il faut penser conception d’outils. Ils se définissent au travers de divers médias, enjeux et sont à destination de pratiques divergentes. Leur création est réfléchie dans le but de répondre à une demande, un besoin, qui s’accompagne d’une réflexion commune et amène le créateur à penser l’utilité de l’outil, la prise en main et l’expérience des utilisateurs. Différentes catégories se dessinent dans le champ du design graphique et de la conception d’outils, pour et par des graphistes. Pour certains, les outils sont employés à des fins personnelles comme, par exemple, le terminal de commande qui va venir fluidifier la navigation sur l’ordinateur, simplifier son utilisation et accélérer certaines tâches rébarbatives. Il est très efficace pour réaliser des actions répétitives et protocolaires comme redimensionner des images. En plus des commandes déjà pré-existantes (cd, date, echo) c’est un outil malléable qui peut être modifié et amélioré librement en y ajoutant des commandes personnalisées pour apporter une ou des fonctionnalité(s) spécifique(s) à des besoins pratiques. D’autres outils sont expressément conçus pour répondre à un projet bien précis. Dans ce cas-là, le designer graphique prend l’initiative de construire ses propres outils et devient maître à 100% de ses productions graphiques, des rendus visuels et des contraintes qu’il souhaite exploiter. Je pense notamment au générateur de publication réalisé par Chevalvert⁸ pour la Fédération Française du Paysage⁹ (FFP). Pour la création de l’identité visuelle, Chevalvert a développé un outil sur mesure : Tooooools-ffp, axé sur la construction de paysages. Il offre un contexte de travail séquencé par six étapes : choix de la région, rédaction du titre et du sous-titre, génération aléatoire du paysage et de la palette de couleurs, ajout d’un logo, choix des formats de publication et ajustement de la taille, position du contenu.

«Les strates mouvantes du système mis en place s'appuient sur une géométrie organique, entre horizontalité et verticalité, territoires sensibles et trames végétales.» 🡲 Chevalvert, extrait du descriptif du projet Tooooools-ffp, en ligne, (2019).

Les contraintes de cet outil viennent définir les caractéristiques principales de l’identité de FFP, elles érigent un cadre pour donner une homogénéité visuelle. Les paysages tramés, les choix typographiques et la hiérarchisation des informations forment une unité de sens tout en laissant une variété de possibilités au travers de choix secondaires des couleurs, des compositions graphiques, des formats, des tailles, etc.

🡱 Aperçu d'objets graphiques réalisés à l'aide de Tooooools-ffp.

On retrouve, également, la présence d’outils directement en ligne, je pense notamment à la galerie de Constraint Systems qui propose une collection d'outils de création expérimentaux basés sur le Web. Son créateur, Grant Custer est un designer et ingénieur qui s’intéresse à des interfaces nouvelles et alternatives au travers de prototypages et du code. Ici, il suggère une tentative continue d'explorer des façons divergentes d'interagir avec les pixels et le texte sur un écran d'ordinateur. En tant que designer graphique, j’ai choisi de me saisir de plusieurs de ces outils à destination de conception graphique pour divers projets. Je les ai intégrés dans mon processus de création pour traiter des images ou encore mettre en forme un contenu textuel. La mise en ligne offre une approche directe et frontale des outils, les actions s’effectuent à l’aide de raccourcis clavier matérialisées par des curseurs ou des boutons manipulables avec la souris. Cela crée une double dimension, dans laquelle clavier et souris s’équivalent. Pour vous parler uniquement des outils de traitement d’image de Constraint Systems, je souhaite souligner l’expérience utilisateur (UX) intuitive. L’usager se retrouve face à des transformations graphiques complexes réduites à une simple action, une lettre, une touche, un clic. La prise en main est facile, chacun de ces modules se présente de la même manière, Flow, Mosaïc, Collapse. On retrouve une image de test qui offre un aperçu des modifications possibles, toute action est associée à une lettre, certaines d’entre-elles se retrouvent d’un outil à l’autre, comme «o» et «p» qui permettent d’importer et de sauvegarder une image. Que ce soit pour distordre des images, éditer du texte ou encore créer des sites Web, designer-hacker et bricoleur peuvent se saisir d’outils de création expérimentaux, accessibles et les introduire dans diverses pratiques.

«J'espère un jour intégrer ces idées dans quelque chose de plus grand, mais le plan pour l'instant est de garder les versions petites et rapides.» 🡲 Grant Custer, extrait de À propos, en ligne, (2019).

🡱 Flow : Un éditeur d'images expérimental pour définir et diriger les flux de pixels.

🡱 Mosaïc : Recréer une image à partir de deux autres images.

🡱 Collapse : Rognage d'image à l'aide de pixélisation grossière.

Pour envisager un design plus «ouvert», conscient des mouvements de diffusion et de réappropriation passant par la fabrication numérique, il faut concevoir un cadre, des grilles, des trames, des règles du jeu ouvertes et stimulantes, plutôt que des kits entièrement préconçus. De nombreux collectifs pluridisciplinaires de designers, artistes, techniciens, fondés sur des valeurs de réappropriation, ou de réemploi, sont déjà à l’œuvre et revendiquent dans leurs projets l’aspect participatif. Le processus de création que Luuse emploie pour répondre à des commandes, rejoint une démarche de design ouvert. En plus de créer leurs propres outils, ils sont accessibles sur Github, quiconque est libre de les utiliser, de les modifier ou de les améliorer pour les partager à nouveau. Luuse valorise dans ses activités les systèmes ouverts et la culture libre à travers le développement d'environnements physiques et numériques. La transmission réciproque des savoirs et la création de communs, tant en interne qu'en externe, est une condition de leur pratique.

Raphaël Bastide est un artiste passionné par les logiciels libres qui réalise des objets, des programmes, des pièces sonores, des performances, des instruments ou encore des outils. La plupart de ses travaux sont publiés sous des licences open source ou de logiciels libres. Il est l’un des fondateurs de PrePostPrint, il alimente Use & Modify¹⁰ et Fragile Forge qui sont deux librairies, la première est une sélection personnelle de polices de caractères bizarres, incomplètes, punks, libres et open source. La seconde est un regroupement d’outils et d’instruments créés par Raphaël Bastide lui-même, principalement en lien avec l’art génératif et la typographie. Ici, je vais uniquement porter un regard sur ses instruments, ses outils et ses programmes pour comprendre sa pratique d’artiste-designer-programmeur. Il entretient un rapport au code à travers la création d’outils numériques, il s’approprie les langages de programmation et décline leurs fonctions. Free Snake est une de ses réalisations, en 2016, il décide de reprendre le concept du jeu vidéo populaire Snake, pour en faire une page Web en HTML, CSS et JavaScript. Le fonctionnement est le même, les flèches permettent de changer la direction du «serpent» et les «pommes» le font grandir au fur et à mesure qu’il les mange. L’artiste s’est réapproprié l’esthétique du jeu, au travers d’une apparence minimaliste, avec un fond noir, un cadre blanc qui délimite l’espace dans lequel il y a un trait épais blanc (le serpent) et des points blancs (les pommes). Le cadre n’est pas complètement fermé, sur un des côtés se trouve un "trou" de la largeur du serpent qui offre la possibilité à l’utilisateur de s’échapper de la zone de jeu et de se promener sur l’entièreté de la page. Cette particularité est une forme de hack du jeu d’origine. Raphaël Bastide s’est basé sur le concept du jeu Snake pour en faire une version buguée qui remet en question tout le principe de départ qui est : attraper les pommes tout en restant dans un espace délimité qui engendre la fin de la partie si l’on touche ces limites. En plus d’être une reprise, Free Snake est un hack par le détournement des règles d’origine.

🡱 Capture d'écran de Free Snake. en ligne.

Raphaël Bastide est un artiste-hacker qui s'approprie des techniques, des concepts pour générer une création, comme on peut le constater dans le projet précédent. Il conçoit des outils pour ses propres besoins, qu'il met à disposition pour d'autres utilisateurs malgré la complexité de prise en main. Cette difficulté est dû au processus de création pensé dans un contexte privé, ce sont des outils fait main, pour des besoins personnels, qui ne répondent pas aux principes de WYSIWYG. Ses créations vivent grâce à lui, au travers de performances qu'il réalise seul ou en collaboration avec d'autres artistes. Cette mise en scène de l'outil, c'est une manière de le faire sortir des quatre murs de la page Web, comme une expansion de ses capacités. Il se voit adapter à un nouveau contexte d'utilisation, la contemplation se rajoute aux côtés des fonctionnalités du projet. Le code, le programme, l'interface, la machine, prennent place au sein d'un espace-temps, ce qui leur donne un début et une fin. On retrouve cette dimension dans le live coding.