Comprendre les systèmes de conception et les modèles

Publié: 2022-03-11

Bien que cela puisse sembler être une nouvelle façon d'aborder le flux de travail numérique, le concept de système de conception n'est pas « nouveau » pour les industries créatives. Au cœur de tout système de conception se trouve un langage de modèles de conception qui résout les problèmes courants auxquels un concepteur peut être confronté.

L'idée d'un langage de motifs est née il y a plus de 40 ans de l'architecture et du design urbain et peut être appliquée à presque toutes les disciplines du design.

Les éléments du langage de conception citent Christopher Alexander, auteur de A Pattern Language. Les éléments de ce langage sont des entités appelées patterns. Chaque modèle décrit un problème qui se produit encore et encore dans notre environnement, puis décrit le cœur de la solution à ce problème, de telle sorte que vous pouvez utiliser cette solution un million de fois.
Les systèmes de conception sont un sujet de discussion populaire dans le monde actuel des produits numériques, mais l'utilisation d'un ensemble systématisé de solutions de conception reproductibles n'est pas une idée nouvelle.

Les systèmes de conception comme Material Design sont un sujet à la mode, mais une approche systématique de la conception fait partie intégrante des éditeurs de magazines depuis des décennies. En parcourant les pages de n'importe quel grand magazine, il est facile de voir que chaque section est définie de manière unique comme un modèle avec une mise en page, des polices, des couleurs, etc. communes.

Les modèles de conception utilisés pour les sections de page permettent au texte et aux images d'être organisés de manière cohérente et efficace d'une manière qui complète la vision créative d'une publication.

En regardant les magazines concurrents, il est facile de voir comment le langage de conception de l'un se compare à l'autre.

Composants du système de conception de magazines
Pendant des décennies, l'industrie du magazine s'est appuyée sur des systèmes de conception pour formater rapidement et de manière cohérente le contenu écrit et visuel.

S'ils ne l'ont pas déjà fait, les concepteurs de nombreux secteurs intégreront bientôt un langage de conception et des modèles dans leur flux de travail. Pour les concepteurs de produits numériques, ce sujet évolue et beaucoup apprennent à concevoir à partir de bibliothèques de modèles au sein de systèmes complexes pour la première fois (ou même aident à les définir).

Il y a une complexité supplémentaire lors de l'alignement des modèles de conception de logiciels avec une base de code frontale, ce qui peut rendre l'apprentissage d'un langage de conception écrasant.

Les langages de conception sont holistiques

Un langage de conception, comme tout langage, est complexe et contient des nuances qui peuvent sembler déroutantes à apprendre au premier abord. C'est pourquoi il est utile de penser à un langage de conception comme un système complexe "composé de nombreux composants qui peuvent interagir les uns avec les autres".

Pour comprendre un système complexe, il est important de penser le langage de conception de manière holistique :

  • Commencez par une vue d'ensemble de l'impact du design sur une marque ou une entreprise.
  • Ensuite, réfléchissez au rôle du design avec des équipes interfonctionnelles et d'autres designers.
  • Enfin, considérez comment le design affecte le produit et les utilisateurs à un moment donné.

Cette perspective holistique met l'accent sur une manière systématique de penser les workflows de conception et permet d'appliquer facilement un langage de conception lors de la résolution de problèmes spécifiques.

En pratique, un langage de conception est une ressource utilisée pour aider à réduire la redondance et à améliorer la continuité dans la façon dont les concepteurs abordent les problèmes de conception courants. Par exemple, un problème courant auquel sont confrontés les concepteurs de produits est : "Je dois placer un appel à l'action pour que les utilisateurs cliquent".

Modèles de conception de boutons Amazon
Les systèmes de conception sont particulièrement efficaces pour résoudre les problèmes récurrents de conception de produits, comme le besoin d'un bouton d'appel à l'action.

C'est quelque chose qui a déjà été résolu, donc au lieu de réinventer la roue (ou le bouton), le langage de conception définirait un "modèle de conception" de bouton réutilisable avec des propriétés prédéfinies, telles que la couleur et la forme, ainsi que des directives pour les meilleures pratiques.

Un langage de conception de produits numériques est généralement une ressource interfonctionnelle dont l'objectif est d'améliorer l'efficacité du flux de travail et la collaboration des équipes.

Dans certains cas, le langage est étendu à une bibliothèque de modèles en direct qui est directement connectée à la base de code frontale et à l'analyse métrique des modèles. Ce type de système complexe avec diverses dépendances rend une approche holistique de la résolution de problèmes tout à fait nécessaire.

Modèles de conception complexes cités par le neuroscientifique Miguel Nicolelis. Avec ses milliards de neurones interconnectés, dont les interactions changent de milliseconde en milliseconde, le cerveau humain est un système complexe archétypal.
Selon le produit, l'équipe et les ressources, il existe différents degrés de détail et de complexité du système de conception.

Ce qui est génial dans l'apprentissage d'un langage de conception, c'est que les coéquipiers sont généralement assez passionnés par l'interface et les interactions utilisées pour définir un produit. Apprendre une nouvelle langue est généralement un challenge, mais cela peut aussi être une expérience immersive qui soude une équipe !

Questions courantes pour « concevoir » la pensée systémique

La maîtrise d'un langage de conception assurera la qualité du système grâce à l'évangélisation, qui peut inclure :

  • Former de nouveaux designers;
  • Mentorat d'employés juniors et gestion de sous-traitants ; ou
  • Travailler directement avec les ingénieurs pour affiner le front-end du produit avant une version.

Grâce à ces efforts de collaboration, un concepteur sera en mesure de s'assurer que les lignes directrices du système sont maintenues ou affinées en fonction des besoins.

Quelle que soit l'obligation, il existe quelques questions courantes sur les systèmes de conception pensant qu'un concepteur peut être tenu responsable :

À quoi dois-je penser lors de la conception dans un système de conception ?

Selon la complexité du système de conception, il est important de commencer par adopter une approche globale du problème à résoudre. Considérez l'exemple de bouton d'avant.

Si la couleur est prédéfinie sur #1f9efc et qu'un concepteur la définit sur #1b3e9b sans consulter au préalable d'autres concepteurs utilisant la même bibliothèque de motifs, cela peut provoquer une erreur système.

Lorsque vous travaillez au sein d'un système de conception, réfléchissez à l'impact du problème résolu sur l'ensemble du cycle de développement du produit. Dans de nombreux cas, il n'y aura pas, et ne devrait pas avoir, beaucoup d'impact car la bibliothèque de modèles a déjà été validée.

Si un problème à résoudre est nouveau pour le système de conception, il pourrait y avoir une opportunité de faire évoluer la bibliothèque de modèles et d'aider à définir un nouveau modèle de conception.

Lorsque le système évolue, il est nouveau dans le flux de travail d'une équipe. Ici, la flexibilité est nécessaire car les modèles de conception vont itérer au fil du temps. Cependant, s'il est facile de changer la couleur d'un bouton, la plus grande complexité du système doit être prise en compte à tout moment.

Pour cela, il est utile de définir une taxonomie pour organiser le système de conception et la bibliothèque de modèles. La terminologie utilisée doit être facilement compréhensible de manière interfonctionnelle.

Éléments du diagramme de modèle de conception Cliquez pour voir l'image en taille réelle.
Ce diagramme offre une hiérarchie de haut niveau pour la façon dont la bibliothèque de modèles d'un système de conception peut être organisée.


En regroupant les artefacts de conception dans des sujets communément compris, la bibliothèque de modèles permet au système de fonctionner dans les flux de travail d'équipe et de développer la communication de la manière dont les modèles de conception sont évoqués.

Comment savoir quand je dois casser un motif ou créer un nouveau motif dans un système de conception ?

La nécessité de casser ou de créer un nouveau modèle de conception dépend généralement de la maturité du système. Lorsqu'un système de conception évolue, les modèles changent fréquemment. Au fur et à mesure que le système est établi, un processus de demande de changement doit être mis en place pour aider à assurer la continuité et la qualité.

La complexité d'un système est également importante à prendre en compte. Si la modification d'un modèle a un impact sur d'autres concepteurs et équipes, le processus peut prendre plus de temps à mettre en œuvre et nécessite souvent un niveau d'effort ou de ressources plus important (par exemple, la mise à jour des directives du langage de conception, des bibliothèques de modèles ou de la base de code frontale).

Généralement, une bibliothèque de modèles n'est pas censée être rigide. Considérez-le comme une boîte à outils qui peut résoudre des problèmes et accomplir des tâches. Si toutes les tentatives de conception dans les limites de la bibliothèque de modèles n'atteignent pas les objectifs du projet, l'intuition peut conduire à la recherche d'un nouvel outil ou peut-être à une modification du modèle existant.

Jetez un oeil au schéma ci-dessous. Une règle générale est que l'identité et les éléments , qui sont les éléments de base de la marque, changent rarement car ils aident à définir la marque et les artefacts de conception.

Typographie et image de marque du système de conception

La plupart des grandes organisations ont des guides de style distincts pour les éléments liés à la marque, en particulier les logos, les couleurs et les polices, qui ne changent pas fréquemment. Pour des éléments tels que les boutons, cela peut ou non itérer en fonction de l'évolution du langage de conception, mais ceux-ci ont également des changements moins fréquents en raison de leur connexion à tous les aspects du produit.

Les changements de modèle de conception ou les nouveaux modèles surviennent souvent au niveau des composants et des interactions , car ils définissent les flux d'utilisateurs et les ensembles de fonctionnalités. Il est courant que de nouveaux flux d'utilisateurs soient définis dans une feuille de route de produit, en particulier lors du déploiement de fonctionnalités.

Les nouveaux modèles de conception auront des propriétés similaires aux modèles déjà définis dans la bibliothèque (telles que les polices et les couleurs), mais peuvent nécessiter des mises à jour d'interface ou des états interactifs qui s'ajoutent au langage de conception.

Le chef de produit ou le propriétaire du produit travaillant avec un concepteur fournira des exigences pour les nouvelles fonctionnalités qui s'alignent sur les objectifs de l'entreprise. Lorsque vous décidez de casser ou de créer un nouveau modèle de conception, souvenez-vous de la théorie des systèmes complexes et assurez-vous que la solution est une décision partagée.

Bibliothèque de langage de modèles de système de conception
Un exemple de page d'un guide de style de système de conception.

Voici quelques étapes à prendre en compte lorsque vous réfléchissez à la manière de casser ou de modifier un modèle de conception :

  1. Assurer le contrôle qualité et la continuité

    Rappelez-vous que la qualité est un objectif de produit partagé. Chacun est responsable de s'assurer que le système de conception fait son travail.

    Adoptez toujours cette approche holistique et réfléchissez à l'impact potentiel de la rupture d'un modèle ou de la création d'un nouveau modèle.

    Demande toi:

    • Est-ce que briser un schéma est le seul moyen de résoudre mon problème ?
    • Comment les autres équipes seraient-elles affectées si je brisais ce schéma ?
    • Qu'adviendrait-il de la bibliothèque de modèles si je brisais ce modèle ?
  2. Communiquer avec les collaborateurs

    Parlez aux concepteurs et aux membres de l'équipe interfonctionnelle pour voir si quelqu'un d'autre a les mêmes restrictions. Apprenez tout sur les exigences de la plate-forme et comment un modèle proposé fonctionnerait sur l'ensemble de la famille de produits.

    Demande toi:

    • Qui d'autre a travaillé sur ce produit ou cette plateforme ?
    • Quelles sont les meilleures pratiques de la plate-forme pour laquelle je conçois ?
    • À qui puis-je m'adresser pour m'aider dans ma décision et mes recommandations ?
  3. Comprendre les capacités frontales

    Découvrez ce qui est possible pour la mise en œuvre frontale. Si le changement est simplement une mise à jour des propriétés HTML/CSS/JavaScript, cela ne nécessite généralement pas de casser un modèle ou de créer quelque chose d'entièrement nouveau.

    Il pourrait plutôt s'agir d'une simple mise à jour de la directive sur le langage de conception. En tant que concepteur, il est important de travailler en étroite collaboration avec le front-end et éventuellement de trouver des moyens de collaborer de manière hebdomadaire ou quotidienne.

    Demande toi:

    • L'équipe frontale a-t-elle été impliquée dans cette mise à jour de conception ?
    • Le changement que j'envisage est-il une mise à jour frontale ?
    • Y a-t-il quelque chose qui manque dans les lignes directrices sur les meilleures pratiques ?
  4. Valider la décision

    S'il est déterminé qu'un nouveau modèle est nécessaire, la décision doit être validée avec les collaborateurs et les utilisateurs finaux et alignée sur les objectifs de l'entreprise.

    Si les composants frontaux sont liés à des métriques, un test A/B rapide aidera à la validation. Sinon, effectuer des tests d'utilisabilité fonctionnera très bien.

    Demande toi:

    • Notre équipe dispose-t-elle d'un processus de demande de modification pour valider les nouveaux modèles de conception ?
    • Que dois-je faire pour valider ma décision ?
    • Cette décision crée-t-elle un nouveau flux d'utilisateurs ou s'agit-il d'une fonctionnalité supplémentaire ?

Même travail, état d'esprit différent

Lors de la conception au sein d'un système, il est essentiel que les concepteurs de produits adoptent l'état d'esprit global requis pour la prise de décision. Les principes d'un système complexe et de la pensée systémique aideront les concepteurs à mesure qu'ils évoluent dans leur carrière. Il en va de même pour le processus de construction à partir d'une bibliothèque de modèles.

Modèles de conception d'interface utilisateur
De Mailchimp à Mozilla, l'état d'esprit et la méthodologie utilisés pour créer une bibliothèque de modèles peuvent être appliqués à une gamme variée de produits et d'applications numériques.

Ces approches sont utiles pour démarrer un nouveau langage de conception ou contribuer à un langage existant, car une fois l'état d'esprit en place, les méthodes systématiques deviennent, eh bien, "systématiques".

Savoir que d'autres industries et disciplines de conception utilisent des méthodes similaires de rationalisation des flux de travail depuis de nombreuses années fournit aux concepteurs de produits un excellent point de référence pour les meilleures pratiques.

En fin de compte, la conception au sein d'un système ne transformera pas complètement la façon dont le travail est effectué. Bien sûr, il y aura de nouveaux outils pour connecter et gérer les complexités, mais en fin de compte, c'est un changement vers un état d'esprit holistique qui aidera vraiment à améliorer les flux de travail.

• • •

Pour en savoir plus sur le blog Toptal Design :

  • Comment créer un guide de style d'esquisse, une bibliothèque et un kit d'interface utilisateur
  • Énoncés des problèmes de conception - Ce qu'ils sont et comment les encadrer
  • Utilisez votre inspiration - Un guide des planches d'humeur
  • Conception collaborative - Un guide pour une conception de produits d'entreprise réussie
  • Concevoir l'avenir : les outils et les produits qui nous attendent