Mag

Après Bootstrap, les design systems fleurissent

Twitter était en avance avec Bootstrap, mais les grands comptes internationaux rattrapent leur retard à grand renfort de dollars et d’open source.
3 min.
Par Olivier Lacombe
Publié le 13 Feb 2018

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.

Exemple de Kit pour définir votre Design System (designed by Elite Pixels)

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

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://material.io

https://github.com/material-components

Lightning Design System by Salesforce

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

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

http://carbondesignsystem.com

https://github.com/carbon-design-system/carbon-design-kit

Atlassian

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.

https://atlassian.design/

Et l'éternel Bootstrap

Bootstrap by Twitter

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

https://getbootstrap.com

https://github.com/twbs/bootstrap

Besoin de performances ?
C'est le moment d'en parler...
Newsletter
Recevez l'actualité de l'agence...

Subvitamine accompagne les PME & ETI afin d'identifier leurs enjeux et de proposer des solutions digitales adaptées et innovantes, multipliant leurs performances.