Julie Blanc
Du design (graphique),
</>
Graphisme en France, 13 novembre 2025
Design graphique
Code
Recherche
Je fais du design graphique, du code et de la recherche. Je préfère dire "je fais" que "je suis". Et dans cet ordre là, car c’est dans ce sens là que pourrait se résumer mon parcours.
Je vais baser cette conférence sur l’article de graphisme en France que nous avons écrit avec Nolwenn et qui revient sur les relations entre design graphique et code. Mais je vais un peu l’actualisé puisqu’il a déjà 3 ans. Je vais aussi en profiter pour vous montrer quelques uns de mes travaux et comment ils s’intègrent à cette réſlexion du design graphique avec le code.
Différentes pratiques du code
Creative code
Web design
Web-to-print
Création d’outils
ce que nous avions mis en avant dans cet article, c’est la démultiplication des endroits où le code est utilisé dans le design graphique. Nous avons repéré 4 pratiques,
Creative code → Chevalvert, identité graphique pour la Fédération Française du Paysage, 2019
Je ne vais assex peu vous parler de creative code. C’est une pratique de programmation qui existe depuis un moment, assez visible depuis les années 2000.Dans le créative code, e code sert avant tout d’outil expérimental de conception de formes et de motifs graphiques . Ici vous avexz un exemple du travail de Cheval vert pour la Fédération Française du paysages. Les formes produites sont pensées généralement comme des expérimentations à forte dimension esthétique.
Le Web
Je préfère me concenter sur tout ce qui touche au code avec le web. Et particulièrement vous présenter en quoi le web est une des plus puissante technologie d’édition.
1. Le Web comme technologie d’édition
1991
.
1. Le Web comme technologie d’édition
“The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to
give universal access to a large universe of documents”
Tim Berners-Lee
Il écrit: Le WorldWideWeb (W3) est une initiative de recherche d'informations hypermédia à grande échelle visant à
donner un accès universel à un vaste univers de documents.
1. Le Web comme technologie d’édition
“The [WWW] project is based on the philosophy that much academic information should be freely
available to anyone”
Tim Berners-Lee
l tente de créer un réseau de documents connectés, en particulier des articles scientifiques, qu'il souhaite
mettre gratuitement à la disposition des scientifiques du monde entier.
1. Le Web comme technologie d’édition
cette époque, le World Wide Web est à la fois une idée et un navigateur web .
Vous pouvez voir sur cette image le premier navigateur web, appelé World Wide Web, et le premier site web
publié par Tim Berners Lee.
1. Le Web comme technologie d’édition
HTML
Hypertext Markup Language
1991
Ainsi, pour fonctionner partout et sur toutes les machines, vous avez besoin d'un langage simple, lisible et accessible.
Il s'agit du HTML, le langage de balisage hypertexte.
1. Le Web comme technologie d’édition
C'est ce qu'on appelle un langage de balisage qui permet de représenter la structure d'un document web à l'aide de
balises ajoutées entre les phrases ou les mots pour indiquer le rôle du texte.
1. Le Web comme technologie d’édition
CSS
Cascading Style Sheets
1994
En 1994, Håkon Wium Lie, un informaticien norvégien, rejoint par Bert Bos, un informaticien néerlandais,
a formulé une proposition de feuille de style en cascade, le CSS.
1. Le Web comme technologie d’édition
So, it’s an exemple of CSS, you can see at the top, h2 that indicate all the style applied to html
title element level 2
1. Le Web comme technologie d’édition
And here, this is the previous HTML page with some CSS styles applied to it
1. Le Web comme technologie d’édition
Separation du contenu et de la présentation
Ainsi, la principale caractéristique du web est la séparation entre le contenu, la structure sémantique d'un
document et la présentation, le rendu visuel, afin de pouvoir être affiché sur la plus grande variété d’appareils possible.
Web design
Une bonne partie de mon travail aujourd’hui est de faire des publications web et des sites web, je travaille beaucoup pour des projets de recherche. Je fais le design des sites et je les code
Un design du web
À l’échelle humaine
Un code simple, qu’une seule personne est capable de comprendre entièrement
Ouvert et accessible
Lisible sur toute plateforme, qui résiste à l’obscolescence, décentralisé
Sincère et juste
Travailler avec le matériau même du web: HTML/CSS, hypertexte, fluidité, etc.
Léger et soutenable
Qui prennent en compte les ressources à notre disposition
Je défends un certain design du web. Une manière de le concevoir.
Je ne me concentre pas sur la conception de grands systèmes, la création d'outils automatisés
ou la performance et la vitesse, souvent considérées comme les principaux
avantages du code. Au contraire, j'aborde le code du point de vue d'une designer, en l'adaptant
spécifiquement aux besoins de chaque projet. Chaque contenu mérite sa propre forme unique,
Concevoir avec sobriété,
Par exemple:
No fonts / no images / no javascript
No fonts / no images / no javascript
Bifurcation/s
Revue des écologies politiques émancipatrices
3 numéros
I also create a custom web tool for the cover
Qu’est ce que le web-to-print permet,
(Qui n’est pas pertinent avec un logiciel de PAO)
Botascopia
Projet de recherche
collaboratif pour connaître
et reconnaître
les plantes à fleurs
dans un espace donné.
(INRIA, Université de Lyon 1
Université Paris-Saclay
Université de Rennes)
Guide dʼidentification de plantes
Base de données (Langage Ocalm), 400 contributeur·ices, animations publiques
Clé de détermination
Arbre de questions/réponses générées automatiquement à partir dʼune collection
Clé de détermination (principe graphique)
Clé de détermination (principe graphique)
Clé de détermination (principe graphique)
Multisupport Publishing
Single source publishing
To do this, you need to understand the principle of single-source publishing. you have a single
source of content, which can be in different formats, but most of the time, we use markdown, which
is very simple to write and can be learned in less than an hour. From there, we use programmed
scripts that transfrom the content to adapt it to the needs of each medium.
PrePostPrint
PrePostPrint highlights experimental publications made with free software.
prepostprint.org
Gradually, there are more and more graphic designers who have started to work with alternative
processes. And this is how, in two thousand and seventeen, SArah Garcin and Raphël Bastide founded
PrePostPrint
Web to print library
coordonnée par Lucile Haute, avec Quentin Juhel and Antoine Lefebvre
http://web.2print.org
Some of these publications are hard to find. There was a need to collect material versions of the
publications, so as to be able to share them better. The web to print library was created by Lucile
Aute and Quentin Juhel. It's a mobile piece of furniture that can be transported from event to
event. There's also a website, but it's not working very well at the moment.
Le code
Pour finir, je voudrais vous présenter un dernier paradigme de l’utilisation du code dans le design: celui de la conception d’outil. Et pour cela j’ai déifni 3 attitudes.
Attitude 1
Créer ses propres outils,
La première attitude, c’est celle du designer qui crée pour lui ou elle-même, dans une logique d’expérimentation.
Il ou elle invente des outils sur mesure, souvent modestes, parfois poétiques, qui prolongent sa pratique graphique.
Par exemple, le collectif Bonjour Monde, concoit beacoup ce genre d’outils alternatifs.
de petits programmes en Python pour générer des typographies expérimentales ou ou transformer des images en “vignes vectorielles” (*Vinny*).
Amélie Dumont, générateur de poster pour « Feminist Hack Meetings » (Varia, Rotterdam, 2021)
On retrouve cette approche aussi dans des contextes participatifs. Par exemple, lors des *Feminist Hack Meetings* à Rotterdam, **Amélie Dumont** a développé un générateur de posters qui permettait aux participantes de modifier les couleurs, les images, le texte… L’outil faisait partie intégrante du processus créatif.
Limites
Création sur-mesure,
Ces projets illustrent l’idée d’une création sur mesure, où l’outil lui-même devient la production des designers graphiques. Cependant, en raison de leur nature de conception spécifique, il est assez rare que ces programmes soient repris en dehors du contexte pour lesquels ils ont été développés.
Attitude 2
Créer un outil pour une communauté
La deuxième attitude change complètement d’échelle.
Ici, le ou la designer ne crée plus seulement *pour lui.elle-même*, mais **pour une communauté de pratiques**.
Bibliothèque JavaScript libre et open source
pagedjs.org
Je vais prendre l’exemple de Paged.js. Je ne vous en ai pas encore parlé, mais c’est une bonne partie de mon travail. Paged.js est bibliothèque JavaScript libre et open source
qui affiche un contenu paginé dans un navigateur
en prenant en charge le code CSS pour l'impression. Qu’est-ce que ça veut dire ?
Je vous ai dit plutôt que l’on pouvait utiliser CSS pour l’impression. Mais en réalité, on ne peut pas le faire directement dans un navigateur car ces syntaxes, bien que décidées par les créateurices de CSS, le W3C, ne sont pas encore prises en compte dans les navigateurs. En ajoutant PAged.js a une page web, on peut utiliser CSS print, c’est une sorte de hack, de patch pour le navigateur.
Paged.js est développé par une petite communauté de développeurs et designers. Chacun y apporte des plugins, des morceaux de code qui ajoutent des fonctionnalités : gestion des notes en marge, imposition pour l’impression, pagination avancée, etc.
Ces contributions s’accumulent et forment peu à peu un outil partagé. Il y a aussi tout un travail de documentation, de maintenance, de pédadogie avec le partage de starters kit par exemple`
Attitude 3
Concevoir des interfaces sur mesure(pour un projet spécifique)
Enfin,en dernière attitude, certains designers développent des **interfaces graphiques sur mesure** pour leurs clients ou partenaire.
Vous pouvez voir un exemple ici, un outil web proposé au théâtre du Chatelet par Studio Plastac et Studio Machine, pour produire les différents visuels de leur communication.
Ces environnements, inspirés des paradigmes d’interfaces graphiques en manipulation directe, offrent flexibilité et contrôle, permettant aux clients de produire tout en respectant la grammaire visuelle définie par les designers.
Ensuite les images produites sont introduites dans des gabarits préparés à l’avance pour génèrer automatiquement des affiches, flyers ou visuels pour les réseaux sociaux.
Nous voyons ici un exemple particulièrement pertinent, où le placement de l’image influe sur la typographie, difficilement reproductible en PAO.
D’ailleurs, la typographie a été créée sur mesure par Alice Savoie. Avec un dessin de font variable spécialement imaginé pour cet usage avec des écrasements ou des étirements.
→ Déplacer l’autorité du·de la designer
Il ne s’agit pas d’abandonner l’autorité du designer, mais de la déplacer. Le designer n’impose plus la forme finale, il définit **les conditions de la forme** et de sa production.
C’est toute une nouvelle façon de concevoir que j’explore actuellement dans le projet de recherche WYSIWYG de la HEAD Geneve.
Conclusion
Logiciel libre (F/LOSS)
Possibilité d’inspecter, modifier et dupliquer son code source
Licence ouverte
Culture
Réciprocité («contre don technologique»)
Promotion d’un rapport actif et créatif aux objets techniques
Collaboration
Toutes les pratiques que je vous ai décrites dans ce panorama ont quelque chose à voir avec la culture du logiciel libre.
Le problème de l’invisibilisation
Quand la Publication Assistée par Ordinateur est arrivée, elle a profondément transformé la pratique du design graphique. Elle a rendu les outils plus accessibles, accéléré les processus. C’était une vraie révolution.
Promotion d'une relation active et créative
Le mouvement du logiciel libre s’oppose à une relation passive aux technologies et promeut leur compréhension, leur adaptation et leur appropriation par chacun·e.
Issu de la culture du hacking, il défend un rapport actif et créatif aux objets techniques, où l’expérimentation et le détournement remplacent la simple consommation.
Comment ces valeurs de la culture du libre peuvent nous aider à penser une culture du design avec le code ?
**Comment ces valeurs de la culture du libre peuvent nous aider à penser une culture du design avec le code ?**
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire même (surtout) avec la friction.
L’usage de la programmation a été pensé dès le début, et encore aujourd’hui, comme la réappropriation par les graphistes de leurs outils de production. Je ne vais pas développer ici sur les problèmes que pose Abobe, mais pour faire court c’est un monopole hégémonique, détenue par une entreprise américaine, qui vous loue votre outil de travail, vous ne le possédez pas.
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire même (surtout) avec la friction.
Mais je voudrais aussi dire de faire attention à cet unique discours, il ne fait réduire l’utilisation du code à un simple manifeste anticapitaliste.
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire, surtout avec la friction.
Non, Il ya pleins d’endroit, comme j’ai pu vous le montrer, où le code, c’est juste plus pertinent. On ne pourrait tout simplement pas faire du single source publishing ou publier un site web sans code.
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire même (surtout) avec la friction.
Le code, c’est une culture, pas seulement une compétence. L’enjeu n’est pas de former des programmeurs, mais des designers capables de penser avec la technique.
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire même (surtout) avec la friction.
Le code est aussi un matériau, avec ses tendances, ses contraintes, ses logiques. Il mérite d’êrtre exploré, questionné, intégré au processus de création. Je vous en ai donné des pises tout au long de cette présentation.
Amateurs de matériaux et en particulier des plus récents, les designers se sont efforcé de les travailler, chacun pour ce qu’il a d’exceptionnel (…). Cet esprit vit et travaille aujourd’hui heureusement aussi le web. Ils, elles codent, comme auparavant aussi les bons designers pratiquaient les matières, comme Jean Prouvé forgeait le métal. Du web, les designers cherchent la beauté comme Anni Albers cherchait celle du textile, « grâce à une utilisation claire, qui fait ressortir la qualité intrinsèque du matériau ».
Adrien Payet, « La forme web
hors de l’empire
du script », Azimuts , n° 60 – Récits dé-composites, à paraître
Se réapproprier une expertise technique.
Sortir le code de la marge.
Reconnaître que le code est souvent le moyen le plus pertinent.
Penser avec la technique, c’est penser le design lui-même.
Pratiquer le code comme un matériau.
Faire, surtout avec la friction.
Enfin, je voudrais terminer par vous dire que, oui, coder ce n’est pas toujours simple. Mais en même temps, c’est l’a tout son enjeu politique. Quand on fait, il y a toujours des frictions.
L’exigence d’engagement et d’une utilisation non-passive des technologies ne va pas sans certaines difficultés. Les designers graphiques qui s’y risquent sont ainsi continuellement exposés à toutes sortes de conflits et à des choses qui ne fonctionnent pas. Cependant, (...) la frustration (face à ces quelques lignes de code qui ne marchent pas), la rencontre avec la résistance et les dilemmes font partie intégrante de la culture [du code], parce qu’elle est justement ancrée dans le faire (« making ») et que c’est là son travail politique.
Julie Blanc, « Collaborer à grande échelle dans des communautés de pratique en design graphique », ourcollaborative.tool (2024)
Merci
julie-blanc.fr / studio-variable.com
julieblancfr
contact@julie-blanc.fr
Made with HTML & CSSslides.julie.blanc.fr
my slides are online but some images may be missing, they'll be ready tomorrow.
