add Kirby + d6cor + botascopia + approche globale

This commit is contained in:
Julie Blanc 2026-06-19 17:52:48 +02:00
parent 9ebfaac5f6
commit 55c6b2a1a5
24 changed files with 574 additions and 48 deletions

View file

@ -109,6 +109,8 @@ h3{
font-size: 1em;
margin-top: 2em;
margin-bottom: 1em;
text-decoration: underline 1px;
text-underline-offset: 2px;
}
@ -126,6 +128,30 @@ footer{
}
figure figcaption{
padding-left: 2ch;
position: relative;
}
figure figcaption{
align-self: end;
}
figure figcaption::before{
content: '→';
position: absolute;
left: 0ch;
}
.fig-border img{
border: 1px solid #888;
}
@media screen, pagedjs-ignore{
body{
padding: 20px;
@ -147,6 +173,7 @@ footer{
/*NOTEINTENTION -------------------------------------------- */
#approche-studio,
#note-intention{
columns: 2;
column-fill: auto;
@ -154,10 +181,12 @@ footer{
}
#approche-studio h2,
#note-intention h2{
column-span: all;
}
#approche-studio h2 + p,
#note-intention h2 + p{
margin-top: 0em;
}
@ -255,8 +284,7 @@ footer{
#equipe .people{
min-height: 160px;
break-inside: avoid;
margin-top: 6em;
margin-bottom: 6em;
margin-top: 4em;
padding-left: 220px;
position: relative;
margin-left: 5em;
@ -287,9 +315,12 @@ footer{
/*PORTFOLIO intro-------------------------------------------- */
#portfolio-introduction{
break-before: page;
}
#portfolio-introduction > h2{
margin-bottom: 0px;
@ -365,4 +396,70 @@ footer{
#wysiwyg img{
object-position: 0px 0px;
}
}
/* Kirby */
#kirby{
break-before: page;
columns: 2;
column-gap: 3ch;
}
#kirby h2,
#kirby figure{
column-span: all;
column-fill: balance;
}
#kirby p:first-of-type{
margin-top: 0!important;
}
#kirby figure{
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr 28ch;
}
#kirby figure figcaption{
align-self: end;
padding-left: 4ch;
position: relative;
}
#kirby figure figcaption::before{
content: '→';
position: absolute;
left: 2ch;
}
#kirby-d6cor{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 2ch;
}
#kirby-d6cor h2,
#kirby-d6cor .description{
grid-column: span 2;
}
#kirby-d6cor .description{
max-width: 50%;
margin-bottom: 2rem;
}
#kirby-d6cor img{
border: 1px solid #888;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
images/d6cor-book.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,019 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 569 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

View file

@ -16,8 +16,8 @@
<body>
<aside class="infos">
<p>Portfolio CEAAC</p>
<p>12 février 2026</p>
<p>Portfolio</p>
<p>19 juin 2026</p>
<p>contact@studio-variable.com</p>
</aside>
@ -27,7 +27,7 @@
</header>
<footer>
<p><p>Studio Variable Portfolio CEAAC</p></p>
<p><p>Studio Variable Portfolio</p></p>
</footer>
@ -43,9 +43,10 @@
développe une approche formelle et technique qui concilie
<strong>ergonomie, sobriété, accessibilité et respect de la vie
privée</strong>.</p>
<!-- Nous sommes spécialisés dans la publication à source unique en **web-to-print**. -->
<p>Nous privilégions les projets ouverts et engagés, avec une forte
culture du ogiciel libre et de lopen source.</p>
<p>Nous sommes spécialisés dans la publication à source unique en
<strong>web-to-print</strong>. Nous privilégions les projets ouverts
et engagés, avec une forte culture du ogiciel libre et de lopen
source.</p>
</section>
<section id="equipe">
<h2 id="équipe">Équipe</h2>
@ -55,13 +56,12 @@
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="julie-blanc">Julie Blanc</h1>
<p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera
le <strong>design</strong> et le <strong>développement
front-end</strong> du projet.</p>
<p>Julie est designer, développeuse et chercheuse. Elle a co-fondé
le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
Sa thèse, soutenue en 2023, porte sur lutilisation des technologies
du web par les designers graphiques.</p>
<p>Julie Blanc est designer, développeuse et chercheuse.
<br>Docteure en ergonomie, sa thèse, soutenue en 2023, porte sur
lutilisation des technologies web par les designers graphiques.
Elle est chercheuse associée à la HEAD (Genève) et mène
régulièrement des interventions pédagogiques dans les écoles dart
et de design.</p>
</div>
<div class="people">
<figure>
@ -69,14 +69,117 @@
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="adrien-payet">Adrien Payet</h1>
<p>Développeur full-stack, spécialisé en design et développement de
back-office et dinteractions front-end, Adrien assurera le
<strong>développement back-end et la maintenance</strong> du
projet.</p>
<p>Adrien étudie, enseigne et pratique la philosophie, le design et
le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et
à Paris 1.</p>
<p>Adrien Payet est designer-développeur et philosophe. Il enseigne
à lENSCi — Les Ateliers et à Paris 1, et intervient régulièrement
dans des contextes académiques et professionnels liés au design et à
la culture numérique. Sa pratique mêle conception dinterfaces,
développement back-end et réflexion sur les usages.</p>
</div>
<section id="notre-réseau" class="people">
<h1>Notre réseau</h1>
<p>Le studio est ancré dans un réseau actif de professionnels du
graphisme et de la typographie, notamment via les <strong>Rencontres
de Lure</strong> et le collectif <strong>PrePostprint</strong>,
espaces de réflexion et déchange autour du design graphique, de
lédition et des pratiques numériques.</p>
<p>Cet ancrage nous permet de mobiliser au besoin des compétences
complémentaires (par exemple pour un travail de <strong>lettrage
<br>ou de création typographique</strong> dans le cadre dun
logotype) en faisant appel à des professionnels de confiance avec
lesquels <br>nous collaborons régulièrement.</p>
</section>
</section>
<section id="approche-studio">
<h2 id="notre-studio-et-son-approche">Notre studio et son
approche</h2>
<p>Notre activité principale est la conception et le développement
<strong>de sites web, doutils graphiques et de plateformes
éditoriales</strong>. Nos interventions se concentrent sur une
double approche, à la fois graphique et technique, pensée comme un
tout cohérent. Nous concevons le design non pas comme une couche
séparée mais comme <strong>un travail mené directement dans
le code</strong>, afin que chaque choix esthétique saccompagne
dune réflexion technique et ergonomique. Les premiers prototypes
seront donc réalisés en HTML et CSS, pour permettre de valider
rapidement des maquettes fonctionnelles, accessibles et déjà proches
de la version finale. Cette méthode réduit les écarts entre
intention et réalisation, et permet dintégrer dès le départ nos
principes décoconception et daccessibilité.</p>
<p>Les sites que nous produisons sont légers, accessibles et conçus
pour durer : peu de dépendances, un code propre et maintenable. Nous
travaillons généralement avec <strong>Kirby</strong>, un CMS
open-source sobre et sécurisé, dont linterface dadministration
simple et accessible est pensée pour les équipes éditoriales plutôt
que pour les développeur·ses.</p>
<p>Notre façon de travailler repose sur des <strong>allers-retours
réguliers</strong> avec vous. Nous définirons des étapes
intermédiaires pour valider les choix au fur et à mesure, plutôt que
de tout livrer en une fois. Cela permet dajuster le projet
en fonction de vos retours et des contraintes qui pourraient
émerger.</p>
<p>Notre force réside dans la complémentarité de nos profils :
designers et développeur·ses à la fois, nous avons lhabitude de
traverser les deux champs de compétences et de <strong>faire
dialoguer les logiques formelles et techniques</strong>. En tant que
studio, nous défendons une approche sur-mesure, attentive aux usages
concrets, à la sobriété des moyens employés et au respect de la vie
privée.</p>
<h3 id="multisupport-et-web-to-print">Multisupport et
web-to-print</h3>
<p>Le <strong>single-source publishing</strong> consiste à produire
plusieurs supports (site web, documents imprimés, exports
numériques) depuis une source de contenus unique. Le
<strong>web-to-print</strong> en est lapplication pour les pièces
imprimables (plaquettes, programmes, rapports): plutôt que de
concevoir chaque document manuellement dans un logiciel de mise en
page, on définit une fois les règles graphiques, et le programme
génère automatiquement les documents en y injectant les contenus.
Chaque rendu respecte la charte sans que son auteur·ice ait besoin
de compétences en design.</p>
<p>Cette approche est particulièrement pertinente lorsquune
institution produit des supports récurrents ou lorsque plusieurs
partenaires ont besoin dutiliser lidentité de manière autonome.
Julie Blanc est une experte reconnue de ces technologies et leur a
consacré une partie de ses recherches, elle a aussi fait partie de
léquipe de développement de la librairie Paged.js. Nous avons
déployé des systèmes de ce type pour des clients issus de secteurs
variés: institutions culturelles, programmes de recherche,
particuliers, etc.</p>
<p>Cette approche nexclut pas les déclinaisons plus classiques.
Elle les complète, selon les besoins réels du projet et les
ressources disponibles.</p>
<!-- ### Multisupport et web-to-print
Le ***\*web-to-print\**** désigne la génération de documents imprimables (plaquettes, programmes, rapports, etc.) directement depuis le navigateur web, à partir d'un&nbsp;gabarit graphique et d'une source de données, souvent issue du site web. Concrètement : plutôt que de concevoir chaque document manuellement dans un logiciel de mise en page, on définit une fois les règles graphiques (typographie, couleurs, structure), et c'est le programme qui produit automatiquement les documents en y injectant les contenus. Chaque document généré respecte la charte sans que son auteur·ice ait besoin de compétences en design.
Cette approche est particulièrement pertinente lorsqu'une institution ou un&nbsp;programme produit des supports récurrents (rapports, plaquettes, visuels pour&nbsp;réseaux sociaux, etc.) ou lorsque plusieurs partenaires ont besoin d'utiliser l'identité de manière autonome. Julie Blanc est une experte reconnue de ces&nbsp;technologies et leur a consacré une partie de ses recherches. Nous avons déployé des systèmes de ce type pour des clients issus de secteurs variés : institutions culturelles, programmes de recherche, particuliers, etc.
Cette approche n'exclut pas les déclinaisons plus classiques. <br>Elle les complète, selon les besoins réels du projet et les ressources disponibles. -->
<h3 id="nos-forces">Nos forces</h3>
<ul>
<li><strong>Des maquettes directement codées en HTML et
CSS</strong>, plutôt que figées dans un outil comme Figma. Cette
approche permet dadopter une « mentalité web » dès le maquettage.
Elle garantit la faisabilité technique du design, la fidélité des
maquettes par rapport au résultat final, réduit les allers-retours
entre design et développement et accélère nettement
lintégration.</li>
<li><strong>Un travail mené au plus près du code existant</strong>,
afin de faciliter lintégration de nos développements, dassurer la
continuité technique et de favoriser des échanges simples et
efficaces avec vous.</li>
<li><strong>Une expertise en single-source publishing et
web-to-print</strong>, nous concevons des systèmes éditoriaux
capables de produire simultanément des versions web et des documents
imprimables depuis une source unique, en nous appuyant sur des
technologies ouvertes (HTML, CSS, Paged.js).</li>
<li><strong>Une démarche décoconception et daccessibilité
assumée</strong>, qui se traduit par un design et un code légers, un
recours limité à JavaScript, un HTMLbien construit répondant aux
normes daccessibilité, lutilisation de variable fonts et des
fallback bien pensés. Bref, une attention constante à la performance
et à la sobriété des ressources.</li>
</ul>
</section>
<section id="portfolio-introduction" class="portfolio-group">
<h2 id="sélection-de-projets">Sélection de projets</h2>
@ -710,11 +813,15 @@
</dl>
</div>
</section>
<section id="actuel-inactuel" class="portfolio-group">
<h1 id="actuel-inactuel">actuel-inactuel</h1>
<p>Plateforme pour une critique des arts et des techniques.</p>
<section id="botascopia" class="portfolio-group">
<h1 id="botascopia">Botascopia</h1>
<p>Projet de recherche collaboratif dont le but est de connaître et
reconnaître les plantes à fleurs dans un espace donné. Mise en page
web-to-print pour un générateur automatique de guide
didentification de plantes à partir dune base de données
collaborative.</p>
<figure>
<img src="images/actuel-inactuel.png" alt="." />
<img src="images/botascopia-livret.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
@ -723,7 +830,7 @@
URL
</dt>
<dd>
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.fr</a>
<a href="https://botascopia.inria.fr/" target="_blank">botascopia.inria.fr</a>
</dd>
</dl>
<dl>
@ -739,7 +846,7 @@
Client
</dt>
<dd>
Association époque
Botascopia, INRIA
</dd>
</dl>
<dl>
@ -747,7 +854,7 @@
Prestation(s)
</dt>
<dd>
Design et développement full-stack
Design et développement du système web-to-print
</dd>
</dl>
<dl>
@ -755,7 +862,7 @@
Date
</dt>
<dd>
2024
2026
</dd>
</dl>
</div>
@ -1038,6 +1145,144 @@
</dl>
</div>
</section>
<section id="d6cor" class="portfolio-group">
<h1 id="d6cor">D6cor</h1>
<p>Outil de gestion éditoriale fondé sur le CMS Kirby, pour une
revue reposant sur le single-source publishing : web-to-print pour
la version imprimée, contenus multimédias pour la version en
ligne.</p>
<figure>
<img src="images/d6cor-book.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
[en cours de développement]
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Édition
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
École nationale Supérieure des Arts Décoratifs, Paris
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Direction artistique, développement full-stack et web-to-print
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Sarah Garcin
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026
</dd>
</dl>
</div>
</section>
<section id="kirby">
<h2 id="kirby-le-cms-qui-sadapte-à-vous">Kirby, le CMS qui sadapte
à vous</h2>
<p>Après avoir testé différents CMS, nous avons choisi de nous
spécialiser sur Kirby, un CMS <strong>open-source, léger et
sécurisé</strong>. Contrairement à WordPress, dont linterface
surcharge les administrateur·ices de menus et doptions, Kirby
propose un <strong>back-office sobre et ergonomique, centré sur
lessentiel: lédition de contenus</strong>.<br />
Sa souplesse permet de créer rapidement des interfaces sur mesure,
adaptées aux besoins réels, sans dépendre dune multitude de plugins
sources de conflits et de failles de sécurité. Plus confidentiel,
Kirby est aussi moins exposé aux attaques et sa <strong>codebase
allégée</strong> garantit des <strong>sites rapides, stables et
faciles à maintenir</strong>.<br />
En résumé, Kirby offre une solution élégante, durable et
parfaitement adaptée aux équipes qui veulent un outil de publication
simple et efficace.</p>
<figure>
<img src="images/kirby/compagnie-le-k-home.png"
alt="Exemple dinterface dentrée des contenus dans Kirby" />
<figcaption aria-hidden="true">Exemple dinterface dentrée des
contenus dans Kirby</figcaption>
</figure>
</section>
<section id="kirby-d6cor">
<h2
id="revue-d6cor-un-exemple-de-réalisation-en-web-to-print-avec-kirby">Revue
D6cor: un exemple de réalisation en web-to-print avec Kirby</h2>
<div class="description">
<p>Décor est la revue de lÉcole nationale supérieure des Arts
Décoratifs de Paris. Ce sixième numéro, <em>D6cor Terminal</em>, est
consacré aux pratiques numériques. Pour cette édition, un
<strong>outil de gestion éditoriale</strong> fondé sur le CMS Kirby
a été spécialement développé afin de faciliter les échanges et la
collaboration tout au long du processus de fabrication.</p>
<p>La revue repose également sur un principe de
<strong>single-source publishing</strong>: la version imprimée est
produite selon le principe du web-to-print, tandis que la version
en ligne propose des contenus multimédias complémentaires.</p>
<ul>
<li>165 × 240 mm, 292 pages</li>
<li>10 000 exemplaires, impression offset</li>
<li>Site web: en cours de développement</li>
</ul>
</div>
<figure>
<img src="images/kirby/d6cor-1-home.png" class="fig-border"
alt="Panel daccès aux contributions de la revue" />
<figcaption aria-hidden="true">Panel daccès aux contributions de la
revue</figcaption>
</figure>
<figure>
<img src="images/kirby/d6cor-3-constructeur-blocs-page.png"
class="fig-border"
alt="Page dentrée des contenus pour une publication avec métadonnées et images" />
<figcaption aria-hidden="true">Page dentrée des contenus pour une
publication avec métadonnées et images</figcaption>
</figure>
<figure>
<img src="images/kirby/d6cor-2-publication.png" class="fig-border"
alt="Blocs de constructureurs de page" />
<figcaption aria-hidden="true">Blocs de constructureurs de
page</figcaption>
</figure>
<figure>
<img src="images/kirby/d6cor-web-to-print.png" class="fig-border"
alt="Double page de la revue en aperçu dans le navigateur" />
<figcaption aria-hidden="true">Double page de la revue en aperçu
dans le navigateur</figcaption>
</figure>
<figure>
<img src="images/d6cor-book.png" alt="Revue en impression offset" />
<figcaption aria-hidden="true">Revue en impression
offset</figcaption>
</figure>
</section>
<section id="details">
<p>STUDIO VARIABLE<br />
SAS, société par actions simplifiée au capital social de 1 200,00

View file

@ -1,15 +1,34 @@
## Notre studio et son approche
Nos interventions se concentrent sur une double approche, à la fois graphique et technique, pensée comme un tout cohérent. Nous concevons le design non pas comme une couche séparée mais comme un travail mené directement dans le&nbsp;code, afin que chaque choix esthétique saccompagne dune réflexion technique et ergonomique. Les premiers prototypes seront donc réalisés en HTML et CSS, pour permettre de valider rapidement des maquettes fonctionnelles, accessibles et déjà proches de la version finale. Cette méthode réduit les écarts entre intention et réalisation, et permet dintégrer dès le départ nos principes décoconception et daccessibilité.
Notre façon de travailler repose sur des **allers-retours réguliers** avec vous. Nous&nbsp;définirons des étapes intermédiaires pour valider les choix au fur et à mesure, plutôt que de tout livrer en une fois. Cela permet dajuster le projet en&nbsp;fonction de&nbsp;vos retours et des contraintes qui pourraient émerger.
Notre activité principale est la conception et le développement **de sites web, doutils graphiques et de plateformes éditoriales**. Nos interventions se concentrent sur une double approche, à la fois graphique et technique, pensée comme un tout cohérent. Nous concevons le design non pas comme une couche séparée mais comme **un travail mené directement dans le&nbsp;code**, afin que chaque choix esthétique saccompagne dune réflexion technique et ergonomique. Les&nbsp;premiers prototypes seront donc réalisés en HTML et CSS, pour permettre de&nbsp;valider rapidement des maquettes fonctionnelles, accessibles et déjà proches de la version finale. Cette méthode réduit les écarts entre intention et réalisation, et permet dintégrer dès le départ nos principes décoconception et daccessibilité.
Notre force réside dans la complémentarité de nos profils : designers et&nbsp;développeur·ses à la fois, nous avons lhabitude de traverser les deux champs de&nbsp;compétences et de **faire dialoguer les logiques formelles et techniques**. En&nbsp;tant que studio, nous défendons une approche sur-mesure, attentive aux usages concrets, à la sobriété des moyens employés et au respect de la vie privée. Cette&nbsp;philosophie guidera lensemble de notre intervention : un site léger, <br>lisible et durable.
Les sites que nous produisons sont légers, accessibles et conçus pour durer : peu&nbsp;de dépendances, un code propre et maintenable. Nous travaillons généralement avec&nbsp;**Kirby**, un CMS open-source sobre et sécurisé, dont l'interface d'administration simple et accessible est pensée pour les équipes éditoriales plutôt que pour les développeur·ses.
Notre façon de travailler repose sur des **allers-retours réguliers** avec vous. Nous&nbsp;définirons des étapes intermédiaires pour valider les choix au fur et à&nbsp;mesure, plutôt que de tout livrer en une fois. Cela permet dajuster le projet en&nbsp;fonction de&nbsp;vos retours et des contraintes qui pourraient émerger.
Notre force réside dans la complémentarité de nos profils : designers et&nbsp;développeur·ses à la fois, nous avons lhabitude de traverser les deux champs de&nbsp;compétences et de **faire dialoguer les logiques formelles et techniques**. En&nbsp;tant que studio, nous défendons une approche sur-mesure, attentive aux usages concrets, à la sobriété des moyens employés et au respect de la vie privée.
### Multisupport et web-to-print
Le **single-source publishing** consiste à produire plusieurs supports (site web, documents imprimés, exports numériques) depuis une source de contenus unique. Le **web-to-print** en est l'application pour les pièces imprimables (plaquettes, programmes, rapports)&#8239;: plutôt que de concevoir chaque document manuellement dans un logiciel de mise en page, on définit une fois les règles graphiques, et le programme génère automatiquement les documents en y&nbsp;injectant les contenus. Chaque rendu respecte la charte sans que son auteur·ice ait besoin de compétences en design.
Cette approche est particulièrement pertinente lorsqu'une institution produit des supports récurrents ou lorsque plusieurs partenaires ont besoin d'utiliser l'identité de manière autonome. Julie Blanc est une experte reconnue de ces&nbsp;technologies et leur a consacré une partie de ses recherches, elle a aussi fait partie de léquipe de développement de la librairie Paged.js. Nous avons déployé des systèmes de&nbsp;ce&nbsp;type pour des clients issus de secteurs variés&#8239;: institutions culturelles, programmes de recherche, particuliers, etc.
Cette approche n'exclut pas les déclinaisons plus classiques. Elle les complète, selon les besoins réels du projet et les ressources disponibles.
### Les forces de notre proposition
<!-- ### Multisupport et web-to-print
Le ***\*web-to-print\**** désigne la génération de documents imprimables (plaquettes, programmes, rapports, etc.) directement depuis le navigateur web, à partir d'un&nbsp;gabarit graphique et d'une source de données, souvent issue du site web. Concrètement : plutôt que de concevoir chaque document manuellement dans un logiciel de mise en page, on définit une fois les règles graphiques (typographie, couleurs, structure), et c'est le programme qui produit automatiquement les documents en y injectant les contenus. Chaque document généré respecte la charte sans que son auteur·ice ait besoin de compétences en design.
Cette approche est particulièrement pertinente lorsqu'une institution ou un&nbsp;programme produit des supports récurrents (rapports, plaquettes, visuels pour&nbsp;réseaux sociaux, etc.) ou lorsque plusieurs partenaires ont besoin d'utiliser l'identité de manière autonome. Julie Blanc est une experte reconnue de ces&nbsp;technologies et leur a consacré une partie de ses recherches. Nous avons déployé des systèmes de ce type pour des clients issus de secteurs variés : institutions culturelles, programmes de recherche, particuliers, etc.
Cette approche n'exclut pas les déclinaisons plus classiques. <br>Elle les complète, selon les besoins réels du projet et les ressources disponibles. -->
### Nos forces
- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet dadopter une « mentalité web » dès le maquettage. Elle garantit la&nbsp;faisabilité technique du design, la&nbsp;fidélité des maquettes par rapport au résultat final, réduit les allers-retours entre design et développement et accélère nettement lintégration.
- **Un travail mené au plus près du code existant**, afin de&nbsp;faciliter lintégration de&nbsp;nos développements, dassurer la continuité technique et de favoriser des&nbsp;échanges simples et efficaces avec vous.
- **Une démarche décoconception et daccessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTMLbien construit répondant aux normes daccessibilité, lutilisation de variable fonts et&nbsp;des fallback bien pensés. Bref, une attention constante à la performance et&nbsp;à&nbsp;la&nbsp;sobriété des ressources.
- **Une expertise en single-source publishing et web-to-print**, nous concevons des systèmes éditoriaux capables de produire simultanément des versions web et des documents imprimables depuis une source unique, en nous appuyant sur des technologies ouvertes (HTML, CSS, Paged.js).
- **Une démarche décoconception et daccessibilité assumée**, qui se traduit par&nbsp;un design et un code légers, un recours limité à JavaScript, un HTMLbien construit répondant aux normes daccessibilité, lutilisation de variable fonts et&nbsp;des fallback bien pensés. Bref, une attention constante à la performance et&nbsp;à&nbsp;la&nbsp;sobriété des ressources.

View file

@ -0,0 +1,27 @@
**## Notre studio et son approche**
Notre activité principale est la conception et le développement de sites web et doutils graphiques. Le design graphique en est toujours une dimension centrale. Chaque projet que nous concebons repose sur un ***\*travail d'identité\**** au sens fort : pas seulement un logo et une palette, mais un ***\*système graphique cohérent\****, capable de traverser des supports variés, d'être approprié par des interlo-cuteur·ices aux profils divers, et de rester lisible dans le temps. Nous concevons ce&nbsp;système non comme un acte figé mais comme un ***\*dispositif vivant\**** : un&nbsp;ensemble de règles et de composants qui peuvent se décliner, se combiner, évoluer; sans jamais perdre leur cohérence.
Ce travail s'appuie sur une double compétence graphique et technique, <br>que nous menons de front. Designers et développeur·ses à la fois, nous faisons naturellement **dialoguer les logiques formelles et techniques** : chaque choix esthétique s'accompagne d'une réflexion sur sa faisabilité, ses déclinaisons possibles, sa durabilité. Cette intégration de la technique dès la conception est&nbsp;l'une des spécificités de notre approche.
Par notre pratique de l'enseignement et nos engagements dans des réseaux professionnels liés au design graphique et à l'édition, nous connaissons bien les environnements académiques et les cultures graphiques qui leur sont propres: leurs rythmes, leurs contraintes institutionnelles, leurs exigences formelles. C'est&nbsp;un&nbsp;contexte dans lequel nous travaillons régulièrement, et que nous habitons.
**### → Identités modulaires et évolutives**
Parce que nous ***\*codons directement les sites web\****, nous sommes en mesure d'imaginer des identités qui ne se limitent pas à une charte PDF figée, mais qui ***\*vivent dans leurs outils de diffusion\****. Un système graphique modulaire peut ainsi prendre la forme d'un logotype déclinable selon les contextes, d'un univers typographique rigoureux, de principes de mise en page adaptables et être directement intégré dans les outils numériques que les équipes utilisent au quotidien.
Cette approche est particulièrement adaptée aux projets portés par un réseau de&nbsp;partenaires : chaque acteur peut s'approprier l'identité et l'utiliser de façon autonome, dans le respect des principes graphiques définis, sans avoir besoin de&nbsp;compétences en design.
**### → Sites web**
Nous développons nos sites directement en HTML et CSS, sans passer par des outils de maquettage intermédiaires. Cette « mentalité web » dès la conception garantit la fidélité entre l'intention graphique et le résultat final, et nous permet d'intégrer d'emblée une démarche d'accessibilité et d'écoconception. Les sites que nous produisons sont légers, accessibles et conçus pour durer : peu de dépendances, un code propre et maintenable. Nous travaillons généralement avec&nbsp;***\*Kirby\****, un CMS open-source sobre et sécurisé, dont l'interface d'administration simple et accessible est pensée pour les équipes éditoriales plutôt que pour les développeurs.
Cette maîtrise technique nous permet d'envisager le site web non pas comme un&nbsp;livrable séparé de l'identité, mais comme l'un de ses supports les plus vivants : un&nbsp;espace où la charte graphique s'exprime dans ses usages réels, se teste et s'affine.
**### → Multisupport et web-to-print**
Le ***\*web-to-print\**** désigne la génération de documents imprimables (plaquettes, programmes, rapports, etc.) directement depuis le navigateur web, à partir d'un&nbsp;gabarit graphique et d'une source de données, souvent issue du site web. Concrètement : plutôt que de concevoir chaque document manuellement dans un logiciel de mise en page, on définit une fois les règles graphiques (typographie, couleurs, structure), et c'est le programme qui produit automatiquement les documents en y injectant les contenus. Chaque document généré respecte la charte sans que son auteur·ice ait besoin de compétences en design.
Cette approche est particulièrement pertinente lorsqu'une institution ou un&nbsp;programme produit des supports récurrents (rapports, plaquettes, visuels pour&nbsp;réseaux sociaux, etc.) ou lorsque plusieurs partenaires ont besoin d'utiliser l'identité de manière autonome. Julie Blanc est une experte reconnue de ces&nbsp;technologies et leur a consacré une partie de ses recherches. Nous avons déployé des systèmes de ce type pour des clients issus de secteurs variés : institutions culturelles, programmes de recherche, particuliers, etc.
Cette approche n'exclut pas les déclinaisons plus classiques. <br>Elle les complète, selon les besoins réels du projet et les ressources disponibles.

View file

@ -6,9 +6,7 @@
# Julie Blanc
Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera le **design** et le **développement front-end** du projet.
Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Variable. Elle est chercheuse associée à la HEAD (Genève). Sa thèse, soutenue en 2023, porte sur lutilisation des technologies du web par les designers graphiques.
Julie Blanc est designer, développeuse et chercheuse. <br>Docteure en ergonomie, sa thèse, soutenue en 2023, porte sur l'utilisation des technologies web par les designers graphiques. Elle est chercheuse associée à la HEAD (Genève) et mène régulièrement des interventions pédagogiques dans les écoles d'art et de design.
</div>
@ -18,9 +16,18 @@ Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Vari
# Adrien Payet
Développeur full-stack, spécialisé en design et développement de back-office et d'interactions front-end, Adrien assurera le **développement back-end et la maintenance** du projet.
Adrien Payet est designer-développeur et philosophe. Il enseigne à&nbsp;l'ENSCi — Les Ateliers et à Paris 1, et intervient régulièrement dans des contextes académiques et professionnels liés au design et à la culture numérique. Sa pratique mêle conception d'interfaces, développement back-end et réflexion sur les usages.
Adrien étudie, enseigne et pratique la philosophie, le design et le code. Il&nbsp;a&nbsp;co-fondé le studio Variable. Il enseigne à lENSCi et à Paris 1.
</div>
<div class="people">
# Notre réseau
Le studio est ancré dans un réseau actif de professionnels du graphisme et de la typographie, notamment via les **Rencontres de Lure** et le collectif **PrePostprint**, espaces de réflexion et d'échange autour du design graphique, de l'édition et des pratiques numériques.
Cet ancrage nous permet de mobiliser au besoin des compétences complémentaires (par exemple pour un travail de **lettrage <br>ou de création typographique** dans le cadre d'un logotype) en faisant appel à&nbsp;des&nbsp;professionnels de confiance avec lesquels <br>nous collaborons régulièrement.
</div>

View file

@ -5,6 +5,7 @@ input-files:
# - src/planning.md
# - src/livrables.md
- src/equipe.md
- src/approche-studio.md
- src/portfolio-introduction.md
- src/portfolio-1img/wysiwyg.md
- src/portfolio-1img/acau.md
@ -17,10 +18,13 @@ input-files:
- src/portfolio-1img/cultures-visuelles.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/flaash.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/botascopia.md
- src/portfolio-1img/heroines.md
- src/portfolio-1img/decarb-one.md
- src/portfolio-1img/design-to-pack.md
- src/portfolio-1img/gms.md
- src/portfolio-1img/tmn-lab.md
- src/portfolio-1img/d6cor.md
- src/kirby.md
- src/kirby-d6cor.md
- src/details.md

42
src/kirby-d6cor.md Normal file
View file

@ -0,0 +1,42 @@
## Revue D6cor: un exemple de réalisation en web-to-print avec Kirby
<div class="description">
Décor est la revue de lÉcole
nationale supérieure des Arts
Décoratifs de Paris. Ce&nbsp;sixième
numéro, *D6cor Terminal*, est
consacré aux pratiques numériques.
Pour&nbsp;cette édition, un **outil de
gestion éditoriale** fondé sur le CMS
Kirby a été spécialement développé
afin de faciliter les échanges et
la collaboration tout au long du
processus de fabrication.
La revue repose également sur un
principe de **single-source publishing**&#8239;:
la version imprimée est produite
selon le principe du web-to-print,
tandis que la version en&nbsp;ligne
propose des contenus multimédias
complémentaires.
- 165 × 240 mm, 292 pages
- 10 000 exemplaires, impression offset
- Site web: en cours de développement
</div>
![Panel daccès aux contributions de la revue](images/kirby/d6cor-1-home.png){.fig-border}
![Page dentrée des contenus pour une publication avec métadonnées et images](images/kirby/d6cor-3-constructeur-blocs-page.png){.fig-border}
![Blocs de constructureurs de page](images/kirby/d6cor-2-publication.png){.fig-border}
![Double page de la revue en aperçu dans le navigateur](images/kirby/d6cor-web-to-print.png){.fig-border}
![Revue en impression offset](images/d6cor-book.png)

15
src/kirby.md Normal file
View file

@ -0,0 +1,15 @@
## Kirby, le CMS qui sadapte à vous
Après avoir testé différents CMS, nous avons choisi de nous spécialiser sur Kirby, un&nbsp;CMS
**open-source, léger et sécurisé**. Contrairement à WordPress, dont linterface surcharge les
administrateur·ices de menus et doptions, Kirby propose un **back-office sobre et
ergonomique, centré sur lessentiel: lédition de contenus**. \
Sa souplesse permet de créer rapidement des interfaces sur mesure, adaptées aux&nbsp;besoins
réels, sans dépendre dune multitude de plugins sources de conflits et&nbsp;de&nbsp;failles de sécurité.
Plus confidentiel, Kirby est aussi moins exposé aux&nbsp;attaques et&nbsp;sa **codebase allégée**
garantit des **sites rapides, stables et faciles à&nbsp;maintenir**. \
En résumé, Kirby offre une solution élégante, durable et parfaitement adaptée aux&nbsp;équipes
qui veulent un outil de publication simple et efficace.
![Exemple dinterface dentrée des contenus dans Kirby](images/kirby/compagnie-le-k-home.png)

View file

@ -1,8 +1,8 @@
---
title: "Studio Variable"
baseline: "Design × code | studio-variable.com"
client: "Portfolio CEAAC"
date: "12 février 2026"
client: "Portfolio"
date: "19 juin 2026"
contact: "contact@studio-variable.com"
footer: "Studio Variable Portfolio CEAAC"
footer: "Studio Variable Portfolio "
---

View file

@ -0,0 +1,37 @@
# Botascopia
Projet de recherche collaboratif
dont le but est de connaître
et reconnaître les plantes à fleurs
dans un espace donné.
Mise en page web-to-print
pour un générateur automatique
de guide didentification de plantes
à partir dune base de données
collaborative.
![.](images/botascopia-livret.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://botascopia.inria.fr/" target="_blank">botascopia.inria.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Recherche</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>Botascopia, INRIA</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement du système web-to-print</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2026</dd>
</dl>
</div>

View file

@ -0,0 +1,34 @@
# D6cor
Outil de gestion éditoriale fondé sur le CMS Kirby, pour une revue reposant sur le single-source publishing : web-to-print pour la version imprimée, contenus multimédias pour la version en ligne.
![.](images/d6cor-book.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd>[en cours de développement]
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Édition</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>École nationale Supérieure des Arts Décoratifs, Paris</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Direction artistique, développement full-stack et web-to-print</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>Sarah Garcin</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2026</dd>
</dl>
</div>

View file

@ -2,5 +2,4 @@ Créé en juin 2025 et basé à Paris, Studio Variable conjugue **design graphiq
Fondé par **Julie Blanc** (designer-développeuse et chercheuse en ergonomie) et **Adrien Payet** (designer-développeur issu de la philosophie), Studio Variable développe une approche formelle et technique qui concilie **ergonomie, sobriété, accessibilité et respect de la vie privée**.
<!-- Nous sommes spécialisés dans la publication à source unique en **web-to-print**. -->
Nous privilégions les projets ouverts et engagés, avec une forte culture du&nbsp;ogiciel libre et de lopen source.
Nous sommes spécialisés dans la publication à source unique en **web-to-print**. Nous privilégions les projets ouverts et engagés, avec une forte culture du&nbsp;ogiciel libre et de lopen source.