ExSitu

Julie Blanc

(Graphic design, code & research)
Currently: Head, Geneva

Designing with web technologies in graphic design

an instrumental and anthropocentric point of view

</>

ExSitu PhD Seminar, Centre Inria de Saclay, May 26th, 2025

Background

Graphic design
& web development

A free and open source JavaScript library that paginates content in browser to create PDF outputs of any HTML content

CSS print

Paged.js

Open-source (MIT licence)

Based on web standards (« polyfill »)

Visual preview in the browser

Paged.js

Activity of composition

Activity of graphic designers involved
in the design, layout, and typesetting of printed editorial objects

Study 1

Interviews

Semi-structured interviews
Entretiens semi-directifs

In-situation simulation of the instrumented activity
Remises en situation de l'activité instrumentée

Study 2

Case studies

In-situation analysis of activity
Analyse de l'activité en situation

Self-confrontation interviews
Entretiens d'auto-confrontation

Study 3

Hackathon Paged.js

In-situation analysis of activity
Analyse de l'activité en situation

Design & code contributions

Today presentation

Conceptual framework
Focus on 2nd study → Video & code based case studies
3rd study → Paged.js hackathon
Collective instrumental genesis

Conceptual framework

Cultural-historical theory of activity
Engeström, 2014 [1987]

Instrument-mediated activity approach
Rabardel, 1995

Activity theories

Origin: Soviet Psychologist (Vygotsky, 1978; Leontiev 1978, 1981)
Activities as basic units of analysis, there are:
- situated (Suchman, 1987)
- object oriented (Rabardel & Bourmaud, 2003)
- mediated by one or more instruments or tools (Rabardel, 1995)

Activity Theory is a philosophical and cross-disciplinary framework for studying different forms of human practices as development processes, both individual and social levels.
Human activity theory as developed most by Soviet Psychologist (Vygotsky. 1978, Leontiev 1978, 1981).
Activity is the unit of analysis. Human actions are always situated into a context and they are impossible to understand without that context. We say that the activity is situated.
The activity is also object-oriented. Human activities are driven by certain needs where people wish to achive a certain propose. So, the main thing that distinguished one activity from another is the difference of their objects.
To activity is mediated by one or more instruments or tools. I will come back on it later.

Activity theories

Anthropocentric point of view (Lomov, 1977; Rabardel, 2005)
- “A tool is what it is used for” (Bannon & Bødker, 1991)
- “Tools shape the way human beings interact with reality. (...) The shaping of external activities eventually results in the shaping of internal ones.” (Kaptelinin & Nardi, 2006)
History & development (Engeström, 2014 [1987])

Technical objects and systems do not involve just technical aspects and should not be considered from a technical point of view only. They must also be examined from the point of view of the people who use them, and be designed as such. This is the anthropocentric point of view.
Bannon and Bødker, among the first to introduce these theories to the English-speaking world say, for example, that "a tool is what it is used for".
// And finaly, Activities are not static or rigid unities but their are under continuous changes and non linear development. This means that activities have also a history of their own. Traces of earlier stages often remain present within current activities as they evolve, and understanding the present situation often requires looking into their historical development. In this sense, one chapter of my thesis is dedicated to the historical and cultural evolution of composition, from lead typesetting to the emergence of desktop publishing.

Mediated activity

The dotted arrows represent the three orientations of mediation in instrument-mediated activity.
The linear arrows represent non-mediated relations.

Instrument

A mixed entity

physical or symbolic artefact
associated utilization schemes, resulting from an autonomous construction specific to the subject or from an appropriation of social schemes already formed outside of him

Shaped through use (personal and social constructs)

The terms “object, artefacts, instruments, tools” are used in the scientific literature with different meanings. Rabardel propose a psychological definition of the *instrument* as a mixed entity: the combination of an artifact and the utilization schemes developed around it.
The key idea is that an instrument cannot be reduced to the artifact alone. It consists of:
- a physical or symbolic artifact,
- one or more associated utilization schemes [sskimz]. These schemes, based on Piaget’s concept of action schemes, are structured, repeatable patterns of action that evolve with experience and can transfer to new contexts. Schemes [sskimz] can result either from the subject’s own construction or from the appropriation of the social schemes [sskimz].
// The instrument takes shape through use: it is not given, but built by the subject during activity. In our research, for example, HTML and CSS are not instruments by themselves; they become instruments through practice.

Instrumental genesis

We can observe this transformation through a process called **instrumental genesis**.
Instrumental genesis refers to the mutual evolution of both the artifact and the subject. It follows two complementary directions:
- The first is **instrumentation**. This refers to the emergence and development of schemes [sskimz]: their construction, their development through adaptation, the assimilation of new artifacts in an already constituted schemes, and so on.
- The second is **instrumentalization**. This refers to changes in the artifact itself — selecting or combining functions, assigning new meanings, or even modifying the tool’s structure through use. In other words, the subject continues the design of the artifact during use.
Both processes happen together and contribute to the emergence and evolution of instruments. However, depending on the situation, one direction might play a more dominant role than the other.
The process of instrumental genesis plays a crucial role in the appropriation and development of technical systems by individuals and community of practice.

1st study

Interviews
with graphic designers

Results

Description of the activity: determinants-effects framework, families of activity
Invariant instruments (across all technologies) → grids, baselines, templates, styles, page flows, ...
Transformation of editorial workflows
Integration of values and practices of free software culture

2nd study

Video & code based case studies

Methodology

Video recordings

Jaton, 2022

Amélie
10 videos	29:50:09

Benjamin
23 videos	34:29:29

Self-confrontation interviews

Vermersch, 1994

Self-confrontation based on activity traces

Cahour et Licoppe, 2010

Subjective dimension of the activity

Theureau, 2004, 1994

Amélie
1st interview	2:02:00 (audio)	12 250 w.
2nd interview	1:26:35 (audio)	16 150 w.

Benjamin
1st interview	2:02:00 (audio)	12 250 w.
2nd interview	1:26:35 (audio)	16 150 w.

Analyse of code source

Jaton, 2022

Amélie
Files	7
HTML	6 252 lines
CSS	1 475 lines (1 file)

Benjamin
Files	7
HTML	969 lines
SCSS	2 998 lines (22 files)

Results 1/6

Generic Composition Instruments

with HTML and CSS

Utilization Schemes

A scheme is a behavior organizer — a repeatable action framework (Piaget & Rabardel).

Schemes are structured, generalizable, and made of interdependent parts.

They develop through experience and interaction with tool.

Schemes adapt to new or similar situations.

ok I will skip this

[[
Before we need to go deeply into the understanding of utilization schemes, the psychological part of an instrument.
The notion of a scheme, as developed by Rabardel based on Piaget’s definition, refers to a behavior organize. they are the framework of actions that can be actively repeated. For Piaget, an action scheme is the structured set of action features which can be generalized - which make it possible to repeat the same action or to apply it to new contents (Piaget and Beth 1961).
Any scheme constitutes a whole or a set of mutually dependent components, which cannot function without each other: they are mutually involved. It is the global meaning of the action that ensures the simultaneous existence of the relationships that make up the schemes as a whole.
In instrument activity approach (Rabardel), utilization schemes are defined as “the structured set of generalizable characteristics of the subject’s behavior for a given class of situations.” These schemes possess an invariant structure that the subject builds progressively through experience and interaction with the artifact - in this case, web technologies. This structure transfers or generalizes when similar situations are encountered in activity. It can also accommodate or adapt when a new or problematic situation arises.
A scheme is a structured and repeatable way of acting in certain situations. It evolves over time, based on experience, and can be transferred to new contexts.
]]

Class situation observed

“Template Instrument”
Design of page templates

2 cases =
2 narratives of the development, implementation
and adjustment of the “template” instrument

Case 1

Amélie designs title pages

Comprehensive diagram of the development, implementation and adjustment
of the “template” instrument in the course of the activity

1. Elaboration phase

9 line of HTML and 60+ lines of CSS

2. Implementation phase

3. Adjustment phase

Comprehensive diagram of the development, implementation and adjustment
of the “template” instrument in the course of the activity

Case 4

Benjamin designs list pages
with different columns

A "funnel-like" scheme

1. Applies a six-column grid to all “list” pages
2. Extends elements over three columns if specified as “list-2col-h” pages in the HTML section
3. Extends elements by three columns if specified as “list-3col-h” pages
4. Changes the grid to 12 columns and extends the elements over 4 columns if it is specified that these are also “list-4col” pages

[I try] to select a set of sections and [I set out] generic rules that act on all sections at the same time (...) And then, if need be, I refine them on a particular page, a particular section, a particular type of content. (...) But in reality, it's more by iteration: I concentrate on all the pages that need a 2-column grid, then the 3-column ones, and so on.

From the same artefact, different schemes of utilization lead to different instruments.
Instruments are developed through practice and reflect each designer’s individual experience.

Two strategies for composition:

Amélie: bottom-up
→ builds generality through repeated specific cases
Benjamin: top-down
→ from global styles to specific pages

Shared goal: reusable, flexible, and scalable page layouts

Results 5/6

Creating instruments
with the code of others

Narrative of an instrument genesis

Benjamin creates a two-tone filter for images

Condensed narrative of the activity

#1 Consult an external resource
#2 Transforming code to understand
#3 Mobilize past experience
#4 Understand/mobilize the most efficient parts of the code for the action
#5 Select the most relevant code
#6 Make code generic
#7 Apply the code to several situations
#8 Adapt the code to your own resource system (instrumental genesis)

CodePen: RGB color values in a format ranging from 0 to 1.
Expect by Benjamin : hexadecimal RGB values (e.g., #63bdc2)

Before (left): RGB colors in hexadecimal format
After (right): RGB colors described as arrays in a JSON file.

Intrumental genesis

Instrumentalization (artefact)

Modification of the artefact (code) = adapts code to project needs

Instrumentation
(utilization shemes of the subject)

Changes understanding of RGB logic
Gains deeper comprehension of proportional color systems

Constructive dimension of the activity

(Resource for future action)

I understand better how RGB works now: it’s more about proportions, from 0 to 255. Working with it in another proportional scale, from 0 to 1, helped me better understand what it really is.

Results 6/6

Instrumental mediations
in code readability practices

Analysing reflexive, epistemic, and interpersonal mediations

Type of mediations

Rabardel, 1995, 2003, 2005

Mediations to the object (epistemic / pragmatic forms)
Reflexive mediations
Inter-personal mediations

I will skip this, we don’t have time

[[
We already talk about mediations, but I want to go deeper here. In instrument-mediated activity proposed by Rabardel, there are three types of mediation involved in the activity.
**Mediations to the object** concern the subject’s action on the object and may take two main forms:
- Epistemic mediations, oriented towards getting acquainted with the object and its properties.
- Pragmatic mediations, oriented towards the action on the object: its transformationand handling.
**Reflexive mediations** concern the relations the subject weaves with himself via the instrument. The instrument aids in self-regulation, memory, or managing one's own activity.
**Inter-personal mediations** concern mediated relationships to others. These mediations also fit into collective contexts.
]]

Some class of situation
involved in the code readability

Visual organization
Meaningful naming
Code decomposition & simplification
Code cleaning
Textual comments
Nesting for clarity

Nesting for Clarity (left: HTML, right: SCSS)

Reflexive mediations in composition activity

Enhancing code readability serving several purposes:

Efficiency and navigation
Understanding their own past actions

Interpersonal Mediations in Composition Activity

It's important that others can reread [my code] because I strongly support free and open-source software, and it's important that projects are well-documented and clear so that other people can reappropriate them and understand the logic. (Amélie)

Reciprocity and learning

(Epistemic mediation)

Shared "good practices"

(documentation, tutorials, collaborative work)

Code as a readable trace of activity

The activity of making code readable involves designing code artifacts intended to be read in such a way that the activities through which they were produced can be reconstructed later, either by oneself or by peers.

In conclusion, the activity of making code readable involves designing code artifacts intended to be read in such a way that the activities through which they were produced can be reconstructed later, either by oneself or by peers.

Larning to write a computer program is learning to write it in such a way that it is intelligible to a community of practitioners.
— Button & Sharrock, 1995

Statement

Designers are constantly developing resources for future activity
on an individual and collective scale

3rd study

Paged.js hackathon

How designers that use paged.js actively shape the tool itself?

How the comunity of pratice develop their own instruments?

Why a hackathon?

A defined and limited time and space for observable data
Concrete participation to the community (design & code)

Development of a complex web interface to synchronize and process all the data.

From individual experience to collective design

Issues and needs rooted in individual past experience
Shared stories revealed common concerns
Local issues reframed as collective design challenges

Our analysis showed that the design work is strongly rooted in collective activity. It grows directly out of the participants’ past experiences. In fact, all the hackathon outcomes came from specific problems they had faced individually, which were then turned into collective issues.
At the start of the hackathon, we looked at concrete, local needs from past projects. We focused on how designers had come up with their own solutions.
In our analysis, we identified moments of catachresis, or what we refer to as local instrumental genesis. For exemple, the creation of a script to add layout mechanism or ngociation with the printer to have the correct color profile.
As participants shared their stories, they saw their own struggles mirrored in others’ accounts.
This sparked rich discussions, where they built on each other’s experiences. That’s when common pain points and shared concerns began to emerge. With this starting point, participants produce collective outcome during the hackathon.

Design of generic,
reusable script modules

Example:
Full-Page image placement

Full-Page image placement issue

First script

Second script

One script was highly specific to a single project, requiring manual inputs for each image. It involved placing the image at the end of the a HTML section, sizing it with CSS, and then using a script to swap the content of rendered pages, moving the image to an earlier page. This script required specific page numbers to be manually entered for each image.
// The second script was designed by another participant for an academic book. When an image tagged for full-page placement was in the page, his script would temporarily remove it from the HTML flow and store it. The text would then flow normally, filling any potential gap. Once the next page was created, the stored image was immediately added and sized to fill the page.
Through collective discussion, it was clear that the second script was far more generic. It could apply to a much wider range of cases without specific adaptations or manual value inputs.
This script was further improved by adding features like specifying left, right, or double-page spreads. It evolved into what we call a **'functional module'** – a self-contained piece of code that can be added to any Paged.js project to provide this specific functionality. It’s not integrated into the core Paged.js code, as it's not a W3C standard, but it's available.

Comprehensive documentation
of the complex mechanisms of baseline alignment

Statements

Shift in the object of activity
→ from a singular authority to comunity of practice
Reciprocal development between individual and collective activity

Collective Instrumental Genesis

This process unfolds through five key phases:

First, the process begins with a **disruption of activity**. At this stage, individuals encounter a situation in which established tools or practices no longer support the intended activity, creating a rupture or blockage.

Second, this disruption leads to the emergence of **local instrumental geneses**. Individual attempt to respond to the difficulties they face by developing or adapting tools and strategies. These developments remain largely local and context-dependent.

Third, through interaction and exchange, these individual experiences may converge in a moment of **collective problematization**. Individual concerns are brought into dialogue, leading to the identification of shared issues and the articulation of common concerns in the community.

Fourth, on the basis of this shared understanding, **collective instruments** are developed. These tools or conceptual resources are co-constructed and made available within the community, moving beyond individual use to become part of a shared repertory resource.

Fifth, these collective instruments are then **reinserted locally**. Each individual can integrates them into their own context, often adapting them again in singular ways.

Type of collective instrumental genesis

Collective instrumentalizations → attribution of new and durable functionalities to the shared artefact (functional modules in Paged.js)
Production of various artefacts designed to support the instrumentation of the subjects of the community of practice

Collective instrumental genesis

The process of a community of practice elaborating instruments (tools, scripts, workflows, knowledge) by and for itself

phd.julie-blanc.fr

Merci

julie-blanc.fr
mastodon.design/@julieblanc
@julieblancfr
contact@julie-blanc.fr

Made with HTML & CSS
slides.julie.blanc.fr

Background

Graphic design & web development

Paged.js

Paged.js

Activity of composition

Interviews

Case studies

Hackathon Paged.js

Today presentation

Activity theories

Activity theories

Mediated activity

Instrument

Instrumental genesis

Results

Methodology

Results 1/6

Generic Composition Instruments

Utilization Schemes

Class situation observed

“Template Instrument” Design of page templates

Case 1

Amélie designs title pages

1. Elaboration phase

2. Implementation phase

3. Adjustment phase

Case 4

Benjamin designs list pages with different columns

A "funnel-like" scheme

Results 5/6

Creating instruments with the code of others

Narrative of an instrument genesis

Condensed narrative of the activity

Intrumental genesis

Constructive dimension of the activity

Results 6/6

Instrumental mediations in code readability practices

Type of mediations

Reflexive mediations in composition activity

Interpersonal Mediations in Composition Activity

Reciprocity and learning

Shared "good practices"

Code as a readable trace of activity

Statement

How designers that use paged.js actively shape the tool itself?

Why a hackathon?

From individual experience to collective design

Design of generic, reusable script modules

First script

Second script

Statements

Type of collective instrumental genesis

Collective instrumental genesis

Graphic design
& web development

“Template Instrument”
Design of page templates

Benjamin designs list pages
with different columns

Creating instruments
with the code of others

Instrumental mediations
in code readability practices

Design of generic,
reusable script modules