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 dans les catégories suivantes, afin de les rendre plus faciles à utiliser pour toutes les équipes.
Fondations
Définissent les règles fondamentales de notre langage visuel — couleurs, typographie, espacement, grilles, mouvement et tokens. Elles nous offrent une base cohérente sur laquelle travailler.
Composants
Donnent vie aux règles fondamentales dans des éléments d’interface réutilisables qui résolvent les problèmes de conception du quotidien.
Modèles
Montrent comment les composants et les modèles de conception fonctionnent ensemble dans leur contexte, en fournissant des structures prêtes à l’emploi pour des pages et des expériences complètes.
Modèles de conception
Capturent des solutions éprouvées et les meilleures 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 reposent chaque composant et chaque modèle de conception.
Couleur
Définit des palettes de marque et fonctionnelles qui garantissent l’harmonie, l’accessibilité et la flexibilité entre les produits.
Typographie
Établit une hiérarchie et une clarté grâce à une échelle typographique qui rend le contenu facile à lire et à parcourir.
Espacement
Fournit une échelle systématique pour les marges, le padding et le rythme de mise en page afin de maintenir des interfaces cohérentes.
Grilles
Crée des mises en page responsives qui s’adaptent aux appareils tout en conservant structure et alignement.
Mouvement
Utilise les transitions et l’animation pour guider l’attention, communiquer un statut et rendre les interactions naturelles.
Design Tokens
Traduisent 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, responsive et facilement adaptable à différents contextes ou appareils.
Les composants réutilisables garantissent que chaque produit que nous créons est livré plus rapidement et s’inscrit dans une vision d’ensemble cohérente.
Modèles
Les modèles sont le pont entre les blocs de construction et l’expérience utilisateur. Ils combinent les fondations et les composants dans des contextes de page complets, montrant comment le système fonctionne en pratique.
Modèles de pages produit
Structures de page de haut niveau pour les landing pages et les pages produit, où les designers mettent principalement à jour le contenu et ajustent les modules pour les adapter à chaque contexte.
Composants partageables
Des structures réutilisables plus complexes, telles que les tableaux comparatifs ou les cartes tarifaires, sont conçues pour gérer des scénarios spécifiques de manière cohérente entre les produits.
Avec des structures prêtes à l’emploi comme point de départ, les équipes peuvent moins se concentrer sur les décisions de mise en page et davantage sur les besoins réels des utilisateurs.
Modèles
Les modèles de conception capturent ce que nous avons appris grâce aux tests, aux retours et à l’usage réel, pour le transformer en solutions réutilisables et standardisées. Chaque modèle repose sur l’intention de l’utilisateur, qu’il s’agisse de simplifier le processus de paiement, de gérer les erreurs ou de guider les utilisateurs à travers des formulaires.
En définissant des solutions éprouvées, les modèles rendent notre travail plus intentionnel, en garantissant que chaque expérience n’est pas seulement fonctionnelle, mais aussi conçue avec soin.