De la conception au développement en 7 étapes avec ThemeBuilder

Un guide étape par étape tout au long du processus de passage d’un projet de la conception au développement à l’aide de ThemeBuilder !

Générateur de thèmes est une application Web qui fonctionne comme un éditeur WYSIWYG complet pour tous nos composants, permettant aux développeurs ou aux concepteurs d’approfondir et de personnaliser les détails de chaque composant, sans toucher à aucun CSS ou SASS. C’est notre approche recommandée pour les équipes qui souhaitent apporter des modifications de conception aux bibliothèques d’interface utilisateur Telerik ou Kendo dans un environnement visuel sans code, puis exporter directement le code.

Mais à quoi ressemble ce processus ? Aujourd’hui, nous allons parcourir étape par étape le processus de réalisation d’un projet de la conception au développement à l’aide de ThemeBuilder Pro !

Étape 1 : Configurer un nouveau projet ThemeBuilder

Avant que des choses vraiment amusantes ne puissent arriver, vous devez créer un nouveau projet ThemeBuilder ! Dirigez-vous vers le Tableau de bord ThemeBuilderconnectez-vous ou créez un compte Telerik (gratuit !), puis sélectionnez « Créer un nouveau projet »:

Sur la page suivante, il vous sera demandé de donner un nom à votre projet et de sélectionner un thème sur lequel le baser. Si vous utilisez déjà l’un de ces systèmes de conception courants—Bootstrap, Material ou Courant– vous pouvez en sélectionner un et commencer avec tous les styles de base déjà en place. Si vous souhaitez créer quelque chose de complètement nouveau, nous vous recommandons de commencer par le thème par défaut de Kendo et de le personnaliser à partir de là.

Étape 2 : Concevoir

Cette étape peut sembler un peu différente, selon que vous avez un concepteur dans votre équipe et que vous recevez des modifications de conception de sa part dans le cadre du transfert ou si vous gérez vous-même la conception.

Avec un concepteur

Si vous avez un designer dans votre équipe, il est préférable de commencer par notre Kits d’interface utilisateur Figma. Ces kits offrent aux concepteurs une ventilation complète de chaque composant, style de conception atomique dans un fichier Figma. Les kits Figma sont également disponibles dans différentes variétés de thèmes (Kendo Default, Bootstrap, Material et Fluent), donc si vous utilisez l’un de ces systèmes de conception, vous serez déjà synchronisé dès le début.

Les Kits Figma sont extrêmement bénéfiques car ils permettent au concepteur a) d’avoir une compréhension complète de la bibliothèque et b) d’apporter des modifications à l’aide du logiciel avec lequel il est le plus familier. Dans cette situation, vous pourriez être invité à consulter le fichier Figma Kit qui inclut leurs mises à jour de conception, et ce sera votre travail de les traduire en code – une tâche plus facile que jamais avec ThemeBuilder Pro, puisque les jetons de conception Figma alignent un- à un avec les jetons de style de thème dans la barre latérale gauche de ThemeBuilder !

Sans concepteur

Si vous gérez vous-même la conception, vous pouvez passer directement à ThemeBuilder ! Parce que ThemeBuilder utilise une approche WYSIWYG pour l’édition, toutes les modifications que vous apportez aux composants seront immédiatement reflétées dans le panneau Aperçu en direct. Et si vous changez d’avis, tous les ajustements que vous effectuez peuvent être rapidement et facilement annulés à l’aide de la fonction de réinitialisation. Alors faites preuve de créativité et n’ayez pas peur d’expérimenter !

Étape 3 : Création de votre thème personnalisé

Nous vous recommandons de commencer par effectuer des mises à jour de haut niveau du thème, en utilisant les variables dans la barre latérale « Styles de thème » de gauche. Ces modifications s’appliqueront immédiatement à l’ensemble de la bibliothèque de composants (comme vous le verrez dans l’aperçu en direct), afin que vous puissiez rapidement modifier les couleurs, la typographie et les valeurs de rayon de bordure.

Une fois que vous avez attribué une valeur à une variable, elle apparaîtra dans une liste déroulante lorsque vous définirez de futures variables, ce qui facilitera plus que jamais la définition de styles cohérents pour votre application. Et, comme mentionné, ces valeurs s’alignent sur les jetons de conception du kit Figma, de sorte que vous pouvez rapidement et facilement copier les valeurs pour un transfert sans douleur.

>

Vous pouvez également créer vos propres valeurs ! Ceci est particulièrement utile pour les équipes qui utilisent ThemeBuilder pour prendre en charge leur propre système de conception personnalisé. Pour ajouter une nouvelle variable, cliquez simplement sur le bouton « + » sur le côté droit de l’en-tête « Couleurs ». Vous serez ensuite invité à nommer votre variable et à définir une valeur de base (que vous pourrez modifier ultérieurement). Toutes les nouvelles variables que vous créez seront ajoutées au bas de la barre latérale Styles de thème sous l’en-tête « Autre ».

Étape 4 : Prévisualiser et modifier les composants

Une fois que vous avez défini ces valeurs, vous pouvez commencer à explorer l’apparence de ces paramètres dans tous les composants, à l’aide de l’aperçu en direct. Assurez-vous d’interagir avec tous vos composants afin de pouvoir vérifier le fonctionnement de vos styles lors de divers états d’interaction : basculez les commutateurs, cliquez sur les boutons, développez les listes déroulantes et plus encore ! Vos utilisateurs ne verront pas seulement les composants dans leurs positions par défaut, il est donc important de revoir l’apparence de votre thème dans différentes situations.

Si vous voyez quelque chose qui ne semble pas tout à fait correct ou simplement quelque chose qui n’est pas inclus dans cette liste de haut niveau que vous souhaitez ajuster (comme le remplissage ou la marge, des paramètres de texte plus granulaires, la justification et l’alignement, le contour, les effets et plus ), le nouveau panneau Modification avancée vous guidera à travers ces options. Et en raison de l’approche de conception atomique, les modifications que vous apportez au bouton (par exemple) seront automatiquement reflétées dans chaque composant qui utilise ou inclut un bouton – barres d’outils, groupes de boutons, entrées, listes déroulantes, etc.

Étape 5 : Partage

Nous savons qu’un bon design ne se produit pas dans le vide, c’est pourquoi vous pouvez également partager votre thème ThemeBuilder Pro et travailler dessus avec un autre coéquipier. Collaborez en éditant des composants ensemble en temps réel ou envoyez facilement votre travail pour approbation.

Pour partager un projet ThemeBuilder, cliquez sur le bouton Partager en haut à droite de la barre de navigation. Cela ouvrira un modèle qui vous permettra d’ajouter d’autres coéquipiers au projet via une adresse e-mail. Vous pouvez également révoquer l’accès à partir d’ici, si nécessaire.

Une fois que vous êtes satisfait de la conception et que vous avez obtenu l’approbation des parties prenantes dont vous avez besoin, cette fonctionnalité vous permettra également de partager entre les équipes de produits afin que tout le monde puisse exporter les mêmes fichiers CSS et Sass pour obtenir une apparence vraiment cohérente dans votre suite d’applications. .

Étape 6 : Exportation

En parlant d’exportation, vous pouvez démarrer une exportation de thème en cliquant sur le bouton « Exporter » dans le coin supérieur droit de la barre de navigation.

Lorsque vous faites cela, tout le contenu de votre projet sera automatiquement converti en CSS et Sass et téléchargé dans un fichier zip. Oui… c’est aussi simple que ça !

Étape 7 : Intégration dans votre application

Croyez-le ou non, il est à peu près aussi simple d’intégrer votre nouveau thème dans votre application existante que de télécharger les fichiers !

Le fichier zip que vous avez téléchargé contient deux dossiers principaux : « css » et « sass », tous deux imbriqués dans un dossier parent « dist ». En fonction de ce que vous utilisez dans votre application, choisissez celui dont vous avez besoin, et c’est littéralement aussi simple que de faire glisser et déposer les fichiers ! En moins de 30 secondes, vous pouvez appliquer les styles ThemeBuilder exportés et les voir reflétés dans chaque composant Telerik et Kendo UI de votre application, sans jamais avoir besoin d’écrire une seule ligne de Sass ou CSS !

Prêt à tenter le coup ?

ThemeBuilder Pro est disponible pour KendoRéagir, Interface utilisateur de Kendo pour Angular, Interface utilisateur de Kendo pour Vueet Interface utilisateur Telerik pour Blazor. La prise en charge de Kendo UI pour jQuery, Telerik UI pour ASP.NET MVC, Telerik UI pour ASP.NET Core, Telerik UI pour PHP et Telerik UI pour JSP sera lancée début 2023.

Vous voulez voir à quel point cela peut faciliter le style de votre application ? Essayez ThemeBuilder Pro aujourd’hui avec un essai gratuit de 7 jours !