basic-portfolio_web-to-print/index.html
2025-12-29 11:57:12 +01:00

613 lines
No EOL
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<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">
<p>Proposition Direction 6ème</p>
<p>29 décembre 2025</p>
<p>contact@studio-varible.com</p>
</aside>
<header>
<h1>Studio Variable</h1>
<h2>Design × code</h2>
</header>
<footer>
<p><p>Studio Variable Proposition Direction 6ème</p></p>
</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>
<img src="images/studio-variable_Julie.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="julie-blanc-chef-de-projet">Julie Blanc, chef de projet</h1>
<p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc le
<strong>design</strong> et le <strong>développement
front-end</strong>.</p>
<p>Julie est designer, développeuse et chercheuse. Elle a co-fondé
le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
Sa thèse, soutenue en 2023, porte sur lutilisation des
techonologies du web par les designers graphique.</p>
</div>
<div class="people">
<figure>
<img src="images/studio-variable_Adrien.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="adrien-payet">Adrien Payet</h1>
<p>Développeur full-stack, spécialisé en design et développement de
back-office et dinteractions front-end, Adrien assurera le
<strong>développement bank-end et la maintenance</strong> du
projet.</p>
<p>Adrien étudie, enseigne et pratique la philosophie, le design et
le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et
à Paris 1.</p>
</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>
<p>Projet de recherche lévolution des logiciels de graphisme en
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>
<p>Laboratoire interdisplinaire qui interroge les relations entre le
numérique et nos sociétés.</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, 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>
<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>
<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 an front-end pour lédition du contenu.</p>
<figure>
<img src="images/cultures-visuelles.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.culturesvisuelles.org/" target="_blank">culturesvisuelles.org</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Université de Strasbourg
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, éveloppement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Timothée Goguely
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2020
</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, é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>
<figure>
<img src="images/repenser-les-heros.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://repenserlesheros.femis.fr/" target="_blank">repenserlesheros.femis.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
groupe de recherche de La Fémis / SACRe, PSL
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<!-- <dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Benjamin Benjamin Gremillon et léauipe du médialab</dd>
</dl> -->
<dl>
<dt>
Date
</dt>
<dd>
2021
</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
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Plastac (design)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</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>