Portfolio Curaté
Harmonie Fonction & Nature

Une sélection rigoureuse de projets web où la structure technique se fond dans une esthétique tactile. L'exploration de la fluidité d'interaction, de la lisibilité typographique, et de la réalité des contraintes techniques.

Atelier numérique montrant une tablette sur un établi en bois
Projet 'Maison Collioure' — Interface tactile adaptative

La Technique Invisible

Pour la boutique de céramique Maison Collioure, la navigation ne repose pas sur des menus textuels rigides, mais sur une fluidité gestuelle. L'interface s'adapte aux variations de lumière naturelle du jour, passant d'un fond crème à un blanc optique selon l'heure de consultation. L'objectif n'est pas de ralentir l'utilisateur avec des effets superflus, mais de confirmer son action par un mouvement organique qui ressemble à un souffle.

Structure de Page — Coupe Technique
Flux de données (JS) Léger / 20ms
Zones de silence 40% de la surface
Temps de réponse 0.1s (Immédiat)
Note marge : "Confirmer, ne pas distraire"

Le Rythme de la Lecture

Sur le site Le Jardin Savant, la typographie devient architecture. La taille de police passe de 16px en navigation à 24px sur les articles, créant une hiérarchie spatiale évidente. Nous utilisons une grille modulaire de 8px pour aligner visuellement texte, images et boutons. C'est un silence visuel qui permet au contenu de respirer.

"L'espace blanc n'est pas un vide, c'est le silence qui permet à l'image de parler plus fort."

Le choix d'une police serif inspirée des caractères d'imprimerie du XIXe siècle n'est pas anodin : il assure une excellente lisibilité sur les écrans à faible densité de pixels, typique des publics connectés en mobilité.

Composition plate des captures d'écran du projet Le Jardin Savant

Évolution visuelle : de l'accueil épuré à la densité narrative de l'article, guidée par la grille modulaire.

L'Épreuve du Réel

Contraintes, solutions et transparence technique.

La réalité d'un projet ne s'arrête pas au maquettage. Pour l'Atelier du Port, nous avons dû transformer une limite majeure — des photos de produits de faible résolution — en atout graphique.

Version "Propre"
Version Finale

"Transformation de la limitation en texture graphique."

Avant / Après
.texture-overlay {
  mix-blend-mode: multiply;
  opacity: 0.15;
  background: url('grain.svg');
}

Écueils Évités

  • Le "design trop lisse" qui déconnecte de l'authenticité locale.
  • Le choix d'un carrousel d'images paralysant la lecture.
  • Chargement > 2s sur connexion 3G (testé manuellement).

Note de méthode : L'évaluation de chaque projet repose sur un triptyque : robustesse technique (maintenabilité du code), risque d'adoption (courbe d'apprentissage utilisateur) et limites de performance (budget temps réel). Nous ne validons une solution que si elle tient la route sur une connexion dégradée et une utilisation à une main sur mobile.

"L'objectif n'était pas seulement de livrer un site, mais d'assurer l'autonomie de l'équipe sur le long terme. Après trois heures de formation, le client gère ses propres contenus sans intervention technique."

Scénario — Projet Domaine de la Serra

Un héritage durable

L'architecture du code est documentée pour permettre une évolution future sans reconstruction totale. Le choix d'un hébergement écologique pour les projets locaux aligne la performance technique avec les valeurs de durabilité de nos clients.

nodiva — Collioure

DEPUIS 2026

Besoin d'une architecture web qui respire l'authenticité ?

Échangeons à propos de votre projet
10 Rue de la République, 66190 Collioure, France • +33 4 68 82 85 85