Comment construire un système de conception avec une petite équipe

Illustration de Chris Gilleard

Hier soir, ma petite équipe et moi sommes partis faire un peu de réseautage et en apprendre davantage sur Design Systems. En tant que tel était le mot à la mode de 2017, nous étions impatients de savoir comment nous pourrions créer le nôtre.

Nous avions entendu tous les avantages merveilleux de la création d'un système de conception: gagner du temps, réduire les débats, la collaboration, l'adoption, etc. J'étais excité!

Toutes les discussions ont porté sur la création d'un système de conception. Cependant, il s’agissait de grosses équipes ou de ressources dédiées, même d’une équipe DesignOps (2e mot à la mode de 2017) pour construire et maintenir le système de conception.

En fin de soirée nous sommes partis un peu découragés. Mais nous n'étions pas seuls. Au cours de la session de questions-réponses, beaucoup ont demandé:

"Comment puis-je construire un système de conception en tant que concepteur unique?"

"Je suis le seul designer, quel conseil tu as pour moi?"

Mais mon équipe et moi avons décidé de ne pas laisser cela nous arrêter. Nous allons toujours créer notre propre système de conception. Avant d’entrer dans les détails, voici un peu de contexte.

Qu'est-ce qu'un système de conception?

«Un système de conception offre une bibliothèque de styles visuels, de composants et d'autres problèmes documentés et publiés par un individu, une équipe ou une communauté sous forme de code et d'outils de conception afin que l'adoption de produits puisse être plus efficace et plus cohérente.» - Nathan Curtis

En termes simples, un système de conception est un ensemble de composants réutilisables permettant de lier des produits entiers.

De nombreuses personnes ont écrit des articles détaillés et des livres sur les systèmes de conception. En voici quelques exemples qui pourraient vous être utiles:

Guide de style par rapport au système de conception

Vous pensez peut-être, génial, mais n’est-ce pas simplement un guide de style?

«Un guide de style est un artefact du processus de conception. Un système de conception est un produit vivant, financé, avec une feuille de route et un carnet de commandes, au service d'un écosystème. »- Nathan Curtis

De plus, un système de conception est un ensemble de composants (ou molécules) de tailles différentes qui peuvent être assemblés de multiples façons pour créer une série de composants plus volumineux. La conception atomique de Brad Frost est l’inspiration pour la conception de composants.

Avantages d'un système de conception

«Le défi auquel nous sommes confrontés aujourd’hui est que les outils ne communiquent pas très bien entre eux, que les détails tombent à l’écart, qu’il existe un fossé énorme entre la conception et l’ingénierie et que nous devons faire beaucoup de travail manuel pour être sûr au-dessus de tout. ”- UX Bootcamp

En tant que petite équipe travaillant sur des logiciels d'entreprise B2B, nous nous sommes lancés dans la création d'un système de conception avec un temps, un budget et des ressources limités. Je voulais rappeler à notre équipe les avantages.

Globalement, notre équipe gagnerait du temps à cause de:

  • Débat réduit - inutile de perdre du temps à revoir les décisions de conception pour le même composant
  • Composants réutilisables rendant l'échelle possible
  • Augmentation de la collaboration - améliorez le travail à distance et dans différents bureaux

J'avais une raison égoïste de vouloir construire un système de conception. Je me suis vite rendu compte que si nous réussissions, nous pourrions «automatiser» de nombreuses tâches nous permettant d’avoir le temps de faire quelque chose que j’aime, résoudre des problèmes d’utilisateur! C'est le noyau de l'UX.

Structure du système de conception

Pour créer un système de conception, nous devons le décomposer et comprendre ses parties:

Pin UX - Système de conception

Un peu de recherche de l'âme est également impliqué. Quelques questions à poser lors de la création d'un système de conception:

  • Comment le système fonctionne-t-il aujourd'hui et à l'avenir?
  • Quelle est notre vision?
  • Quels problèmes essayons-nous de résoudre?
  • À qui ce problème a-t-il le plus d'impact?
  • Quel impact voulons-nous qu'un système de conception ait sur notre façon de travailler?

Comment les autres tentent-ils de l'aborder:

Comment notre petite équipe peut-elle créer un système de conception?

Où commencez-vous quand vous n’avez pas assez de ressources, de temps ou de budget?

1. Ne partez pas de zéro

"Si vous souhaitez faire une tarte aux pommes à partir de zéro, vous devez d'abord inventer l'univers." - Carl Sagan

Notre équipe examine actuellement les systèmes de conception existants afin de pouvoir - comme le dit Austin Kleon:

Voler comme et artiste - Austin Kleon

De nombreuses entreprises ont rendu publiques leurs systèmes de conception et ont même partagé des fichiers de croquis. J'ai partagé une liste ci-dessous. Ce fait, ainsi que les nombreuses autres ressources de sketch, fait de l’utilisation de Sketch un outil de choix.

En outre, il existe des outils qui peuvent vous aider à créer rapidement une base de référence pour votre système de conception:

2. Sachez avec quoi vous travaillez

Nous avons décidé qu'il était indispensable de procéder à un audit de l'interface utilisateur de tous nos sites et propriétés. Nous devrons peut-être demander quelques faveurs pour que cela soit fait. Mais puisqu'il ne s'agit que de documenter ce qui existe, il peut ne pas être aussi difficile d'obtenir de l'aide auprès d'autres personnes. Cela prendra du temps, mais à la fin, cela en vaudra la peine. Nous pourrons concevoir de manière globale lors de la création de nouveaux composants.

Cela peut être utile pour apprendre à mener un audit d'interface utilisateur:

3. Construisez comme vous allez

Un système de conception est un document évolutif. Réalisant que le travail n’est jamais terminé, nous avons décidé d’intervenir et de construire au fur et à mesure. Au fur et à mesure que nous travaillons de manière itérative sur nos projets, nous allons concevoir en tenant compte des composants et éventuellement mettre en place un système de conception. Heureusement, nous sommes quelques-uns, ce qui nous permet d’être collaboratifs et de «voler» les uns des autres.

Astuce: Construisez des symboles dans Sketch. Je sais, cela semble prendre beaucoup de temps, mais une fois que vous verrez le pouvoir des symboles, vous comprendrez le vieil adage:

"Vous devez aller lentement pour aller vite."

4. Connaissez vos limites

Commencer petit.

Certains systèmes de conception incluent des extraits de code. C’est l’objectif ultime, car cela augmentera l’adoption dans l’ensemble de la société et créera une expérience utilisateur cohérente. Cependant, ma petite équipe ne peut pas faire ça. Pas encore, c'est.

Nous prévoyons de commencer avec un fichier de croquis de composants simples. Une fois que nous serons assez loin, nous travaillerons avec nos développeurs frontaux pour créer du CSS. Permettre aux développeurs d’utiliser leur "arme de choix" en matière de code peut permettre au système de conception de vivre. Et comme les bases de code changent tous les jours, il peut être préférable d’en garder les mains libres.

5. Restez organisé

Cela semble simple, mais avec les projets qui s’empilent et s’imposent de plus en plus serrés dans les délais, il est plus facile de faire les choses «à la va-vite». Rester organisé prend du temps et n'est jamais terminé, mais cela garde tout le monde sain d'esprit et réduit le courrier électronique ou l'encombrement des fichiers volants. Alors que nous commençons à travailler sur de nouvelles choses en utilisant un kit d’interface utilisateur que nous allons construire avec l’un des outils énumérés ci-dessus, nous devons garder une trace. Sinon, nous finirons là où nous avons commencé - des styles différents partout!

La gestion des versions de documents est un rêve pour tous les concepteurs. Aucun produit n'a eu raison à 100%. Nous allons essayer Abstract et Plant de voir comment cela peut nous aider à rester sur la bonne voie. Travaillant pour une entreprise, la seule plate-forme en ligne que nous pouvons utiliser pour le stockage de fichiers est One Drive. Google Drive et Dropbox sont d’autres options si vous n’êtes pas restreint.

Ce sont les premiers pas que mon équipe et moi-même allons essayer pour commencer ce voyage. Les doigts croisés, nous progressons. J'adorerais entendre d'autres petites équipes, même une "équipe de un", pour savoir comment elles abordent ce défi.

Répertoire du système de conception

Comme promis, voici quelques systèmes de design inspirants ou permettant de "voler comme un artiste":

Bibliothèques de motifs / guides de style

Si vous trouvez cela utile, vous savez quoi faire maintenant. Suivez-moi pour obtenir plus d'articles et de tutoriels sur votre flux.