Atomic Design: 10 raisons pour lesquelles vous devriez l'utiliser

Conception atomique
(Crédit d'image: Jim McCauley)

Vous avez probablement entendu parler d'Atomic Design si vous êtes dans la communauté de développement front-end depuis un certain temps. Atomic Design est une méthodologie inspirée de la chimie. Tout comme toute matière est composée d'atomes qui se combinent pour former des molécules, qui à leur tour constituent des organismes plus complexes, la conception atomique consiste à décomposer un site Web en ses composants de base, puis à travailler à partir de là pour créer un site.

Il existe de nombreux avantages à utiliser Atomic Design; Lisez la suite pour découvrir 10 raisons pour lesquelles cela vous facilitera la vie.

Si vous souhaitez des conseils généraux sur la création de sites Web, consultez notre article sur la façon de créer le parfait mise en page du site Web , plus notre préféré constructeurs de sites Web .



01. Vous pouvez mélanger et assortir des composants

En décomposant les composants en atomes de base, il est facile de voir quelles parties du site peuvent être réutilisées et comment elles peuvent être mélangées et assorties pour former d'autres molécules et même des organismes.

Conception atomique: éléments

Ces cinq éléments de base peuvent être remixés pour créer une gamme de pages

Par exemple, disons qu'un site ne contient que cinq atomes: une petite image, une grande image, un paragraphe, un élément de liste et un lien. Vous pouvez créer une page Web très utilisable en dupliquant et en combinant ces atomes pour créer des molécules.

02. Créer un guide de style est simple

Si un site est créé dès le départ selon les principes d'Atomic Design, tous les atomes et molécules créés avant la création du site peuvent servir de guide de style de base. Même pour les sites qui n'ont pas été construits de manière atomique, il n'est pas difficile d'extrapoler les composants de base et de les assembler pour créer plus de pages. Gardez à l'esprit, cependant, qu'il est toujours préférable de créer un site de manière atomique dès le début, plutôt que d'essayer d'introduire les principes de conception atomique sur un site plus tard.

03. Mise en page facile à comprendre

Le code d'un site Web conçu de manière atomique est généralement beaucoup plus facile à lire que celui créé de manière plus traditionnelle. Cela est vrai non seulement au moment de la création, mais à l'avenir, lorsqu'un site est examiné pour référence ou pour de petits ajustements.

En raison de la documentation sur les atomes, les molécules et les organismes utilisés et où, il est facile de voir ce que chaque partie du code représente. Un autre avantage de ceci est que cela facilite l'explication de la base de code à un nouveau développeur.

04. Le code est plus cohérent

Conception atomique: Pattern Lab

Pattern Lab est une collection d'outils qui facilitent la conception atomique

Avec Atomic Design, vous utilisez des atomes prédéfinis pour créer la mise en page du site, il est facile de voir quels composants sont utilisés pour différentes parties du site. Cela réduit la probabilité d'écrire du code en double.

Par exemple, si quelqu'un crée un site sans utiliser Atomic Design et qu'il a besoin, par exemple, d'un bouton rouge, il devra parcourir l'ensemble du site pour essayer de trouver un site existant. Si cela existait, ils auraient besoin de copier et coller ce code dans la nouvelle instance. S'il n'y avait pas de boutons rouges, ils auraient besoin d'en créer un nouveau. Avec Atomic Design cependant, il est facile de revenir en arrière dans la liste des atomes et de trouver exactement ce bouton rouge.

Cela devient un processus beaucoup plus facile lorsque la bibliothèque Pattern Lab est impliquée. Laboratoire de modèles est une collection d'outils qui facilitent la conception atomique. Dans notre exemple, il fournirait une barre de recherche pour les atomes, ce qui faciliterait la recherche et la recherche de ce bouton rouge exact.

05. Pas de mise au point sur des designs au pixel près

Comme l'idée derrière Atomic Design est d'utiliser des atomes comme éléments de base pour la création de sites, il est moins probable qu'un développeur Web crée de nombreux atomes pour une chose similaire. Au lieu de cela, ils peuvent simplement parcourir la liste des atomes existants et les modifier pour créer de nouveaux atomes si nécessaire.

Un bon exemple de ceci serait pour les titres sur un site. Disons qu'un créateur a une liste de titres utilisés pour le site, tous en noir: un en-tête principal, un sous-en-tête et un titre de paragraphe. Ils n'ont pas travaillé sur le site depuis un moment et doivent revenir sur le site pour ajouter un nouveau titre bleu. Ils pourraient jeter un œil aux titres qui existent déjà et personnaliser l'un d'entre eux pour obtenir le résultat souhaité.

06. Prototypage plus rapide

Avoir une liste d'atomes avant le début de la création du site signifie que vous pouvez créer des pages rapidement et facilement - tout ce qui est nécessaire est de choisir et de combiner les éléments requis pour la page. La maquette peut ensuite être personnalisée et affinée pour le site final.

07. Plus facile de mettre à jour et de supprimer des parties du site

Comme un seul atome, molécule ou organisme est modifié à la fois, il est facile de s'assurer que toutes les mises à jour d'un composant sont transmises à toutes les autres instances du site. De même, les composants indésirables peuvent être facilement supprimés.

08. Structure de fichiers plus modulaire

Bien qu'Atomic Design soit très répandu en matière de balisage (HTML), je pense que ces techniques peuvent également être utilisées pour CSS, JavaScript ou tout autre langage utilisé pour créer un site afin de rendre le code global plus modulaire et réutilisable.

J'utilise moi-même le CSS atomique pour les sites Web que je crée et j'ai trouvé de grands avantages à cette approche. Cependant, je pense qu'avec l'arrivée de composants comme les composants HTML, il serait logique de séparer le CSS et le JavaScript spécifiques à un atome dans son propre dossier avec le HTML, donc si quelque chose doit être mis à jour ou supprimé, vous savez exactement où aller et quoi changer.

09. Moins de composants dans l'ensemble

Si un créateur a une liste d'atomes, de molécules et d'organismes qui lui est présentée avant le début de la création du site, il est plus susceptible d'utiliser ce qui existe déjà que de créer de nouveaux composants pour de petites variations.

Si un titre avec une taille de police de 4,5em est requis pour un dessin mais qu'il existe déjà un titre de taille 4em dans la liste des atomes, il est plus probable qu'un créateur choisira le 4em que de créer un titre complètement nouveau. Cela se traduira par moins d'atomes utilisés dans l'ensemble, ce qui rendra un site Web plus propre et plus mince.

10. Explorez Pattern Lab

Conception atomique: Pattern Lab

Pattern Lab est un générateur de site statique, également de Brad Frost

Ce n'est pas vraiment un avantage d'Atomic Design, mais un excellent outil créé par Brad Frost (qui a inventé le terme Atomic Design) et Dave Olsen pour aider avec le processus. Il s'agit essentiellement d'un générateur de site statique qui utilise la moustache pour les modèles et une visionneuse JavaScript pour l'interactivité. Il a été créé avec une conception axée sur le mobile avec des options pour redimensionner les pages, ajouter des commentaires aux sections du site et des extraits de code.

La version originale est écrite en PHP, mais il existe deux versions de Node: une pour gulp et l'autre pour Grunt. Je recommande fortement de jouer avec la démo sur le Laboratoire de modèles site pour vous donner une meilleure compréhension de son fonctionnement et du design atomique en général.

Veut en savoir plus? Lire l'article original de Brad Frost sur Conception atomique .

Articles Liés: