Création LennOutils
- Rôle
- UI/UX, identité visuelle, développement front-end
- Durée
- 3 semaines
- Outils
- Figma ; HTML, CSS, JavaScript
- Contexte
- Outil professionnel
Brief : Concevoir et développer un atelier d'outils image utilisable dans le navigateur, sans compte ni serveur.
Objectif : Regrouper les opérations courantes sur une image dans une seule interface, sans envoi du fichier à un serveur.
Livrables : UI/UX du poste de travail, identité visuelle, développement front-end (HTML/CSS/JS vanilla, 100 % côté client).
7 outils, 1 interface
Compresser, redimensionner ou filigraner une image oblige à passer par plusieurs sites, chacun avec son interface et ses publicités, sans garantie sur le devenir du fichier envoyé. LennOutils réunit ces opérations dans une interface unique ; le fichier reste dans le navigateur.
Un poste de travail
Le zoning repose sur trois éléments : un rail de navigation fixe pour changer d'outil en un clic, une zone centrale à structure constante (dépôt du fichier, aperçu, statistiques avant/après) et une colonne de réglages qui s'adapte au format importé, un SVG et un JPEG n'ayant pas les mêmes besoins.
Identité
Design system : rail de navigation sombre, espace de travail clair et neutre, accent turquoise pour les actions et les valeurs actives. Typographies : Syne pour les titres, IBM Plex Sans pour l'interface, IBM Plex Mono pour les données chiffrées (poids, dimensions, pourcentages).
Un outil par format
Chaque outil suit les contraintes du format traité. Un SVG compressé ne perd pas en qualité : seules les métadonnées et les décimales superflues sont supprimées. Un PNG est compressé par réduction de palette. L'outil Détourer combine une détection automatique par propagation colorimétrique depuis les bords et une retouche au pinceau. Aucun fichier ne quitte le navigateur : tout le traitement est côté client.
Ce que j'en retiens
Ici, l'utilisateur vient accomplir une tâche : il n'y a pas de page à rendre convaincante, et chaque friction coûte du temps. Tous les calculs se font dans le navigateur, ce qui impose de contrôler la performance à chaque décision d'interface.
