Tout ce que vous devez savoir sur les systèmes de conception

Publié: 2020-05-06

La conception devient de plus en plus complexe. Les processus de conception modernes nécessitent une étroite collaboration interfonctionnelle entre toutes les équipes impliquées dans la création du produit. Lorsque le délai de mise sur le marché joue un rôle si essentiel dans le développement de produits, les équipes de conception s'efforcent d'optimiser le processus pour créer des produits rapidement, mais sans sacrifier l'expérience utilisateur.

Pour ce faire, les équipes produit modifient la façon dont elles conçoivent les produits numériques : elles introduisent des systèmes de conception pour rendre le processus de conception plus transparent et prévisible.

Dans cet article, nous explorerons le concept de systèmes de conception et les étapes clés pour créer de nouveaux systèmes de conception.

Appliquez votre système de conception à l'aide du style de thème d'Elementor

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

Un système de conception est un ensemble de composants réutilisables, guidés par des pratiques claires, permettant à une équipe produit de créer un produit plus rapidement. Considérez un système de conception comme une source unique de vérité pour les équipes produit, leur permettant de concevoir et de développer des produits.

De nombreux designers se demandent ce qu'ils devraient inclure dans leur Design System. Chaque organisation a des besoins différents et il est impossible de fournir une liste universelle d'éléments que chaque système de conception devrait utiliser. Cependant, de nombreux systèmes de conception partagent certains éléments :

Composants et motifs

Les composants sont des éléments fonctionnels de la conception. Considérez-les comme des éléments constitutifs de votre système de conception. Combinés, les composants forment des bibliothèques auxquelles les concepteurs se réfèrent et qu'ils utilisent lorsqu'ils créent des produits.

Les modèles sont les protocoles qui fournissent une forme de manuel de construction auquel les concepteurs peuvent se référer lorsqu'ils utilisent des composants.

Guides de style

Les guides de style sont des livrables qui se concentrent sur les styles graphiques (couleurs, polices, illustrations) et leur utilisation. Les guides de styles doivent être créés en tenant compte des valeurs de la marque (c'est-à-dire en utilisant les couleurs de la marque pour les éléments fonctionnels tels que les boutons d'appel à l'action).

Principes de conception

Les principes de conception sont les règles directrices qui aident les équipes à prendre des décisions de conception significatives. Les principes de conception reflètent les convictions partagées de l'équipe de conception.

Comment construire un système de conception en 10 étapes

Pas:

  • 1. Analysez votre processus de conception actuel
  • 2. Identifier l'alphabet de la marque
  • 3. Effectuer un audit de l'interface utilisateur
  • 4. Définir les principes de conception
  • 5. Créer une bibliothèque de composants/modèles
  • 6. Définir des règles
  • 7. Établir une stratégie de gouvernance
  • 8. Définir la structure des éléments
  • 9. Assurez-vous que toutes les équipes utilisent la langue partagée
  • 10. Communiquer les changements

1. Analysez votre processus de conception actuel

Pour mieux comprendre le type de système de conception que vous souhaitez mettre en œuvre, vous devez commencer par examiner et analyser l'approche actuelle de la conception dans votre entreprise. Trouvez les réponses aux questions suivantes :

  • Quel est le processus de conception suivi par votre entreprise ?
  • Quels sont les outils existants que votre entreprise utilise?

Il est également recommandé d'évaluer le niveau de maturité de conception des équipes produit. Cette connaissance vous aidera à estimer le temps nécessaire pour introduire le système dans votre organisation.

2. Identifier l'alphabet de la marque

Le langage visuel que les designers utiliseront doit être basé sur l'alphabet d'une marque. L'alphabet comprend l'identité de la marque (valeurs de la marque et du produit) et le langage de la marque (couleurs, polices, formes, animations, voix et ton). Définissez l'identité d'une marque, ainsi que son langage, en passant en revue les directives de la marque et en interrogeant les parties prenantes, puis référez-vous à ces informations lorsque vous travaillez sur les principes de conception et les guides de style.

3. Effectuer un audit de l'interface utilisateur

L'un des problèmes les plus dangereux dans la conception de produits est la duplication de conception, qui conduit à la fragmentation, et la fragmentation conduit à l'incohérence. L'identification de la duplication des éléments de conception aide une équipe à éviter le scénario dans lequel les membres de l'équipe construisent un élément à partir de zéro pour découvrir qu'une version similaire existe déjà.

C'est pourquoi la classification de tous les composants visuels du produit doit être la première tâche de l'équipe de conception avant de créer un système de conception. Vous devez examiner les qualités visuelles de vos éléments de conception. Cette activité a deux objectifs :

  1. Mettez en évidence les zones présentant les incohérences les plus importantes au sein du produit.
  2. Identifier les éléments et composants les plus importants et les plus utilisés du produit.

Un audit de l'interface utilisateur est un processus en plusieurs étapes. Il est essentiel d'identifier d'abord les principales propriétés de l'interface utilisateur, telles que les couleurs, les polices, les images, et ensuite seulement, d'analyser comment ces propriétés doivent être utilisées dans les composants. Utilisez un outil comme CSS Stats pour voir combien de couleurs et de polices uniques vous avez dans vos feuilles de style.

Google's background colors
Google.com a 62 couleurs d'arrière-plan uniques.

Après avoir obtenu des informations sur le style, vous pouvez explorer les composants. La méthodologie de conception atomique de Brad Frost vous aidera à décomposer chaque page Web en éléments individuels (atomes, molécules et organismes).

Brad Frost’s Atomic Design methodology
La méthodologie de conception atomique de Brad Frost

4. Définir les principes de conception

Comprendre les raisons qui sous-tendent les décisions de conception est essentiel pour créer une expérience utilisateur exceptionnelle. C'est pourquoi, lorsqu'il s'agit d'établir les principes de conception d'un système, il est essentiel de coordonner les équipes autour d'un ensemble clair d'objectifs pour maintenir la cohérence et l'équilibre.

Les principes de conception doivent répondre à trois questions fondamentales :

  • Ce que nous construisons,
  • Pourquoi nous le construisons
  • Comment allons-nous le construire

Il est essentiel que les principes de conception reflètent véritablement les valeurs de votre organisation et soient conformes à la vision globale.

5. Créer une bibliothèque de composants/modèles

Collectez toutes les parties fonctionnelles et décoratives de votre interface utilisateur - champs de saisie, boutons, formulaires, images, pour n'en nommer que quelques-uns - évaluez-les en fonction des besoins du projet (conformément aux besoins des utilisateurs/objectifs commerciaux) et ne laissez que ce dont vous avez besoin .

6. Définir des règles

L'un des principaux objectifs d'un système de conception est d'étendre la direction créative. Le système ne doit pas verrouiller les concepteurs dans une direction de conception particulière. Au lieu de cela, il devrait donner aux concepteurs et aux développeurs un cadre qui offre suffisamment de liberté pour explorer diverses approches avant d'en choisir une à suivre.

Dans son livre « Design Systems », Alla Kholmatova définit deux types de règles :

  • Règles strictes. Les concepteurs doivent suivre un processus rigoureux pour introduire de nouveaux composants et modèles dans le système de conception.
  • Règles lâches. Les règles lâches agissent plus comme des recommandations que comme des contraintes strictes. Les concepteurs et les développeurs peuvent ignorer les règles lorsqu'ils pensent que sans règles, ils peuvent créer un meilleur design.

En trouvant un équilibre entre des règles strictes et lâches, nous trouvons un juste milieu entre rigueur et flexibilité.

7. Établir une stratégie de gouvernance

Les systèmes de conception sont dynamiques et en constante évolution. C'est pourquoi il est crucial de définir le processus d'approbation des modifications dans votre système de conception. La création d'une stratégie de gouvernance claire est essentielle pour s'assurer que votre système de conception peut s'adapter aux changements.

Dans l'article Team Models for Scaling a Design System, Nathan Curtis définit trois modèles de gouvernance différents :

1. Modèle solitaire : Dans ce modèle, un « suzerain » (un individu directement responsable ou un groupe d'individus) dirige le système de conception.

the solitary model illustration
Dans le modèle solitaire, le suzerain met un système à disposition. Image : Nathan Curtis.

2. Modèle centralisé : Dans ce modèle, une équipe est en charge du système et guide son évolution.

the centralized model illustration
Dans le modèle centralisé, une équipe de conception centrale produit et prend en charge un système pour les autres équipes. Image : Nathan Curtis.

3. Modèle fédéré : Dans ce modèle, plusieurs personnes de plusieurs équipes sont en charge du système.

the federated model illustration
Dans le modèle fédéré, les concepteurs de plusieurs équipes de produits travaillent ensemble sur le système. Image : Nathan Curtis.

Chacun des modèles a des forces et des faiblesses, mais le modèle solitaire est le plus fragile d'entre eux car il comporte un risque inhérent - lorsqu'une personne est en charge de tant de choses, cette personne peut rapidement devenir un goulot d'étranglement pour l'achèvement de nombreux Tâches.

Dans de nombreux cas, il est possible d'utiliser une combinaison de modèles. Par exemple, le modèle de l'équipe Salesforce est une combinaison de modèles centralisés et fédérés. Lightning Design System de Salesforce dispose d'une équipe centrale chargée de gérer le système, mais il existe également des contributeurs qui agissent comme une fédération de praticiens.

8. Définir la structure des éléments

De nombreux systèmes de conception souffrent de la duplication d'éléments fonctionnels : les membres de l'équipe créent des composants trop concentrés sur un cas à usage unique. En conséquence, le système devient inflexible et ses utilisateurs (concepteurs et développeurs) doivent créer de nouveaux composants à chaque fois qu'ils doivent couvrir un nouveau scénario.

Si nous analysons un système de conception réussi comme Material Design, nous remarquons que de tels systèmes sont hautement réutilisables. La grande réutilisabilité permet aux concepteurs et aux développeurs d'utiliser la conception matérielle comme base de leurs produits.

Il est recommandé de développer des composants qui ne sont pas liés à un cas à usage unique mais peuvent être réutilisés dans plusieurs contextes. Pour être réutilisables et évolutifs, les composants doivent être les suivants :

  • Modulaire. Les composants modulaires sont autonomes — ils n'ont aucune dépendance. La modularité permet de créer des composants réutilisables et interchangeables.
  • Composable. Il est possible de créer de nouveaux composants en combinant des composants existants.
  • Personnalisable. Il est possible d'ajuster et d'étendre les composants pour les faire fonctionner dans une variété de contextes.

9. Assurez-vous que toutes les équipes utilisent la langue partagée

Le but fondamental d'un design system est de faciliter le travail des équipes, c'est pourquoi encourager chacun à l'utiliser est encore plus important que d'en construire un. Les systèmes de conception doivent être intégrés au flux de travail des équipes, devenir un élément clé de la productivité quotidienne d'un concepteur et d'un développeur et offrir de la valeur aux membres de l'équipe.

Si vous venez de commencer à intégrer un système de conception dans le processus de conception de votre organisation, menez une série d'entretiens pour comprendre comment les gens l'utilisent et utilisez ces informations pour ajuster votre système de conception.

10. Communiquer les changements

Un système de conception n'est pas une collection statique d'artefacts ; c'est un sous-produit de la conception de votre produit qui évolue avec l'organisation. Une fois que les équipes commencent à utiliser un système de conception, il est essentiel de communiquer les changements et les mises à jour à l'ensemble de l'organisation. Expédiez des mises à jour régulièrement et avec un changelog. Le journal doit indiquer aux utilisateurs quels changements ont été introduits dans la nouvelle version et comment les mises à niveau auront un impact sur leur travail.

Salesforce design system's what's new page
Lightning Design System de Salesforce a une page intégrée « Quoi de neuf » qui contient des informations sur les modifications qui ont été introduites dans le système de conception

Exemples de systèmes de conception

Voici quelques systèmes de conception populaires.

Conception matérielle par Google

Material Design est un langage de conception développé par Google en 2014. L'idée de créer ce langage de conception était simple : donner aux concepteurs et aux développeurs un outil qui leur permettra de créer des produits intuitifs et beaux. Material Design est un système très adaptable qui peut être utilisé pour divers produits.

Material Design by Google

Système de conception Lightning par Salesforce

Lightning Design System permet aux équipes produit de créer des expériences d'entreprise riches et des applications personnalisées avec les modèles et d'établir les meilleures pratiques natives de Salesforce.

Lightning Design System by Salesforce

Conclusion

Un système de conception bien conçu sert d'étoile polaire au développement de votre produit. Cela devient une partie de l'ADN d'une organisation qui aide les équipes produit à produire des expériences utilisateur plus cohérentes et amplifie une culture axée sur la conception. Les systèmes de conception encouragent les personnes qui travaillent sur le produit à regarder au-delà des éléments constitutifs et à réfléchir à l'objectif de leur conception.

Avec Elementor 3.0, vous gérez facilement vos systèmes de conception à partir d'une page.