Les avantages de la création d'un système de conception

Les guides de style existent depuis des années et ont toujours été importants pour l'identité visuelle d'une entreprise, mais le changement de nom du terme a donné une nouvelle dimension à l'ensemble du concept.

Autrefois, un concepteur d'interface utilisateur créait une interprétation lâche des bases. Un aperçu des couleurs, des polices, des boutons et éventuellement du style des icônes et il serait enregistré sur un disque dur, uniquement pour être ouvert lorsqu'il est envoyé à des agences externes qui ont besoin d'un coup d'œil sur une direction visuelle pour un prochain projet, ou de nouveaux entrants dans l'équipe de conception, mais il est très rarement tenu pour les concepteurs internes qui l'utilisent.

La principale richesse de connaissances était généralement logée solidement au premier plan du cerveau du designer. Cela signifierait un barrage constant de problèmes pour essayer de se souvenir si un certain motif visuel a déjà été utilisé quelque part. Cela, 9 fois sur 10, finirait dans un gâchis chaotique d'incohérences.

Ces dernières années, le guide de style a été rafraîchi et avec l'introduction du concept de système de conception ou de langage de conception. Cela s'accompagne d'une toute nouvelle approche qui peut avoir un effet épique sur la façon dont une équipe produit aborde la conception dans son ensemble.

Avec un système solide, cohérent, bien expliqué et pensé, l'aspect visuel de la création d'un design devient totalement modulaire. Des produits tels que Craft by Invision ou Brand.ai ont rendu la phase de conception visuelle presque glisser-déposer dans une certaine mesure.

Créer de la sécurité en sachant que les éléments que vous utilisez sont cohérents avec tous les autres concepteurs de l'équipe. Ils suppriment toute animosité de la phase de conception visuelle, presque à un niveau où la création de prototypes basse fidélité appartient au passé.

« Les styles vont et viennent. Un bon design est un langage, pas un style. – Massimo Vignelli

Je ne vais pas utiliser cet article pour expliquer comment créer exactement un système de conception. J'ai déjà écrit un article à ce sujet : Création d'un langage de système de conception. Il s'agit plutôt d'une discussion à sens unique sur la façon dont une équipe de conception peut bénéficier d'un investissement dans un système de conception.

Une introduction à notre système de conception – QUIK

Au cours des dernières années, j'ai été fortement impliqué dans la création de systèmes de conception dans diverses entreprises, des startups aux organisations bien établies. Ma dernière entreprise a été de créer notre système de conception pour Qstream.

Dès le début de mon passage chez Qstream, j'ai réalisé à quel point il était essentiel que nous présentions un nouveau système fonctionnel à notre équipe de conception le plus rapidement possible. Des incohérences et de mauvais choix de conception ont tourmenté le produit, et à mesure que le produit et l'équipe de conception se sont élargis, il était essentiel de stabiliser le navire et de créer un langage que chaque concepteur pourrait totalement.

Et avec cela, nous avons commencé à créer notre nouveau système de conception, bien nommé QUIK - Q stream U ser I nterface K it.

Étape 1 : Incohérences

Encore une fois, je n'irai pas trop loin dans le processus de création du système, mais je vais vous expliquer rapidement comment nous nous sommes sortis des mauvaises herbes.

La première chose à faire était de faire un audit total des composants visuels au sein du produit. Brad Frost a rédigé un excellent article sur la façon dont vous procédez à un audit de l'interface utilisateur si vous êtes intéressé.

Cela peut être une tâche horrible, fastidieuse et monotone, mais c'est tellement bénéfique. Il a) vous permet d'avoir une compréhension totale de l'emplacement des principales incohérences b) vous donne un très bon aperçu des éléments qui sont importants et utilisés de manière cohérente dans tout le produit c) vous donne un cours accéléré sur le fonctionnement exact du produit et d ) vous permet de montrer à l'ensemble de l'entreprise les faiblesses du système visuel existant et la raison exacte pour laquelle un nouveau système de conception cohérent est nécessaire.

Un extrait de notre audit de l'interface utilisateur mettant en évidence l'incohérence entre l'interface utilisateur des plates-formes.

Étape 2 : Création des éléments

Nous avons décomposé notre système en 3 entités différentes.

1. Marque - L'identité de marque d'un produit est composée d'éléments clés qui créent l'identité visuelle. Les couleurs, la typographie et l'iconographie sont au cœur de toute plateforme.
2. Éléments – Les éléments sont constitués des plus petites pièces réutilisables du système. Ces éléments sont constamment recyclés dans tous les domaines du système. (Boutons, entrées)
3. Composants - Un composant est une collection d'éléments, qui sont couramment utilisés les uns à côté des autres pour identifier un modèle commun dans un flux. (Alertes, tableaux, cartes, etc.)

L'étape suivante consiste à hiérarchiser, sur la base de l'audit de l'interface utilisateur, les éléments les plus couramment utilisés dans le produit. Ce seront les premiers domaines que vous aborderez en premier.

Une fois que nous avons identifié les éléments clés du système, il était temps de commencer à créer le style et les règles autour de chaque domaine. Nous avons d'abord abordé les couleurs, la typographie, l'espacement et l'iconographie générale avant de passer aux éléments plus formés tels que les boutons, les entrées, etc.

Un aperçu à vol d'oiseau de l'ensemble de notre système à ce jour.

Évidemment, plus le système est profond, moins les éléments sont utilisés fréquemment, mais cela fait partie de la croissance du système et de la cohérence du langage global dans tous les aspects du produit.

(Nous avons également un autre projet en cours autour de notre style d'illustration mais je vais le garder pour un autre article, vous pouvez en voir plus ici)

Un échantillon de notre style illustratif utilisé sur la plateforme.

Étape 3 : Mise en œuvre

Nous sommes actuellement dans cette phase. Pour être honnête, nous ne sortirons probablement jamais de cette phase. Une chose que vous devez réaliser avant de relever un défi comme celui-ci, c'est qu'il ne finira jamais. Vous développez un produit, ce n'est pas un projet qui finira par se terminer. Il sera constamment en évolution et en croissance.

Tout ce que vous avez à faire est de jeter un coup d'œil à la façon dont les équipes de produits se sont restructurées pour répondre aux besoins des équipes de système de conception, beaucoup optant pour des concepteurs uniquement concentrés sur le travail direct sur leur système de conception, rien d'autre. Le système est devenu une partie intégrante d'un noyau de produits. Lorsqu'il est créé correctement, un système de conception crée de la concentration, de la clarté et de la confiance et, à son tour, créera de la cohérence dans l'ensemble du produit et accélérera le développement du produit. Qu'est-ce qu'il n'y a pas à aimer!

« Un système de conception n'est pas un projet. C'est un produit au service des produits. –Nathan Curtis

Ligoter les systèmes

Créer un système de conception qui fonctionne sur l'ensemble du produit est une chose. Nous sommes également en train de créer des directives de marque et de définir nos principes de conception. (Encore une fois, plus d'articles à suivre concernant notre processus).

Nous pensons qu'il est essentiel de créer une base solide dans tous les aspects de la conception avant d'aller plus loin, car sans l'échafaudage approprié en place, cela causera des problèmes sur toute la ligne. La création d'un ensemble solide de lignes directrices et de principes nous aidera à nous guider dans la bonne direction lorsque nous commencerons à passer à l'échelle.

Le plan, une fois que nous aurons QUIK à un niveau que nous estimons consommable, est de créer un Playbook qui contiendra les principales caractéristiques de la personnalité et de l'entité de base de nos produits.

• Directives de la marque - un ensemble de directives qui présenteront la personnalité de notre marque ainsi que les caractéristiques clés telles que le ton de la voix, les couleurs, les contraintes du logo, etc.
• QUIK - un système réuni pour unir nos convictions et nos méthodologies de conception sur notre plate-forme en un seul endroit central.
• Principes de conception - Le but des principes est de garantir que nous restons ancrés à tout moment à ce qui est vraiment important pour Qstream et nos clients. Ils nous aideront à prendre des décisions qui correspondent à leurs objectifs.

Aller de l'avant

Nous nous efforcerons de créer une cohérence sur notre plateforme. Nous avons encore un long chemin à parcourir. Tout le monde, de tous les côtés de l'équipe produit, est pleinement conscient que c'est un défi monstrueux, mais nous sommes également conscients de son importance pour l'évolutivité du produit.