Code, Design Et Metadesign

Une réﬂexion sur l’éventuel antagonisme entre «code» et «graphisme» à travers ce constat à débattre : privilégier l’apprentissage de la programmation réduit la qualité graphique des projets des étudiant(e)s).

Marc Wathieu, septembre 2007. http://www.multimedialab.be Code, design et metadesign.

«The medium is the message». Marshall McLuhan.

«Form follows function». Louis Sullivan.

En matière de design (design graphique, webdesign), il est toujours efﬁcace d’interroger ces deux formules visionnaires pour (ré)ajuster son centre de gravité. Une déclinaison de Andrew Vande Moere ¹ pourra aussi servir de levier : «Form Follows Data».

¹ «Form follows Data: the Symbiosis between Design and Information Visualization», 2005. Andrew Vande Moere est conférencier à l’Université de Sydney.. Code, design et metadesign.

Distinguer «graphisme», «design graphique» et «communication visuelle» est un préalable utile.

Graphisme. Le graphisme, souvent entendu comme une activité dédiée à l’industrie graphique, est avant tout une discipline qui s’intéresse aux qualités graphiques et esthétiques dans le domaine de la création de signes (écriture au sens large, trait, typographie, couleur). Le graphisme se positionne par rapport à l’art, puis en applique l’enseignement à des objets de communication. Pour un(e) étudiant(e), l’acquisition d’une capacité à créer un graphisme de qualité et l’acquisition d’une capacité à intégrer valablement son travail dans la chaîne graphique sont deux choses différentes.

Design graphique. Le design graphique est une discipline qui concerne le traitement formel des informations et des savoirs. Le designer graphique est un médiateur qui agit sur les conditions de réception et d’appropriation des informations et des savoirs qu’il met en forme. Il intervient dans un tissu complexe de relations entre un lieu et son environnement, les informations et les médias, l’actualité et l’histoire, le commanditaire et les destinataires ¹. Le design graphique se pose d’emblée comme une méthode : explorer un problème objectif, et déterminer des solutions créatives, ingénieuses et adaptées à ce problème. Un designer graphique ou un webdesigner va d’abord travailler sur la fonction de sa publication. Il va en- suite la mettre en forme puis la diffuser selon les normes techniques propres à son médium.

Communication visuelle. La communication visuelle s’intéresse à l’ensemble du champ de la communication par le signe et l’image (signalétique, mise en forme éditoriale, identité visuelle, relation texte-image) en relation avec les théories sur les fonctions du signe (sémiologie), les rapports entre le texte et l’image ou encore certains aspects de la psychologie comportementale. La communication visuelle examine les conditions dans lesquelles des signes produisent du sens, dans le cadre prédéﬁni des codes et des signes déterminés par notre culture. Pour ces raisons, la communication visuelle est souvent entendue comme un domaine débouchant naturellement sur la publicité, qui en utilise abondamment les enseignements. Cette assertion est inexacte : la communication visuelle trouve des applications dans tous les domaines qui touchent à l’image, dont bien sûr en première ligne le design graphique et le graphisme.

¹ «Quels outils critiques pour comprendre le design graphique ?» Exposition et colloque à l’École Régionale des Beaux-Arts de Valence (F), mars 2007. Code, design et metadesign.

Design et code. Dans un contexte numérique, les notions d’image et de code se rencontrent et exploitent un dialogue pas- sionnant entre l’art et la technique, dans une tradition du design issue du Bauhaus ¹, lui-même influencé par des mouvements artistiques tels que De Stijl ou le Constructivisme.

La déﬁnition d’une image est désormais conditionnée par son afﬁchage à l’écran ou sa transmission sur le réseau. La description d’une image sous forme de nombres, de vecteurs ou de matrice, lui donne de facto le statut d’un texte : son codage. Il s’agit d’abord d’un texte descriptif dont l’image est le résultat.

Nous manipulons la plupart du temps ces images, non pas directement sous leur forme codée, mais bien comme résultat de ce code exécuté par un logiciel, dont les fonctions sont accessibles par une interface graphique. Ce type d’outil masque donc la vraie nature des images : nous les traitons «en surface» et non dans leurs entrailles numériques à l’aide d’un éditeur hexadécimal...

La notion de code reste cependant fondatrice et fondamentale : les informations servant à mettre en forme un document et ses composants sont elles-mêmes codées. Le comportement graphique des contenus et des contenants est soumis à un langage formel, qui aide notamment à structurer la présentation de grandes quantités d’informations pour en résoudre l’accessibilité et l’ergonomie.

Qu’il s’agisse d’extraire des données, d’assembler des pixels, de créer la grille d’une mise en page, de gérér une publication ou bientôt de spacialiser l’information, on voit à quel point les notions de structure et d’architecture de l’information sont centrales. Le code en est un outil important.

¹ Le Bauhaus - mot intraduisible, contraction de bau (la construction) et haus (la maison) - était une école d’art, de design et d’architecture fondée en 1919 à Weimar (Allemagne) par Walter Gropius. Il ferma ses portes en 1933 sous la contrainte des nazis. Son objectif premier était de combattre la menace d’uniformité qui résultait de la mécanisation en amplifiant la collaboration «entre le commerçant et le technicien d’une part, et l’artiste d’autre part».

Lire : «Propositions en vue de la fondation d’un établissement d’enseignement, conseiller artistique de l’industrie, des mé- tiers d’art et de l’artisanat» par Walter Gropius (1916) in «Anthologie du Bauhaus», sous la direction de Jacques Aron, Didier Devillez éditeur, Bruxelles, 2002. 2 http://www.multimedialab.be/doc/citations/walter_gropius_propositions.zip Code, design et metadesign.

Qualiﬁer des données. La tâche du designer étant d’apporter des solutions au traitement et à la transmission d’informations, il est confronté aux processus, aux méthodes, aux fonctions et aux enjeux des nouveaux médias qui les diffusent, incluant différentes couches de l’information : code, données et métadonnées, balises et méta-balises, texte et hypertexte, média et hypermédia.

La perception de ces différentes couches est capitale, car elles déﬁnissent la hiérarchie et le statut des informations, les conditions de leur extraction, et donc leur mise en forme et le résultat escompté.

La couche la plus basse est celle des données brutes, traitables indifféremment par la machine, quelles que soient leur nature, unifiant du même coup programmes et données. Cette caractéristique est majeure car elle annonce à la fois une souplesse de traitement et la nécessité de qualifier et de structurer ces données pour en définir une finalité (paramètres, type de document, fonction, méthodes, processus, etc). On remar- que à ce stade comment ce matériau unique peut favoriser les transmodalités : un son peut devenir une image, un signal WiFi peut être traduit en son... et un texte tout naturellement devenir une image.

Hypermédia. «Hyper» désigne la couche d’information supplémentaire qui qualiﬁe un document par rapport à sa localisation, à son indexation dans une structure, celle-ci permettant des interconnexions avec d’autres documents, éventuellement de natures différentes (texte, image, son, couleur, autres programmes, etc). Dans ces conditions, le terme «multimedia» (plusieurs média) peut avantageusement être remplacé par «hyper- media», un médium uniﬁant toutes les formes d’expressions dans un contexte unique, programmant leurs relations et leurs connexions.

Metadesign. «Meta» désigne un niveau d’abstraction supérieure : une métadonnée sert à déﬁnir ou décrire une autre donnée. Par extension, le terme «metadesign» ¹ désigne un ensemble de méthodes conceptuelles et pratiques permettant d’appréhender un système d’information, le modelant pour en extraire des solutions in- tégrées, exploitant ses modalités perceptives et cognitives. Cette approche du design, récente et globale, tente d’apporter une réponse contemporaine à l’évolution des nouvelles technologies de l’information et de la communication. Le metadesign envisage l’information dans toute ses dimensions et ses processus (en anglais, «computation») : gestion, stockage, traitement, mise en forme, transport, diffusion, accessibilité. Le futur des réseaux (notamment du web) et la mise en forme de données complexes en inspire évidemment la pratique : datascape, spacialisation de données, installations immersives, pratiques transmodales, etc...

¹ Lire : «Metadesign : de l’analogie aux systèmes programmatiques» et «Du design au metadesign», à propos du travail du collectif bruxellois Lab[au]. 2 http://www.multimedialab.be/doc/citations/labau_metadesign.zip Code, design et metadesign.

Envisager le code et le design graphique de manière isolée n’est pas une position cohérente, l’un déﬁnis- sant l’autre. Je livre ici une liste (en chantier) tentant de montrer comment ils partagent des caractéristi- ques communes au sein d’un système d’information.

Code : Design graphique :

Modularité : itérations, boucles patterns, motifs

Grille : écran, résolution, tableaux mise en page, grille typographique, trame

Processus : programme méthodologie

Gestion : indexation, traitement de données hiérarchie de l’information, accessibilité

Information : données, paramètres signes, caractères, icônes

Logique : algorithmique démarche, sens, communication

L’exemple de la grille est un des aspects les plus élémentaires et anciens de structure graphique modulaire. Or, cette notion est récursive : elle s’applique autant à un tableau de données qu’à la résolution d’un écran, la composition d’un caractère typographique, la mise en page, la trame de la publication, la maille d’un pull- over, l’armoire à chaussures, la façade du building d’en face ou une vue aérienne du quartier. Pour en citer une autre application connue, les CSS offrent le moyen le plus efﬁcace de contrôler l’afﬁchage et le positionnement des éléments graphiques en ligne. Code, design et metadesign.

Le choix d’images qui suit est constitué de quelques exemples variés d’environnements, outils, services ou oeuvres d’art numérique contenant et incarnant les thèmes évoqués précédement. Les données, le programme, les processus et la mise en forme d’une interface expriment une solution créa- tive et fonctionnelle, autant qu’une méthode. Martin Wattenberg : map of the market (1998) Une application en ligne visualisant les tendances et les opportunités boursières. La taille de chaque surface définit une compagnie et l’importance de son capital. La couleur est un indice de ses performances. La carte est réactive (pop-ups et menus déroulants) et permet une navigation en profondeur vers des informations plus précises. Les données sont rafraîchies toutes les 15 minutes. GTF (Graphic Thought Facility) : Digitopolis (1998). Scénographie et signalétique de l’exposition «Digitopolis and Who am I?» au Science Museum (London). Ben Fry : Valence (1999-2002). Valence est un programme qui lit le texte d’un livre mot après mot et l’organise dans l’espace selon un sys- tème d’indexation et de règles. Un volume navigable et complexe émerge des relations entre divers mots dans le texte. Ce projet a connu plusieurs déclinaisons, dont l’une cartographiant des ressources web. Il en existe une version en ligne (réalisée avec Processing) qui lit «the innocents abroad» («Les innocents en voyage») de Mark Twain. Zoomero.com : Relevare (2000). Une navigation d’une surprenante simplicité, à base de fractales, permet de consulter des informations emboîtées les unes dans les autres. Carsten Nicolai & Marko Peljhan : Polar (2000) Une installation métaphorique (inspirée par le thème d’«océan cognitif» du film Solaris de Andrey Tarko- vsky) composée de logiciels et d’interfaces tactiles invite l’utilisateur à vivre une expérience de navigation immersive au sein de flux de données provenant du www. Ben Fry & Casey Reas : Processing (2001). Un environnement de programmation et un langage basé sur la plateforme Java. Un logiciel libre et tout- terrain, destiné à l’apprentissage fondamental de la programmation pour les artistes, et bénéficiant d’une communauté très active en ligne. Labomatic.org (webdesign) et Simon Oualid (programmation) : arteradio.com (2002) Soucieux de son accessibilité, Arte-radio propose deux types de consultations, possédant chacune leur propre solution graphique (grille, identité, navigation). La version WAI (label «Web Accessibility Initiative») en HTML + Javascript + CSS réduit l’utilisation d’images au minimum. Norm : Sign-Generator (2002). Un système graphique permettant de créer une infinité de signes selon une grille réduite. Ce travail a fait l’objet d’une application en ligne (permettant d’exporter des images vectorisées), d’une installation et de la publication d’un répertoire de signes.. Fabric | ch : electroscape 003 (2003) Un modèle axonométrique navigable servant de matrice pour la publication de documents (plusieurs centaines de livres possibles...). Marcos Weskamp, Newsmap (software), 2004. Un environnement modulaire de création de signes et de typographique. Bruce Herr et Todd Holloway : visualisation des articles les plus modifiés de Wikipedia (2007). Cette mosaïque a été créée par un algorithme conçu pour générer des grappes d’articles aux sujets pro- ches ou connectés (star, religion, marque, etc). 1869 grappes ont ainsi été définies - environ une pour 300 articles - et, pour chacune, ils ont récupéré l’image de l’article le plus lié.

La couleur et la largeur des points indiquent le nombre de modiﬁcations des articles, mais aussi leur importance et leur actualité. Plus le point est gros et foncé, plus l’activité autour de cet article est intense, courante et récente. Selon leur classiﬁcation, les 20 articles les plus « bombardés » sont : Jésus, Adolf Hitler, Octobre 2003, Nintendo Revolution, Ouragan Katrina, Inde, RuneScape, Anarchisme, Britney Spears, PlayStation 3, Saddam Hussein, Japon, Albert Einstein, Tsunami en Asie en 2004, New York City, Allemagne, Mahomet, Pape Benedicte XVI, Pape, Ronald Reagan et Hindouisme. Le «web 2.0» se caractérise par un boom des services en ligne basés notamment sur les réseaux sociaux. Leur conception graphique essentiellement fonctionnelle est souvent personnalisable, mais dans des pro- portions limitées. Une communauté active de concepteurs indépendants propose des applications clientes (plugins) ou de nouvelles interfaces (branchées directement à la source des données), accroissant leur fonctions ou leur ergonomie.

Grâce à ces contributions, de nombreuses expériences communautaires, graphiques, conceptuelles et er- gonomiques sont tentées, exploitant les données pour en extraire de nouvelles informations (comparaison de résultats, localisation, groupes d’utilisateurs, etc)

Cette «nouvelle ère» de webdesign et de visualisation de l’information est favorisée par la séparation du contenu et de sa présentation (codes séparés, XHTML et CSS), les ﬁls RSS/Atom, l’accès aux APIs (interface de programmation ouvrant l’accès aux données). WordPress (2005) Logiciel de blog, système de gestion de contenu libre écrit en PHP. Les utilisateurs partagent les ﬁchiers CSS de mise en page sur le «Theme Viewer» de WordPress. Flickr, LastFM, Del.icio.us et Facebook (nés entre 2002 et 2004) Les interfaces fonctionneles de base. Flickr vu par (dans le sens des aiguilles d’une montre) :

Bryce Glass : Flickr User Model (2005) Jim Bumgardner : Time Graphs: Sunsets by time (2005) Tom Carden : Travel Time Tube Map (205) Jim Bumgardner : Color Fields Colr Pickr (2003) LastFM vu par :

Last FM Team : une des interfaces actuellement disponibles sur lastfm.com Andrew Godwin : LastGraph (2006) Martin Dittus : Chart Arcs (2006) Lee Byron : Listening History (2007) Onyro Team : TuneGlue (2006) Del.icio.us vu par :

Sebastien Pierre & Olivier Zitvogel : Revealicious - SpaceNav (2005) Ian Timourian : del.icio.us.discover (2006) Yusef Hassan Montero & Victor Herrero Solana : Visualizious (2006) Aaron Siegel : Research Chronology 2 (2006) Facebook vu par :

Christoph Gerstle & Florian Moritz : StudiAnalyse (2007) Elliott C. Bäck : Facebook Friends Map (2006) TouchGraph, LLC : TouchGraph Facebook Browser (2007) Thomas Fletcher : Facebook Friend Wheel (2007) Code, design et metadesign.

Liens.

Benjamin Fry : http://benfry.com/ Golan Levin : http://www.flong.com/ Casey Reas : http://reas.com/ Processing : http://processing.org/ Martin Wattenberg : http://www.bewitched.com/ Lab[au] : http://www.lab-au.com/ Norm : http://www.norm.to/ fabric | ch : http://www.fabric.ch/ Carsten Nicolai : http://www.eigen-art.com/Kuenstlerseiten/KuenstlerseiteCN/index_CN_EN.html Marius Watz : http://www.unlekker.net/ Marcos Weskamp : http://marumushi.com/ Karsten Schmidt : http://www.toxi.co.uk/ http://www.generatorx.no/ http://www.artificial.dk/ http://dataisnature.com/ http://runme.org/ http://www.uoc.edu/artnodes/eng/index.html http://www.turbulence.org/ http://www.interactivearchitecture.org/ http://accuracyandaesthetics.com/ http://www.visualcomplexity.com/vc/ http://abeautifulwww.com/