basic-portfolio_web-to-print/index.html

792 lines
16 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-05 15:47:43 +02:00
<p>Portfolio CEAAC</p>
<p>12 février 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-05 15:47:43 +02:00
<p><p>Studio Variable Portfolio CEAAC</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-05 15:47:43 +02:00
<!-- 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>
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>
<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>
2025-12-29 11:27:47 +01:00
<p>Julie est designer, développeuse et chercheuse. Elle a co-fondé
le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
2025-12-29 14:48:30 +01:00
Sa thèse, soutenue en 2023, porte sur lutilisation des technologies
du web par les designers graphiques.</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>
<p>Développeur full-stack, spécialisé en design et développement de
2025-12-29 11:57:12 +01:00
back-office et dinteractions front-end, Adrien assurera le
2025-12-29 14:48:30 +01:00
<strong>développement back-end et la maintenance</strong> du
2025-12-29 11:57:12 +01:00
projet.</p>
2025-12-29 11:27:47 +01:00
<p>Adrien étudie, enseigne et pratique la philosophie, le design et
2026-04-05 15:47:43 +02:00
le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et
2025-12-29 11:27:47 +01:00
à Paris 1.</p>
</div>
</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-05 15:47:43 +02:00
Design et développement full-stack
</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-05 15:47:43 +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-05 15:47:43 +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-05 15:47:43 +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-05 15:47:43 +02:00
Formation
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +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-05 15:47:43 +02:00
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Lola Duval (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-05 15:47:43 +02:00
<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>
2025-12-29 11:27:47 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/ntbesancon.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://ntbesancon.fr/" target="_blank">ntbesancon.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
Culture
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Nouveau théâtre de Besançon
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Studio 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-05 15:47:43 +02:00
<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>
2025-12-29 11:57:12 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/timelure-responsive.jpg" 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-05 15:47:43 +02:00
<a href="https://chronologie.delure.org/" target="_blank">chronologie.delure.org</a>
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Culturel, Recherche
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Rencontres Internationales de Lure
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-01-26 17:34:34 +01:00
Design et développement full-stack
2025-12-29 11:57:12 +01:00
</dd>
</dl>
<dl>
<dt>
2026-04-05 15:47:43 +02:00
Partenaire(s)
</dt>
<dd>
Julien Bidoret, Lola Duval et léquipe des Rencontres de Lure
</dd>
</dl>
<dl>
<dt>
2025-12-29 11:57:12 +01:00
Date
</dt>
<dd>
2026-04-05 15:47:43 +02:00
2022
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-05 15:47:43 +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, avec
<strong>système de filtres croisés</strong>.</p>
2025-12-29 14:48:30 +01:00
<figure>
2026-04-05 15:47:43 +02:00
<img src="images/resin.png" alt="." />
2025-12-29 14:48:30 +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://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
2025-12-29 14:48:30 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-01-26 17:34:34 +01:00
Recherche
2025-12-29 14:48:30 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-04-05 15:47:43 +02:00
médialab, SciencesPo
2025-12-29 14:48:30 +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>
Date
</dt>
<dd>
2025-12-29 14:48:30 +01:00
2025
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-01-26 17:34:34 +01: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-01-26 17:34:34 +01: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-01-26 17:34:34 +01: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>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-01-26 17:34:34 +01:00
médialab, SciencesPo
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 14:48:30 +01:00
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
2026-04-05 15:47:43 +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-01-26 17:34:34 +01:00
2019
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>
2026-01-29 14:15:16 +01:00
<section id="flaash" class="portfolio-group">
2026-04-05 15:47:43 +02:00
<h1 id="flaash">Flaash</h1>
2026-01-29 14:15:16 +01:00
<p>Site de la revue danticipation Flaash.</p>
2025-12-29 11:27:47 +01:00
<figure>
2026-01-29 14:15:16 +01:00
<img src="images/flaash-thematiques.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-29 14:15:16 +01:00
<a href="https://www.flaash.fr" target="_blank">flaash.fr</a>
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2026-01-29 14:15:16 +01:00
Culture
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2026-01-29 14:15:16 +01:00
Revue Flaash
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
2026-01-26 17:34:34 +01:00
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
2026-04-05 15:47:43 +02:00
Studio Plastac (design)
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026-01-26 17:34:34 +01:00
2024
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2026-04-05 15:47:43 +02:00
<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>
<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>