Le brief (fictif, mené comme un vrai)
Laine & Lin est une boutique-atelier imaginaire : des vêtements en laine, lin et coton bio, teints aux plantes, cousus à Roubaix, vendus en précommande. Le site doit porter un positionnement anti-fast-fashion : moins, mais mieux.
- Cibles : consommateurs exigeants sur l'origine, sensibles à l'artisanat et à la durabilité.
- Conversion : l'inscription à la newsletter saisonnière (la marque vend en précommande).
- Contrainte choisie : la marque démarre, pas de shooting photo — le site doit être beau sans images.
La démarche design
La contrainte « zéro photo » devient le concept : montrer la matière plutôt que le mannequin. Les couleurs sont des couleurs de fibre (écru, lin, charbon, indigo de cuve), les fonds sont des trames tissées dessinées en CSS, et les produits sont illustrés au trait en SVG.
- Typographie : Marcellus (capitales romaines, voix posée) + Karla (chaleur humaniste).
- Textures : deux
repeating-linear-gradientcroisés suffisent à tisser une toile — zéro requête réseau. - Illustrations : pull, chemise, pantalon dessinés au trait 2.5px, cohérents avec les pictos.
- Narration : collection → matières → atelier → engagements → newsletter, du produit à la preuve.
Trame tissée en CSS pur + illustrations SVG au trait : l'identité complète pèse quelques Ko.
Les choix techniques
- Poids plume : aucune image bitmap — le site complet (hors fontes) tient sous 30 Ko. Chargement quasi instantané, même en 3G.
- Animations au scroll :
IntersectionObservernatif, apparitions douces, aucune librairie. - Header dynamique : transparent sur le hero, fond flouté au scroll.
- Micro-interactions : tampon rotatif en SVG (
textPath+ animation CSS), cartes produits en élévation. - Accessibilité : décor en
aria-hidden, labels de formulaire, contrastes charbon/écru vérifiés.
Ce que ce projet démontre
- Faire d'une contrainte un style : pas de photos → une identité graphique plus forte et plus légère.
- Le dessin dans le code : textures, illustrations et logo réalisés directement en CSS/SVG, retouchables en quelques lignes.
- La performance comme argument commercial : un site quasi instantané, utile à tout commerçant.