Aller au contenu
DroguerieProjet personnel · 2026

Une table de travail pour mes inspirations

J'ai conçu un canvas où mes inspirations se rangent autour d'une colonne, reliées par des fils, pour les ressortir quand je commence un projet.

Livrable
app web installée sur mon PC, un canvas, un comptoir de tri, une loupe, planches d'inspiration pour mes projets
Rôle
design produit, direction artistique, direction du développement
Ma part
Je n'ai pas écrit le code : j'ai écrit le brief, pris chaque décision et testé chaque version. Claude Code a développé.
Cadre
projet personnel, suggestions par une petite IA d'images qui tourne sur le PC, sans service payant, images : leurs auteurs
Équipe
solo, développé avec Claude Code
Aperçu du projet Droguerie

Contexte

Je voulais une table de travail géante, pas une grille de plus.

Des inspirations partout, reliées nulle part

Le point de départ

Mes inspirations dormaient dans les enregistrements d'Instagram, mes tableaux Pinterest, mes chaînes Are.na et des captures d'écran. J'ai écrit un brief : le mélange de Pinterest pour la capture rapide et d'Are.na pour les liens entre les idées, mais pensé comme une table de travail géante. Les premières images de direction venaient de ma propre collection : un casque d'électrodes et ses câbles, une colonne vertébrale cloutée de chrome, une cagoule tricotée.

  • Rien n'entre sur la table sans être trié : tout passe d'abord par un comptoir
  • Des mots à moi, partout : un échantillon, un rayon, un fil, un arrivage, le comptoir
  • Aucun coût : pas de service payant, l'IA qui suggère tourne sur l'ordinateur
  • Fluide avec 2 000 images
  • Lisible et utilisable par tous : texte assez grand, jamais un état dit par la couleur seule, tout au clavier

Ce qu'il fallait concilier

  • Ranger viteTrier ce qui arrive en quelques gestes, sans réfléchir à l'endroit où le poser.
  • RelierVoir d'un coup d'œil qu'une image appartient à plusieurs idées.
  • RessortirRetrouver ce qui sert à un projet, et le montrer.

Comment faire d'une collection d'images une matière qui nourrit mes projets ?

Exploration

Le canvas est devenu lisible le jour où j'ai retiré tout ce qui le décorait.

Un système nerveux, puis moins

Chaque direction m'a été présentée sur une page de choix, avec de vraies captures et des maquettes qu'on manipule, avant d'être codée.

  • Des câbles qui retombent comme ceux d'un casque d'électrodesBeaux un par un, illisibles par centaines : remplacés par des faisceaux qui partent d'un point commun de chaque vertèbreÉcartée
  • Une masse en éventail autour de la colonneChaque idée lance un croissant d'images, de part et d'autre de la colonne : la silhouette se lit de loinRetenue
  • Un tableau de bord d'instrumentRègle graduée, coordonnées, mini-carte, réticule, compteur : douze détails retirés d'un coup, il ne reste que les images, la colonne et un boutonÉcartée
  • Une colonne qu'on tord à la mainSes points de contrôle encombraient le geste le plus fréquent, déplacer la vue : la colonne est maintenant fixeÉcartée
  • La même droguerie sur ordinateur et sur iPhone, en ligneComptes, partage depuis l'iPhone, notifications : construits, puis mis en pause. Je m'en sers sur mon PC, elle y vit maintenant, sans compte ni codeÉcartée
  • Une photo ouverte en plein écran, hors du canvasRemplacée par une loupe : la vue plonge sur l'image sans quitter le canvas, sa légende à côtéRetenue

Trois endroits, trois gestes

  • Le comptoirTout arrive ici : on garde ou on jette, on relie à ses idées.
  • Le canvasLa colonne, les vertèbres et la masse d'images qui s'y tasse.
  • La loupeUne image en grand, ses voisines, ce qui lui ressemble.

Conception

Une critique par page : chaque défaut montré sur une vraie capture, puis je cochais ce qu'il fallait changer.

Du tri à la planche

Du brief à l'outil

TrierRien n'entre sans passer par le comptoir

  1. La table nueLa table nueL'image en grand, ses idées dessous, ✕ et ✓ de chaque côté. Garder, c'est glisser à droite ; jeter, à gauche ; tout le reste est rangé dans un seul bouton.
  2. Au pouceAu pouceSur iPhone, ✕, le menu et ✓ en bas de l'écran ; les idées défilent sous l'image.

RelierUn système nerveux pour mes idées

  1. La colonne et la masseLa colonne et la masseChaque idée est une vertèbre posée sur la colonne ; ses images se tassent autour d'elle, reliées par des fils.
  2. Le signalLe signalJe choisis une vertèbre : ses fils se dessinent jusqu'à ses images, le reste s'efface.
  3. La planche-contactLa planche-contactLa même collection rangée en rangées, une par idée, pour tout relire.

RegarderLa loupe et sa légende

  1. La loupeLa loupeLa vue plonge sur l'image ; à côté, ses idées, les images qui lui ressemblent selon la petite IA, une note. ← et → passent à la voisine.
  2. Sur iPhoneSur iPhoneL'image en haut, sa légende en dessous, à portée de pouce.

RessortirNourrir un projet

  1. La plancheLa plancheLes images d'une idée mises en page en un mur, enregistrées en image ou copiées pour les coller dans une présentation ; chaque image retient le projet qu'elle a nourri.

ÉpurerUn bouton, et le mouvement

  1. Le menu en arcLe menu en arcUn seul bouton ; il déploie ses pictogrammes en arc, comme le cercle de points de mon système de design. Le nom de chacun s'écrit au survol ou au clavier.
  2. Clair et sombreClair et sombreLes images sont les seules couleurs ; l'interface reste en noir, blanc et un seul violet, pour ce qui est choisi.

Le projet en chiffres

  • 17Jours, du brief à l'outilDu 9 au 26 octobre 2026
  • 20Choix de mouvementRetenus parmi 83 propositions animées : ouvrir une photo, changer de page, trier, choisir une idée…
  • 12Détails retirés du canvasEn une seule critique : mini-carte, règle, coordonnées, réticule, compteur…
  • 0Service payantLa petite IA qui suggère les idées tourne sur l'ordinateur

Tests

Chaque gêne ressentie en rangeant devenait une page de choix, souvent le jour même.

Le premier utilisateur, c'est moi

La Droguerie range mes inspirations tous les jours. Elle n'a pas encore été testée par d'autres personnes.

Vérifié en usage réel

  • Chaque changement regardé à l'écran avant d'être gardé, sur ma vraie collection
  • Une base de démonstration de 2 000 images pour la fluidité
  • La taille de l'iPhone et celle de l'ordinateur, le thème clair et le sombre
  • Tout le parcours au clavier, et avec « réduire les animations »

Corrigé grâce à l'usage

  • Un code à chaque ouverturePour un outil personnel, c'était insupportable : la Droguerie s'ouvre maintenant directement, sur mon PC.
  • Trop de texte sur le canvasLes noms des idées sont partis : on reconnaît une idée à sa place et à ses fils, et son nom reste dans sa fiche.
  • Des étiquettes à lire partout« Rayons », « Ressemble à », la date, la couleur : la fiche d'une image ne garde plus que l'image et ce qu'on y fait.
  • Des pastilles écrasées sur iPhoneDans leur rangée qui défile, elles ne montraient plus que leur numéro : chacune garde maintenant sa largeur.

Bilan

Un outil personnel se mérite à ce qu'on y fait, pas à ce qu'il montre.

D'une collection à une matière

Faire autrement

J'ai construit tout un écosystème en ligne avant de savoir où je m'en servirais.

Comptes, partage depuis l'iPhone, imports, notifications : tout marchait, mais je range mes inspirations sur mon ordinateur. J'aurais dû partir de l'usage, puis ajouter le reste quand il manque.

  • Une semaine d'usage sans nouvelle fonction, pour ne garder que ce qui sert
  • Un test avec trois designers qui collectionnent des images
  • Ramener l'entrée la plus rapide depuis le navigateur : un bouton « Mettre en droguerie »

Contact

[email protected]

LinkedIn (nouvel onglet)CV

Tous les projets