Design System

Le Design System

Qu’est ce qu’un Design System ?

Un Design System, c’est une bibliothèque de référence et un guide pour les designers et les developpeurs. Anciennement appelé charte graphique et ergonomique. Aujourd’hui, chaque projet, produit ou site, possède son propre Design System. On retrouve à l’intérieur différents éléments tels que des composants UI, des patterns, des palettes de couleurs, des iconographies, des grilles (layout), les espaces, les typographies … etc
Les équipes techniques et design peuvent ainsi piocher des composants prêts à être utilisés et écrits dans un langage commun.

Les symboles imbriqués, Atomic Design

L’Atomic Design, conçu par Brad Frost, est une méthode pour construire un Design System. Il naît d’un constat : tous les objets qui nous entourent vont potentiellement nous permettre d’accéder à une interface digitale. Les tailles des écrans sont multiples et le contenu doit s’adapter. Il ne s’agit donc plus de construire des « pages » comme les pages d’un livre, ou une interface à l’image d’un tableau figé dans le temps. L’objectif est désormais de concevoir des systèmes de composants pour être en mesure de s’adapter aux changements rapides.

La métaphore de la chimie fait ressortir l’imbrication des composants et l’aspect vivant, évolutif, de l’interface. Elle présente aussi l’avantage d’être facile à comprendre et à expliquer aux entreprises et aux clients en général.

En exemple, l’input, composé de plusieurs éléments. Chacun modifiable indépendamment grâce à la fonction « Overrides » de Sketch.

Qu’est ce qu’un Darkmode ?

Un thème sombre affiche des surfaces sombres sur la majorité d’une interface utilisateur. Il est conçu pour être un mode supplémentaire à un thème par défaut (ou clair). Les thèmes sombres réduisent la luminance émise par les écrans des appareils. Tout en respectant les rapports de contraste de couleur minimum. Ils aident à améliorer l’ergonomie visuelle en réduisant la fatigue oculaire, en ajustant la luminosité aux conditions d’éclairage actuelles et en facilitant l’utilisation de l’écran dans les environnements sombres, tout en économisant la batterie. Les appareils dotés d’écrans OLED bénéficient de la possibilité de désactiver les pixels noirs à tout moment de la journée.

L’accessibilité, le coeur de notre Design System.

Concevoir pour l’accessibilité est non seulement la bonne chose à faire, mais cela fait également de bonnes affaires. Les personnes handicapées représentent environ 15% de la population. Ces utilisateurs sont souvent mal desservie par les entreprises, et tout particulièrement dans le domaine numérique. C’est l’une des raisons pour lesquelles l’équipe de conception de Pôle Emploi met l’accent sur l’intégration de l’accessibilité dans le produit dès le départ.

Gérer les couleurs pour assurer une meilleure accessibilité !

Un thème sombre doit éviter d’utiliser des couleurs saturées, car elles ne respectent pas la norme d’accessibilité WCAG d’au moins 4,5: 1. Les couleurs saturées produisent également des vibrations optiques, lorsqu’elles sont sur un fond trop sombre. Cela peut induire une fatigue oculaire. Au lieu de cela, les couleurs désaturées, peuvent être utilisées comme une alternative plus lisible. Il est alors conseillé de désaturées les couleurs afin que le contraste corresponde aux normes d’accessibilités.

Les avantages du Design System sont nombreux avec des bénéfices multiples pour une entreprise, entre autres :

  • Un Design cohérent sur l’ensemble du site et toutes les plateformes.
  • Une meilleure expérience utilisateur.
  • Des composants réutilisables et une UI responsive facile à maintenir.
  • Une communication facilitée entre l’équipe design et l’équipe technique.
  • Une production facilité et des tests effectués plus rapidement.
  • Le Design scalable apporte un gain de temps et d’argent.

 

Vous avez besoin de créer un Design System ?
N’hésitez pas à me contacter.

(Visited 1 times, 1 visits today)

Leave A Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *