Julie Blanc
Une recherche par et pour la pratique:
</>
SEMPER, École Estienne, 10 octobre 2026
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.
Licence Concepteur designer Axe Sud, Toulouse (2014)
Master erg.edit : politique du multiple erg, Bruxelles (2016)
Pré-doctorat EnsadLab EnsAD, Paris (2017)
Doctorat en ergonomie Université Paris 8, EnsadLab, EUR Artec (2018-2023)
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.
Je vais commencer par une très courte histoire du web, pour recontextualiser ceette utopie.
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
Il 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, des sites web, ou de outils web, je travaille beaucoup pour des projets de recherche.
Je fais le design des sites et je les code
No fonts / no images / no javascript
Studio Variable
studio-variable.com
Julie Blanc et Adrien Payet, créé en juin 2025
Pour le moment, je peux pas vous montrer trop les projets qu’on design et développe entièrement, parce qu’ils sont pas encore sortis. Mais je peux vous montrer des sites qu’on a fait en collaboration, il y a pas mal de designers qui viennent nous voir pour le développement des sites pour leur client. Ils et elles sont content de travailler avec des designers qui codent parce qu’on a un vocaulaire commun et souvent ils ous laissent lal main sur pas mal de chose dans la maquette. Même parfois c’est juste une direction artistique et nous on propose le design du site
Ici un site qu’on a designé et développé pour la compagnie de théâtre de Valérie Christian Hecq.
Site pour Walter film, Société de production audiovisuelle
grille qui change avec un peu d’aléatoire, les espacement et les proportions sont en réalité très paramétré. C’est un algorithme qu’on a beaucoup discuté avec Margaux, il y avait une part de créativité dedans
secteur de la recherche, de l’écologie, la culture, l’institutionnel. un peu de luxe comme vous avez vu avec Walter films
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.
Publications expérimentales
I've shown you some commissioned projects, but there's also a lot of experimental work being done with these technologies, particularly in art and design schools in Europe.
Experimental publishing
Script Text dilatation by Raphaël Bastide
So when you use CSS for print, Script and programmation become also easier because you are directly in a code environment. with a little javascript, it's possible to invent interactions with the content that will be reflected in the book once it's printed. Here's an example of interactionmade by Raphael Bastide during a workshop
Mélange de médias
Using the camera to integrate background in images (Julien Bidoret)
Workshop L'idéal anarchique , maisons des éditions, 13-18 novembre 2021
It's also possible to hybridize media. Here, Julien Bidoret has created an installation in which the page's background is linked to the computer's camera.
Photographs can be taken and placed directly on the page. On the left is a photo of his camera with a filter. So, during his workshop, they used a camera to film handwritten typography that was added to the page, as you can see on the right.
Experimental publishing
This was used during an online drag queen performance at a publishing festival during covid. There was a code that took a screenshot. The performer could press a button to take a screenshot whenever she wanted, and the image would automatically be placed in the booklet.
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.
Recherche par et pour la pratique
Recherche-création
« Une praticienne se posant
Vous pourriez voudire que tout ce que je vous ai présenté est déjà de la recherche, surtout parce que j’utilise de soutils qui vous sont pas habituels. Mais c’est surtout un contexte que je vous ai pr“senté, car ma recherche est une recherche par et pour la pratique.
ce qui m’intéresse dans la recherche, le point commun de tout ce que je fais = les outils
http://recherche.julie-blanc.fr/timeline-publishing/
Phd Thesis
Thèse de doctorat (2017-2023)
Composer avec les technologies du web
Genèses instrumentales collectives
phd.julie-blanc.fr
Ergonomie
Approche anthropocentrée de la technique
Cadre conceptuel = ergonomie
La technique c'est la façon dont quelqu'un fait quelque chose a écrit l'historien Lynn White dans une formule dont l'intérêt, souligne Sigaut (1991) est de nous rappeler que le « quelqu'un est essentiel », parce que c'est lui qui nous indique la bonne échelle. Une technique n'existe que lorsqu'elle est pratiquée, c'est-à-dire lorsqu'elle passe par quelqu'un qui, l'ayant apprise ou inventée, la met en œuvre de façon efficace. Il n'y a pas de technique sans cette efficacité et les habiletés humaines qu'elle implique. C'est donc là où ces habiletés sont produites qu'il faut observer les techniques.
Pierre Rabardel, Les hommes et les technologies. Approche cognitive des instruments contemporains ,
Les deux cadres sur lesquels je me suis appuyé c’est l’approche instrumentale de Pierre Rabardel et la théorie historico-culturelle de l’activité de Yrjo Engestrom
Comment comprendre ce que l'utilisation réelle du code change dans la pratique des designers graphiques ?
En quoi ce changement technique participe-t-il à la construction et au développement d'une communauté de pratique ?
En simplifié et en enlevant tout le jargon de l’ergonomie, je pourrais résumé la problématique de ma thèse comme ceci.
D’abord tout un récit historique de transformation de l’activité de composition graphique. En prenant les théories de l’acitivité et en regardant comment le système d’activité a évolué au cours des siècle derniers. Approche historique des transformations appuyé par les théories d’engestrom
Des entretiens avec des designers graphiques qui utilisent les technologies du web et/ou les logiciels de PAO pour donner un description de c’est quoi cette activité de composition graphiques, peut importe les outils, quelles sont les invariants, mais aussi quelle est la diversité de cette pratique, à quoi les designers graphiques font attention, quelles sont leur instruments (la grille, les gabarits, etc.).
Ensuite j’ai analysé deux designers graphiques en train de produire des publications en CSS print, Amélie et Benjamin. Je leur ai demandé de filmer leur écran durant la totalité d’un projet, j’ai analysé. ces vidéo, j’ai fait des entretiens avec lui et elle. Là j’ai vraiment emloyé des méthodes et techniques d’ergonomie, notamment ce qu’on appelle des entretiens d’explicitation et des autoconfrontation à partir des traces de l’activité. L’objectif c’était de leur faire dire avec leur mot ce qu’illes étaient en trian de faire, pour l’analyser ensuite.
dans cette partie, je me suis dit que ça pouvait vous int“resser, j’ai produit beaucoup de traces graphiques
je trouve qu’il y a pleins de résultats intéressant mais j’ai pas trop le temps de revenir dessus et je pense que c’est l’un des chapitre sles plus dur de ma thèse
Bibliothèque JavaScript libre et open source
pagedjs.org
Enfin, une dernière partie de ma thèse est consacré à Page,jd
JMis 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`
Les images que vous venez de voir, c’est un hackathon que j’ai organisé pendant ma thèse autour de Paged.js. Une sorte de workshop d“dié au code. J’ai fait un énorme dispositif de receuil de données et j’ai analysé comment on a travaillé pendant 2 jours, qu’est-ce qui fait qu’on arrive à construire un outil commun
Articles de recherche
une grande partie de ma production scientifique aujourd’hui, c’est de produire des articles scientifiques ou pour des revyues un peu plus généralistes.
Je vous conseille celui des graphisme en france que j’ai cité au début de la conférence.
Dans Sciences du Design, j’ai écrit un article avec Marion Voillot et Elise Rigot, des copines de thèse, où on discute de ce qu’est la recherche en design
Sur la culture du libre dans le design, dont je n’ai pas beaucoup parlé, et les communautés de pratique, il y a cet article écrit pour ourcollaborativetool. Il y en a d’autres, des plus difficile, et bientôt j’ai un article qui va sortir dans le prochain Azimuts. Juste pour vous montrer que le travail d’écriture est vraiment très important
wysiwyg.ch
WYSIWYG est un projet de recherche interdisciplinaire de trois ans qui vise à documenter, d’un point de vue historique et théorique, le tournant numérique de la pratique du design graphique.
Olivia Jack et Paula Haertel, Moodle web
Back to the futur.
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.
