Après Bootstrap, les design systems fleurissent

Par Olivier il y a 2 ans
Temps de lecture estimé 4 min

Twitter était en avance avec Bootstrap, mais les grands comptes internationaux rattrapent leur retard à grand renfort de dollars et d’open source.

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

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

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

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.

Bootstrap by Twitter

Et l'éternel 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

Découvrez Akkurate

Akkurate est notre kit digital de développement d'application, un outil permettant aux entreprises de créer des applications performantes et évolutives, en un temps record.

En plus des développements côté serveur (PHP, NodeJS, Python et Golang), des développements côté client (VueJS, React et Angular), Akkurate permettra bientôt de concevoir votre propre Design System, intégrant de nombreux composants d’interfaces basés sur le fabuleux framework Bootstrap 4, mais également de produire votre propre collection d’icônes (SVG, PNG et police de caractères).

À lire également

Comment créer votre application web ?

Voici comment nous procédons pour créer des applications puissantes et évolutives, en un temps record.
Par Olivier, il y a 2 ans
Temps de lecture : 5 min

Qu’est-ce qu’une API ?

Dans l’univers des applications, on parle souvent d’API. Mais qu’est ce que c’est au juste et à quoi ça sert...
Par Olivier, il y a 2 ans
Temps de lecture : 5 min

Atomic design : la conception d’interface modulaire

Dans le contexte actuel d’évolution constante de tailles d’écrans, de résolutions autant que d’interfaces, les concepteurs utilisent un nouveau mode de conception.
Par Olivier, il y a 2 ans
Temps de lecture : 3 min
Nous
contacter
Appelez-nous
01 45 21 05 21
Ou envoyez-nous un message
Contactez-nous
Newsletter
Restez connecté avec l’agence pour être informé de nos prochaines publications et annonces.