Après Bootstrap, les design systems fleurissent
De quoi parle-t-on ?
Lorsque vous êtes développeurs, vous pensez framework, à savoir cadre de développement, découpage des strates de votre application (Model, View, Controller), API/Webservices, templates…
Et bien c’est désormais pareil pour le design et l’ergonomie des interfaces avec le Design System ; à la différence près que l’on parle d’image, de brand donc… Directement en lien avec l’Atomic design et la charte graphique digitale, le Design System permet à une entreprise de structurer l’environnement graphique de ses développements d’applications et sites Internet.
Un Design System est un kit de design digital, rassemblant des règles autour de la couleur, de la typographie, de structuration de page, des composants ou encore des règles de langage. Bref, c’est la version digitale de votre charte graphique, accompagnée de documentation technique puisqu’il y est souvent question de HTML, de CSS et de javascript.
Les grands groupes, notamment américains ont investi des sommes colossales pour fournir aux professionnels des outils à la fois remarquables mais également vecteurs de communication. Car, quand les entreprises choisissent l’un de ses outils, elles gagnent du temps, donc font des économies, mais elles participent par la même occasion au rayonnement de l’image de ces grandes entreprises.
Quelques Design Systems
Il faut tout de même le dire, il s’agit aussi d’une formidable opportunité que d’éviter d’avoir à refaire ce qui existe déjà et que de nombreux designers, à la solde de ces grands groupes ont gentillement mis en Open Source :)
Voici donc les Design Systems qui selon moi méritent d’être vus… car même les sites Internet qui les présentent sont de véritables oeuvres d’art.
Material Design by Google
C’est le second à être arrivé sur le marché, notamment avec le succès d’AngularJS et d’Angular Material. Ce Design System est surement celui qui aura demandé le plus d’énergie car à l’époque, aucun référentiel n’était aussi abouti.
Apache License 2.0
https://github.com/material-components
Lightning Design System by Salesforce
Un ensemble d’une grande qualité mais qui ne constitue qu’une belle source d’inspiration de part la nature de sa licence. Toutefois, la richesse des composants et la documentation méritent d’être appréciées.
Licence BSD 3-Clause
https://www.lightningdesignsystem.com
https://github.com/salesforce-ux/design-system
Carbon Design System by IBM
L’un des plus complet du moment, intégrant les problématiques d’accessibilité, les icônes et de nombreux composants pour les applications web.
Apache License 2.0
https://github.com/carbon-design-system/carbon-design-kit
Atlassian
Attention, la licence n’est valable que si vous développez des produits/services en lien avec les produits et services d’Atlassian. De plus, vous ne pouvez pas le modifier.
Et l'éternel Bootstrap
Bootstrap est à la base un framework mais l’évolution du marché le transforme progressivement. Pour nous, la version 4 reste un point de départ incontournable, surtout lorsqu’il s’agit de créer le Design System d’une Start-up ou d’une ETI et que le budget n’est pas infini.
MIT License
Subvitamine accompagne les PME & ETI à la recherche de performances en créant des applications connectées et intelligentes.