Hiérarchie
Le système de design Spaceship est construit en couches, chacune apportant clarté, structure et intention. Elles forment une hiérarchie qui guide la façon dont nous concevons, développons et faisons évoluer les produits — de la plus petite décision visuelle au parcours utilisateur le plus large.
En suivant les principes de l’Atomic Design, nous avons structuré nos principales ressources en différentes catégories, ce qui les rend plus faciles à utiliser pour toutes les équipes.
Fondations
Définissent les règles fondamentales de notre langage visuel : couleurs, typographie, espacements, grilles, animations et tokens. Elles nous offrent une base cohérente sur laquelle nous appuyer.
Composants
Donnent vie aux règles fondamentales dans des éléments d’interface réutilisables qui résolvent les problèmes de design du quotidien.
Modèles
Montrent comment les composants et les modèles fonctionnent ensemble dans leur contexte, en fournissant des structures prêtes à l’emploi pour des pages et expériences complètes.
Modèles
Capturent des solutions éprouvées et des bonnes pratiques, garantissant que notre travail reste cohérent, accessible et centré sur l’utilisateur à chaque point de contact.
Fondations
Les atomes essentiels du Spaceship Design System. Ils définissent les règles visuelles et structurelles sur lesquelles chaque composant et modèle est construit.
Couleur
Définit les palettes de marque et fonctionnelles qui assurent harmonie, accessibilité et flexibilité à travers les produits.
Typographie
Établit la hiérarchie et la clarté grâce à une échelle typographique qui rend le contenu facile à lire et à parcourir.
Espacement
Fournit une échelle systématique pour les marges, les espacements internes et le rythme de la mise en page afin de maintenir des interfaces cohérentes.
Grilles
Crée des mises en page réactives qui s’adaptent à tous les appareils tout en maintenant la structure et l’alignement.
Mouvement
Utilise les transitions et les animations pour attirer l’attention, communiquer un état et rendre les interactions naturelles.
Design Tokens
Transforment les valeurs fondamentales en code, servant de source unique de vérité tout en facilitant des mises à jour rapides et simples.
Des fondations claires signifient moins d’obstacles, plus d’inclusivité et plus de temps consacré à résoudre de vrais problèmes plutôt qu’à repartir de zéro.
Composants
Ce sont les éléments réutilisables du Spaceship Design System. Chacun résout un problème d’interface spécifique : des boutons et champs de saisie à la navigation et aux messages de retour. Chaque composant est accessible, réactif et facilement adaptable à différents contextes ou appareils.
Des composants réutilisables garantissent que chaque produit que nous créons est livré plus rapidement et s’intègre à une vision d’ensemble.
Modèles
Les modèles font le lien entre les blocs de construction et l’expérience utilisateur. Ils combinent fondations et composants dans des contextes de page complets, démontrant le fonctionnement du système en pratique.
Modèles de pages produit
Structures de pages de haut niveau pour les pages d’accueil et de produit, où les designers mettent principalement à jour le contenu et ajustent les modules selon chaque contexte.
Composants partageables
Des structures réutilisables plus complexes, telles que des tableaux comparatifs ou des cartes de tarification, sont conçues pour gérer des scénarios spécifiques de façon cohérente à travers les produits.
Avec des structures prêtes à l’emploi, les équipes peuvent se concentrer moins sur les choix de mise en page et davantage sur la réponse aux besoins réels des utilisateurs.
Modèles
Les modèles capturent ce que nous avons appris grâce aux tests, aux retours et à l’utilisation réelle, et les transforment en solutions réutilisables et standardisées. Chaque modèle est basé sur l’intention de l’utilisateur, qu’il s’agisse de simplifier le processus de paiement, de gérer les erreurs ou d’accompagner les utilisateurs dans les formulaires.
En définissant des solutions éprouvées, les modèles donnent du sens à notre travail, garantissant que chaque expérience est non seulement fonctionnelle mais aussi pensée avec soin.