Note intention

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 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é.

Sur le plan graphique, nous portons une attention particulière à la lisibilité et à l’harmonisation des contenus. L’hétérogénéité des profils proposés dans l’annuaire (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 une esthétique sobre, sur mesure, où la typographie et les contrastes assurent une hiérarchie claire, afin d’éviter les ruptures visuelles dans l’annuaire. L’arbre des compétences, qui constitue un outil central de navigation et de recherche, fera l’objet d’une refonte spécifique : nous souhaitons en améliorer la lisibilité et l’exploration, 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 l’annuaire, sans surcharge graphique inutile.

Sur le plan technique, nous proposons une architecture simple : HTML, SCSS et JavaScript vanilla, 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 l’empreinte écologique du site. Nous travaillerons à partir de l’existant, que ce soit le code ou l’image 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.

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,
lisible et durable, au service du réseau RésIn.

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é 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 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’utlisation de variable fonts et des fallback bien pensé. Bref, une attention constante à la performance et à la sobriété des ressources.
Une refonte graphique pensée autour de l’arbre des compétences, 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.
Selon la pertinence, un fil d’Ariane (breadcrumb) pour contextualiser
les profils affichés.

Devis

→ Taux journalier: 800€ HT

Tâche	Jours	€ (HT)
Création du logo	1	800
Identité visuelle avec mockup d’une page responsive type (maquettes HTML & CSS)	2	1600
UI arbre de compétences (explorable, filtrage)	1.5	1200
Développement front-end de toutes les pages responsives
→ Home page	1	800
→ Pages listes et de tri	1.5	1200
→ Pages individuelles	1.5	1200
→ Pages de contenu: présentation, ressources, etc.	0.5	400
→ Intégration au code existant	30.00%	1080
Mise en place de la recherche réactive	0.5	400
Révisions UI et petits ajustements	0.5	400
Tests cross-device, optimisation HTML/CSS/JS et accessibilité	0.5	400
Gestion de projet	10.00%	948

Sous total HT	10428
TVA 20 %	2085.6
Total TTC	12513.6

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 d’en discuter.

Planning & phases

Démarrage : dès sélection (idéalement semaine du 13 octobre 2025).
Rendu final : 8 décembre 2025.
Mode : itérations de 1 à 2 semaines (sprints courts).

Phases

Semaine 1 (13–17 oct.) : Échange pour le démarrage du projet, accès API
Semaine 2–3 (20–31 oct.) : Proposition d’identité sur maquette HTML/CSS statique (1 page type), avec UI arbre de compétences. Inclus palette de couleur + proposition logo
4 novembre : validation de l’identité proposée
Semaine 4–6 (3–21 nov.) : Développement front avec sprints
- Sprint 1 — Copie du dèpôt, pipeline parallèle, audit HTML, mise en place SASS
- Sprint 2 — Intégration arbre de compétence, développement de la page d’acceuil et de la liste filtrables
- Sprint 3 — Développement et intégration des pages individuelles et des pages de contenus
- Sprint 4 — Recherche plein texte réactive et affinement de l’affichage filtrage multi-sélection
Semaine 7 (24–28 nov.) : Révisions UI et petits ajustements. Validation définitive du logo.
Semaine 8 (1–5 déc.) : Tests & optimisation.
Livraison finale : au plus tard 8 décembre 2025.

Équipe

Julie Blanc, chef de projet

Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera la chefferie de projet, le design et le développement front-end.

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 l’utilisation des techonologies du web par les designers graphique.

Adrien Payet

Développeur full-stack, spécialisé en design et développement de back-office et d’interactions front-end, Adrien apportera son appui pour garantir une intégration harmonieuse dans l’architecture et l’écosystème technique existants.

Adrien étudie, enseigne et pratique la philosophie, le design et le code. Il a co-fondé le studio Variable. Il enseigne à l’ENSCi et à Paris 1.