Étude de cas — Laine & Lin, une marque sans photos

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-gradient croisé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 : IntersectionObserver natif, 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.

Les livrables

One-page Collection, matières, atelier, engagements, newsletter. Voir le site → UI Kit Palette, textures, typographies, composants, règles d'usage. Voir l'UI kit →

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.