Compare commits
2 commits
2025-direc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
2fb4814e41 | ||
|
|
03cb0f3468 |
15 changed files with 407 additions and 306 deletions
BIN
images/TMNLab.png
Normal file
BIN
images/TMNLab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
BIN
images/flaash-thematiques.png
Normal file
BIN
images/flaash-thematiques.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
BIN
images/gms-analytics.png
Normal file
BIN
images/gms-analytics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 KiB |
592
index.html
592
index.html
|
|
@ -16,18 +16,18 @@
|
|||
<body>
|
||||
|
||||
<aside class="infos">
|
||||
<p>Proposition Direction 6ème!</p>
|
||||
<p>29 décembre 2025</p>
|
||||
<p>Portfolio CERAMIQ+</p>
|
||||
<p>2 février 2026</p>
|
||||
<p>contact@studio-variable.com</p>
|
||||
</aside>
|
||||
|
||||
<header>
|
||||
<h1>Studio Variable</h1>
|
||||
<h2>Design × code</h2>
|
||||
<h2>Design × code | studio-variable.com</h2>
|
||||
</header>
|
||||
|
||||
<footer>
|
||||
<p><p>Studio Variable – Proposition Direction 6ème!</p></p>
|
||||
<p><p>Studio Variable – Portfolio CERAMIQ+</p></p>
|
||||
</footer>
|
||||
|
||||
|
||||
|
|
@ -82,62 +82,13 @@
|
|||
<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 sur l’évolution des logiciels de graphisme en
|
||||
Suisse et en France (1980 - aujourd’hui)</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 d’art 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 l’impact
|
||||
culturel de l’apparition de la couleur dans l’industrie dans les
|
||||
années 1850.</p>
|
||||
<p><strong>Base de données</strong> du projet ERC Chromotope qui
|
||||
explore l’impact culturel de l’apparition de la couleur dans
|
||||
l’industrie dans les années 1850. Comprend des
|
||||
<strong>fonctionnalités avancées de navigation, recherche et tri des
|
||||
contenus</strong>.</p>
|
||||
<figure>
|
||||
<img src="images/chromobase.png" alt="." />
|
||||
<figcaption aria-hidden="true">.</figcaption>
|
||||
|
|
@ -193,6 +144,272 @@
|
|||
</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>
|
||||
<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="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 vues 3D interactives.</p>
|
||||
<figure>
|
||||
<img src="images/design-to-pack.jpg" 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é à 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>
|
||||
<p>Outil pour présenter les études du TMNlab avec système de
|
||||
collecte des favoris et d’impression à 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="hhttps://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>
|
||||
<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 - aujourd’hui)</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 d’art 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="medialab" class="portfolio-group">
|
||||
<h1 id="médialab">médialab</h1>
|
||||
<p>Laboratoire interdisciplinaire qui interroge les relations entre
|
||||
|
|
@ -254,165 +471,11 @@
|
|||
</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
|
||||
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="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>
|
||||
<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="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 vues 3D interactives.</p>
|
||||
<figure>
|
||||
<img src="images/design-to-pack.jpg" 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="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>
|
||||
<p>Plateforme collaborative pour le programme de recherche,
|
||||
intégrant une interface graphique en front-end pour l’édition du
|
||||
contenu.</p>
|
||||
<figure>
|
||||
<img src="images/cultures-visuelles.png" alt="." />
|
||||
<figcaption aria-hidden="true">.</figcaption>
|
||||
|
|
@ -468,11 +531,11 @@
|
|||
</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>
|
||||
<section id="flaash" class="portfolio-group">
|
||||
<h1 id="decarb.one">Decarb.one</h1>
|
||||
<p>Site de la revue d’anticipation Flaash.</p>
|
||||
<figure>
|
||||
<img src="images/actuel-inactuel.png" alt="." />
|
||||
<img src="images/flaash-thematiques.png" alt="." />
|
||||
<figcaption aria-hidden="true">.</figcaption>
|
||||
</figure>
|
||||
<div class="details">
|
||||
|
|
@ -481,7 +544,7 @@
|
|||
URL
|
||||
</dt>
|
||||
<dd>
|
||||
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.fr</a>
|
||||
<a href="https://www.flaash.fr" target="_blank">flaash.fr</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -489,7 +552,7 @@
|
|||
Secteur
|
||||
</dt>
|
||||
<dd>
|
||||
Recherche
|
||||
Culture
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -497,7 +560,7 @@
|
|||
Client
|
||||
</dt>
|
||||
<dd>
|
||||
Association époque
|
||||
Revue Flaash
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -505,7 +568,15 @@
|
|||
Prestation(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Design et développement full-stack
|
||||
Développement full-stack
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
Partenaire(s)
|
||||
</dt>
|
||||
<dd>
|
||||
en collaboration avec Studio Plastac
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -518,12 +589,12 @@
|
|||
</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>
|
||||
<section id="acau" class="portfolio-group">
|
||||
<h1 id="acau">ACAU</h1>
|
||||
<p>Site vitrine pour l’Agence Coopérative Architectes
|
||||
Urbanistes.</p>
|
||||
<figure>
|
||||
<img src="images/repenser-les-heros.png" alt="." />
|
||||
<img src="images/acau.png" alt="." />
|
||||
<figcaption aria-hidden="true">.</figcaption>
|
||||
</figure>
|
||||
<div class="details">
|
||||
|
|
@ -532,62 +603,7 @@
|
|||
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’équipe du médialab</dd>
|
||||
</dl> -->
|
||||
<dl>
|
||||
<dt>
|
||||
Date
|
||||
</dt>
|
||||
<dd>
|
||||
2021
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
<section id="decarb-one" class="portfolio-group">
|
||||
<h1 id="decarb.one">Decarb.one</h1>
|
||||
<p>Site vitrine pour l’agence 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>
|
||||
<a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr/</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -603,7 +619,7 @@
|
|||
Client
|
||||
</dt>
|
||||
<dd>
|
||||
decarb.one
|
||||
Agence Coopérative Architectes Urbanistes
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -611,7 +627,7 @@
|
|||
Prestation(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Design, développement full-stack
|
||||
Développement full-stack
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -619,7 +635,7 @@
|
|||
Partenaire(s)
|
||||
</dt>
|
||||
<dd>
|
||||
en collaboration avec Praticable
|
||||
Plastac (design)
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -627,7 +643,7 @@
|
|||
Date
|
||||
</dt>
|
||||
<dd>
|
||||
2022
|
||||
2024
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
|
|||
17
src/approche-studio.md
Normal file
17
src/approche-studio.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
## 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 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é.
|
||||
copie de ce repo.
|
||||
|
||||
Notre façon de travailler repose sur des **allers-retours réguliers** avec vous. Nous 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 fonction de vos retours et des contraintes qui pourraient émerger.
|
||||
|
||||
Notre force réside dans la complémentarité de nos profils : designers et développeur·ses à la fois, nous avons l’habitude de traverser les deux champs de compétences et de **faire dialoguer les logiques formelles et techniques**. En 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 philosophie guidera l’ensemble de notre intervention : un site léger, <br>lisible et durable.
|
||||
|
||||
|
||||
|
||||
|
||||
### 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 faisabilité technique du design, la 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 faciliter l’intégration de nos développements, d’assurer la continuité technique et de favoriser des é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 des fallback bien pensés. Bref, une attention constante à la performance et à la sobriété des ressources.
|
||||
|
|
@ -6,15 +6,17 @@ input-files:
|
|||
# - src/livrables.md
|
||||
- src/equipe.md
|
||||
- src/portfolio-introduction.md
|
||||
- src/portfolio-1img/wysiwyg.md
|
||||
- src/portfolio-1img/chromobase.md
|
||||
- src/portfolio-1img/medialab.md
|
||||
- src/portfolio-1img/resin.md
|
||||
- src/portfolio-1img/gms.md
|
||||
- src/portfolio-1img/design-to-pack.md
|
||||
- src/portfolio-1img/gms.md
|
||||
- src/portfolio-1img/tmn-lab.md
|
||||
- src/portfolio-1img/wysiwyg.md
|
||||
- src/portfolio-1img/medialab.md
|
||||
- src/portfolio-1img/cultures-visuelles.md
|
||||
- src/portfolio-1img/actuel-inactuel.md
|
||||
- src/portfolio-1img/heroines.md
|
||||
# - src/portfolio-1img/acau.md
|
||||
- src/portfolio-1img/decarb-one.md
|
||||
- src/details.md
|
||||
- src/portfolio-1img/flaash.md
|
||||
# - src/portfolio-1img/actuel-inactuel.md
|
||||
#- src/portfolio-1img/heroines.md
|
||||
- src/portfolio-1img/acau.md
|
||||
# - src/portfolio-1img/decarb-one.md
|
||||
- src/details.md
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "Studio Variable"
|
||||
baseline: "Design × code"
|
||||
client: "Proposition Direction 6ème!"
|
||||
date: "29 décembre 2025"
|
||||
baseline: "Design × code | studio-variable.com"
|
||||
client: "Portfolio CERAMIQ+"
|
||||
date: "2 février 2026"
|
||||
contact: "contact@studio-variable.com"
|
||||
footer: "Studio Variable – Proposition Direction 6ème!"
|
||||
footer: "Studio Variable – Portfolio CERAMIQ+"
|
||||
---
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Chromobase
|
||||
|
||||
Base de données du projet ERC Chromotope qui explore l'impact culturel de l’apparition de la couleur dans l’industrie dans les années 1850.
|
||||
**Base de données** du projet ERC Chromotope qui explore l'impact culturel de l’apparition de la couleur dans l’industrie dans les années 1850. Comprend des **fonctionnalités avancées de navigation, recherche et tri des contenus**.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Cultures visuelles
|
||||
|
||||
Plateforme pour le programme de recherche, intégrant une interface graphique en front-end pour l’édition du contenu.
|
||||
Plateforme collaborative pour le programme de recherche, intégrant une interface graphique en front-end pour l’édition du contenu.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Decarb.one
|
||||
|
||||
Site vitrine pour l’agence de relations presse et de communication, decarb.one qui raconte un monde décarboné.
|
||||
Site **éco-conçu** pour une agence de relations presse et de communication responsable.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Design to Pack
|
||||
|
||||
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 vues 3D interactives.
|
||||
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 **vues 3D interactives**.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
33
src/portfolio-1img/flaash.md
Normal file
33
src/portfolio-1img/flaash.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Decarb.one
|
||||
|
||||
Site de la revue d'anticipation Flaash.
|
||||
|
||||
|
||||
|
||||
<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>en collaboration avec Studio Plastac</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Date</dt>
|
||||
<dd>2024</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Game Management System
|
||||
|
||||
Back-office sur-mesure dédié à la conception et à la planification de parties de divers jeux en ligne.
|
||||
Plateforme sur-mesure dédié à la conception et à la planification de parties de divers jeux en ligne.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# RésIn
|
||||
|
||||
Plateforme pour un réseau d’ingénieur·es dans la recherche, avec système de recherche par arbre de compétences
|
||||
Plateforme pour un réseau d’ingénieur·es dans la recherche, avec **système de filtres croisés**.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
33
src/portfolio-1img/tmn-lab.md
Normal file
33
src/portfolio-1img/tmn-lab.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# TMN Lab, État des lieux du numérique 2021
|
||||
|
||||
Outil pour présenter les études du TMNlab avec système de collecte des favoris et d’impression à la demande.
|
||||
|
||||
|
||||
|
||||
<div class="details">
|
||||
<dl>
|
||||
<dt>URL</dt>
|
||||
<dd><a href="hhttps://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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue