Être un ingénieur logiciel et naviguer à travers figma se moque d'entendre des mots comme la conception matérielle m'a fait me demander ce que c'est?

Une simple recherche sur Google donne la définition suivante

Material est un système de conception créé par Google pour aider les équipes à créer des expériences numériques de haute qualité pour Android, iOS, Flutter et le Web .

Eh bien oui, je sais qu'il a été créé par Google et vous dites que c'est un système de conception, mais qu'est-ce que c'est qu'un système de conception en premier lieu.

Faire défiler aveuglément le site Web du matériel m'a donné le vertige, c'est pourquoi j'ai pensé commencer cette quête en comprenant un système de conception en termes clairs en posant des questions simples.

J'espère que cette petite lecture vous aidera à démystifier les systèmes de conception afin que vous n'ayez pas de mal à comprendre les jargons publiés sur le matériel ou d'autres sites Web.

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

Le système de conception est un ensemble de composants et les normes qui guident ces composants quant à la manière dont ils doivent fonctionner ensemble dans un environnement cohérent.

En termes simples, il s'agit d'un ensemble de composants d'interface utilisateur accompagnés de règles qui dictent la manière dont ils doivent être utilisés lors de la conception de votre produit.

Mais pourquoi utiliser un design system ?

L'utilisation d'un système de conception présente les avantages suivants :

Cohérence :
L'utilisation d'un système de conception nous permet d'atteindre les cohérences suivantes :

• Cohérence visuelle : augmente la capacité de l'utilisateur à apprendre un produit.
• Cohérence fonctionnelle : Garantit que l'utilisateur obtient le résultat attendu lors de l'utilisation d'une application.
• Cohérence interne : L'ajout de nouveaux composants est cohérent avec les composants existants.
• Cohérence externe : le produit est cohérent sur plusieurs plates-formes

Les composants combinés à des directives encouragent la réutilisation et permettent de gagner du temps de développement, car les développeurs n'ont pas besoin de créer des composants à partir de zéro.

Quelle est la structure d'un système de conception ?

Un système de conception est composé de 2 composants :

Bibliothèque de motifs

1. Contient différents éléments qui peuvent être utilisés dans l'environnement du système de conception. Exemple : boutons, champs de saisie, menus, etc.
2. Chaque composant contient les champs suivants :
3. Titre : Nom du composant
4. Description : Explication sur ce que fait le composant
5. Utilisation et principes : règles qui dictent quand et comment utiliser certains composants et dans quel contexte.
6. Variations : Variations du composant en termes de différentes dispositions, tailles, etc.
7. Code : Extraits de code
1. Politiques qui régissent la façon dont chaque partie du système de conception doit se comporter par elle-même et conformément aux autres éléments du système.
2. Il comprend les éléments suivants :
3. Principes de conception
4. Directives de la marque
5. Couleurs
6. Typographie
7. Iconographie