Comment créer un système de conception avec ThemeBuilder

Un bon système de conception aidera votre équipe à créer plus efficacement des applications cohérentes. Commencez le vôtre dès aujourd’hui avec Progress ThemeBuilder.

Créer des interfaces utilisateur modernes et visuellement cohérentes, qui se présentent et se comportent de manière cohérente sur diverses plates-formes et appareils, est une tâche difficile. Ce problème peut être résolu en introduisant un système de conception qui peut être utilisé comme modèle pour le fonctionnement des interfaces.

Dans cet article, nous explorerons l’importance d’un bon système de conception et de ses composants essentiels. De plus, nous expliquerons comment créer un système de conception avec le puissant Progress Générateur de thèmes.

Qu’est-ce qu’un système de conception et pourquoi en avons-nous besoin ?

Un système de conception est un ensemble détaillé de lignes directrices, de principes, de modèles et d’actifs. Les développeurs, concepteurs, chefs de produit et autres parties prenantes peuvent l’utiliser pour créer des interfaces visuellement cohérentes et fournir un comportement cohérent pour tous les produits et services sur diverses plates-formes et appareils.

Cela peut avoir un impact significatif sur la façon dont les utilisateurs perçoivent les produits et la marque. De plus, elle peut jouer un rôle essentiel pour se différencier des concurrents et établir une identité reconnaissable pour la marque et ses offres. Un bon système de conception peut aider les utilisateurs à reconnaître la marque derrière les produits et à renforcer les souvenirs et les expériences positives.

Outre la cohérence et l’UI et l’UX reconnaissables, un système de conception améliore l’efficacité car il est plus facile d’éviter de réinventer la roue. Les composants existants peuvent être utilisés dans de nouveaux projets, il n’est donc pas nécessaire de passer du temps à déterminer à quoi devraient ressembler et fonctionner les choses dans un projet.

De plus, disposer d’un système de conception centralisé facilite la maintenance et réduit le risque d’interfaces utilisateur incohérentes. En outre, il peut faciliter le processus d’intégration des nouveaux membres de l’équipe, car il peut être considéré comme une documentation sur les normes de conception et de développement de l’entreprise.

Quels sont les composants d’un système de conception ?

Un système de conception peut être composé de plusieurs composants en fonction de son degré d’exhaustivité et de complexité. Cependant, voici quelques composants essentiels que les systèmes de conception peuvent comprendre :

Guide de style

Le guide de style couvre les éléments de marque, tels que la typographie, les palettes de couleurs, l’espacement, la disposition des grilles, etc.

Bibliothèque de composants

Une bibliothèque de composants comprend les éléments constitutifs d’un système de conception. Il doit contenir des composants réutilisables, tels que des boutons, des champs de formulaire, des mises en page ou des boîtes de dialogue. Ces composants doivent être construits sur la base du guide de style et des principes de conception du système de conception.

Modèles d’interface utilisateur

Les modèles d’interface utilisateur spécifient les solutions aux défis de conception courants. Par exemple, quelle approche faut-il utiliser pour créer et gérer un menu de navigation sur les appareils mobiles ? Une application doit-elle utiliser une barre de navigation supérieure ou inférieure ou les liens de navigation doivent-ils plutôt être cachés dans un tiroir ? S’il s’agit d’un tiroir, comment doit-il être ouvert ? Une solution très courante à ce problème consiste à utiliser le « menu hamburger », qui comprend un bouton avec plusieurs lignes qui ressemblent à un hamburger empilé. Les modèles d’interface utilisateur garantissent que les interfaces utilisent une approche cohérente pour les mêmes problèmes.

Principes de conception

Les principes de conception fournissent les idées de base qui sous-tendent les choix de conception. Les principes garantissent que le système de conception a un style de conception cohérent partout. Ceux-ci peuvent inclure l’accent sur la lumière, la profondeur ou la taille.

Documentation

La documentation est le manuel d’instructions sur la façon de comprendre et d’utiliser le système de conception. La documentation doit expliquer comment les différentes parties du système de conception doivent être utilisées individuellement ou combinées pour créer des expériences plus riches. Ceux-ci pourraient comprendre des détails d’implémentation et des exemples de code.

Les outils de conception sont un ensemble d’outils utilisés pour créer et maintenir le système de conception. Par exemple, une entreprise peut utiliser une application telle que Figma, Adobe XD ou Sketch pour créer des conceptions et StoryBook ou Zeplin pour maintenir le système de conception de manière interactive.

En un mot, un système de conception couvre l’apparence visuelle et le comportement fonctionnel. Il accélère l’itération du produit, accélère le processus de conception et de développement et garantit que tout fonctionne de la même manière sur différentes plates-formes et appareils. Dans les sections suivantes, nous verrons comment tirer parti de Interface utilisateur du Kendo pour construire un système de conception.

Qu’est-ce que l’interface utilisateur de Kendo ?

Interface utilisateur du Kendo est un ensemble complet de composants d’interface utilisateur construits par le Progrès équipe pour quatre bibliothèques majeures d’interface utilisateur JavaScript :Réagir, Angulaire, Vue et jQuery.

Chaque version fournit de nombreux composants riches en fonctionnalités avec une API, des styles visuels et un comportement cohérents. Les composants proposés par Kendo UI peuvent couvrir les besoins de nombreuses applications et couvrent diverses fonctionnalités, telles que des boutons, des icônes, des grilles, des mises en page, des graphiques, des champs de formulaire, des listes déroulantes et bien plus encore.

Le fait que Kendo UI prenne en charge plusieurs bibliothèques d’interface utilisateur signifie que même les équipes qui utilisent des micro-frontends et utilisent différentes solutions peuvent toujours développer des interfaces utilisateur qui correspondent visuellement et comportementalement.

Kendo UI propose cinq thèmes d’interface utilisateur magnifiquement conçus :

Vous pouvez en choisir un et commencer immédiatement à coder. Kendo UI fournit même Kits d’interface utilisateur Figma pour chacun des thèmes, que vous pouvez utiliser pour créer vos propres styles et designs dans Figma en utilisant les primitives de style fournies.

Les thèmes par défaut sont excellents, mais si vous avez besoin de styles plus personnalisés, Kendo UI propose Générateur de thèmes pour répondre à vos besoins.

ThemeBuilder—Création d’un système de conception avec Kendo UI

ThemeBuilder est un puissant outil d’interface utilisateur Telerik et Kendo qui peut être utilisé pour créer des styles pour les composants de l’interface utilisateur. Pour l’utiliser, nous devons créer un nouveau projet et choisir le thème de base avec lequel nous voulons travailler.

Après avoir créé un nouveau projet, nous sommes redirigés vers le tableau de bord ThemeBuilder. Nous sommes immédiatement accueillis par un guide touristique utile qui peut nous guider à travers diverses fonctionnalités de ThemeBuilder.

Le contenu principal présente un aperçu en direct de tous les composants de l’interface utilisateur présents dans le thème.

Sur le côté gauche du tableau de bord, nous avons une barre latérale avec des styles de thème, tels que la typographie, les palettes de couleurs et les effets. Lors du processus de sélection du thème, j’ai choisi le thème Fluent, de sorte que tous les composants utilisent les styles Fluent par défaut.

Chaque fois que l’un des styles est modifié, ThemeBuilder actualise l’interface utilisateur et restitue tous les composants avec les derniers styles. Le GIF ci-dessous montre comment tous les composants changent de couleur lorsque le style principal est modifié.

Personnalisation détaillée du style

Le contenu principal, par défaut, affiche l’aperçu en direct, mais nous pouvons également passer au mode « Édition avancée », qui nous permettra de cliquer sur n’importe lequel des composants pour accéder à une personnalisation détaillée du style pour chaque composant et état.

La vue des composants d’édition avancée se compose de trois parties principales :

• L’aperçu du composant apparaît au milieu, qui montre à quoi ressemble un composant dans son état par défaut, lorsqu’il est survolé, mis au point, etc.
• La section d’aperçu en direct en bas, qui affiche un composant interactif avec lequel il est possible d’interagir
• La barre latérale qui peut être utilisée pour configurer le texte, l’arrière-plan, l’espacement et plus du composant

Forfaits et tarifs ThemeBuilder

De nombreuses fonctionnalités de ThemeBuilder sont gratuites, mais certaines d’entre elles nécessitent un abonnement payant. Par exemple, la « personnalisation détaillée du style » que nous venons d’aborder dans la section précédente nécessite le Générateur de thèmes Pro plan. Le ThemeBuilder propose également une fonctionnalité très utile qui permet d’importer des styles et des polices depuis Figma. Vous avez peut-être repéré la notification « Importer des styles depuis Figma » en haut de la barre latérale gauche.

L’équipe Progress a construit un Plugin Figma qui peut être utilisé pour automatiser la génération de thèmes en exportant des styles et des polices depuis Figma. Les ressources exportées peuvent ensuite être facilement importées dans ThemeBuilder et utilisées pour styliser les composants. Cette fonctionnalité nécessite le ThemeBuilder Ultime plan. Outre le niveau gratuit, il existe trois forfaits au total : Pro, Ultimate et Enterprise. Vous pouvez trouver une comparaison détaillée des plans tarifaires ici.

Exporter un thème dans ThemeBuilder

Lorsque votre thème est prêt, vous pouvez cliquer sur le grand bleu Exporter bouton en haut à droite de l’application. Il téléchargera un fichier zippé avec la structure suivante.

.
├── theme/
│   ├── dist/
│   │   ├── css/
│   │   │   └── theme.css
│   │   └── scss/
│   │       ├── _overrides.scss
│   │       ├── _tokens.scss
│   │       └── index.scss
│   └── package.json
└── README.md

Le README.md Le fichier décrit comment le thème doit être ajouté à un projet. Dans le dist répertoire, nous avons css et scss Dossiers. Si vous utilisez Sass dans votre projet, vous devez alors importer le dist/scss/index.scss déposer. Sinon, vous devez importer le theme.css déposer.

Notez que puisque ces fichiers sont générés, ils ne doivent pas être modifiés directement. Au lieu de cela, ils doivent être traités comme des fichiers en lecture seule. Toute modification supplémentaire doit être effectuée dans ThemeBuilder et le thème doit être à nouveau exporté.

Résumé

Dans cet article, nous avons abordé l’importance et les éléments constitutifs des systèmes de conception, notamment les guides de style, les bibliothèques de composants, les modèles d’interface utilisateur, les principes de conception, la documentation et les outils de conception. De plus, nous avons approfondi l’interface utilisateur de Kendo et ses fonctionnalités uniques, telles que les thèmes, les kits Figma UI et Progress ThemeBuilder.

ThemeBuilder, équipé d’options de personnalisation avancées et d’un aperçu en direct, nous permet de créer des thèmes parfaitement adaptés à nos besoins. De plus, nous avons abordé des aspects pratiques, notamment la structure tarifaire des forfaits ThemeBuilder et comment exporter un thème pour l’intégrer dans un projet. Equipés des nouveaux outils, nous pouvons améliorer nos flux de travail de conception et créer des expériences utilisateur plus cohérentes et efficaces.