Design système

Découvrir

Création d’un design système complet et personnalisable, conçu sur Figma et développé sur Bubble, pour standardiser le design des projets web de Scallap.fr. Cette solution inclut une One Page interactive regroupant les principaux composants et normes de design à suivre pour chaque site ou application web.

     Rôle

Product Design

No-code development

     Client

Scallap

      Outils

Stack I use

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatu.

This is some text inside of a div block.
This is some text inside of a div block.
Figma
Bubble
Product Design
No-code development
Création d’un design système complet et personnalisable, conçu sur Figma et développé sur Bubble, pour standardiser le design des projets web de Scallap.fr. Cette solution inclut une One Page interactive regroupant les principaux composants et normes de design à suivre pour chaque site ou application web.

Challenge
‍

  • Définir des normes cohérentes et flexibles pour s'adapter à divers projets clients.
    ‍
  • Structurer un design système complet tout en assurant une interface propre et claire pour les utilisateurs.
    ‍
  • Rendre chaque composant personnalisable pour répondre aux besoins spécifiques des futurs projets.
Design système

‍

Process

‍

  1. Définition des onglets du style guide :
    • Couleurs : 5 palettes (Neutral, Primary, Success, Warning, Danger).
    • Typographie : Styles pour les titres, sous-titres, paragraphes, labels et boutons.
    • Boutons : Tailles (Small, Medium, Large) et styles (Primary, Secondary, Outlined, Disabled, Ghost).
    • Champs de saisie (Input) : Types variés (e-mail, mot de passe, recherche, dropdown, etc.).
    • Spacing & Grid : Normes d’espacement (8px, 16px, 24px) et système de grille (colonnes, marges, gouttières).
    ‍
  2. Conception sur Figma : Création des visuels détaillés pour chaque composant.
    ‍
  3. ‍Développement sur Bubble : Intégration des normes dans une page interactive et éditable.
    ‍
  4. ‍Tests et validation pour garantir la flexibilité et l’adaptabilité du système.


Solution
‍

Le Design Système réalisé pour Scallap.fr est un outil puissant et visuellement attractif qui assure une cohérence graphique et une adaptabilité pour chaque projet web. Avec ses composants personnalisables et ses normes bien définies, ce style guide simplifie la création et garantit des designs professionnels alignés sur l’identité de chaque client.