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

☀ Choix et appropriation des outils

Le designer graphique s’accompagne toujours de sa pratique, des questionnements sur les outils qu’il emploie, de ses choix graphiques, de son parti-pris. Un designer ne peut créer, ni justifier sans prise de décisions. Ces décisions peuvent se dessiner au travers d’un esprit critique, du positionnement, de la technique, etc. Il doit savoir faire, mais également penser. Les outils qu’il manie doivent être choisis avec conscience et être utilisés de sorte à retranscrire graphiquement son intention. L’outil est au centre de la technique et il est nécessaire de prendre conscience de son utilisation, savoir comment le manier. Pourquoi faire ? Par quels moyens ? Pour transmettre quoi ? Car faire du design graphique, c’est transmettre un message, une intention, une information, un ressenti, une émotion, une envie. Cette transmission de l’information passe par de la mise en forme, que l’on appelle aussi création graphique. Pour cela, le graphiste utilise des logiciels propriétaires (privatisés), et/ou des logiciels libres, même si ces derniers ne concernent qu’une minorité. Cette ambivalence soulève un grand débat sur le choix des outils pour la conception graphique. Je n’évoquerai pas ce dilemme puisque je vais principalement parler de la place des outils libres et des langages de programmation au sein de la création graphique. Il est évident que tout logiciel façonne les décisions de l’utilisateur, de par la conception de son interface et de sa logique interne. C’est pour cela, qu’il est important d’avoir conscience des outils que l’on utilise, on se doit d’interroger la justesse de nos choix pour déterminer quel conditionnement est préférable pour mener à bien tel ou tel projet. Le « conditionnement », ce sont des contraintes et des capacités qui constituent l’entièreté d’un outil et qu’il est possible d’accepter (logiciel privé), ou de contourner, détourner (logiciel libre). Par « accepter », j’entends là une action inconsciente de l’utilisateur, ce n’est donc pas une bonne solution quand il s’agit de répondre à un besoin technique. Accepter, c’est l’idée de consentir à subir sa propre décision, se soumettre aux limites d’un outil que l’on ne peut maîtriser de A à Z. Certains designers graphiques se sont détachés de ces questions-là. Leur méthode : faire le choix de créer leurs propres outils, affronter la machine (l’ordinateur, l’informatique) pour repenser les relations entre design, outils de création et programmation, pour finalement, devenir designer-hacker. Bien que l’ordinateur soit l’instrument principal pour la conception graphique, nombreux sont ceux qui le perçoivent comme une mystérieuse boîte noire. Pourtant, une fois appréhendé, c’est-à-dire comprendre les langages de programmation pour interagir avec la machine, il est possible de fabriquer, produire, exécuter tout et n’importe quoi.

« Cette dialectique entre la maîtrise de techniques complexes et une courageuse conviction d’expérimenter au sein de la culture, doit définir le caractère de ce nouvel acteur : le designer-hacker. » → Diego Gomez Venegas¹, Designer comme Hacker, (2012).

Luuse² est une association sans but lucratif (asbl) de designers graphiques-artistes qui inclue cette démarche de créer leurs propres outils numériques. Antoine, Léonard, Romain, Natalia, Étienne et Baptiste forment une équipe où chacun d’entre eux apporte ses connaissances et les développent aux côtés de toutes celles des autres membres. À l’aide de cette profusion de savoir-faire, ils créent leurs programmes pour répondre à leurs exigences, c’est cette ambivalence technique du collectif qui est à l’origine du résultat graphique final pour chacun des projets menés. Comme ici, pour la création de l’identité visuelle du festival Poisson-Évêque. Une performance a été organisée au MAGA, un lieu dédié aux expressions artistiques, poétiques et expérimentales, par Stéphanie Vérin. Lors de laquelle a eu lieu la création de la publication, de l’affiche et du dépliant à l’aide de l’outil Pad2Print³. Cela a permis de créer un temps de travail en commun autour d’un outil collaboratif de mise en page, qui utilise des pads sur lesquels il est possible d’éditer du CSS. Le code s’inscrit dans l’outil accessible directement sur un navigateur Web, qui va venir simplifier le rapport code-aperçu en offrant une prévisualisation en temps réel, ce qui se fait, habituellement, en deux temps avec un éditeur de code classique. Normalement, programmer, c’est articuler des structures logiques et les appliquer à des données pour former un produit (visuel) final. Cette méthode de création offre un rapport texte-image dissocié dans le temps, indirecte et mécanique, d’abord, on écrit la commande, ensuite, on visualise ce que cela provoque, contrairement aux logiciels WYSIWYG⁴. La création d’outil sur mesure est de plus en plus présente dans la conception graphique, elle se mêle au processus de travail du design graphique, comme c’est le cas dans le projet éditorial pour le festival Poisson-Évêque.

La logique fait main se définit par une esthétique expérimentale, une richesse des techniques, elle découle des mouvements Makers et DIY et se caractérise par une soif d’apprendre, de bidouiller, bricoler. Bien qu’elle soit peu présente dans la pratique des graphistes, elle offre une abondance graphique au sein de création d’outils. Pour comprendre cette logique dans la conception d’outil, il est important d’étudier les termes : hacker, bricoler, décentraliser. Comprendre quelle est l’importance des outils ? Pourquoi les choisir, les intégrer et les réinventer ? Quelle présence la logique fait main a dans la création d’outils numériques ? Au travers de ces questionnements, nous pourrons déceler quelle place occupent des langages de programmation dans le processus de conception. Nous aborderons les divers statuts du designer graphique face à ses outils, bricoleur ? Amateur ? Hacker ? Mais également, dans quels contextes ces autoproductions sont-elles pensées, modifiées ou réappropriées. Plus qu’une esthétique, la logique fait main est aussi un état d’esprit qui prend sa source dans l’univers numérique et de partage, qu’est 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 à dessinerMachines à dessiner : Otto de Jürg Lehni.Machines à dessiner : Rita de Jürg Lehni.Machines à dessiner : Hektor de Jürg Lehni. 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.

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 CatalogWhole Earth Catalog est un catalogue américain de contre-culture publié par Stewart Brand entre 1968 et 1972, puis occasionnellement jusqu’en 1998. 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, https://chevalvert.fr/fr/projects/federation‑francaise‑du‑paysage [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.

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, https://constraint.systems/ [en ligne], (2019).

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 & ModifyUse & Modify, interface du site → https://usemodify.com/ [en ligne]. 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.

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.

☀ Creative coding

→ Processus et usages de la machine

Les langages et les plateformes se sont multipliés, ce qui a amené à une diversification des pratiques en lien avec la programmation. De nouveaux territoires se sont formés, le graphisme devient multidisciplinaire dans le champ du numérique. Au sein de ce nouvel espace, les graphistes évoluent avec facilité d’une technique à l’autre, du Web design, au Web to print, au creative coding. Ce dernier désigne une pratique qui se sert du code comme d’un outil expérimental pour la conception de formes et de motifs graphiques. Plusieurs approches existent, certains utilisent le code comme matériau principal, d’autre le réinvestissent dans divers médias : la production d’objets imprimés (affiches, identité visuelle), l’animation (motion design), les installations ou la performance. Le code apporte aux expérimentations une dimension biphasée, elles sont à la fois interactives : des actions s’effectuent en fonction des commandes, ce qui amène au deuxième aspect, le visuel : on obtient un résultat graphique suite à la lecture du programme.

« La forme est le résultat d’un processus. » → LUST¹², Interview dans Graphisme en France – code <> outils <> design, n°18, (2012).

Programmer pour créer, construire, former, expérimenter graphiquement, c’est une perspective qui se retrouve chez pas mal d’artistes-designers. Et pour en revenir à la librairie d’instruments Fragile ForgeInstrument de Fragile Forge : Un nuancier des couleurs HTML.Instrument de Fragile Forge : Une librairie de symboles-emojis. de Raphaël Bastide, que j’évoquais précédemment, on y trouve plusieurs outils qui manipulent des langages de programmation, principalement HTML et CSS, comme matière première pour créer des compositions graphiques et/ou sonores. Pour illustrer mes propos, je souhaiterais aborder les deux projets suivants : Été et Déclin séquence, qui explicitent le champ d’études que mène Raphaël Bastide. Été, est un programme sonore de live-coding et de composition algorithmique qui reprends les esthétiques d’éditeur de code. Il utilise une police de caractère à chasse fixe, une mise en page en cascade et un code couleur pour mettre en évidence des éléments spécifiques comme les chiffres. La dimension du live-coding impose une temporalité bien précise, l’action doit se passer au présent, ce qui induit une prise en main efficace de l’outil. La manipulation qui se déroule en direct doit être rythmée par des résultats visuels ou sonores immédiats. Souvent, le codage en live a une gamme limitée d’expressivité, car l’écriture du code est lente. L’échelle de l’écriture vient restreindre le performeur, il doit forcément traduire une idée en la tapant, caractère après caractère.

« Avec le code, […] le temps de frappe n’est généralement pas compatible avec le temps de réaction à ce qui se passe. » → Raphaël Bastide, Graphisme en France – Création, outils, recherche, N°28, (2022).

Été, répond à cette problématique en mêlant live-coding et expression percutante. Pour cela, Raphaël Bastide a déployé un programme qui considère le clavier d’ordinateur comme un instrument de percussion. Le programmeur-performeur est capable, à la fois d’écrire des instructions algorithmiques et des instructions instrumentales temporelles, le tout dans le même environnement de codage. Au travers d’un événement performatif en collaboration avec Cookie Collective¹³, Raphaël Bastide nous démontre la véracité de son projet. Il réalise une expérience aux multiples médias : projections/sons/animations/live-coding qui rassemble dans une même temporalité, la composition algorithmique et l’improvisation spontanée. Son deuxième projet, Déclin séquence vient également questionner la temporalité, bien que ce ne soit pas du live-coding. Le processus de création s’inscrit dans le temps, la page est constituée de 31 éléments qui ont été développés individuellement chaque jour du mois d’octobre 2020. Raphaël Bastide s’est approprié le protocole du challenge Inktober¹⁴ pour l’appliquer à sa pratique numérique à l’aide du code. La composition finale est basée sur une version qui utilise des animations et des transitions CSS, augmentée chaque jour. La page est composée de 31 balises qui ont été stylisées individuellement et ajoutées une à une, jour après jour. La temporalité est également présente dans l’objet final et sa visualisation. Un curseur est mis à disposition pour permettre au visiteur de sélectionner un jour spécifique et activer l’élément graphique associé. Sinon, un bouton de lecture permet de parcourir automatiquement toutes les séquences, qui vont s’enchaîner chronologiquement jusqu’à revenir au point de départ et ainsi, créer une boucle. La page se transforme en une composition mouvante, elle représente une temporalité condensée des 30 jours, qui est retranscrite par les outils de programmation. Ici, le processus d’écriture du code, trop lent pour du live-coding, a permis de réduire une période de plusieurs jours et de la matérialiser graphiquement.

Les langages de programmation n’ont pas toujours la même place, ni le même rôle dans toutes les pratiques liées au graphisme. C’est pourquoi, plusieurs pôles se sont formés avec le temps, qui s’affirment et se différencient : création d’outils, Web design, Web to print et creative coding. Ce dernier, se traduisant par « code créatif », décrit un cadre où le code sert avant tout d’outil expérimental pour la conception de formes et de motifs graphiques. Ici, le code n’est pas seulement une technique, il devient le processus de création, une matière que l’on va venir manipuler, modifier, modeler. La création se code et le résultat se génère, la génération devient le produit final après un traitement des informations par la machine. La machine vient remplacer l’outil, elle est celle qui va permettre la lecture du programme intuité par le créateur, c’est d’ailleurs, dans cette phase du processus que les erreurs peuvent se manifester, se voir pour être réparées ou bien exploitées comme matière première dans une création. De nombreux générateurs en tout genre on vu le jour sur le Web, libre à chacun d’utiliser l’élément généré tel quel ou bien de le réinvestir dans une grande variété de médias. En design graphique, ce type d’outil est généralement employé dans la production d’objets imprimés telles que des affiches, des identités (Tooooools) ou encore pour créer des animations (motion design). Comme le propose Space Type Generator réalisé par le motion designer américain Kielm¹⁵. Le studio de Kielm se concentre sur la création d’outils génératifs pour créer un travail de typographie, d’image et de mouvement sur mesure. Son projet de codage, Space Type Generator, est un outil open source qui permet aux utilisateurs de créer leurs propres expériences de type cinétique. Actuellement, il existe 16 variantes d’animations, formes textuelles et d’autres sont encore à venir. Il a été utilisé dans le monde entier pour toute sorte de création, des vidéoclips aux couvertures de magazines en passant par les peintures murales à grande échelle. La multitude de curseurs rend l’interface ludique et facile à appréhender, chacun d’entre eux est associé à une modification graphique : taille, distorsion, rotation, répétition, etc. De plus, l’utilisateur à la possibilité de rentrer le texte qu’il souhaite, court ou long, il épousera toutes les variantes existantes et pourra être exporté aux formats .png et .gif, pour être réemployé dans divers médias, fixes ou animés, telles que des affiches ou des publications Web.

L’accent est porté sur le processus, comme c’est le cas dans les arts visuels basés sur des outils numériques. L’art génératif et le Software art¹⁶ exploitent le code comme principal outil de création. Ce premier, est une pratique utilisant les algorithmes pour générer de manière autonome une œuvre. Ici, le code est considéré comme étant une technique, un processus de création qui apporte un résultat final. Tandis que ce deuxième, exploite le code comme matière principale pour constituer l’œuvre finale. Tous deux, sont des sous-culture de l’informatique appartenant au champ des arts visuels, tout comme la Scène démo.Assemblée 2004 – Une compétition démo combinée à une LAN party. Celle-ci a pour but la création artistique sous forme de programme informatique, fondée sur les trois domaines que sont : la musique assistée par ordinateur, l’infographie et la programmation. Dans cette approche, on utilise le terme d’IntroVisuel d’une démo provenant du site d’archive : http://www.wab.com/. pour parler d’une démo de taille réduite, généralement moins d’une centaine de kilooctets. Les démos sont des productions informatiques mêlant graphismes, musiques et animation dans un but esthétique ou technique. On peut les comparer à des clips musicaux. Cette pratique se déroule généralement dans un contexte de compétition, dans laquelle des groupes s’affrontent pour déterminer la meilleure démo selon des consignes précises.

Les sessions de codes proposées par Sundaysites¹⁷ offrent un contexte de création propice à l’expérimentation par le code, principalement les langages HTML et CSS, des basiques de la programmation, mais riches en ressources. L’expérience est contrainte par une limite de temps (2h) et une consigne commune à tous les participants, ce qui accentue l’idée d’expérimenter. L’objectif est d’engager la pratique du code, la réflexion se fait en même temps que de faire, elle passe au second plan pour laisser place à l’erreur, au test, au bricolage. Au sein des archives, on va retrouver des pages Web très variées, parfois inachevées, cassées, mais surtout pleines de personnalité, extravagantes, hors-normes, interactives et/ou contemplatives. Pour illustrer ces deux dernières caractéristiques, j’aimerais vous présenter deux sites réalisés lors des sessions code, le premier est une page Web, « Colorfulplant »Capture d’écran du site Colorfulplant., proposant un univers coloré qui se décompose en plusieurs couches. Les différentes strates sont matérialisées par des cercles, de plus en plus petits, les uns dans les autres. La position de la souris est l’unique médium qui vient activer les éléments de la page, en fonction de si elle se trouve en haut ou en bas, l’image en fond défile comme pour partir d’un début et arriver à une fin. De plus, un changement progressif de la taille des cercles s’effectue lorsque la souris survole l’un d’entre eux. L’aspect interactif de ce travail reste techniquement simple, mais malgré tout, la multitude de couleurs et l’enchevêtrement des deux animations créent des effets graphiques captivants.

Le second exemple, « Poem-club », convoque essentiellement la contemplation du visiteur. Ce site propose une variété de pages, chacune d’entre elles met en page un poème dans des tonalités différentes. Larissa Pham¹⁸ est la créatrice de ce projet, mais également des poèmes qu’elle a décidé de mettre en lumière et en mouvement au travers du code. Ses écrits prennent place dans des images-vidéos, accompagnés d’un système de narration qui active la lecture, soit la page entame un défilement automatique ou bien les vers des poèmes se succèdent tels des sous-titres. Ici, l’utilisation du code amène une temporalité à chacun des écrits, le lecteur se voit engagé dans une cadence à suivre, un rythme pour se laisser porter.

De nombreux artistes s’approprient le code pour générer un art, certains s’accordent à penser que laisser cours aux glitch, aux bugs, peut donner des formes graphiques expérimentales exploitables, le résultat par l’erreur. Tandis que d’autres exploitent l’efficacité de la matière programmable pour atteindre une complexité et une précision inégalable par la main de l’homme. Dans cet esprit, on pourrait citer Ph4se SpaceExpérimentations graphiques avec P5js dans le cadre du projet Ph4se Space. qui est un projet créatif multimédia réalisé par l’artiste et programmatrice anglaise Hannah. Ses projets couvrent l’art audiovisuel, la production musicale, l’électronique, la programmation et l’art génératif. Elle exploite plusieurs technologies, notamment P5js¹⁹ et Arduino. À travers ces outils de programmation, elle expérimente l’art génératif et publie ses créations en open source. Je qualifie ses sketchs P5js comme caractéristiques de l’art génératif, on retrouve beaucoup de formes géométriques, une certaine régularité dans les grilles utilisées, cela crée des volumes et donne l’illusion d’un travail en 3D. Un protocole similaire à toutes ses expérimentations se ressent, seule la forme répétée change : un trait, une ligne, un point, un cube, etc. L’élément se voit répété pour faire apparaître une grille déformée, c’est là que la génération intervient, les lignes de programme vont calculer la position de chaque forme afin de créer une variété de grilles. Cette part d’aléatoire va permettre à l’artiste de construire des séries d’images, sans jamais retrouver le même résultat graphique. Dans le même fonctionnement, il existe Flow Lines de Maksim Surguy²⁰, un outil open source, en ligne qui est un générateur SVG spécifique pour composer avec des vecteurs, faire de l’art vectoriel. Ici, le motif répété est un segment sur lequel plusieurs curseurs vont venir agir au niveau de son apparence, pour modifier l’épaisseur, la distance entre les répétitions, le nombre de sections du segment, en plus de la couleur du trait et du fond. Le code vient retranscrire des formules mathématiques pour générer un nombre infini d’œuvres d’art vectorielles. Pour que cela reste accessible à tous, un bouton « Randomize » est à disposition et permet de construire aléatoirement une multitude de formules tout en générant le rendu visuel de celles-ci. Pour les plus expérimentés, il est tout à fait possible d’entrer sa propre formule et de composer graphiquement avec des additions, des soustractions, des x/y, ou encore des cos()/sin(). Lors de l’exportation, la création garde son format de SVG, ce qui va permettre aux utilisateurs de l’implanter dans des supports Web et d’avoir la liberté d’y appliquer des modifications en externe de l’outil d’origine, comme l’animer.

Les expérimentations qui découlent du creative coding sont à la fois visuelles et interactives (à différents niveaux). Cette pratique a participé à un renouvellement des formes graphiques, nourrie par les spécificités du code. L’usage de la programmation se fait sous la forme de bricolage, le code est un matériau avec ses propres tendances qu’il est nécessaire d’apprendre pour pouvoir dialoguer avec, découvrir ses configurations pour envisager/valoriser les accidents. Mais également, de créer des règles qui viendront fixer des limites au processus de création. Ensuite, un ordinateur suivra ces règles pour produire de nouvelles formes, œuvres, compositions.

☀ Autoproductions décentralisées

Qu’est devenu l’Internet libertaire du début ? À l’origine, Internet a été conçu pour connecter tout le monde au même niveau et créer un réseau décentralisé. L’idée étant de redistribuer les cartes en créant un environnement exempt de toute classe, où chacun peut s’exprimer librement et devenir son propre éditeur. Internet est la création d’un lieu au sein duquel tout élément prend soudainement de la valeur pour mériter une publication en ligne. La théorie de la long tail ou queue de comète s’appuie sur l’idée que n’importe quelle petite chose peut avoir de l’intérêt sur Internet, car il s’adresse au monde, et ce, même si peu de gens dans l’absolu s’intéresse au sujet. En principe, il y aura toujours assez sur toute la planète pour créer une communauté, un marché. L’arrivée du Web 2.0 aura mis à terre cette théorie, la long tail n’est plus qu’une course au rendement. Toute information devient payante alors que l’important était de capter l’attention des lecteurs et de montrer les capacités d’innovation en évoluant vers le 2.0. Aujourd’hui, la créativité se fait rare, le Web est submergé par les grandes plateformes, telles que Facebook et Amazon, les interactions se limitent à des boutons sur lesquels appuyer.

« La liberté et la créativité sur le Web ont régressé. » → Tim Berners-Lee, World Web Forum de Zurich²¹, (2020).

Autrefois, le Web était un outil d’expression, de partage et de création. Les long tails n’ont plus la même existence aujourd’hui, dans ce monde technologique, elles ont été transformées par d’immenses entités commerciales, solidement installées au sein du Web. La collecte des données anticipe tous les besoins, les utilisateurs se retrouvent dans une simulation d’un monde numérique qui se veut libre. Ils se pensent tous, maîtres de leurs choix, de leurs actions, grâce à des boutons, des curseurs, des paramètres de réglages. En réalité, ce n’est qu’un espace qui leur donne l’impression d’être libre et d’avoir le choix. Je pourrais évoquer la Suite Adobe et ses logiciels privés qui offrent un contexte de création restreint par des outils quasi-inaltérables. Mais ici, ce que je cherche à appuyer, c’est la perte de décentralisation du Web. Il n’est plus un outil, mais la finalité, la centralisation l’a emporté. Malgré une telle régression, il existe encore une niche dans laquelle, designer et amateur se questionnent sur leurs modes de création et de partage. Je fais partie de cette minorité de résistants qui souhaitent contourner la centralisation du Web. Je suis convaincue que l’innovation a horreur de la concentration, cela induit que les usagers vont certainement peu à peu diversifier leur consommation du Web. La technologie, Internet et ses outils sont en constante évolution, il y a 15 ans les pôles de centralisation d’aujourd’hui n’étaient rien, alors seront-ils encore là dans 15 ans ? Les tendances, vont-elles s’inverser ? Les sites individuels, chargés en personnalité vont-ils prendre le dessus et amener les utilisateurs du Web vers un retour aux sources, une maîtrise des langages primaires de programmation pour gagner en liberté d’expression et de création ? Qui sait, dans quelques années, nous assisterons, peut-être, à un retour des blogs, un partage ouvert des informations et une diversité des esthétiques comme au temps des forums, des outils standardisant où la personnalisation était le maître-mot. Certaines pratiques se sont développées au côté du Web et des outils numériques qui en découlent, comme l’art numérique, apparu dans les années 60, qui a connu l’arrivée du Web, puis le creative coding dans les années 2000, qui l’accompagnera dans son évolution jusqu’à aujourd’hui. Au départ, le creative coding était un domaine à part entière sur le Web qui se constituait d’une grande communauté, mais avec le temps, une divergence des pratiques a vu le jour, l’idée de partage du code source s’est peu à peu essoufflée, comme dans beaucoup de domaines suite à l’arrivée de la privatisation et de la commercialisation d’info sur le Web. Ce phénomène aura scindé la communauté en deux hémisphères : une pratique commerciale avec une privatisation du code et la création de NFT, tandis qu’à l’opposé, se tiennent quelques radicaux qui prônent une décentralisation extrême, comme Everest Pipkin, une développeuse de jeux, écrivaine et artiste du centre du Texas qui vit et travaille dans une ferme de moutons dans le sud du Nouveau-Mexique. Son travail s’effectue en atelier et dans le jardin, elle aborde les thèmes de l’écologie, de la fabrication d’outils et des soins collectifs lors de l’effondrement.

« Lorsque je ne suis pas devant l’ordinateur dans la chaleur de la journée, vous pouvez me trouver dans les collines en train de passer du temps avec mes voisins, humains et non-humains. » → Everest Pipkin, Biographie, https://everest‑pipkin.com/#about/bio.html [en ligne].

Lorsque j’évoquais l’idée de « niche » dans laquelle artistes, designers et bricoleurs se rejoignent pour défendre un état d’esprit libertaire dans le processus de création. Je vous parle d’une minorité d’individus, à échelle mondiale, qui s’appuient sur des principes du mouvement maker et qui enrichissent leurs techniques avec un apprentissage par la pratique, le partage de connaissances et la bidouillabilité du code pour construire leurs propres outils. À notre l’échelle de designers graphiques, il n’est plus tellement question de niche, puisqu’un grand nombre de personnes et de collectifs développent une pratique libertaire et anarchiste liée au Web et à ses convictions de départ. Tout comme le fait Everest Pipkin²² au travers de productions intimes questionnant l’éthique, l’écologie et la liberté. Son travail s’appuie fortement sur l’utilisation d’archives en ligne, de référentiels Big Data et d’autres ressources d’informations numériques, elle vise à reconquérir l’Internet d’entreprise en tant qu’espace pouvant être doux, écologique et personnel.

Il est certainement possible d’inverser la tendance, de gagner en visibilité et d’occuper plus d’espace sur le Web pour rivaliser avec les géants de l’Internet. Pour ce faire, je suis intimement convaincue qu’il est important de comprendre les enjeux de la logique fait main présente dans la conception d’outils numériques. Il nous faut concevoir, programmer, fabriquer nos propres outils pour libérer sa pratique graphique. Faire soi-même pour comprendre, maîtriser la technique et mettre en commun nos connaissances au travers des licences open source qui vont faciliter le développement en autorisant la modification et le partage de celles-ci. C’est ce que font déjà Raphaël Bastide, Luuse ou Everest Pipkin, leurs outils de création sont basés sur leurs contraintes et leurs besoins. Ils sont sortis des standards du graphisme, ils ont créé des formes nouvelles, réinventé des concepts, hacké des techniques. Chacun d’entre eux s’est approprié les langages de programmation, pour faire, explorer, essayer, expérimenter et concevoir librement. Enfin, à travers cet écrit, j’appelle à tous les designers graphiques, artistes, théoriciens ou amateurs à bidouiller, coder, hacker pour être libre.