Système de design Gravity UI: comment créer facilement votre propre interface

Bonjour à tous, je m’appelle Alexey Sizikov et je dirige l’équipe User Experience chez Yandex Cloud. Dans cet article, je souhaite partager une actualité: nous avons publié en open source notre design system et notre bibliothèque de composants Gravity UI.

La bibliothèque de composants Gravity UI permet de créer des interfaces modernes. Elle comprend:

• un ensemble de composants React de base;
• une bibliothèque « constructeur » pour les pages de destination (landing pages);
• des guides détaillés sur l’utilisation des composants;
• une bibliothèque dans Figma;
• un ensemble d’icônes prêtes à l’emploi comprenant près de 600 variantes;
• ChartKit — un package de visualisation de données;
• Yagr — un moteur de rendu de graphiques haute performance basé sur uPlot;
• I18n — un package de localisation de l’interface
• et plus de 25 bibliothèques utiles.

Sous le cut: pourquoi nous avons créé Gravity UI, comment nous l’utilisons, quelles sont les spécificités et les avantages de notre approche, et comment nous prévoyons de le faire évoluer. Et aussi: comment configurer différents schémas de couleurs dans vos projets et pourquoi nous avons quatre thèmes au lieu des deux thèmes standards.

Quelles sont les spécificités de Gravity UI

Basé sur une expérience réelle

L’une des caractéristiques distinctives de notre design system est qu’il évolue en fonction des besoins de nos utilisateurs, dont la plupart sont des développeurs. De plus, nos designers sont étroitement liés aux produits sur lesquels ils travaillent. Chaque designer accompagne plusieurs services avec leurs propres scénarios d’utilisation. Une fois qu’une solution a été testée dans leurs services, le designer produit la transmet à d’autres services pour s’assurer qu’elle fonctionne et qu’elle aide les développeurs.

Par exemple, le composant de navigation latérale s’est d’abord développé uniquement avec un logo et des éléments de menu. Plus tard, par souci de commodité, nous avons ajouté un élément regroupant tous les services et la recherche. Et lorsqu’un service est apparu où il fallait créer une nouvelle entité directement dans le menu latéral, nous avons ajouté un bouton séparé avec un « + “. Ensuite, des sections de menu avec séparateurs sont apparues pour les services complexes avec un grand nombre d’éléments, ainsi qu’un bouton « Autres éléments ‘.

Variabilité flexible

De nombreux composants de Gravity UI peuvent être configurés pour différents scénarios. Par exemple, le composant pagination propose plusieurs modes d’affichage: avec le nombre total de pages, des libellés de boutons complets, la possibilité d’aller à une page précise et de modifier le nombre de résultats par page — cette variante est conçue pour un grand nombre de pages. Et si votre cas d’usage comporte peu de résultats, vous pouvez utiliser un mode compact, voire masquer les chiffres et n’afficher que les flèches.

Large champ d’application

Avec Gravity UI, on peut créer aussi bien une interface d’administration simple qu’un tableau de bord complexe avec des graphiques. Voici quelques exemples de ce qu’il est possible de construire avec notre design system:

• des landing pages,
• des interfaces d’administration,
• des tableaux de bord,
• des graphiques,
• un CRM,
• un service d’analytique.

Par exemple, nos collègues ont réalisé ce tableau de bord:

On peut aussi créer une landing page simple. Par exemple, le site présentant nos projets open source est construit avec des composants Gravity UI.

Plus de 150 contributeurs

Notre écosystème évolue et s’améliore en permanence. En plus des retours de notre communauté de développeurs, nous recevons des propositions de plus de 100 services qui utilisent déjà notre design system.

Un exemple. Au départ, nous avions deux thèmes — sombre et clair. Mais nous avons commencé à recevoir des retours d’équipes qui diffusent l’interface sur des téléviseurs pour consulter des graphiques ou pendant un stand-up. Le problème est que l’interface est difficile à distinguer sur un téléviseur. Un problème similaire se rencontre également chez les utilisateurs ayant des moniteurs anciens ou de faible qualité.

Au final, nous avons développé un contraste renforcé pour chacun des thèmes. Il augmente la luminosité des couleurs sombres et claires, ainsi que des couleurs sémantiques. Cela se règle via des styles CSS et se contrôle dans les paramètres utilisateur.

D’ailleurs, vous aussi pouvez désormais contribuer. Pour cela, envoyez des PR sur GitHub ou laissez des commentaires dans Figma.

Comment travailler avec Gravity UI

Adapter l’interface à votre marque

Je vais maintenant expliquer ce qu’il est encore possible de faire avec Gravity UI. Je commence par la possibilité d’adapter le design system à votre marque. Par exemple, lorsque YDB est passé en open source, nous devions conserver un design system unifié tout en le rendant distinct pour différentes marques. Pour cela, nous avons créé un groupe séparé de variables CSS. Il comprend les couleurs de marque, les polices et les rayons d’arrondi. Dans le code, cela ressemble à un petit bloc:

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

Dans ce groupe, on peut remplacer la police, la couleur des boutons d’accent, les arrondis, etc. Ainsi, on peut utiliser un seul design system pour différentes marques tout en conservant l’identité visuelle. Si cette option ne vous convient pas, vous pouvez créer votre propre schéma de couleurs. Une instruction détaillée est disponible dans la documentation.

Il convient de noter que la modification des couleurs de marque n’affectera pas l’interface principale. C’est particulièrement important pour les éléments où des couleurs sémantiques sont utilisées: par exemple, le rouge continuera de signifier une erreur et le vert, un succès.

Composants dans Figma

Pour faciliter le travail, notre équipe de designers a préparé et chargé dans Figma tous les états des composants. Si vous le souhaitez, vous pouvez faire une copie de la bibliothèque et essayer de composer l’interface directement dans l’outil.

Avec la dernière mise à jour, la bibliothèque ne duplique plus les quatre thèmes. Par défaut, vous travaillez en thème clair, mais dans la section Layer, vous pouvez basculer n’importe quel élément ou la page entière vers un autre thème.

Tous les éléments de la bibliothèque sont présentés sur la page Overview. Vous pouvez y trouver le composant нужный et accéder à la page contenant tous les états de l’élément. De plus, chaque composant propose un exemple d’utilisation.

Près de 600 icônes

Les icônes sont l’un des éléments indispensables du design et de l’ergonomie. Elles aident à organiser et structurer le contenu, à mettre en avant des éléments importants et à améliorer la perception de l’information. À première vue, créer un pack d’icônes n’est pas si compliqué. Mais nous avons rencontré un défi lors de la création d’icônes pour des métaphores complexes, comme les machines virtuelles, les bases de données et différents types de graphiques.

Pour rendre la recherche d’icônes plus pratique, nous avons utilisé un système de nommage spécial. Désormais, on peut trouver une même icône en saisissant différents noms. Par exemple, pour trouver une icône avec une flèche, on peut entrer l’un de ces mots: arrow, enter, move, login.

Guides

Comme je l’ai écrit plus haut, notre objectif était que les développeurs puissent facilement créer des interfaces standards en s’appuyant sur les descriptions des composants dans nos guides. Nous voulions rendre ce processus simple, sans avoir besoin de solliciter un designer pour chaque élément. À ce jour, nous avons déjà cinq exemples de services internes qui ont été entièrement créés par des développeurs en s’appuyant uniquement sur les guides.

Bien sûr, cette tâche ne peut pas être réalisée uniquement par les développeurs: il existe inévitablement des scénarios complexes qui nécessitent l’attention d’un spécialiste UX/UI. Néanmoins, nous avons réussi à retirer une part importante de charge à nos designers.

Dans les guides, l’équipe design a décrit les composants et donné des recommandations d’utilisation, en montrant des exemples de bonnes et de mauvaises pratiques. Vous pouvez les consulter sur cette page.

Comment utiliser Gravity UI

Tout ce qu’il vous reste à faire, c’est de saisir la commande dans la console:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

Une instruction plus détaillée se trouve sur la page d’accueil du dépôt sur GitHub.

Vous pouvez consulter tous les composants de Gravity UI dans UIkit, et connecter la bibliothèque dont vous avez besoin via Libraries.

Pour conclure, je souhaite souligner une fois de plus: Gravity UI est un design system né de l’expérience réelle de nos utilisateurs, des besoins des développeurs et de l’expertise des designers. Cela lui permet d’être pratique et efficace. Et désormais, toute personne intéressée peut l’utiliser gratuitement.

Nous cherchons à améliorer encore le projet en tenant compte des besoins et des retours de nos utilisateurs. Venez sur GitHub, proposez vos PR, écrivez des commentaires dans Figma et partagez des exemples d’utilisation.