studio-variable/basic-portfolio_web-to-print
4
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Compare commits

merge into: studio-variable:main
Branches Tags
studio-variable:main
studio-variable:dtc-enscii
studio-variable:ebabx
studio-variable:2026-ceaac
studio-variable:2026-ceramiq
studio-variable:2025-direction-6e
studio-variable:2025-resin
...
pull from: studio-variable:dtc-enscii
Branches Tags
studio-variable:dtc-enscii
studio-variable:main
studio-variable:ebabx
studio-variable:2026-ceaac
studio-variable:2026-ceramiq
studio-variable:2025-direction-6e
studio-variable:2025-resin
Sign in to create a new pull request.

1 commit
main ... dtc-enscii

Author SHA1 Message Date
Julie Blanc
96eb56d13b dtc enscii version 2026-04-08 15:46:40 +02:00
13 changed files with 618 additions and 548 deletions
Download patch file Download diff file Expand all files Collapse all files

80
assets/style.css
View file

@ -16,7 +16,7 @@ body{
--light: #bfbfbf;
--title: 20px;
--mono: 'Geist Mono';
--table-w: 760px;
--table-w: 700px;
}
a{
@ -156,6 +156,7 @@ footer{
#note-intention h2{
column-span: all;
margin-bottom: 1.5em;
}
#note-intention h2 + p{
@ -166,28 +167,52 @@ footer{
/* DEVIS -------------------------------------------- */
#devis{
display: grid;
grid-template-columns: var(--table-w) 1fr;
grid-template-rows: 4em 1fr;
}
#devis h2 + p{
.devis-aside{
align-self: end;
margin-left: 3em;
}
#devis h2{
grid-column: 1/end;
}
.devis-container > p{
width: var(--table-w);
text-align: right;
margin-bottom: 1.5em;
margin-bottom: 1em;
margin-top: -2em;
font-size: 10px;
}
#devis table{
width: 760px;
/* font-family: var(--mono); */
width: var(--table-w);
border-collapse: collapse;
border-bottom: 1px solid #cfcfcf;
table-layout: fixed;
font-size: 12px;
}
#devis table col:nth-child(1){ width: 70% !important; }
#devis table col:nth-child(2){ width: 15% !important; }
#devis table col:nth-child(3){ width: 15% !important; }
#devis table thead th{
background-color: #efefef;
text-align: left;
}
#devis table thead th, td{
padding: 5px 1ch;
padding: 3px 1ch;
}
#devis table thead th:nth-of-type(2),
@ -208,14 +233,23 @@ footer{
}
#devis #total table{
#total{
display: flex;
justify-content: flex-end;
}
#total table{
/* border-top: 1px solid #cfcfcf; */
width: 400px;
margin-left: calc(var(--table-w) - 400px);
margin-top: 2em;
width: 400px!important;
table-layout: fixed;
/* margin-left: calc(var(--table-w) - 400px); */
margin-top: 1em;
border-bottom: none;
}
#total table col:nth-child(1){ width: 85% !important; color: red; }
#total table col:nth-child(2){ width: 15% !important; }
#devis #total th,
#devis #total td{
background-color: transparent!important;
@ -244,7 +278,13 @@ footer{
/* PLANNING & LIVRABLES ---------------------------------------- */
#planning{
break-after: page;
}
#planning h2{
margin-bottom: 1em;
}
#livrables{
margin-top: 5em;
}
@ -255,8 +295,8 @@ footer{
#equipe .people{
min-height: 160px;
break-inside: avoid;
margin-top: 6em;
margin-bottom: 6em;
margin-top: 4em;
/* margin-bottom: 4em; */
padding-left: 220px;
position: relative;
margin-left: 5em;
@ -365,4 +405,18 @@ footer{
#wysiwyg img{
object-position: 0px 0px;
}
}
#resin figure img{
width: 870px;
object-position: 0px 0px;
/* object-fit: none; */
}
#timelure figure img{
width: 120%;
object-position: -10% 0px;
}

823
index.html
View file

@ -16,8 +16,8 @@
<body>
<aside class="infos">
<p>Portfolio CEAAC</p>
<p>12 février 2026</p>
<p>Proposition « Design et Conception pour les Transitions »</p>
<p>8 avril 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 – Proposition DCT</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 l’open 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 l’open
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 l’utilisation 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
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.</p>
</div>
<div class="people">
<figure>
@ -69,14 +69,338 @@
<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 d’interactions 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 à l’ENSCi et
à Paris 1.</p>
<p>Adrien Payet est designer-développeur et philosophe. Il enseigne
à 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.</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 d’un
logotype) en faisant appel à des professionnels de confiance avec
lesquels <br>nous collaborons régulièrement.</p>
</section>
</section>
<section id="note-intention">
<h2 id="notre-studio-et-son-approche">Notre studio et son
approche</h2>
<p>Notre activité principale est la conception et le développement
de sites web et d’outils graphiques. Le design graphique en est
toujours une dimension centrale. Chaque projet que nous concebons
repose sur un <strong>travail d’identité</strong> au sens fort : pas
seulement un logo et une palette, mais un <strong>système graphique
cohérent</strong>, 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 système non comme un
acte figé mais comme un <strong>dispositif vivant</strong> :
un ensemble de règles et de composants qui peuvent se décliner, se
combiner, évoluer; sans jamais perdre leur cohérence.</p>
<p>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
<strong>dialoguer les logiques formelles et techniques</strong> :
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 l’une des
spécificités de notre approche.</p>
<p>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 un contexte dans
lequel nous travaillons régulièrement, et que nous habitons.</p>
<h3 id="identités-modulaires-et-évolutives">→ Identités modulaires
et évolutives</h3>
<p>Parce que nous <strong>codons directement les sites web</strong>,
nous sommes en mesure d’imaginer des identités qui ne se limitent
pas à une charte PDF figée, mais qui <strong>vivent dans leurs
outils de diffusion</strong>. 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.</p>
<p>Cette approche est particulièrement adaptée aux projets portés
par un réseau de 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 compétences en
design.</p>
<h3 id="sites-web">→ Sites web</h3>
<p>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 <strong>Kirby</strong>, 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.</p>
<p>Cette maîtrise technique nous permet d’envisager le site web non
pas comme un livrable séparé de l’identité, mais comme l’un de ses
supports les plus vivants : un espace où la charte graphique
s’exprime dans ses usages réels, se teste et s’affine.</p>
<h3 id="multisupport-et-web-to-print">→ Multisupport et
web-to-print</h3>
<p>Le <strong>web-to-print</strong> désigne la génération de
documents imprimables (plaquettes, programmes, rapports, etc.)
directement depuis le navigateur web, à partir d’un 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.</p>
<p>Cette approche est particulièrement pertinente lorsqu’une
institution ou un programme produit des supports récurrents
(rapports, plaquettes, visuels pour 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 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.</p>
<p>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.</p>
</section>
<section id="devis">
<h2 id="proposition-budgetaire">Proposition budgetaire</h2>
<div class="devis-container">
<p>→ Taux journalier : 800 € HT</p>
<table>
<colgroup>
<col style="width: 30%" />
<col style="width: 30%" />
<col style="width: 40%" />
</colgroup>
<thead>
<tr>
<th><strong>Tâche</strong></th>
<th><strong>Jours</strong></th>
<th style="text-align: right;"><strong>€ HT</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>KIT DE LANCEMENT</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Logotype (version initiale,
couleur et monochrome)</td>
<td>1.5</td>
<td style="text-align: right;">1 200</td>
</tr>
<tr>
<td><span class="indent"></span>→ Affichette, carton invitation (à
définir en phase de cadrage)</td>
<td>0.5</td>
<td style="text-align: right;">400</td>
</tr>
<tr>
<td><span class="indent"></span>→ Landing page</td>
<td>1</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td><span class="indent"></span>→ Kakemono</td>
<td>0.5</td>
<td style="text-align: right;">400</td>
</tr>
<tr>
<td><strong>IDENTITÉ VISUELLE</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Finalisation et déclinaisons du
logotype (responsive, co-branding)</td>
<td>2</td>
<td style="text-align: right;">1 600</td>
</tr>
<tr>
<td><span class="indent"></span>→ Univers graphique (typographie,
palette, principes graphiques)</td>
<td>2.5</td>
<td style="text-align: right;">2 000</td>
</tr>
<tr>
<td><strong>CHARTE GRAPHIQUE</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Charte complète (règles d’usage,
hiérarchies, mise en page, iconographie)</td>
<td>1.5</td>
<td style="text-align: right;">1 200</td>
</tr>
<tr>
<td><span class="indent"></span>→ Guide d’application
synthétique</td>
<td>1</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td><strong>DÉCLINAISONS DE SUPPORTS</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Modèle de présentation
institutionnelle (PowerPoint ou Keynote)</td>
<td>1</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td><span class="indent"></span>→ Visuels réseaux sociaux + document
éditorial + communiqué de presse</td>
<td>0.5</td>
<td style="text-align: right;">400</td>
</tr>
<tr>
<td><span class="indent"></span>→ Livraison des fichiers sources et
éléments graphiques</td>
<td>0.5</td>
<td style="text-align: right;">400</td>
</tr>
<tr>
<td><strong>KIT DE COMMUNICATION PARTENAIRES</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Templates et recommandations
d’usage</td>
<td>1</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td><strong>SITE INTERNET</strong></td>
<td></td>
<td style="text-align: right;"></td>
</tr>
<tr>
<td><span class="indent"></span>→ Direction artistique et
intégration de l’identité</td>
<td>1.5</td>
<td style="text-align: right;">1 200</td>
</tr>
<tr>
<td><span class="indent"></span>→ Conception et développement</td>
<td>2</td>
<td style="text-align: right;">1 600</td>
</tr>
<tr>
<td>Gestion de projet</td>
<td>≈10 %</td>
<td style="text-align: right;">1 400</td>
</tr>
</tbody>
</table>
<div id="total">
<table>
<thead>
<tr>
<th>Sous-total HT</th>
<th style="text-align: right;">15 000</th>
</tr>
</thead>
<tbody>
<tr>
<td>TVA 20 %</td>
<td style="text-align: right;">3 000</td>
</tr>
<tr>
<td><strong>Total TTC</strong></td>
<td style="text-align: right;"><strong>18 000</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<section id="perspectives" class="devis-aside">
<h3>Perspectives</h3>
<p>En fonction des échanges avec l’équipe lors de la première phase,
un <strong>outil léger de génération de supports</strong> pourrait
être envisagé dès le début du projet. À partir des gabarits et des
règles graphiques définis (web-to-print), les partenaires pourraient
produire de façon autonome des documents cohérents avec la charte
graphique (fiches projets, visuels pour les réseaux sociaux,
documents éditoriaux, etc.) sans compétences en design. Son
périmètre et ses modalités seraient précisés ensemble au fil des
premiers échanges.</p>
</section>
</section>
<section id="planning">
<h2 id="planning-phases">Planning &amp; phases</h2>
<p><em>Le planning peut être ajusté avec l’équipe selon les
priorités et la progression du projet.</em></p>
<h3 id="phase-0-cadrage">Phase 0 — Cadrage</h3>
<p>Sem. 16 (13–17 avril) → Réunion de lancement<br />
ou Sem. 17 (20-24 avril)</p>
<h3 id="phase-1-kit-de-lancement">Phase 1 — Kit de lancement</h3>
<ul>
<li>Sem. 17–18 (28 avril–2 mai) → Recherche et premières pistes
logotype<br />
</li>
<li>Sem. 19 (5–9 mai) → Présentation pistes créatives (jalon
brief)<br />
</li>
<li>Sem. 20 (12–16 mai) → Ajustements<br />
</li>
<li><strong>19 mai</strong> → Validation logotype (jalon
brief)<br />
</li>
<li>Sem. 21–22 (20–30 mai) → Affichette, landing page,
kakemono<br />
</li>
<li><strong>2 juin</strong> → Livraison kit de lancement</li>
</ul>
<h3 id="phase-2-identité-visuelle-complète">Phase 2 — Identité
visuelle complète</h3>
<ul>
<li>Juin → Déclinaisons logotype + univers graphique (typo, palette,
principes)<br />
</li>
<li>Fin juin → Validation identité</li>
</ul>
<h3 id="phase-3-charte-graphique">Phase 3 — Charte graphique</h3>
<ul>
<li>Juillet → Charte complète + guide d’application<br />
</li>
<li>Fin juillet → Livraison charte</li>
</ul>
<h3
id="phase-4-déclinaisons-kit-partenaires-outil-génératif-léger">Phase
4 — Déclinaisons + Kit partenaires / outil génératif léger</h3>
<ul>
<li>Août–septembre → Modèles (PPT, éditorial, RS) + kit
partenaires<br />
</li>
<li>Août–fin septembre → outl génératif léger, prototype<br />
</li>
<li>Fin septembre → Livraison supports</li>
</ul>
<h3 id="phase-5-site-internet">Phase 5 — Site internet</h3>
<ul>
<li>Octobre–novembre → Design + développement<br />
</li>
<li>Fin novembre → Livraison site</li>
<li>Fin novembre → Livraison outil génératif léger (si nous partons
sur cette piste)</li>
</ul>
</section>
<section id="portfolio-introduction" class="portfolio-group">
<h2 id="sélection-de-projets">Sélection de projets</h2>
@ -119,7 +443,7 @@
Prestation(s)
</dt>
<dd>
Design et développement full-stack
Identité visuelle et développement full-stack
</dd>
</dl>
<dl>
@ -191,13 +515,13 @@
</dl>
</div>
</section>
<section id="esaj" class="portfolio-group">
<h1 id="esaj">ESAJ</h1>
<p>Site vitrine pour l’École supérieure d’Architecture des Jardins,
avec programmes des formations, formulaire de contact et
actualités.</p>
<section id="medialab" class="portfolio-group">
<h1 id="médialab">médialab</h1>
<p>Laboratoire interdisciplinaire qui interroge les relations entre
le numérique et nos sociétés. Un site web sans images et sans
Javascript.</p>
<figure>
<img src="images/esaj.png" alt="." />
<img src="images/medialab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
@ -206,7 +530,7 @@
URL
</dt>
<dd>
<a href="https://www.esaj.asso.fr/" target="_blank">www.esaj.asso.fr</a>
<a href="https://medialab.sciencespo.fr/" target="_blank">medialab.sciencespo.fr</a>
</dd>
</dl>
<dl>
@ -214,7 +538,7 @@
Secteur
</dt>
<dd>
Formation
Recherche
</dd>
</dl>
<dl>
@ -222,7 +546,7 @@
Client
</dt>
<dd>
École supérieure d’Architecture des Jardins
médialab, SciencesPo
</dd>
</dl>
<dl>
@ -230,7 +554,7 @@
Prestation(s)
</dt>
<dd>
Développement full-stack
Design et développement front-end
</dd>
</dl>
<dl>
@ -238,7 +562,7 @@
Partenaire(s)
</dt>
<dd>
Lola Duval (design)
en collaboration avec Benjamin Gremillon et l’équipe du médialab
</dd>
</dl>
<dl>
@ -246,17 +570,17 @@
Date
</dt>
<dd>
2024
2019
</dd>
</dl>
</div>
</section>
<section id="ntbesancon" class="portfolio-group">
<h1 id="nouveau-théâtre-de-besançon">Nouveau théâtre de
Besançon</h1>
<p>Site web, avec calendrier et billetterie intégrée.</p>
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau d’ingénieur·es dans la recherche,
<br>avec <strong>système de filtres croisés</strong>.</p>
<figure>
<img src="images/ntbesancon.png" alt="." />
<img src="images/resin.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
@ -265,7 +589,7 @@
URL
</dt>
<dd>
<a href="https://ntbesancon.fr/" target="_blank">ntbesancon.fr</a>
<a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
</dd>
</dl>
<dl>
@ -273,7 +597,7 @@
Secteur
</dt>
<dd>
Culture
Recherche
</dd>
</dl>
<dl>
@ -281,7 +605,7 @@
Client
</dt>
<dd>
Nouveau théâtre de Besançon
médialab, SciencesPo
</dd>
</dl>
<dl>
@ -289,15 +613,7 @@
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Studio Plastac (design)
Identité visuelle et développement front-end
</dd>
</dl>
<dl>
@ -305,66 +621,7 @@
Date
</dt>
<dd>
2024
</dd>
</dl>
</div>
</section>
<section id="timelure" class="portfolio-group">
<h1 id="timelure">Timelure</h1>
<p>Archives des 70 ans de programmation des Rencontres de Lure,
organisées sous forme de chronologie.</p>
<figure>
<img src="images/timelure-responsive.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://chronologie.delure.org/" target="_blank">chronologie.delure.org</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Culturel, Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Rencontres Internationales de Lure
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Julien Bidoret, Lola Duval et l’équipe des Rencontres de Lure
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2022
2025
</dd>
</dl>
</div>
@ -431,12 +688,13 @@
</dl>
</div>
</section>
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau d’ingénieur·es dans la recherche, avec
<strong>système de filtres croisés</strong>.</p>
<section id="esaj" class="portfolio-group">
<h1 id="esaj">ESAJ</h1>
<p>Site vitrine pour l’École supérieure d’Architecture des Jardins,
avec programmes des formations, formulaire de contact et
actualités.</p>
<figure>
<img src="images/resin.png" alt="." />
<img src="images/esaj.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
@ -445,7 +703,7 @@
URL
</dt>
<dd>
<a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
<a href="https://www.esaj.asso.fr/" target="_blank">www.esaj.asso.fr</a>
</dd>
</dl>
<dl>
@ -453,7 +711,7 @@
Secteur
</dt>
<dd>
Recherche
Formation
</dd>
</dl>
<dl>
@ -461,7 +719,7 @@
Client
</dt>
<dd>
médialab, SciencesPo
École supérieure d’Architecture des Jardins
</dd>
</dl>
<dl>
@ -469,59 +727,7 @@
Prestation(s)
</dt>
<dd>
Design et développement front-end
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="medialab" class="portfolio-group">
<h1 id="médialab">médialab</h1>
<p>Laboratoire interdisciplinaire qui interroge les relations entre
le numérique et nos sociétés. Un site web sans images et sans
Javascript.</p>
<figure>
<img src="images/medialab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://medialab.sciencespo.fr/" target="_blank">medialab.sciencespo.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
médialab, SciencesPo
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement front-end
Développement full-stack
</dd>
</dl>
<dl>
@ -529,7 +735,7 @@
Partenaire(s)
</dt>
<dd>
en collaboration avec Benjamin Gremillon et l’équipe du médialab
Lola Duval (design)
</dd>
</dl>
<dl>
@ -537,7 +743,7 @@
Date
</dt>
<dd>
2019
2024
</dd>
</dl>
</div>
@ -652,114 +858,6 @@
</dl>
</div>
</section>
<section id="flaash" class="portfolio-group">
<h1 id="flaash">Flaash</h1>
<p>Site de la revue d’anticipation Flaash.</p>
<figure>
<img src="images/flaash-thematiques.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.flaash.fr" target="_blank">flaash.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Culture
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Revue Flaash
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Studio Plastac (design)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</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>
<figure>
<img src="images/actuel-inactuel.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Association époque
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</dl>
</div>
</section>
<section id="heroines" class="portfolio-group">
<h1 id="héroïnes">Héro·ïne·s</h1>
<p>Publication du groupe de recherche de La Fémis à propos de la
@ -815,169 +913,6 @@
</dl>
</div>
</section>
<section id="decarb-one" class="portfolio-group">
<h1 id="decarb.one">Decarb.one</h1>
<p>Site <strong>éco-conçu</strong> pour une agence de relations
presse et de communication responsable.</p>
<figure>
<img src="images/decarb-one.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://decarb.one/" target="_blank">decarb.one</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Communication
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
decarb.one
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Praticable
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2022
</dd>
</dl>
</div>
</section>
<section id="design-to-pack" class="portfolio-group">
<h1 id="design-to-pack">Design to Pack</h1>
<p>Plateforme complète de gestion de projets de création de flacons
de parfum. L’interface permet de collaborer du brief aux produits
finis, en passant par les <strong>vues 3D interactives</strong>.</p>
<figure>
<img src="images/design-to-pack.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
Plateforme privée
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Luxe
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Groupe Pochet
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement du back-end, de la logique applicative et des
interactions.
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="gms" class="portfolio-group">
<h1 id="game-management-system">Game Management System</h1>
<p>Plateforme sur-mesure dédiée à la conception et à la
planification de parties de divers jeux en ligne.</p>
<figure>
<img src="images/gms.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
Plateforme privée
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Divertissement
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
<a href="https://www.world.game/">World Game</a>
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
En cours
</dd>
</dl>
</div>
</section>
<section id="tmn-lab" class="portfolio-group">
<h1 id="tmn-lab-état-des-lieux-du-numérique-2021">TMN Lab, État des
lieux du numérique 2021</h1>

14
src/approche-studio.md
View file

@ -1,15 +1,9 @@
## 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 s’accompagne d’une 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 d’intégrer dès le départ nos principes d’écoconception et d’accessibilité.
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 d’ajuster 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 et d’outils 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 interlocuteur·ices aux profils divers, et de rester lisible dans le temps. Nous concevons ce système non comme un acte figé mais comme un **dispositif vivant** : un ensemble de règles et de composants qui peuvent se décliner, se combiner, évoluer; sans jamais perdre leur cohérence.
Notre force réside dans la complémentarité de nos profils : designers et&nbsp;développeur·ses à la fois, nous avons l’habitude 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 l’ensemble de notre intervention : un site léger, <br>lisible et durable.
Ce travail s'appuie sur une double compétence graphique et technique, 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 l'une des spécificités de notre approche.
Notre façon de travailler repose sur des **allers-retours réguliers** : nous définissons des étapes intermédiaires pour valider les choix au fur et à mesure, plutôt que de tout livrer en une fois. Cela permet d'ajuster le projet en fonction des retours et des contraintes qui émergent.
### Les forces de notre proposition
- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet d’adopter 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 l’intégration.
- **Un travail mené au plus près du code existant**, afin de&nbsp;faciliter l’intégration de&nbsp;nos développements, d’assurer la continuité technique et de favoriser des&nbsp;échanges simples et efficaces avec vous.
- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utilisation 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.

40
src/devis copy.md Normal file
View file

@ -0,0 +1,40 @@
## Devis
→ Taux journalier: 800€ HT
| **Tâche** | **Jours** | **€ (HT)** |
| ------------------------------------------------------------ | --------- | ---------- |
| Création du logo | 1 | 800 |
| Identité visuelle avec mockup d’une page responsive type (maquettes HTML & CSS) | 2 | 1600 |
| UI arbre de compétences (explorable, filtrage) | 1.5 | 1200 |
| Développement front-end de toutes les pages responsives | | |
| <span class="indent"></span>→ Home page | 1 | 800 |
| <span class="indent"></span>→ Pages listes et de tri | 1.5 | 1200 |
| <span class="indent"></span>→ Pages individuelles | 1.5 | 1200 |
| <span class="indent"></span>→ Pages de contenu: présentation, ressources, etc. | 0.5 | 400 |
| <span class="indent"></span>→ Intégration au code existant | 30.00% | 1080 |
| Mise en place de la recherche réactive | 0.5 | 400 |
| Révisions UI et petits ajustements | 0.5 | 400 |
| Tests cross-device, optimisation HTML/CSS/JS et accessibilité | 0.5 | 400 |
| Gestion de projet | 10.00% | 948 |
<div id="total">
| Sous total HT | 10428 |
| ------------- | ------- |
| TVA 20 % | 2085.6 |
| Total TTC | 12513.6 |
</div>
Note : Si votre structure ne récupère pas la TVA et que cela constitue une contrainte budgétaire, nous vous invitons à nous en faire part afin d’en discuter.

64
src/devis.md
View file

@ -1,38 +1,50 @@
## Devis
→ Taux journalier: 800€ HT
## Proposition budgetaire
<div class="devis-container">
| **Tâche** | **Jours** | **€ (HT)** |
| ------------------------------------------------------------ | --------- | ---------- |
| Création du logo | 1 | 800 |
| Identité visuelle avec mockup d’une page responsive type (maquettes HTML & CSS) | 2 | 1600 |
| UI arbre de compétences (explorable, filtrage) | 1.5 | 1200 |
| Développement front-end de toutes les pages responsives | | |
| <span class="indent"></span>→ Home page | 1 | 800 |
| <span class="indent"></span>→ Pages listes et de tri | 1.5 | 1200 |
| <span class="indent"></span>→ Pages individuelles | 1.5 | 1200 |
| <span class="indent"></span>→ Pages de contenu: présentation, ressources, etc. | 0.5 | 400 |
| <span class="indent"></span>→ Intégration au code existant | 30.00% | 1080 |
| Mise en place de la recherche réactive | 0.5 | 400 |
| Révisions UI et petits ajustements | 0.5 | 400 |
| Tests cross-device, optimisation HTML/CSS/JS et accessibilité | 0.5 | 400 |
| Gestion de projet | 10.00% | 948 |
→ Taux journalier : 800 € HT
| **Tâche** | **Jours** | **€ HT** |
| --- | --- | ---: |
| **KIT DE LANCEMENT** | | |
| <span class="indent"></span>→ Logotype (version initiale, couleur et monochrome) | 1.5 | 1 200 |
| <span class="indent"></span>→ Affichette, carton invitation (à définir en phase de cadrage) | 0.5 | 400 |
| <span class="indent"></span>→ Landing page | 1 | 800 |
| <span class="indent"></span>→ Kakemono | 0.5 | 400 |
| **IDENTITÉ VISUELLE** | | |
| <span class="indent"></span>→ Finalisation et déclinaisons du logotype (responsive, co-branding) | 2 | 1 600 |
| <span class="indent"></span>→ Univers graphique (typographie, palette, principes graphiques) | 2.5 | 2 000 |
| **CHARTE GRAPHIQUE** | | |
| <span class="indent"></span>→ Charte complète (règles d'usage, hiérarchies, mise en page, iconographie) | 1.5 | 1 200 |
| <span class="indent"></span>→ Guide d'application synthétique | 1 | 800 |
| **DÉCLINAISONS DE SUPPORTS** | | |
| <span class="indent"></span>→ Modèle de présentation institutionnelle (PowerPoint ou Keynote) | 1 | 800 |
| <span class="indent"></span>→ Visuels réseaux sociaux + document éditorial + communiqué de presse | 0.5 | 400 |
| <span class="indent"></span>→ Livraison des fichiers sources et éléments graphiques | 0.5 | 400 |
| **KIT DE COMMUNICATION PARTENAIRES** | | |
| <span class="indent"></span>→ Templates et recommandations d'usage | 1 | 800 |
| **SITE INTERNET** | | |
| <span class="indent"></span>→ Direction artistique et intégration de l'identité | 1.5 | 1 200 |
| <span class="indent"></span>→ Conception et développement | 2 | 1 600 |
| Gestion de projet | ≈10 % | 1 400 |
<div id="total">
| Sous total HT | 10428 |
| ------------- | ------- |
| TVA 20 % | 2085.6 |
| Total TTC | 12513.6 |
| Sous-total HT | 15 000 |
| --- | ---: |
| TVA 20 % | 3 000 |
| **Total TTC** | **18 000** |
</div>
Note : Si votre structure ne récupère pas la TVA et que cela constitue une contrainte budgétaire, nous vous invitons à nous en faire part afin d’en discuter.
</div>
<div class="devis-aside">
### Perspectives
En fonction des échanges avec l'équipe lors&nbsp;de&nbsp;la&nbsp;première phase, un **outil léger de génération de supports** pourrait être envisagé dès le début du projet. À partir des gabarits et des règles graphiques définis (web-to-print), les partenaires pourraient produire de façon autonome des documents cohérents avec la&nbsp;charte graphique (fiches projets, visuels pour les réseaux sociaux, documents éditoriaux, etc.) sans compétences en design. Son périmètre et ses modalités seraient précisés ensemble au fil des premiers échanges.
</div>

17
src/equipe.md
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 l’utilisation 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 à l’ENSCi 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>

28
src/files.yaml
View file

@ -1,26 +1,26 @@
input-files:
- src/studio-variable.md
# - src/note-intention.md
# - src/devis.md
# - src/planning.md
# - src/livrables.md
- src/equipe.md
# - src/approche-studio.md
- src/note-intention.md
- src/devis.md
- src/planning.md
# - src/livrables.md
- src/portfolio-introduction.md
- src/portfolio-1img/wysiwyg.md
- src/portfolio-1img/acau.md
- src/portfolio-1img/esaj.md
- src/portfolio-1img/ntbesancon.md
- src/portfolio-1img/timelure.md
- src/portfolio-1img/chromobase.md
- src/portfolio-1img/resin.md
- src/portfolio-1img/medialab.md
- src/portfolio-1img/resin.md
- src/portfolio-1img/chromobase.md
- src/portfolio-1img/esaj.md
#- src/portfolio-1img/ntbesancon.md
- src/portfolio-1img/cultures-visuelles.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/flaash.md
# - src/portfolio-1img/timelure.md
# - src/portfolio-1img/flaash.md
- src/portfolio-1img/actuel-inactuel.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/decarb-one.md
# - src/portfolio-1img/design-to-pack.md
# - src/portfolio-1img/gms.md
- src/portfolio-1img/tmn-lab.md
- src/details.md

6
src/meta.yaml
View file

@ -1,8 +1,8 @@
---
title: "Studio Variable"
baseline: "Design × code | studio-variable.com"
client: "Portfolio CEAAC"
date: "12 février 2026"
client: "Proposition « Design et Conception pour les Transitions »"
date: "8 avril 2026"
contact: "contact@studio-variable.com"
footer: "Studio Variable – Portfolio CEAAC"
footer: "Studio Variable – Proposition DCT"
---

35
src/note-intention.md
View file

@ -1,19 +1,28 @@
## Note intention
## Notre studio et son approche
Notre intervention se concentre 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 s’accompagne d’une 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 d’intégrer dès le départ nos principes d’écoconception et d’accessibilité.
Notre activité principale est la conception et le développement de sites web et d’outils 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.
**Sur le plan graphique**, nous portons une attention particulière à la lisibilité et&nbsp;à&nbsp;l’harmonisation des contenus. L’hétérogénéité des profils proposés dans l’annuaire (parfois très succincts, parfois très denses) sera prise en compte pour construire des pages qui restent esthétiques et équilibrées. Nous privilégions **une&nbsp;esthétique sobre, sur mesure, où la typographie et les contrastes assurent une&nbsp;hiérarchie claire**, afin d’éviter les ruptures visuelles dans l’annuaire. L’arbre des compétences, qui constitue un outil central de navigation et de recherche, fera l’objet d’une refonte spécifique : nous souhaitons en améliorer la lisibilité et l’exploration, en le rendant plus visible et plus interactif, tout en veillant à une utilisation fluide sur mobile comme sur ordinateur. Notre objectif est de concevoir une interface qui mette en valeur les compétences et facilite réellement la&nbsp;recherche dans l’annuaire, sans surcharge graphique inutile.
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.
**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et&nbsp;JavaScript vanilla**, complétés si nécessaire par une librairie légère comme Alpine.js pour la recherche réactive. Cette sobriété garantit la compatibilité avec la licence libre du projet, facilite la maintenance et limite l’empreinte écologique du site. Nous travaillerons à partir de l’existant, que ce soit le code ou l’image Docker déjà utilisée, et nous engageons à adapter nos développements à vos contraintes sans surcomplexification. En fonction de vos préférences, nous travaillerons soit sur une branche du dépôt Git existant soit sur une copie de ce repo.
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 d’ajuster 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 l’habitude 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 l’ensemble de notre intervention : un site léger, <br>lisible et durable, au service du réseau RésIn.
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.
### Les forces de notre proposition
### → Identités modulaires et évolutives
- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet d’adopter 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 l’intégration.
- **Un travail mené au plus près du code existant**, afin de&nbsp;faciliter l’intégration de&nbsp;nos développements, d’assurer la continuité technique et de favoriser des&nbsp;échanges simples et efficaces avec vous.
- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utilisation 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 refonte graphique pensée autour de l’arbre des compétences**, conçu comme un élément central et progressif de navigation : il sera placé visuellement à proximité du moteur de recherche sur desktop, déployé en&nbsp;accordéon sur mobile, et enrichi de fonctions de multi-filtrage. <br>Selon la pertinence, un fil d’Ariane (breadcrumb) pour contextualiser <br>les profils affichés.
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.

50
src/planning.md
View file

@ -1,21 +1,41 @@
## Planning & phases
- Démarrage : **dès sélection** (idéalement semaine du 13 octobre 2025).
- Rendu final : **8 décembre 2025**.
- Mode : itérations de 1 à 2 semaines (sprints courts).
*Le planning peut être ajusté avec l'équipe selon les priorités et la progression du projet.*
### Phase 0 — Cadrage
Sem. 16 (13–17 avril) → Réunion de lancement
ou Sem. 17 (20-24 avril)
### Phase 1 — Kit de lancement
- Sem. 17–18 (28 avril–2 mai) → Recherche et premières pistes logotype
- Sem. 19 (5–9 mai) → Présentation pistes créatives (jalon brief)
- Sem. 20 (12–16 mai) → Ajustements
- **19 mai** → Validation logotype (jalon brief)
- Sem. 21–22 (20–30 mai) → Affichette, landing page, kakemono
- **2 juin** → Livraison kit de lancement
### Phase 2 — Identité visuelle complète
- Juin → Déclinaisons logotype + univers graphique (typo, palette, principes)
- Fin juin → Validation identité
### Phase 3 — Charte graphique
- Juillet → Charte complète + guide d'application
- Fin juillet → Livraison charte
### Phases
### Phase 4 — Déclinaisons + Kit partenaires / outil génératif léger
- Semaine 1 (13–17 oct.) : Échange pour le démarrage du projet, accès API
- Semaine 2–3 (20–31 oct.) : Proposition d’identité sur maquette HTML/CSS statique (1 page type), avec UI arbre de compétences. Inclus palette de couleur + proposition logo
- **4 novembre : validation de l’identité proposée**
- Semaine 4–6 (3–21 nov.) : Développement front avec sprints
- Sprint 1 — Copie du dépôt, pipeline parallèle, audit HTML, mise en place SASS
- Sprint 2 — Intégration arbre de compétence, développement de la page d’accueil et de la liste filtrables
- Sprint 3 — Développement et intégration des pages individuelles et des pages de contenus
- Sprint 4 — Recherche plein texte réactive et affinement de l’affichage filtrage multi-sélection
- Semaine 7 (24–28 nov.) : Révisions UI et petits ajustements. Validation définitive du logo.
- Semaine 8 (1–5 déc.) : Tests & optimisation.
- **Livraison finale** : au plus tard **8 décembre 2025**.
- Août–septembre → Modèles (PPT, éditorial, RS) + kit partenaires
- Août–fin septembre → outl génératif léger, prototype
- Fin septembre → Livraison supports
### Phase 5 — Site internet
- Octobre–novembre → Design + développement
- Fin novembre → Livraison site
- Fin novembre → Livraison outil génératif léger (si nous partons sur cette piste)

4
src/portfolio-1img/resin.md
View file

@ -1,6 +1,6 @@
# RésIn
Plateforme pour un réseau d’ingénieur·es dans la recherche, avec **système de filtres croisés**.
Plateforme pour un réseau d’ingénieur·es dans la recherche, <br>avec **système de filtres croisés**.
![.](images/resin.png)
@ -20,7 +20,7 @@ Plateforme pour un réseau d’ingénieur·es dans la recherche, avec **système
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement front-end</dd>
<dd>Identité visuelle et développement front-end</dd>
</dl>
<dl>
<dt>Date</dt>

2
src/portfolio-1img/wysiwyg.md
View file

@ -20,7 +20,7 @@ Projet de recherche sur l’évolution des logiciels de graphisme en Suisse et&n
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
<dd>Identité visuelle et développement full-stack</dd>
</dl>
<dl>
<dt>Date</dt>

3
src/studio-variable.md
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 l’open 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 l’open source.