6 façons dont le kit Progress Design System rend la conception de l’interface utilisateur amusante —

Dans cet article, nous présenterons le Système de conception de progrès, un langage de conception de bout en bout pour créer des expériences simples, intuitives et belles. Nous verrons en quoi Progress Design System est une solution de conception d’interface utilisateur qui se démarque des autres, et comment cette approche peut positionner la bibliothèque de composants comme base d’une bonne interface utilisateur.

Nous avons créé cet article en partenariat avec Le système de conception Progress de Telerik. Merci de soutenir les partenaires qui rendent SitePoint possible.

Le système de conception Progress de Telerik

Les bibliothèques de composants Kendo UI de Telerik sont très populaires dans la communauté des développeurs et la demande en matière de conception d’interface utilisateur est croissante. Le Système de conception de progrès a une approche unique du style de l’interface utilisateur, car elle est adaptée aussi bien aux développeurs qu’aux concepteurs. Cela garantit qu’un effort de développement peut être livré dans les délais, sans s’enliser dans des problèmes d’interface utilisateur.

Progress se démarque de la concurrence par son approche unique qui améliore la collaboration en équipe. Ce système de conception propose des thèmes, des outils et de la documentation pour répondre à la plupart des besoins de conception. Un bon guide pour démarrer est disponible dans le Introduction au système de conception page.

De nombreux utilisateurs de Telerik et Kendo UI sont des développeurs back-end qui n’ont pas le temps ni les compétences nécessaires pour gérer les exigences de style avancées. Les concepteurs travaillent également avec les développeurs via des outils pour les aider à contribuer à l’effort de conception. Progress aborde ces deux cas d’utilisation dans un effort de conception et de développement.

À propos des systèmes de conception

UN système de conception aide généralement une équipe à fournir une interface utilisateur cohérente, conviviale et intuitive. C’est ce qui cimente l’apparence et la convivialité d’une application.

L’un des principaux succès de tout effort de développement d’applications, qu’elle soit destinée à un usage interne ou externe, réside dans sa capacité à répondre aux exigences de conception de l’interface utilisateur. Si l’interface utilisateur n’est pas cohérente, agréable et intuitive, les utilisateurs n’apprécieront pas son utilisation. le fardeau et les coûts de soutien augmenteront également, parce que l’expérience de l’assurance-chômage est incohérente ou déroutante.

Si l’interface utilisateur n’est pas la meilleure de sa catégorie, la concurrence éclipsera. Une équipe de développement peut créer l’application la plus innovante, mais cela ne sert à rien lorsque les utilisateurs n’adoptent pas la nouvelle interface utilisateur.

Le problème est le temps, les ressources et le talent. Les développeurs doivent perdre du temps pour obtenir le CSS parfait, alors qu’ils préfèrent travailler sur les fonctionnalités et l’ingénierie. Une équipe de développement peut obtenir des maquettes d’une équipe de conception, un guide de style ou même un système de conception à part entière. Dans tous les cas, le travail périlleux des CSS et les allers-retours entre le développement et la conception rendent tout cet effort intimidant et parfois même irréaliste. Même un projet de développement bien planifié peut rapidement échouer lorsque les membres de l’équipe doivent refaire une partie du travail.

Les équipes qui n’ont aucune contribution des concepteurs peuvent également bénéficier du Progress Design System. Les développeurs full-stack n’ont souvent pas les capacités de conception nécessaires pour créer de bonnes interfaces utilisateur. Progress vise à aider à réaliser une excellente conception d’interface utilisateur avec un minimum d’effort.

Progress a une approche unique pour résoudre ce problème, qui est le kit Progress Design System.

Parlons de ce que ce Design System a à offrir.

Thèmes prêts à l’emploi

Les bibliothèques de composants de Kendo UI sont livrées avec quatre thèmes conçus par des professionnels (Default, Material, Fluent et Bootstrap). Les développeurs et les concepteurs peuvent choisir n’importe lequel d’entre eux, et cela sera automatiquement appliqué de manière cohérente tout au long du projet. Il s’agit du chemin le plus simple vers une interface utilisateur de qualité si aucune personnalisation n’est nécessaire.

Les thèmes sont des collections soigneusement conçues d’attributs visuels tels que les couleurs, les polices et l’espacement. Les systèmes de conception disponibles tels que Material, Bootstrap et Fluent sont très populaires et bien connus. Une fois que vous appliquez un thème, vous obtenez un aspect cohérent sans aucun effort supplémentaire.

Il existe des centaines de démos sur le site Web de Telerik. Assurez-vous de modifier le thème et la palette de couleurs pour voir ces thèmes par vous-même. Par exemple, consultez le composant de grille et les options prêtes à l’emploi disponibles.

Personnalisations sans CSS (de base ou avancées)

Le Générateur de thèmes est un outil de conception très puissant qui aide les développeurs et les concepteurs à effectuer des personnalisations globales ou granulaires sans avoir besoin d’écrire du CSS complexe.

Il n’y a presque aucune courbe d’apprentissage avec ThemeBuilder, car c’est un outil visuel. Vous pouvez styliser chaque élément de votre composant Telerik et Kendo UI, de la couleur primaire à fort impact aux moindres détails.

Les développeurs peuvent se concentrer sur des fonctionnalités riches tandis que les concepteurs peuvent créer de belles expériences qui ravissent les utilisateurs. CSS est difficile, et c’est un ensemble de compétences qu’il est préférable de confier à des professionnels chevronnés.

Vous pouvez définir des propriétés globales telles que la couleur, le rayon de la bordure et la typographie en quelques clics, ou vous pouvez passer en mode avancé et effectuer des personnalisations jusqu’au niveau atomique. ThemeBuilder est une application Web qui vous permet de styliser facilement les composants.

Une fois qu’un concepteur a défini la conception du projet, il peut partager ses personnalisations en quelques clics.

Vous pouvez consulter Générateur de thèmes via un essai gratuit de 7 jours.

Collaboration intégrée

ThemeBuilder est une application cloud qui stocke les projets en toute sécurité dans votre compte. Lorsque les membres de l’équipe ont besoin de contribuer, il leur suffit de se connecter et d’ouvrir le projet. Il n’est pas nécessaire de partager des fichiers manuellement ou via le contrôle de code source. Cela permet aux concepteurs de collaborer et de partager des idées avec les développeurs de manière transparente.

ThemeBuilder est accessible à la fois aux concepteurs et aux développeurs. Cela place l’outil au centre de toutes les personnalisations de l’interface utilisateur et minimise les silos entre les membres de l’équipe.

De plus, les responsables peuvent définir des autorisations sur chaque projet pour un contrôle supplémentaire de l’équipe. L’équipe peut simplement se concentrer sur l’accomplissement du travail sans se laisser submerger par un tas de projets non pertinents.

Bricolage pour les designers

Généralement, les concepteurs perdent la trace du projet une fois qu’ils confient leur conception à un développeur. Cela peut signifier un certain nombre d’allers-retours entre le concepteur et le développeur au fur et à mesure que l’application est peaufinée.

ThemeBuilder est sans code et facilement accessible, de sorte que les concepteurs peuvent se connecter et mettre à jour eux-mêmes la conception réelle sans aucun aller-retour. Les développeurs peuvent également avoir accès à l’outil, afin qu’ils puissent rester informés des dernières conceptions disponibles. L’outil aide le projet de développement à prendre de l’ampleur, afin que l’équipe puisse résoudre les problèmes difficiles de conception d’interface utilisateur avec une relative facilité.

À mesure que Telerik et Kendo UI évoluent, les concepteurs sont en mesure de suivre les dernières fonctionnalités des composants via des mises à jour automatiques. Cela ajuste de manière transparente vos styles pour correspondre au HTML mis à jour, garantissant une expérience cohérente et de nouvelles fonctionnalités de composants intéressantes.

Assistance Figma

Les concepteurs peuvent intégrer des variables Sass/CSS de Figma dans ThemeBuilder. Les éléments de conception tels que les couleurs, la typographie et les effets peuvent également être importés.

Le plugin ThemeBuilder pour Figma peut exporter les éléments suivants depuis Figma :

• Styles tels que couleurs, typographies et effets: ce sont des jetons Sass ou CSS
• Icônes SVG personnalisées: celles-ci sont exportées et converties en polices d’icônes

Pour installer le plugin pour Figma, il vous suffit d’avoir un compte Figma comme prérequis. Ensuite, trouvez le Plugin Progress ThemeBuilder pour Figma (disponible via Figma Page de la communauté) et cliquez sur Installer.

Pour améliorer encore le transfert concepteur-développeur, Telerik et Kendo UI prennent en charge Figma de deux manières :

• Kits d’interface utilisateur Figma: Progress fournit des kits d’interface utilisateur Figma qui représentent chaque composant de la bibliothèque. Les concepteurs peuvent créer des conceptions au pixel près de ce à quoi ils pensent que le produit final devrait ressembler.
• Importer des jetons de conception dans ThemeBuilder: Les développeurs peuvent obtenir des jetons de conception directement auprès de Figma pour rationaliser davantage le transfert concepteur-développeur.

Le Progress Design System est conçu en pensant à la fois aux concepteurs et aux développeurs afin de minimiser les retards inattendus dans la livraison d’un projet.

Documentation frontale détaillée et interactive

Telerik et Kendo UI disposent de la meilleure documentation de leur catégorie. C’est détaillé, complet et interactif. Les développeurs et les concepteurs peuvent en savoir plus sur le système de conception Progress en général, ainsi que sur les options de balisage, de style et de configuration de chaque composant.

Par exemple, un développeur peut consulter la documentation, définir certaines propriétés et inspecter le balisage. Pour un aperçu rapide de la documentation, consultez la documentation disponible pour le composant de bouton.

Un exemple spécifique est le documentation des composants de saisie semi-automatique construit dans React. Les développeurs peuvent rapidement évaluer le balisage et les accessoires disponibles. Ils peuvent également choisir entre JavaScript ou TypeScript comme langage de balisage.

Si React n’est pas votre outil de prédilection, d’autres options sont disponibles, telles que Angular, Blazor, jQuery et Vue. La documentation est complète, vous bénéficierez donc d’une assistance quel que soit l’outil que vous choisissez.

Cette technique peut grandement améliorer le développement de systèmes backend, tels que les API qui doivent s’intégrer à la conception de l’interface utilisateur. Par exemple, un développeur back-end peut inspecter la conception et commencer à imaginer à quoi pourrait ressembler le modèle de données du domaine. Avec une vision claire du domaine, un développeur peut rapidement commencer à étoffer d’autres parties de la solution comme les DTO, le stockage back-end et la mise en cache.

Remarque : Telerik et Kendo UI travaillent toujours sur la documentation et, au moment d’écrire ces lignes, tous les composants ne sont pas couverts. L’espoir est d’atteindre ce point d’ici 2024.

Changez votre façon de travailler

Les développeurs font confiance à Telerik et Kendo UI depuis des décennies pour leurs excellentes expériences d’interface utilisateur. À mesure que les exigences en matière de style de l’interface utilisateur continuent d’évoluer, le système de conception Progress et ses outils évoluent également. Aujourd’hui, Progress a atteint un point où les concepteurs et les développeurs disposent d’une solution de style unique qui se démarque de la concurrence. Que vous ayez besoin de quelque chose de prêt à l’emploi ou d’un design personnalisé vraiment unique, cette voie vous offre le moyen le plus simple de vraiment ravir vos clients.