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

801 lines
No EOL
22 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 RésIn</p>
<p>6 octobre 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 RésIn</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="note-intention">
<h2 id="note-intention">Note intention</h2>
<p>Notre intervention se concentre 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 saccompagne dune 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
dintégrer dès le départ nos principes décoconception et
daccessibilité.</p>
<p><strong>Sur le plan graphique</strong>, nous portons une
attention particulière à la lisibilité et à lharmonisation des
contenus. Lhétérogénéité des profils proposés dans lannuaire
(parfois très succincts, parfois très denses) sera prise en compte
pour construire des pages qui restent esthétiques et équilibrées.
Nous privilégions <strong>une esthétique sobre, sur mesure, où la
typographie et les contrastes assurent une hiérarchie
claire</strong>, afin déviter les ruptures visuelles dans
lannuaire. Larbre des compétences, qui constitue un outil central
de navigation et de recherche, fera lobjet dune refonte spécifique
: nous souhaitons en améliorer la lisibilité et lexploration, en le
rendant plus visible et plus interactif, tout en veillant à une
utilisation fluide sur mobile comme sur ordinateur. Notre objectif
est de concevoir une interface qui mette en valeur les compétences
et facilite réellement la recherche dans lannuaire, sans surcharge
graphique inutile.</p>
<p><strong>Sur le plan technique</strong>, nous proposons une
architecture simple : <strong>HTML, SCSS et JavaScript
vanilla</strong>, complétés si nécessaire par une librairie légère
comme Alpine.js pour la recherche réactive. Cette sobriété garantit
la compatibilité avec la licence libre du projet, facilite la
maintenance et limite lempreinte écologique du site. Nous
travaillerons à partir de lexistant, que ce soit le code ou limage
Docker déjà utilisée, et nous engageons à adapter nos développements
à vos contraintes sans surcomplexification. En fonction de vos
préférence, nous travaillerons soit sur une branch du répôt Git
existant soit sur une copie de ce repo.</p>
<p>Notre façon de travailler repose sur des <strong>allers-retours
réguliers</strong> 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 dajuster le projet
en fonction de vos retours et des contraintes qui pourraient
émerger.</p>
<p>Notre force réside dans la complémentarité de nos profils :
designers et développeur·ses à la fois, nous avons lhabitude de
traverser les deux champs de compétences et de <strong>faire
dialoguer les logiques formelles et techniques</strong>. 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 lensemble de notre intervention :
un site léger, <br>lisible et durable, au service du réseau
RésIn.</p>
<h3 id="les-forces-de-notre-proposition">Les forces de notre
proposition</h3>
<ul>
<li><strong>Des maquettes directement codées en HTML et
CSS</strong>, plutôt que figées dans un outil comme Figma. Cette
approche permet dadopter une « mentalité wev » dès le maquettage.
Elle garantie 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
lintégration.</li>
<li><strong>Un travail mené au plus près du code existant</strong>,
afin de faciliter lintégration de nos développements, dassurer la
continuité technique et de favoriser des échanges simples et
efficaces avec vous.</li>
<li><strong>Une démarche décoconception et daccessibilité
assumée</strong>, qui se traduit par un design et un code légers, un
recours limité à JavaScript, un HTMLbien construit répondant aux
normes daccessibilité, lutlisation de variable fonts et des
fallback bien pensé. Bref, une attention constante à la performance
et à la sobriété des ressources.</li>
<li><strong>Une refonte graphique pensée autour de larbre des
compétences</strong>, conçu comme un élément central et progressif
de navigation : il sera placé visuellement à proximité du moteur de
recherche sur desktop, déployé en accordéon sur mobile, et enrichi
de fonctions de multi-filtrage. <br>Selon la pertinence, un fil
dAriane (breadcrumb) pour contextualiser <br>les profils
affichés.</li>
</ul>
</section>
<section id="devis">
<h2 id="devis">Devis</h2>
<p>→ Taux journalier: 800€ HT</p>
<table>
<colgroup>
<col style="width: 75%" />
<col style="width: 11%" />
<col style="width: 12%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Tâche</strong></th>
<th><strong>Jours</strong></th>
<th><strong>€ (HT)</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Création du logo</td>
<td>1</td>
<td>800</td>
</tr>
<tr class="even">
<td>Identité visuelle avec mockup dune page responsive type
(maquettes HTML &amp; CSS)</td>
<td>2</td>
<td>1600</td>
</tr>
<tr class="odd">
<td>UI arbre de compétences (explorable, filtrage)</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="even">
<td>Développement front-end de toutes les pages responsives</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Home page</td>
<td>1</td>
<td>800</td>
</tr>
<tr class="even">
<td><span class="indent"></span>→ Pages listes et de tri</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Pages individuelles</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="even">
<td><span class="indent"></span>→ Pages de contenu: présentation,
ressources, etc.</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Intégration au code existant</td>
<td>30.00%</td>
<td>1080</td>
</tr>
<tr class="even">
<td>Mise en place de la recherche réactive</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td>Révisions UI et petits ajustements</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="even">
<td>Tests cross-device, optimisation HTML/CSS/JS et
accessibilité</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td>Gestion de projet</td>
<td>10.00%</td>
<td>948</td>
</tr>
</tbody>
</table>
<div id="total">
<table>
<thead>
<tr class="header">
<th>Sous total HT</th>
<th>10428</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>TVA 20 %</td>
<td>2085.6</td>
</tr>
<tr class="even">
<td>Total TTC</td>
<td>12513.6</td>
</tr>
</tbody>
</table>
</div>
<p>Note : Si votre structure ne récupère pas la TVA et que cela
constitue une contrainte budgétaire, nous vous invitons à nous en
faire part afin den discuter.</p>
</section>
<section id="planning">
<h2 id="planning-phases">Planning &amp; phases</h2>
<ul>
<li>Démarrage : <strong>dès sélection</strong> (idéalement semaine
du 13 octobre 2025).</li>
<li>Rendu final : <strong>8 décembre 2025</strong>.</li>
<li>Mode : itérations de 1 à 2 semaines (sprints courts).</li>
</ul>
<h3 id="phases">Phases</h3>
<ul>
<li>Semaine 1 (1317 oct.) : Échange pour le démarrage du projet,
accès API</li>
<li>Semaine 23 (2031 oct.) : Proposition didentité sur maquette
HTML/CSS statique (1 page type), avec UI arbre de compétences.
Inclus palette de couleur +proposition logo</li>
<li><strong>4 novembre : validation de lidentité
proposée</strong></li>
<li>Semaine 46 (321 nov.) : Développement front avec sprints
<ul>
<li>Sprint 1 — Copie du dèpôt, pipeline parallèle, audit HTML, mise
en place SASS</li>
<li>Sprint 2 — Intégration arbre de compétence, développement de la
page dacceuil et de la liste filtrables</li>
<li>Sprint 3 — Développement et intégration des pages individuelles
et des pages de contenus</li>
<li>Sprint 4 — Recherche plein texte réactive et affinement de
laffichage filtrage multi-sélection</li>
</ul></li>
<li>Semaine 7 (2428 nov.) : Révisions UI et petits ajustements.
Validation définitive du logo.</li>
<li>Semaine 8 (15 déc.) : Tests &amp; optimisation.</li>
<li><strong>Livraison finale</strong> : au plus tard <strong>8
décembre 2025</strong>.</li>
</ul>
</section>
<section id="livrables">
<h2 id="livrables">Livrables</h2>
<ul>
<li>Copie du dépôt GitHub public (AGPLv3) avec : code,
Dockerfile</li>
<li>Pack logo (.svg / .png multi-résolution).</li>
<li>Maquettes codées (HTML/SCSS) si demandées</li>
</ul>
</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 assurera
la chefferie de projet, 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 apportera son appui
pour garantir une <strong>intégration harmonieuse</strong> dans
larchitecture et lécosystème technique existants.</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="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>