Votre site, vos emails, vos réseaux sociaux et vos supports print ne se ressemblent pas. Chaque refonte repart de zéro. Chaque prestataire interprète votre charte à sa manière. Résultat : une marque diluée, des délais qui s'allongent et des coûts qui s'accumulent.
Chez Apresta, on accompagne des TPE et PME de Lille et des Hauts-de-France sur des projets web et e-commerce depuis 2011. Le constat revient souvent : l'équipe sait pourquoi la cohérence compte, mais personne n'a de méthode pour la construire. Un design system — documenté, partagé, évolutif — répond exactement à ce problème.
Cet article est le guide pratique. Si vous cherchez d'abord les bénéfices business et le retour sur investissement, lisez Design system : pourquoi vous en avez besoin. Ici, on parle processus : audit, fondations, composants, documentation et gouvernance.
Design system : définition opérationnelle pour une PME
Un design system, ce n'est pas un gros PDF de charte graphique. C'est un référentiel vivant qui relie identité visuelle, composants d'interface et règles d'usage. Il regroupe des tokens (couleurs, typographies, espacements, rayons, ombres), une bibliothèque de composants (boutons, champs, cartes, navigation), des patterns (mise en page, formulaires, états d'erreur) et une documentation accessible à toute l'équipe.
Un design system bien construit réduit les arbitrages au quotidien. Le designer ne redessine pas un bouton à chaque écran ; le développeur ne réinvente pas un composant à chaque sprint.
Pour une PME de 5 à 50 personnes, l'objectif n'est pas de reproduire Material Design ou le système d'Airbnb. L'objectif est de standardiser l'essentiel — ce qui revient sur 80 % de vos interfaces.
Étape 1 — Auditer l'existant avant de créer quoi que ce soit
La première erreur : ouvrir Figma et dessiner de nouveaux composants sans regarder ce qui existe déjà. Avant toute création, faites un inventaire des variantes de logo en circulation, des couleurs réellement utilisées (pas seulement celles de la charte officielle), des typographies sur site, emails et documents commerciaux, des boutons et blocs récurrents, et des écarts entre supports mobile et desktop.
En 2 à 3 jours pour une PME typique : capturez 15 à 20 écrans représentatifs (accueil, fiche produit, contact, tunnel), listez les incohérences visibles (trois tailles de titres, quatre bleus, deux styles de CTA), identifiez ce qui fonctionne déjà, notez les composants manquants (états hover, messages d'erreur, skeleton loaders).
Cet audit alimente directement la priorisation. Vous ne construisez pas tout d'un coup — vous corrigez d'abord ce qui coûte le plus cher en temps perdu.
Étape 2 — Poser les fondations : tokens et règles de base
Les tokens sont la colonne vertébrale du design system : variables nommées qui remplacent les valeurs en dur dans le code et le design. Pour démarrer, couvrez les couleurs (primaire, secondaire, neutres, sémantiques succès/erreur/avertissement), la typographie (familles, tailles, graisses, interlignes H1 à corps), les espacements (échelle cohérente type 4, 8, 16, 24, 32, 48 px), les rayons et ombres (2 à 3 niveaux max), et les breakpoints mobile/tablette/desktop.
Nommez sémantiquement (color-primary, pas color-blue-500). Limitez la palette à une couleur principale, un accent et une échelle de gris. Documentez le ratio de contraste minimum (4,5:1 pour le texte courant) et alignez tokens design et tokens code dès le départ.
Pour une boutique e-commerce, les tokens couvrent aussi les états produit (promo, rupture, nouveau) et les badges — garantissant la cohérence entre fiches, listing et panier.
Étape 3 — Construire la bibliothèque de composants
Une fois les fondations posées, passez aux composants réutilisables dans l'ordre de fréquence d'apparition.
Priorité 1 — Composants critiques (semaines 1 à 3) : boutons (primaire, secondaire, ghost, disabled), champs de formulaire (label, input, erreur, aide), typographie, navigation header/footer/menu mobile, cartes produit.
Priorité 2 — Composants de conversion (semaines 4 à 6) : modales, alertes, pagination et filtres, blocs témoignages, bannières promotionnelles.
Priorité 3 — Selon besoin : tableaux de données, steppers tunnel de commande, composants métier spécifiques.
Chaque composant documente anatomie, variantes, états (default, hover, focus, disabled, error), règles d'usage et exemples bon/mauvais usage.
Règle d'or : un composant = une responsabilité. Un bouton « tout-en-un » qui gère CTA, lien externe et téléchargement PDF devient ingérable en six mois.
Étape 4 — Choisir les bons outils (sans surinvestir)
Le choix dépend de votre stack et de la taille de l'équipe — pas besoin de la suite complète d'une agence parisienne pour une PME lilloise.
Côté design, Figma reste le standard (bibliothèques partagées, dev mode) ; Penpot convient si le budget est serré. Documentation : Storybook si React/Vue/Angular, Zeroheight ou Supernova pour équipes mixtes, Notion ou page dédiée pour démarrer léger. Côté code : variables CSS natives, Tailwind config, ou package npm interne si plusieurs projets (site vitrine + boutique + app).
Trois critères de choix pour une PME : l'outil est-il déjà maîtrisé par votre prestataire ? La documentation sera-t-elle réellement maintenue ? Le coût licence est-il justifié par le nombre de projets concernés ? On voit souvent des PME nordistes avec un Figma bien structuré mais zéro lien avec le code. Le design system doit exister des deux côtés — design et développement — sinon c'est une charte PDF de plus.
Étape 5 — Documenter pour que l'équipe l'utilise vraiment
Un design system non documenté est un design system mort. Structure minimale : page d'accueil avec 3 à 5 principes de design, section tokens avec valeurs et cas d'usage, catalogue composants avec captures et code, guidelines de contenu (ton, longueur des titres, microcopy), changelog (ce qui change et pourquoi).
Rédigez orienté action : « Utilisez le bouton primaire pour l'action principale de la page », « N'utilisez pas plus de 2 CTA primaires visibles simultanément », « Le champ email accepte le format standard, message d'erreur : … ». Formez au moins une personne référente en interne — même part-time. Sans gouvernance, le système se dégrade en trois mois : quelqu'un ajoute un composant « temporaire » qui devient permanent.
Étape 6 — Intégrer le design system dans vos projets web
La mise en production est le moment de vérité. Sur un site e-commerce, intégrez composant par composant, pas en big bang.
Approche progressive recommandée : Phase A — nouvelles pages uniquement (landing, catégorie refondue). Phase B — migration pages à fort trafic (accueil, fiches top ventes). Phase C — tunnel de commande et emails transactionnels. Phase D — harmonisation supports périphériques (PDF, présentations).
Points d'attention e-commerce : composants produit adaptés aux catalogues variés (1 image vs 8, prix barré, stock faible), responsive mobile non négociable (60 à 70 % du trafic), tests sur données réelles pas sur lorem ipsum.
Si vous lancez une boutique ou refondez un site, intégrez le design system dès la conception. Le coût de rattrapage après coup est 2 à 3 fois supérieur. Notre expertise sites e-commerce inclut systématiquement cette réflexion dès le brief.
Budget et délais réalistes en 2026
Combien coûte un design system pour une PME en France ? Trois paliers :
- Starter (tokens + 10 composants essentiels) — 3 000 à 6 000 € · 3 à 4 semaines
- Standard (tokens + 25 composants + doc Storybook) — 8 000 à 15 000 € · 6 à 10 semaines
- Complet (multi-plateforme, gouvernance, formation) — 15 000 à 30 000 € · 3 à 5 mois
Ces montants s'entendent hors refonte complète du site. Si le design system accompagne une refonte e-commerce, il se facture souvent en option structurante (+15 à 25 % du budget design) plutôt qu'en silo.
Retour sur investissement observable : réduction de 30 à 50 % du temps de conception sur les nouvelles pages, moins de bugs visuels en recette, onboarding plus rapide des prestataires, cohérence renforcée avec le branding digital. Pour une PME qui publie 2 à 4 pages ou campagnes par mois, le design system se rentabilise généralement entre 8 et 14 mois.
Erreurs fréquentes à éviter
On les voit à chaque audit chez des clients de la MEL. Trop de composants dès le départ — paralysie et maintenance impossible. Design system décoratif — beau Figma, code qui utilise encore des styles inline. Pas de propriétaire — personne ne met à jour, personne ne fait respecter. Accessibilité ignorée — contrastes insuffisants, focus invisible, labels manquants. Copier un grand système — votre PME n'a pas les mêmes besoins qu'une licorne tech. Oublier le mobile — composants desktop-first inutilisables sur smartphone.
Le pire scénario : investir 12 000 € dans un design system que personne n'ouvre. La documentation doit vivre là où travaillent design et dev — pas dans un dossier SharePoint oublié.
FAQ
Par quoi commencer si je n'ai ni designer ni développeur en interne ?
Commencez par un audit externe (1 à 2 jours) et un kit minimal : logo, couleurs, typo, 5 composants. Faites-le réaliser par votre agence web dans le cadre d'une refonte ou d'une évolution. Exigez livrables Figma + variables CSS, pas seulement des maquettes statiques.
Un design system remplace-t-il une charte graphique ?
Non, il la prolonge. La charte définit l'identité ; le design system l'opérationnalise pour le digital. Vous avez besoin des deux, mais le design system est ce qui produit de la cohérence au quotidien sur le web et le mobile.
Combien de composants faut-il pour « avoir un vrai » design system ?
Entre 15 et 30 composants documentés suffisent pour une PME. La profondeur compte plus que la quantité : 10 composants avec 4 variantes chacun valent mieux que 50 composants à moitié finis.
Peut-on créer un design system sur WordPress ou PrestaShop ?
Oui. Le CMS n'empêche pas un design system — c'est une question de thème, de blocks ou de composants custom. WooCommerce, PrestaShop et Shopify acceptent tous une approche par composants, à condition que le développement suive les tokens définis en amont.
Faut-il refondre tout le site en même temps ?
Non. L'approche progressive est préférable : nouvelles pages d'abord, migration des pages stratégiques ensuite. Un design system bien pensé permet cette montée en charge sans tout casser d'un coup.
Et maintenant ?
Un design system n'est pas un projet ponctuel — c'est un actif qui accélère chaque évolution future de votre marque digitale. Commencez petit, documentez l'essentiel, assignez un référent, et étendez au fil des projets.
Si vous hésitez entre refonte, évolution ou création from scratch, on peut cadrer un audit design en une demi-journée.