Fermer

avril 27, 2023

Construire un système de conception avec KendoReact

Construire un système de conception avec KendoReact


Jetez un œil à tous les outils que j’ai utilisés pour créer et maintenir mon système de conception et comment je l’implémente de manière transparente avec la bibliothèque KendoReact.

Si vous avez lu certains de mes blogs précédents ou vu un KendoReact Release Livestream à tout moment au cours de la dernière année, vous connaissez peut-être déjà LKARS, le système de conception que j’utilise pour mon Application de démonstration KendoReactcréé en hommage à l’une des interfaces utilisateur de science-fiction les plus célèbres.

Basé sur les conceptions fantastiques de Michael Okuda pour LCARS, le Star Trek : la nouvelle génération système informatique Enterprise-D, j’ai utilisé LKARS (le K est pour l’interface utilisateur de Kendo, bien sûr) comme un exemple continu de la facilité avec laquelle le style peut être adapté et adaptable Bibliothèque de composants KendoReact est. Qu’il suffise de dire que cela semble nettement différent de la conception par défaut des composants KendoReact.

Une capture d'écran de l'application LKARS Kendo Demo, montrant le style de conception général.

LKARS s’habitue dans tous mes démos et des exemples, mais nous n’avons jamais examiné de près LKARS lui-même – quel oubli ! Dans ce blog, décomposons tous les outils que j’ai utilisés pour créer et maintenir ce système de conception et comment je l’implémente de manière transparente avec la bibliothèque KendoReact.

‘Ordinateur : identifier les styles principaux de LKARS’

La création d’un système de conception complet est un processus compliqué et technique – ce blog n’est pas destiné à vous guider à travers le processus de conception de la création d’un tel système. En fait, parce que LKARS est un hommage, la plupart de ces choix de conception ont déjà été faits par le designer Michael Okuda.

Dans une situation réelle, ce travail serait effectué par un designer, créant une apparence unique pour votre marque et/ou application. Mais dans ma situation, mon travail consistait à travailler à l’envers, en identifiant les principaux aspects de conception qui distinguaient LCARS.

C’était une tâche vraiment intéressante, car combien de fois avez-vous l’occasion de procéder à la rétro-ingénierie d’un système comme celui-ci ? Souvent, en tant que designer, mon travail consiste à construire plutôt qu’à décomposer des systèmes de conception. Travailler en arrière, cependant, était instructif. C’était une expérience répétée, demandant : « Qu’est-ce qui rend ce système de conception différent de tous les autres systèmes de conception ? » Voici ce que j’ai trouvé :

  • Pour LCARS, l’emblématique violet et or palette de couleurs était un énorme facteur de distinction. Pour créer LKARS, j’ai revu des captures d’écran de l’émission et j’ai rassemblé une collection de couleurs.
  • Le polices utilisé dans LCARS, bien sûr, joue dans son style de science-fiction unique, mais j’ai aussi remarqué qu’une bonne partie de ce style industriel vient du fait que le texte est le plus souvent entièrement en majuscules !
  • Le formes des éléments de l’interface utilisateur du système de conception LCARS sont incroyablement arrondis, les coins des boutons étant si ronds qu’ils prennent la forme d’une pilule. La seule fois où nous voyons des angles vifs, c’est lorsqu’il s’agit de sous-sections dans une forme plus grande (arrondie).
  • Pratiquement chaque mise en page dans le système LCARS est délimité par une sorte de conteneur, généralement avec une barre latérale le long du côté gauche. Bien que ce ne soit pas quelque chose que je puisse capturer dans un jeton de conception, de la même manière que les couleurs, la typographie et les rayons de bordure, il fallait en tenir compte lors de la création de modèles pour mes pages.

Il convient de noter qu’aucun de ces éléments ne porte l’ensemble du système de conception. Pour ceux d’entre vous qui pourraient également être de grands nerds de Star Trek, vous avez peut-être remarqué que l’interface utilisateur LCARS est de retour Star Trek : Picard… avec un jeu de couleurs mis à jour ! Michael Okuda a réorganisé le système de conception pour le nouveau spectacle, la palette de couleurs utilisant désormais principalement un superbe schéma de couleurs gris, bleu sarcelle et orange-rouge. Bien que les couleurs aient été considérablement modifiées par rapport au LCARS des années 1980/90, l’interface est toujours clairement identifiable car les autres aspects sont restés identiques ou similaires.

Une capture d'écran du système informatique dans Star Trek: Picard, montrant le même système de conception utilisé sur un écran d'ordinateur avec des couleurs différentes

« Coordonnées d’entrée pour la destination »

Maintenant que j’avais une assez bonne idée des styles qui définissaient l’apparence, il était temps de commencer à les appliquer à la bibliothèque de composants. Il y a quelques façons différentes de le faire avec KendoReact, j’ai choisi d’utiliser une combinaison des kits Figma et du ThemeBuilder.

Kits Figma

Parce que je voulais pouvoir créer rapidement des modèles de conception et des prototypes à l’aide de mes composants de style personnalisé, j’avais besoin du Kits KendoUI Figma. J’ai pris la liste des couleurs de thème que j’avais identifiées et je les ai affectées aux jetons de conception via le panneau de droite. J’ai également pu ajuster mes valeurs de rayon de bordure sur toute la suite de composants à partir d’ici et définir ma typographie par défaut.

L’une des meilleures parties de l’utilisation de ce kit Figma est que vous disposez déjà de toute la documentation sur l’endroit où chaque jeton est utilisé. Par exemple, ici je mets à jour le $primary couleur, et dans la zone de texte sous le nom, j’obtiens un aperçu de chaque endroit qui sera affecté par ce changement. Tout cela est modifiable, bien sûr ; Je pourrais toujours aller chercher l’un de ces éléments et le relier à un jeton de couleur différente si nécessaire. Cependant, cela accélère vraiment les choses d’avoir tout cela déjà documenté.

Étant donné que les jetons de conception sont utilisés dans tous les kits Figma, lorsque je mets à jour les polices et les couleurs dans la barre latérale ici, cela se reflétera sur tous les composants. Cela me permet de prévisualiser les choix de conception rapidement et facilement, afin que je puisse évaluer ce qui fonctionne et ce qui ne fonctionne pas.

Une capture d'écran des kits Figma utilisés, la couleur primaire étant mise à jour

Lorsque j’ai fini de charger les styles, j’avais une suite entièrement personnalisée de composants KendoReact que je pouvais utiliser pour modéliser les futures conceptions de mes applications !

Générateur de thème

Une capture d'écran du ThemeBuilder en cours d'utilisation, avec le système de conception LKARS appliqué à tous les composants du panneau Aperçu en direct.

Mon objectif principal en utilisant le Générateur de thèmes était de lui faire faire tout le travail acharné de création de la feuille de style personnalisée pour moi. Parce que j’avais déjà personnalisé le kit Figma, c’était un jeu d’enfant de copier les styles dans le panneau Styles de thème ThemeBuilder – tous les noms de variables de la bibliothèque KendoReact correspondent un à un avec les jetons de conception du kit Figma !

Il n’y avait que quelques petits ajustements que je devais faire après cela (principalement autour de l’alignement du texte dans des composants spécifiques depuis que j’ai changé le système de typographie de manière si radicale), donc je les ai nettoyés à l’aide du panneau d’édition avancée. Comme je pouvais voir les composants se mettre à jour en temps réel pendant que je travaillais, grâce au panneau Aperçu en direct, il était facile de faire ces petits ajustements et ajustements pour que tout soit parfait.

Une fois que cela a été aligné avec mes choix de conception dans le kit Figma, j’ai simplement cliqué sur le bouton Exporter dans le coin supérieur droit et… c’est fait. Les feuilles de style sont exportées, sans avoir besoin d’écrire une seule ligne de CSS !

‘Journal du capitaine : Date stellaire 100782.93’

Les kits Figma aident à fournir de la documentation du côté de la conception, mais qu’en est-il du côté du développement ? Étant donné que j’utilise un système de conception personnalisé, j’aimerais vraiment documenter la manière dont je souhaite que chaque composant soit utilisé dans le contexte de mon application, ainsi que mes systèmes de couleurs et de typographie. Ce serait aussi vraiment bien de pouvoir avoir un endroit où mes composants seraient isolés afin que je puisse exécuter des tests d’accessibilité et des tests unitaires sur eux.

Et si on partageait tout ça en dehors des équipes de conception et de développement ? Ce dont j’avais vraiment besoin, c’était d’une source unique de vérité à laquelle tout le monde pouvait facilement accéder pour voir tous les éléments de mon système de conception ensemble.

Entrer: Livre d’histoires. Storybook est un outil permettant de créer et de documenter des composants d’interface utilisateur. Il fait désormais partie intégrante de la création et de la maintenance des bibliothèques de composants et des systèmes de conception. Parce que Storybook offre une interface pour les non-développeurs, permettant à quiconque d’explorer, de jouer avec et de manipuler les composants (ainsi que de lire la documentation), il est parfait pour la collaboration.

Une capture d'écran de l'instance du livre d'histoires LKARS, montrant un bouton dans le style du système de conception LKARS.

j’ai chargé tout le Composants KendoReact dans une instance Storybook. Ensuite, j’ai pris le CSS exporté du ThemeBuilder et je l’ai littéralement glissé et déposé dans mon dossier d’actifs Storybook pour appliquer mon thème LKARS à l’ensemble de la suite de composants. Enfin, j’ai installé des addons d’accessibilité et de test pour Storybook, afin de m’assurer qu’aucun de mes ajustements de personnalisation n’affecte la fonctionnalité des composants principaux.

‘Engager!’

Voilà! Le système que j’ai utilisé pour créer, documenter, maintenir et implémenter LKARS. Intéressé à recréer cette configuration? Voici une liste de tous les outils que j’ai utilisés pour le faire se réunir:

Le meilleur outil 2023 pour ta croissance Instagram !



Source link