DESKTOP
1440 <
991 >
767 >
478 <
Back to Home

FARECO DESIGN SYSTEM

Publié le 25 avril 2025
LYNX est une application conçue pour centraliser la gestion des équipements urbains et la collecte des données de trafic, éléments clés dans le déploiement de stratégies de mobilité urbaine et routière. Afin d’assurer une expérience utilisateur cohérente et efficace, elle s’appuie sur la création d’un design system structuré et accessible.
ATOMS
Cohérence visuelle des éléments fondamentaux de l’interface
Grâce au design system, l’usage des composants fondamentaux de l’interface utilisateur (boutons, couleurs, typographies, etc.) a été uniformisé sur l’ensemble du produit. Cette approche a permis de créer une interface à la fois cohérente, intuitive et en harmonie avec l’identité visuelle de la marque.
Guidelines
Couleurs
Typographie
Pictogrames
Boutons
MOLECULES
Gain de temps
Les équipes n'ont plus à repartir de zéro à chaque évolution du produit. Elles disposent d'une bibliothèque de composants validés, ce qui simplifie considérablement les phases de conception et de développement.
ORGANISMES
Meilleure collaboration design-dev
Les organismes ont agi comme des blocs structurants et réutilisables, regroupant plusieurs éléments pour former des sections complètes de l’interface. En s’appuyant sur ces composants, les designers et les développeurs ont pu partager une bibliothèque commune pour leurs créations.
TEMPLATES
Scalabilité
Lorsque l’application a commencé à évoluer avec plus de pages, plus d’équipes, et davantage de versions. Le design system a permis de maintenir une logique uniforme, évitant ainsi les dérives et les incohérences visuelles.
À cette étape, les templates ont joué un rôle clé : ils ont servi de layouts complets dans lesquels les organismes étaient organisés. Ces structures, encore sans contenu spécifique, ont permis de poser les bases solides des futures pages.
PAGES
Maintenance facilitée
La mise en place du design system a permis que toute modification d’un composant se propage automatiquement sur l’ensemble du produit. avec la creation des variables sur Figma, Tokens et une Framework CSS (Tailwind). Cela représente un avantage considérable pour la maintenance, qui devient plus rapide et moins sujette aux erreurs. Par ailleurs, l’intégration de bibliothèques de composants codés (notamment en React) offre un véritable gain de productivité pour les développeurs, grâce à la réutilisation et à la standardisation du code.

FARECO DESIGN SYSTEM

Published April 25, 2025
LYNX est une application conçue pour centraliser la gestion des équipements urbains et la collecte des données de trafic, éléments clés dans le déploiement de stratégies de mobilité urbaine et routière. Afin d’assurer une expérience utilisateur cohérente et efficace, elle s’appuie sur la création d’un design system structuré et accessible.
ATOMS
Cohérence visuelle des éléments fondamentaux de l’interface
Grâce au design system, l’usage des composants fondamentaux de l’interface utilisateur (boutons, couleurs, typographies, etc.) a été uniformisé sur l’ensemble du produit. Cette approche a permis de créer une interface à la fois cohérente, intuitive et en harmonie avec l’identité visuelle de la marque.
Guidelines

Perceptible
‍
Les éléments interactifs doivent indiquer qu'ils peuvent déclencher une action.

Une expérience cohérente
‍
Les états doivent être cohérents pour améliorer l’utilisabilité des composants.

Clarté
‍
L’action et l’état des éléments interactifs doivent être clairs.

Opérable
‍
Les composants et la navigation doivent être facilement utilisables, y compris avec les technologies d’assistance.

Additif
‍
Les indicateurs des états simultanés doivent être visibles.

Compréhensible
‍
Les informations et le fonctionnement de l'interface  doivent être faciles à comprendre.

Couleurs
Typographie
Pictogrames
Boutons

PRIMARY

SHADOW

ICON
LABEL

MINIMAL ICON

MINIMAL
SHADOW
ICON

MINIMAL LABEL

MOLECULES
Gain de temps
Les équipes n'ont plus à repartir de zéro à chaque évolution du produit. Elles disposent d'une bibliothèque de composants validés, ce qui simplifie considérablement les phases de conception et de développement.
ORGANISMES
Meilleure collaboration design-dev
Lorsque l’application a commencé à évoluer avec plus de pages, plus d’équipes, et davantage de versions. Le design system a permis de maintenir une logique uniforme, évitant ainsi les dérives et les incohérences visuelles. À cette étape, les templates ont joué un rôle clé : ils ont servi de layouts complets dans lesquels les organismes étaient organisés. Ces structures, encore sans contenu spécifique, ont permis de poser les bases solides des futures pages.
TEMPLATES
Scalabilité
Lorsque l’application a commencé à évoluer avec plus de pages, plus d’équipes, et davantage de versions. Le design system a permis de maintenir une logique uniforme, évitant ainsi les dérives et les incohérences visuelles.
À cette étape, les templates ont joué un rôle clé : ils ont servi de layouts complets dans lesquels les organismes étaient organisés. Ces structures, encore dépourvues de contenu spécifique, ont permis de poser les bases solides des futures pages.
PAGES
Maintenance facilitée
La mise en place du design system a permis que toute modification d’un composant se propage automatiquement sur l’ensemble du produit. avec la creation des variables sur Figma, Tokens et une Framework CSS (Tailwind). Cela représente un avantage considérable pour la maintenance, qui devient plus rapide et moins sujette aux erreurs. Par ailleurs, l’intégration de bibliothèques de composants codés (notamment en React) offre un véritable gain de productivité pour les développeurs, grâce à la réutilisation et à la standardisation du code.
CARACTÉRISE POUR AVOIR
Une vision créative et polyvalente, inspirée par la passion de la création.
GET IN TOUCHE
Merci, votre message a été envoyé.
Oh oh ! Une erreur s'est produite lors de l'envoi du formulaire.