basic-portfolio_web-to-print/index.html

1000 lines
27 KiB
HTML
Raw Normal View History

2025-12-29 11:27:47 +01:00
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio Variable</title>
2025-12-29 19:30:31 +01:00
<script src="/assets/paged.polyfill.js"></script>
2025-12-29 11:27:47 +01:00
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/Area/stylesheet.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/Geist-mono/stylesheet.css">
</head>
<body>
<aside class="infos">
2026-04-08 15:46:40 +02:00
<p>Proposition « Design et Conception pour les Transitions »</p>
<p>8 avril 2026</p>
2025-12-29 19:30:31 +01:00
<p>contact@studio-variable.com</p>
2025-12-29 11:27:47 +01:00
</aside>
<header>
<h1>Studio Variable</h1>
2026-01-26 17:34:34 +01:00
<h2>Design × code | studio-variable.com</h2>
2025-12-29 11:27:47 +01:00
</header>
<footer>
2026-04-08 15:46:40 +02:00
<p><p>Studio Variable Proposition DCT</p></p>
2025-12-29 11:27:47 +01:00
</footer>
<section id="studio-variable">
<p>Créé en juin 2025 et basé à Paris, Studio Variable conjugue
<strong>design graphique, design dinterface et développement web
full-stack</strong>. Œuvrant principalement avec le secteur de la
recherche, de lécologie et de la culture, il collabore aussi bien
avec de grands comptes quavec des indépendants.</p>
<p>Fondé par <strong>Julie Blanc</strong> (designer-développeuse et
chercheuse en ergonomie) et <strong>Adrien Payet</strong>
(designer-développeur issu de la philosophie), Studio Variable
développe une approche formelle et technique qui concilie
<strong>ergonomie, sobriété, accessibilité et respect de la vie
privée</strong>.</p>
2026-04-08 15:46:40 +02:00
<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>
2025-12-29 11:27:47 +01:00
</section>
<section id="equipe">
<h2 id="équipe">Équipe</h2>
<div class="people">
<figure>
2025-12-29 19:30:31 +01:00
<img src="images/studio-variable_Julie_small.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
2025-12-29 14:48:30 +01:00
<h1 id="julie-blanc">Julie Blanc</h1>
2026-04-08 15:46:40 +02:00
<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>
2025-12-29 11:27:47 +01:00
</div>
<div class="people">
<figure>
2025-12-29 19:30:31 +01:00
<img src="images/studio-variable_Adrien_small.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="adrien-payet">Adrien Payet</h1>
2026-04-08 15:46:40 +02:00
<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>
2025-12-29 11:27:47 +01:00
</div>
2026-04-08 15:46:40 +02:00
<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="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 doutils graphiques. Le design graphique en est
toujours une dimension centrale. Chaque projet que nous concebons
repose sur un <strong>travail didentité</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 sappuie 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 saccompagne dune réflexion sur sa
faisabilité, ses déclinaisons possibles, sa durabilité. Cette
intégration de la technique dès la conception est lune des
spécificités de notre approche.</p>
<p>Par notre pratique de lenseignement 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. Cest 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 dimaginer 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 dun logotype déclinable selon les contextes,
dun 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 sapproprier
lidentité et lutiliser 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
lintention graphique et le résultat final, et nous permet
dintégrer demblée une démarche daccessibilité 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 linterface dadministration
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 denvisager le site web non
pas comme un livrable séparé de lidentité, mais comme lun de ses
supports les plus vivants : un espace où la charte graphique
sexprime dans ses usages réels, se teste et saffine.</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 dun gabarit
graphique et dune 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 cest 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 lorsquune
institution ou un programme produit des supports récurrents
(rapports, plaquettes, visuels pour réseaux sociaux, etc.) 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.
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.
<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 dusage,
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 dapplication
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
dusage</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 lidentité</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 (1317 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. 1718 (28 avril2 mai) → Recherche et premières pistes
logotype<br />
</li>
<li>Sem. 19 (59 mai) → Présentation pistes créatives (jalon
brief)<br />
</li>
<li>Sem. 20 (1216 mai) → Ajustements<br />
</li>
<li><strong>19 mai</strong> → Validation logotype (jalon
brief)<br />
</li>
<li>Sem. 2122 (2030 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 dapplication<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ûtseptembre → Modèles (PPT, éditorial, RS) + kit
partenaires<br />
</li>
<li>Aoûtfin 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>Octobrenovembre → 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>
2025-12-29 11:27:47 +01:00
</section>
<section id="portfolio-introduction" class="portfolio-group">
<h2 id="sélection-de-projets">Sélection de projets</h2>
</section>
2026-04-05 15:47:43 +02:00
<section id="wysiwyg" class="portfolio-group">
<h1 id="wysiwyg">WYSIWYG</h1>
<p>Projet de recherche sur lévolution des logiciels de graphisme en
Suisse et en France (1980 - aujourdhui).</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/wysiwyg.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-05 15:47:43 +02:00
<a href="https://wysiwyg.ch/" target="_blank">wysiwyg.ch</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
HEAD Genève, Haute école dart et de design
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Identité visuelle et développement full-stack
2026-04-05 15:47:43 +02:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="acau" class="portfolio-group">
<h1 id="acau">ACAU</h1>
<p>Site vitrine pour lAgence Coopérative Architectes
Urbanistes.</p>
<figure>
<img src="images/acau.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Communication
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Agence Coopérative Architectes Urbanistes
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
2026-01-26 17:34:34 +01:00
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Plastac (design)
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026-04-05 15:47:43 +02:00
2024
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-04-08 15:46:40 +02:00
<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>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-08 15:46:40 +02:00
<img src="images/medialab.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-08 15:46:40 +02:00
<a href="https://medialab.sciencespo.fr/" target="_blank">medialab.sciencespo.fr</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Recherche
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-08 15:46:40 +02:00
médialab, SciencesPo
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Design et développement front-end
2026-04-05 15:47:43 +02:00
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
en collaboration avec Benjamin Gremillon et léquipe du médialab
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026-04-08 15:46:40 +02:00
2019
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-04-08 15:46:40 +02:00
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau dingénieur·es dans la recherche,
<br>avec <strong>système de filtres croisés</strong>.</p>
2025-12-29 11:57:12 +01:00
<figure>
2026-04-08 15:46:40 +02:00
<img src="images/resin.png" alt="." />
2025-12-29 11:57:12 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-08 15:46:40 +02:00
<a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Recherche
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-08 15:46:40 +02:00
médialab, SciencesPo
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Identité visuelle et développement front-end
2026-04-05 15:47:43 +02:00
</dd>
</dl>
<dl>
<dt>
2025-12-29 11:57:12 +01:00
Date
</dt>
<dd>
2026-04-08 15:46:40 +02:00
2025
2025-12-29 11:57:12 +01:00
</dd>
</dl>
</div>
</section>
2026-04-05 15:47:43 +02:00
<section id="chromobase" class="portfolio-group">
<h1 id="chromobase">Chromobase</h1>
<p><strong>Base de données</strong> du projet ERC Chromotope qui
explore limpact culturel de lapparition de la couleur dans
lindustrie dans les années 1850. Comprend des
<strong>fonctionnalités avancées de navigation, recherche et tri des
contenus</strong>.</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/chromobase.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-05 15:47:43 +02:00
<a href="https://chromobase.huma-num.fr/" target="_blank">chromobase.huma-num.fr</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-01-26 17:34:34 +01:00
Recherche
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Sorbonne Université, CNAM, University of Oxford
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Design et développement front-end
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
2026-01-26 17:34:34 +01:00
Partenaire(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
OuestWare (développement)
2026-01-26 17:34:34 +01:00
</dd>
</dl>
<dl>
<dt>
2025-12-29 14:48:30 +01:00
Date
2025-12-29 11:27:47 +01:00
</dt>
<dd>
2026-04-05 15:47:43 +02:00
2023
2025-12-29 14:48:30 +01:00
</dd>
</dl>
</div>
</section>
2026-04-08 15:46:40 +02:00
<section id="esaj" class="portfolio-group">
<h1 id="esaj">ESAJ</h1>
<p>Site vitrine pour lÉcole supérieure dArchitecture des Jardins,
avec programmes des formations, formulaire de contact et
actualités.</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-08 15:46:40 +02:00
<img src="images/esaj.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-08 15:46:40 +02:00
<a href="https://www.esaj.asso.fr/" target="_blank">www.esaj.asso.fr</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Formation
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-08 15:46:40 +02:00
École supérieure dArchitecture des Jardins
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Développement full-stack
2025-12-29 14:48:30 +01:00
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
2026-04-08 15:46:40 +02:00
Lola Duval (design)
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026-04-08 15:46:40 +02:00
2024
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-01-26 17:34:34 +01:00
<section id="cultures-visuelles" class="portfolio-group">
<h1 id="cultures-visuelles">Cultures visuelles</h1>
<p>Plateforme collaborative pour le programme de recherche,
2026-04-05 15:47:43 +02:00
intégrant une interface graphique en front-end pour lédition du
2026-01-26 17:34:34 +01:00
contenu.</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-01-26 17:34:34 +01:00
<img src="images/cultures-visuelles.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-01-26 17:34:34 +01:00
<a href="https://www.culturesvisuelles.org/" target="_blank">culturesvisuelles.org</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-01-26 17:34:34 +01:00
Université de Strasbourg
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2025-12-29 14:48:30 +01:00
Design et développement full-stack
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
2026-01-26 17:34:34 +01:00
Partenaire(s)
</dt>
<dd>
en collaboration avec Timothée Goguely
</dd>
</dl>
<dl>
<dt>
2025-12-29 11:27:47 +01:00
Date
</dt>
<dd>
2026-01-26 17:34:34 +01:00
2020
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-04-05 15:47:43 +02:00
<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
figure du héros dans les œuvres et pratiques artistiques</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/repenser-les-heros.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2026-04-05 15:47:43 +02:00
<a href="https://repenserlesheros.femis.fr/" target="_blank">repenserlesheros.femis.fr</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Recherche
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
groupe de recherche de La Fémis / SACRe, PSL
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Design et développement full-stack
2025-12-29 11:27:47 +01:00
</dd>
</dl>
2026-04-05 15:47:43 +02:00
<!-- <dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Benjamin Benjamin Gremillon et léquipe du médialab</dd>
</dl> -->
2025-12-29 11:27:47 +01:00
<dl>
<dt>
Date
</dt>
<dd>
2026-04-05 15:47:43 +02:00
2021
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-04-05 16:33:14 +02:00
<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>
<p>Outil pour présenter les études du TMNlab avec système de
collecte des favoris et dimpression à la demande.</p>
<figure>
<img src="images/TMNlab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021" target="_blank">/www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
TMNlab
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Praticable
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2021
</dd>
</dl>
</div>
</section>
2025-12-29 11:27:47 +01:00
<section id="details">
<p>STUDIO VARIABLE<br />
SAS, société par actions simplifiée au capital social de 1 200,00
<br />
N° SIRET 988 558 003 00014<br />
N° de TVA FR95988558003</p>
<p>Siège social:<br />
22 rue Boyer<br />
75020 Paris - France</p>
<p>Lieu dactivité:<br />
Césure (Bureau 339)<br />
13 rue Santeuil<br />
75005 Paris - France</p>
<p>Site web: <a
href="https://studio-variable.com/">studio-variable.com</a></p>
<p>Pour nous contacter: contact@studio-variable.com</p>
</section>
</body>
</html>