Systèmes de conception pour les développeurs

Le fait de disposer d'un système de conception permet aux développeurs d'intégrer facilement de nouveaux membres d'équipe, de trouver rapidement des réponses aux questions de base sans avoir à contacter quelqu'un et d'attendre une réponse, de télécharger des ressources communes telles que des logos et des icônes, et bien plus encore.

]Si vous travaillez avec des designers, il y a de fortes chances que vous ayez entendu les mots « design system » 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 des tonnes d'avantages à tous ceux qui travaillent sur un produit, y compris les développeurs !

De nombreux développeurs entendront le mot « design » et déconnectez-vous 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 ayez Je viens d'entendre le terme et je suis curieux de savoir ce que cela signifie vraiment, vous êtes au bon endroit ! Nous allons examiner l'objectif d'un système de conception, ce qui est souvent inclus et la meilleure façon d'exploiter cette ressource utile pour améliorer le processus de développement et l'expérience utilisateur de votre application.

Qu'est-ce qu'un système de conception, de toute façon ?

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.

Son concept est similaire à celui d'une bibliothèque de composants, mais il en existe un millier ! De la même manière que les composants peuvent être décomposés en blocs de construction, puis combinés de différentes manières pour créer rapidement des interfaces utilisateur, les conceptions peuvent également être décomposées en leurs plus petits éléments : polices, couleurs, icônes, images, copie, etc. Les systèmes de conception sont des collections documentées de ces éléments de conception et de la façon dont ils fonctionnent ensemble. sketchappsources.com/free-source/4059-eva-design-system-sketch-freebie-resource.html

Quel est le but d'un système de conception ?

Les systèmes de conception existent en fin de compte pour assurer la cohérence . Ils peuvent le faire de différentes manières et avoir d'autres avantages qui se produisent en tant qu'effet secondaire, mais la cohérence est l'objectif principal. référencez les décisions de conception qui ont été prises pour votre application, vos produits et votre marque. Faire différents choix d'interface utilisateur ou utiliser différents modèles à différents endroits, que ce soit à différents endroits de votre application ou au-delà, crée une expérience utilisateur frustrante et non intuitive, qui doit toujours être évitée. (Sans parler d'être une expérience frustrante pour les concepteurs et les développeurs, qui doivent recommencer à zéro ou refaire le travail pour chaque projet.) Cela donne également à votre marque et à votre produit un aspect non professionnel, ce qui entraîne un faible niveau de confiance de la part de vos utilisateurs. Vous ne voulez pas que les graphismes de vos réseaux sociaux soient complètement différents de votre site Web, qui est complètement différent de votre application. faire – n'est pas utile lorsque vous essayez d'amener quelqu'un à acheter ou à utiliser votre produit. Cela est particulièrement vrai si vous travaillez dans un domaine comme la banque, l'éducation, la sécurité, la santé ou similaire, où vos utilisateurs vous confient des parties importantes de leur vie.

Du point de vue d'un développeur, un système de conception est plus utile lorsque vous pensez à l'interface utilisateur d'une application. À moins que la même personne ne soit celle qui code les interfaces utilisateur dans chaque situation, les gens feront des jugements personnels ou des décisions de conception différents s'il n'y a pas une seule source de vérité à laquelle se référer. Bien que bon nombre de ces types de décisions UX et UI puissent sembler petites ou même imperceptibles lorsque vous les prenez, elles s'additionneront toutes pour les utilisateurs qui interagissent régulièrement avec votre application. Ce problème s'aggrave si vous faites partie d'une grande équipe ou travaillez quelque part avec plusieurs équipes de développement différentes concentrées sur différentes parties de l'application (peut-être même différentes applications qui doivent toutes partager la même apparence), où de nombreuses personnes différentes sont tous prenant des décisions de conception différentes.

Rationalisation du processus de conception et de développement

Essayer de travailler sans point de référence ralentit également à la fois la conception et le processus de développement, car prendre ces décisions prend du temps. Re-hacher les choix d'interface utilisateur ou essayer de se rappeler comment une situation a été gérée ailleurs dans l'application interrompt votre flux et vous distrait du problème sur lequel vous vous concentriez auparavant. En utilisant un système de conception, vous pouvez éviter cela en ayant toujours une seule source de vérité afin que les développeurs puissent s'y référer rapidement dans les moments de confusion et se remettre sur la bonne voie.

Enfin, tous les développeurs ne aime ou est à l'aise pour prendre des décisions de conception. Comme mentionné ci-dessus, même les petits choix s'empilent pour avoir un impact sur la convivialité globale de votre application – c'est beaucoup de pression à imposer à quelqu'un qui a des compétences axées sur autre chose ! Et pourtant, les développeurs sont invités à prendre ce genre de petites décisions de conception à la volée, dans le cadre du développement de fonctionnalités, relativement régulièrement. Je pense qu'il est bon que les développeurs connaissent quelques bases de conception, mais en fin de compte, de nombreux développeurs se sentiront soulagés et heureux de pouvoir s'en remettre aux connaissances en conception de quelqu'un d'autre qui aime vraiment ce genre de travail – et si tout votre les connaissances en matière de conception sont capturées dans un système de conception, ils n'auront même pas besoin de contacter un concepteur pour le faire. langage pour parler des mêmes éléments. Avez-vous déjà été dans une situation où vous et un collègue pensiez que vous n'étiez pas d'accord sur quelque chose, pour découvrir que vous décriviez la même chose – seulement vous l'appeliez une "notification de toast" et ils l'appelaient une "notification de snack" ? Ou peut-être que votre idée du « bleu ciel » est différente de ce que votre designer avait imaginé ? Lorsque vous utilisez plusieurs bibliothèques, frameworks ou langages différents, il peut être facile de croiser les fils.

Ces malentendus sont inévitables si vous essayez de décrire des éléments visuels sans point de référence. Peu importe comment quelque chose s'appelle, tant que tout le monde sait de quoi vous parlez et que les systèmes de conception résolvent ce problème de manière intrinsèque. Vous ne pouvez pas cataloguer quelque chose sans lui donner un nom ! Mais sérieusement, j'ai trouvé cette cohérence de nommage particulièrement utile de deux manières principales : les noms de composants et les noms de couleurs. ] les développeurs – savent ce que sont tous les composants, comment ils s'appellent et ce que chacun fait. Cela donne aux concepteurs les outils pour discuter et utiliser les composants dont vous disposez déjà. Sans cela, j'ai trouvé trop courant qu'on me demande de construire quelque chose de presque mais pas tout à fait identique à quelque chose que nous avons déjà. Cela ressemble à une bibliothèque de composants ? Eh bien, oui, ça l'est ! Vous l'incluez simplement dans le cadre d'un système de conception plus large afin que l'accès et la connaissance de votre bibliothèque de composants ne soient pas limités aux seules équipes de développement.

Les couleurs sont l'autre avantage énorme, car vous pouvez vous assurer que votre CSS les variables s'alignent avec leurs jetons Figma (ou un autre logiciel de conception). Dans le meilleur des cas, cela vous permet de profiter d'un logiciel comme Unite UX qui permet l'exportation de fichiers Figma vers des fichiers SASS que vous pouvez ajouter à votre base de code. Même si ce n'est pas possible, nommer tout de la même manière facilitera sans aucun doute la communication et le processus de transfert. C'est vraiment une situation gagnant/gagnant.

Que puis-je trouver dans un système de conception ?

Certains des éléments les plus courants incluent (mais ne sont pas limités à) des jetons de conception, des systèmes de grille, des bibliothèques d'icônes, des conceptions de composants, guides de style et guides de langage/ton de la marque. Nous allons passer en revue chacun d'entre eux (car ils peuvent ressembler à des mots charabia si vous ne les connaissez pas) et discuter de la façon dont les développeurs peuvent les utiliser. Shot 2022-02-02 at 4.00.45 PM" title="Screen Shot 2022-02-02 at 4.00.45 PM"/>

Les jetons de conception sont les plus petites parties d'un système de conception : les petites valeurs que vous trouvez lorsque vous explorez un élément jusqu'en bas. Par exemple, vous trouverez souvent des jetons de conception pour l'espacement, les couleurs, les polices et tailles de police, les opacités, les rayons de bordure, etc. le dit très élégamment : "Les jetons de conception sont un ensemble limité d'options discrètes, tout comme une gamme de notes de musique est tirée du spectre de toutes les fréquences possibles."

En lisant cette description, vous avez peut-être déjà réalisé le côté développement équivalent à ces jetons : les propriétés CSS. Stocker tous ces jetons de conception sous forme de variables dans vos feuilles de style et les appliquer les intégrer à des éléments de base dans vos styles globaux vous rendra beaucoup la vie plus facile et votre processus de développement beaucoup beaucoup plus rapide. Il apporte toute la facilité d'utilisation des styles prédéfinis "petits", "moyens" et "grands" de style Bootstrap, avec l'avantage d'avoir tous ces styles créés de manière réfléchie et intentionnelle par les concepteurs pour votre application spécifique et la base d'utilisateurs.

Bibliothèques d'icônes

Les bibliothèques d'icônes sont, eh bien, des bibliothèques d'icônes – la partie importante ici est que toutes les icônes sont cohérentes. Qu'il s'agisse d'une bibliothèque tierce que votre équipe de conception a choisi d'utiliser exclusivement ou d'un ensemble d'icônes entièrement personnalisées pour votre application, il est important de spécifier un ensemble d'icônes afin de ne pas finissez par utiliser des icônes de différents ensembles qui ont tous des styles d'illustration, des épaisseurs de ligne et des tailles différents. Que votre bibliothèque d'icônes soit une collection de SVG ou une police d'icônes, l'important est de savoir quelles icônes vous devez choisir, ce qu'elles sont appelés et où ceux-ci icônes en direct.

Bibliothèques de composants

Image de : https://www. telerik.com/kendo-react-ui/components/grid/

Vous connaissez probablement déjà les bibliothèques de composants, comme KendoReact par exemple (et si vous n'êtes pas , puis-je suggérer Le guide ultime pour créer une bibliothèque de composants comme introduction ?), mais saviez-vous qu'ils pouvaient être inclus dans un système de conception plus large ? Comme mentionné ci-dessus, l'un des principaux avantages ici est de partager ce qui était auparavant une ressource spécifique au développement avec des personnes extérieures à l'équipe de développement. C'est un excellent exemple de la façon dont les systèmes de conception sont vraiment une voie à double sens : ce n'est pas seulement une collection de choses exclusivement conçues, c'est un lieu de collaboration concepteur/développeur.

Documenter vos composants est également une chose incroyablement utile pour accélérer accélérer l'intégration des nouveaux membres de l'équipe, qu'ils soient designers ou développeurs. Rien ne vous aidera à vous faire une idée plus rapide d'une base de code et d'une application que de pouvoir examiner tous les éléments de base qui la composent, en voyant toutes les variantes, les conceptions, la façon dont elles sont construites.

C'est aussi extrêmement utile si vous avez des composants non standard spécifiques à l'application que les nouveaux utilisateurs ne reconnaîtront peut-être pas uniquement par leur nom. J'ai déjà travaillé dans une entreprise où le "Walkaround" était un composant courant et souvent utilisé… mais ce n'est pas comme si vous trouviez cela dans une bibliothèque de composants tiers ! C'était quelque chose de totalement personnalisé, créé pour leurs besoins spécifiques de visualisation de données. Pouvoir le rechercher dans leur système de conception et voir des exemples d'utilisation a rendu l'incorporation de ce composant dans les fonctionnalités beaucoup plus facile. exemple de mise en page"/>

Image de https://www.designer-daily.com/the-use-of-grids-in-website-design-6639[19659003]Avec l'avènement de CSS Grid, les systèmes de grille ont attiré beaucoup plus d'attention du côté du développement. Mais du côté de la conception, ce n'est pas exactement un nouveau concept : l'idée d'utiliser une grille pour organiser et disposer les éléments. est aussi ancienne que la conception elle-même. Les concepteurs d'imprimés utilisaient des grilles pour ajuster les informations sur les pages physiques et créer une hiérarchie visuelle pour guider l'œil du spectateur à travers le contenu. Les mêmes concepts fonctionnent aussi bien pour la conception d'interface utilisateur. En fait, toute conception Web et d'interface utilisateur est naturellement basé sur une grille, juste en raison de la façon dont HTML et CSS fonctionnent ! C'est un mariage parfait.

En créant des systèmes de grille qui peuvent être réutilisés pour di différentes pages de votre application ou de votre site, vous pouvez vraiment accélérer le temps nécessaire à la création de conceptions et à la création d'interfaces. Cela aide également à créer cette cohérence dont nous avons parlé plus tôt; lorsque la mise en page est prévisible, les utilisateurs apprennent rapidement où ils peuvent s'attendre à ce que divers éléments vivent et ce qui se passera lorsqu'ils interagissent avec certaines choses. Sans ce type de cohérence visuelle, il faut plus de temps à vos utilisateurs pour comprendre ce qui se passe sur chaque page et où ils doivent aller pour accomplir leurs tâches. Sans oublier que c'est comme démarrer vos processus de conception et de développement avec un code de triche ! Il vous donne un modèle pour commencer, au lieu d'une page complètement vierge. /www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/

Les guides de style sont en quelque sorte le système de conception original ; ils documentent les règles de haut niveau pour la présentation visuelle d'une marque. Cela inclut généralement une poignée de jetons de conception les plus utilisés (comme les couleurs et les polices de la marque), mais aussi des éléments comme des exemples du type d'imagerie à choisir (par exemple, des illustrations amusantes et ludiques ou des photographies en noir et blanc uniquement), les logos et les variantes de logo, ou tout caractère ou icône spécifique à la marque. Fondamentalement, c'est un endroit pour documenter les actifs liés à la marque et comment ils doivent être utilisés. extérieurs à votre entreprise qui ont besoin d'utiliser les actifs de votre marque. Cela garantit qu'une apparence cohérente se produit toujours, même lorsque le travail est effectué par des personnes moins familières avec votre marque. C'est un document pratique à avoir sous la main pour les personnes qui ont besoin d'informations, mais qui n'ont pas besoin du même niveau de détail qu'un employé à temps plein. ]

Image de https://www.contentharmony.com/blog/great-brand-guidelines/

Enfin, une chose merveilleuse à inclure dans votre système de conception est un langage de marque et un guide de ton de voix.Capturer un sentiment ou un ton peut être difficile, mais la façon dont vous parlez à vos utilisateurs a vraiment un À quel point vous êtes décontracté ou formel, que vous incluiez de petites blagues et plaisanteries ou que vous restiez tout à fait strict, que vous utilisiez des contractions ou non, tout cela s'ajoute à la façon dont votre marque "sonne" lorsque les utilisateurs naviguent votre application.

Vous pourriez être rapide à supposer que cela n'a pas d'importance pour les développeurs, car ce ne sont pas eux qui sont responsables de la rédaction. jamais, basé sur l'expérience, je serais prêt à parier que vous avez écrit plus de microcopies que vous ne le pensez ! Les développeurs finissent souvent par remplir de petits morceaux de texte pendant le processus de développement : texte des boutons, étiquettes de formulaire, légendes, texte alternatif, etc. Ces petites choses s'additionnent sur votre interface ! Avoir un guide de langue de marque peut vous aider à choisir entre « Allons-y ! » ou "Suivant" – et ils font se sentent différents de vos utilisateurs. pensez que vous ET vos utilisateurs bénéficiez lorsque les concepteurs et les développeurs sont équipés pour bien travailler ensemble. Les systèmes de conception sont un moyen fantastique d'atteindre cet objectif, en créant une source unique de vérité à laquelle les deux parties peuvent se référer. Avoir tout cela compilé permet aux développeurs d'intégrer facilement de nouveaux membres d'équipe, de trouver rapidement des réponses aux questions de base sans avoir à contacter quelqu'un et d'attendre une réponse, de télécharger des ressources communes telles que des logos et des icônes, et bien plus encore. Sans parler de la cohérence globale et de la facilité de communication qu'un système de conception peut offrir ! Si vous en avez un dans votre entreprise et que vous ne l'utilisez pas, j'espère que cela vous a inspiré à commencer à profiter d'une ressource aussi formidable. Et si vous n'en avez pas encore… c'est peut-être quelque chose qui vaut la peine d'être suggéré !