basic-portfolio_web-to-print/index.html

659 lines
14 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">
2025-12-29 19:30:31 +01:00
<p>Proposition Direction 6ème!</p>
2025-12-29 11:57:12 +01:00
<p>29 décembre 2025</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>
<h2>Design × code</h2>
</header>
<footer>
2025-12-29 19:30:31 +01:00
<p><p>Studio Variable Proposition Direction 6ème!</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>
<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 logiciel libre et de lopen
source.</p>
</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
le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et
à Paris 1.</p>
</div>
</section>
<section id="portfolio-introduction" class="portfolio-group">
<h2 id="sélection-de-projets">Sélection de projets</h2>
</section>
<section id="wysiwyg" class="portfolio-group">
<h1 id="wysiwyg">WYSIWYG</h1>
2025-12-29 14:48:30 +01:00
<p>Projet de recherche sur lévolution des logiciels de graphisme en
2025-12-29 11:27:47 +01:00
Suisse et en France (1980 - aujourdhui)</p>
<figure>
<img src="images/wysiwyg.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://wysiwyg.ch/" target="_blank">wysiwyg.ch</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
HEAD Genève, Haute école dart et de design
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="chromobase" class="portfolio-group">
<h1 id="chromobase">Chromobase</h1>
<p>Base de données du projet ERC Chromotope qui explore limpact
culturel de lapparition de la couleur dans lindustrie dans les
années 1850.</p>
<figure>
<img src="images/chromobase.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://chromobase.huma-num.fr/" target="_blank">chromobase.huma-num.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Sorbonne Université, CNAM, University of Oxford
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, front-end
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
OuestWare (développement)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2023
</dd>
</dl>
</div>
</section>
<section id="medialab" class="portfolio-group">
<h1 id="médialab">médialab</h1>
2025-12-29 14:48:30 +01:00
<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>
<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, développement front-end
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Benjamin Benjamin Gremillon et léquipe du
médialab
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2019
</dd>
</dl>
</div>
</section>
2025-12-29 11:57:12 +01: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
système de recherche par arbre de compétences</p>
<figure>
<img src="images/resin.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.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, développement front-end
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
2025-12-29 14:48:30 +01:00
<section id="gms" class="portfolio-group">
<h1 id="game-management-system">Game Management System</h1>
<p>Back-office sur-mesure dédié à la conception et à la
planification de parties de divers jeux en ligne.</p>
2025-12-29 11:27:47 +01:00
<figure>
2025-12-29 14:48:30 +01:00
<img src="images/gms.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2025-12-29 14:48:30 +01:00
Plateforme privée
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
2025-12-29 14:48:30 +01:00
Divertissement
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2025-12-29 14:48:30 +01:00
<a href="https://www.world.game/">World Game</a>
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>
2025-12-29 14:48:30 +01:00
Date
2025-12-29 11:27:47 +01:00
</dt>
<dd>
2025-12-29 14:48:30 +01:00
En cours
</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. Linterface permet de collaborer du brief aux produits
finis, en passant par les vues 3D interactives.</p>
<figure>
2025-12-29 19:30:31 +01:00
<img src="images/design-to-pack.jpg" alt="." />
2025-12-29 14:48:30 +01:00
<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.
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>
2025-12-29 14:48:30 +01:00
<section id="cultures-visuelles" class="portfolio-group">
<h1 id="cultures-visuelles">Cultures visuelles</h1>
<p>Plateforme pour le programme de recherche, intégrant une
interface graphique en front-end pour lédition du contenu.</p>
2025-12-29 11:27:47 +01:00
<figure>
2025-12-29 14:48:30 +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>
2025-12-29 14:48:30 +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>
2025-12-29 14:48:30 +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
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Timothée Goguely
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025-12-29 14:48:30 +01:00
2020
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2025-12-29 14:48:30 +01: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>
2025-12-29 11:27:47 +01:00
<figure>
2025-12-29 14:48:30 +01:00
<img src="images/actuel-inactuel.png" alt="." />
2025-12-29 11:27:47 +01:00
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
2025-12-29 14:48:30 +01:00
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.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>
2025-12-29 14:48:30 +01:00
Association époque
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>
Date
</dt>
<dd>
2025-12-29 14:48:30 +01:00
2024
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
2025-12-29 14:48:30 +01: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>
2025-12-29 14:48:30 +01: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>
2025-12-29 14:48:30 +01: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>
2025-12-29 14:48:30 +01:00
Recherche
2025-12-29 11:27:47 +01:00
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
2025-12-29 14:48:30 +01: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>
2025-12-29 14:48:30 +01:00
Design, développement full-stack
2025-12-29 11:27:47 +01:00
</dd>
</dl>
2025-12-29 14:48:30 +01: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>
2025-12-29 14:48:30 +01:00
2021
2025-12-29 11:27:47 +01:00
</dd>
</dl>
</div>
</section>
<section id="decarb-one" class="portfolio-group">
<h1 id="decarb.one">Decarb.one</h1>
<p>Site vitrine pour lagence de relations presse et de
communication, decarb.one qui raconte un monde décarboné.</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="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>