La liste principale des ressources de conception d’interface utilisateur

Êtes-vous un développeur qui cherche à améliorer un peu son jeu de conception d’interface utilisateur ? Alors bonne nouvelle : vous êtes au bon endroit !

Nous avons une tonne d’introductions sur certains des termes et outils de base que vous rencontrerez régulièrement lorsque vous travaillez avec des interfaces utilisateur. Lisez la suite pour voir quelques-unes des excellentes ressources que nous avons rassemblées sur la conception de l’interface utilisateur :

Figma

Si vous pensiez que Figma était réservé aux designers, détrompez-vous ! Figma est un outil puissant, avec des tonnes de fonctionnalités intéressantes dont les développeurs peuvent également profiter.

Si vous êtes un développeur qui travaille avec des concepteurs, vous connaissez déjà le tristement célèbre « transfert », ce point du flux de travail lorsque vous commencez à transformer des structures filaires et des maquettes en code. Même si vous n’êtes pas personnellement familier avec le processus, il n’est probablement pas surprenant d’entendre qu’il s’agit souvent d’un véritable point douloureux. Cette douleur peut cependant être atténuée lorsque les deux parties comprennent ce que l’autre recherchera dans le processus de transfert.

On s’attend à ce que les concepteurs aient une compréhension assez approfondie du Web frontal : éléments HTML, modèle de boîte CSS, fonctionnement du redimensionnement réactif, structure basée sur les composants, etc. Et pourtant, lorsque nous renversons le script, les développeurs sont rarement censés avoir un compréhension des bases de la conception – qu’est-ce qui se passe avec ça?

Les équipes travaillent mieux et créent de meilleurs produits lorsque les deux parties ont une compréhension approfondie des outils et des priorités de l’autre. Sans parler de toutes les façons dont l’accès aux fichiers source de conception peut vous faciliter la tâche. Dans cet esprit, j’aimerais présenter à mes amis développeurs Figma, l’un des outils de conception d’interface utilisateur les plus populaires et les plus utilisés. C’est gratuit pour un usage individuel, donc je vous encourage à créer un compte et à commencer à jouer ! C’est la meilleure façon d’apprendre.

Comme tout logiciel spécialisé, un fichier Figma peut être un peu difficile à parcourir si vous ne le connaissez pas. Consultez notre article, Figma pour les développeurspour découvrir les bases, y compris les fonctionnalités qui vous seront les plus utiles en tant que développeur.

Kits Figma

L’un des moyens les plus courants pour les développeurs de tirer parti de toutes les qualités de Figma consiste à tirer parti Kits d’interface utilisateur Figma.

Vous souvenez-vous de cette douleur de transfert dont nous venons de parler ? Tout aussi souvent, l’écart entre les deux équipes est causé par une mauvaise communication à un niveau plus technique : les concepteurs et les développeurs utilisent les mêmes mots pour signifier différentes choses (« grille » est un exemple courant), le manque de compréhension des capacités techniques et de ce qui est possible ou impossible pour chaque partie, ou simplement le choc naturel qui se produit lorsque deux parties abordent le même problème avec des méthodologies différentes. Heureusement, il existe une solution simple : tout ce dont ils ont besoin, c’est d’un pont. Ils ont besoin de quelque chose pour combler le fossé entre eux en les alignant autour de la même source unique de vérité.

C’est l’un des problèmes majeurs que Kits de conception d’interface utilisateur tenter de résoudre : créer de la cohérence et réduire les erreurs de communication en fournissant cette source unique de vérité à laquelle toutes les parties peuvent se référer. Les kits d’interface utilisateur sont souvent un élément fondamental de plus grands systèmes de conception— ils fournissent naturellement une documentation sur les composants et les jetons de conception qui sont régulièrement utilisés dans votre interface utilisateur. Un système de conception complet est un atout formidable pour vos équipes, mais en créer un est une entreprise importante et chronophage. Si vous venez de commencer ce processus (ou si vous êtes encore dans la phase d’obtention de l’adhésion à un tel projet), un kit de conception d’interface utilisateur est un excellent point de départ ; vous pouvez commencer à voir les avantages immédiatement, avec un investissement de temps initial beaucoup plus petit.

Un kit de conception d’interface utilisateur (parfois appelé kit Figma, kit de croquis, etc. selon le logiciel de conception utilisé) est une collection de tous les éléments de votre conception d’interface utilisateur, y compris (mais sans s’y limiter) les polices, les couleurs, les icônes, la conception des composants dossiers et documentations. Ceux-ci sont utiles en eux-mêmes, à la fois comme forme de documentation et pour accélérer le processus de conception en fournissant un ensemble d’éléments de base qui peuvent être réutilisés dans de nouvelles conceptions, mais qui sont particulièrement puissant lorsqu’il est combiné avec une bibliothèque de composants d’interface utilisateur existante, telle que les kits d’interface utilisateur Telerik et Kendo pour Figma.

Figma est un logiciel de conception populaire, utilisé et apprécié par de nombreuses équipes pour ses fonctionnalités collaboratives étendues. Avec les kits d’interface utilisateur Kendo pour Figma, vous disposez d’une corrélation parfaite entre les composants utilisés par les développeurs et les composants utilisés par les concepteurs. Pensez-y comme à la pierre de Rosette de l’interface utilisateur : exactement les mêmes éléments, traduits dans différentes « langues ».

Systèmes de conception

Si vous travaillez avec des designers, il y a de fortes chances que vous ayez entendu parler de « système de conception » au moins quelques fois. Les systèmes de conception d’interface utilisateur sont un sujet brûlant dans le monde du design en ce moment, et pour une bonne raison : ils offrent tonnes d’avantages pour tous ceux qui travaillent sur un produit, développeurs inclus !

Un système de conception est une collection d’éléments de conception connectés, organisés et documentés pour une référence facile. Considérez-le comme une bibliothèque de toutes les ressources et ressources de conception dont vous pourriez avoir besoin, personnalisées spécifiquement pour votre application.

De nombreux développeurs entendront le mot « design » et se déconnecteront immédiatement, en supposant que ce n’est pas quelque chose qui leur est destiné. Au contraire, comprendre votre chemin dans un système de conception améliorera considérablement votre compréhension de la façon dont les conceptions et les prototypes sont censés être traduits en code et vous facilitera la vie en offrant un accès rapide à plusieurs ressources. Cela accélère le processus de développement de manière exponentielle, tout en réduisant les malentendus pendant le processus de transfert.

Que votre équipe dispose déjà d’un système de conception et que vous ne sachiez pas vraiment ce que vous êtes censé en faire, ou que vous veniez d’entendre le terme et que vous soyez curieux de savoir ce que cela signifie vraiment, vous êtes au bon endroit ! Systèmes de conception pour les développeurs examine en profondeur l’objectif d’un système de conception, ce qui est souvent inclus et comment vous pouvez tirer le meilleur parti de cette ressource utile pour améliorer le processus de développement et l’expérience utilisateur de votre application.

Premiers pas avec les systèmes de conception

Bien que les avantages d’un système de conception soient nombreux, sa mise en place nécessite un investissement important en temps et en efforts au départ. En fin de compte, les systèmes de conception permettent de gagner du temps – une source unique de vérité qui accélère à la fois les processus de conception et de développement – mais cela ne signifie pas qu’il est facile d’en faire démarrer un. Sans oublier que tout le monde n’est peut-être pas encore complètement convaincu par l’idée, alors demander tout de suite une bonne partie du temps peut être difficile à vendre.

En plus de cela, les systèmes de conception peuvent être un peu difficiles à vendre en eux-mêmes, car ils sont un peu abstraits – il peut être difficile d’imaginer toutes les façons dont ils s’intégreront dans le flux quotidien de votre équipe. Vous pouvez collecter des données, lire des études de cas et faire des présentations PowerPoint jusqu’à la mort inévitable de l’univers par la chaleur, mais certaines personnes ont juste besoin de voir quelque chose qui est réellement fonctionnel (même s’il en est encore aux étapes préliminaires) pour vraiment le comprendre.

C’est pourquoi je recommande fortement de créer un système de conception MVP (Produit Minimalement Viable): une petite version de départ de votre système de conception que les gens peuvent commencer à utiliser et ressentir immédiatement les avantages. D’après mon expérience, c’est le meilleur moyen d’obtenir l’adhésion dont vous avez besoin pour un projet plus vaste.

Mais, alors que « juste le faire » est une boutade accrocheuse (et un conseil facile à donner, sans peau réelle dans le jeu), il est plus facile à dire qu’à faire de « juste » s’adapter au travail du système de conception autour de vos responsabilités réelles. Alors, comment fais nous obtenons un système de conception rapide et sale MVP opérationnel, avec un investissement de temps minimal, pour prouver les avantages ? Nous faisons ce que les grands artistes ont fait pendant des siècles : commencer par le travail de quelqu’un d’autre.

Heureusement, dans ce cas, vous n’avez même pas besoin de voler quoi que ce soit – vous pouvez commencer par le Kendo UI Kit Figma et utilisez-le comme base pour lancer un nouveau système de conception ! Nous passons en revue le processus étape par étape ici, dans Utilisation des kits Figma pour démarrer votre système de conception.

Créer et implémenter des thèmes

Les thèmes d’application représentent une part importante de ce qui est documenté dans un système de conception, en particulier si votre application comporte plusieurs thèmes, tels que les modes clair et sombre, ou des thèmes d’accessibilité à contraste élevé. Chacune de ces options de thème devra être soigneusement documentée dans le cadre du système de conception.

Si vous ne faites que commencer, ne vous inquiétez pas, nous avons quelques conseils ! En fait, si vous utilisez les composants de l’interface utilisateur de Kendo, il existe quatre façons différentes de styliser vos composants et d’implémenter un thème personnalisé. Celui que vous devriez choisir dépend de quelques facteurs, tels que combien vous aimez écrire du CSS, l’étendue de vos modifications, et plus encore. Donner 4 façons de styliser vos composants KendoReact une lecture et utilisez un organigramme pratique qui vous guidera tout au long du processus de prise de décision.

Visualisations de données

La visualisation de données est un sujet tellement intéressant car il se situe à l’intersection de plusieurs mondes très différents. Évidemment, il y a la partie données : les chiffres bruts, les statistiques, les calculs. Ensuite, il y a une partie technique, notamment dans le cadre de la création d’applications React, et la question de savoir comment on aborde la construction de ces graphismes d’autant plus qu’ils sont souvent interactifs ou animés. Ces deux aspects sont probablement ceux que les développeurs connaissent le mieux, et pour beaucoup de gens, c’est là qu’ils s’arrêtent. Importez les données, transmettez ces données dans un graphique (probablement à partir d’une bibliothèque externe, comme KendoRéagir ou D3), et ta-da : vous avez réglé la visualisation des données.

Cependant, cette approche laisse de côté deux autres aspects très importants de la création de visualisations de données efficaces : l’histoire et la conception. Toutes les données racontent une histoire – la question pour nous est de savoir ce que nous essayons de communiquer avec les données et ce que nous voulons que les utilisateurs retiennent. Même si notre intention est simplement de présenter les données à nos utilisateurs et de les laisser tirer leurs propres conclusions, les choix que nous faisons dans la présentation des données influenceront grandement la façon dont un spectateur interprète les informations, pour le meilleur ou pour le pire.

Ce qui signifie, par nature, que la conception est également une partie importante de la visualisation des données – c’est la façon dont nous racontons l’histoire. Et c’est la partie sur laquelle nous nous concentrerons principalement aujourd’hui : comment concevoir des visualisations de données puissantes. Mais il est important de reconnaître que ce type de conception ne peut pas se produire dans le vide, et tous ces autres facteurs – l’information, la technologie et l’histoire – ont tous une influence sur les choix de conception que nous faisons.

En ce qui concerne l’UX de vos visualisations de données, les éléments les plus importants à prendre en compte sont :

• Choisir le bon graphique : Présentez-vous les données de la manière qui répond le plus efficacement aux questions de vos utilisateurs ?
• Interactivité : Cela offre-t-il suffisamment de valeur ajoutée à vos utilisateurs pour contrebalancer l’augmentation de l’augmentation technique ?
• Réactivité : Vos visualisations de données sont-elles toujours belles et fonctionnent-elles bien sur de petits écrans ?
• Accessibilité: Tous vos utilisateurs peuvent-ils accéder à vos visualisations de données ?

Comment aborder l’UX de visualisation de données : trucs et astuces explore chacun de ces éléments clés et vous apprend à concevoir des tableaux et des graphiques puissants à chaque fois. Lisez-le et commencez à créer des visualisations de données attrayantes et efficaces !