L’Atomic Design est une méthodologie moderne de conception des sites web théorisée par Brad Frost. Découvrez le concept de l’atomic design et ses avantages…
Au début du web, tout était plus simple. Tout le monde possédait à peu près les mêmes écrans. Les sites étaient consultés depuis un ordinateur. Il était alors possible de concevoir les pages d’un site comme les pages d’un livre, toutes sur le même format. Aujourd’hui, les supports de consultation sont multiples. Ordinateurs, tablettes, smartphones, objets connectés et même téléviseurs sont autant d’appareils permettant de consulter un site web. Le nombre des tailles disponibles des écrans s’est accru en conséquence. Il n’est donc plus possible de concevoir les sites web de la même façon. L’atomic design est une méthode moderne de conception des sites web permettant d’adapter plus facilement l’affichage quelle que soit la taille de l’écran.
La méthode classique de conception d’un site web
La méthode classique de conception d’un site web consiste à définir son architecture et son design page par page. On réalise la maquette de la page d’accueil, celle d’une page produit, celle du panier, celle du récapitulatif de commande, celle du paiement et ainsi de suite.
Une fois toutes les maquettes réalisées, on découpe les différents éléments. On repère ceux qui se répètent (typiquement les entêtes et les pieds de page, certains menus…) afin de les extraire pour pouvoir les réutiliser.
La structure HTML prend forme puis le CSS pour le style de l’affichage. Si l’on travaille en « mobile first », on va commencer par intégrer les pages afin qu’elles s’affichent de façon optimale sur les smartphones et tablettes. Ensuite, elles seront déclinées de façon à s’afficher correctement sur des écrans de plus grande taille.
L’avantage de cette méthode est que vous avez rapidement une maquette quasi-complète et ainsi une bonne idée de la version finale du site. Le principal inconvénient est que tous les éléments ne sont pas nécessairement réutilisables sur plusieurs pages du site ou même pour d’autres sites. Les composants ne sont pas forcément standards. Si vous souhaitez les réutiliser, il faudra sans doute les adapter.
Qu’est-ce que l’ « Atomic Design » ?
L’Atomic Design est une méthode conçue par Brad Frost pour construire le design des interfaces des systèmes informatiques.
Pour cela, il s’inspire de la façon dont se combinent les atomes pour former des molécules, qui elles même s’assemblent pour former des organismes complexes.
Le principe de l’atomic design est simple. Une interface peut être divisée en un nombre fini d’éléments atomiques. Toutes les pages web sont composées des mêmes éléments HTML (head, body, footer, style, script, label, fieldset, button, article…). A partir du moment où l’on en a pris conscience, il est possible d’appliquer au design d’interface les mêmes concepts qu’en chimie.
On distingue cinq niveaux hiérarchiques en atomic design :
- Les atomes,
- Les molécules,
- Les organismes,
- Les modèles (ou templates),
- Les pages.
Chaque niveau se combine aux autres afin de former une interface.
Les atomes
Les atomes sont les plus petits blocs fonctionnels. On les retrouve dans toutes les interfaces utilisateurs. Typiquement, tous les éléments basiques HTML sont des atomes. Chaque atome a des propriétés uniques comme sa taille par exemple. Comme en chimie, les atomes pris séparément ne sont pas fonctionnels. Ils ne le deviennent réellement que lorsqu’ils se combinent.
Les molécules
Les molécules sont des regroupements simples d’éléments d’interface capables de fonctionner séparément. Une fois combinés les atomes formant la molécule ont une fonctionnalité, un rôle. Par exemple, lorsque vous combinez les atomes que sont un label, un champ de saisie et un bouton, vous obtenez une molécule formulaire. Un clic sur le bouton déclenche l’envoi du formulaire. Cette molécule a un comportement simple, prévisible. Elle est portable et réutilisable. Elle peut donc être réutilisée partout où c’est nécessaire.
Les organismes
Les organismes sont des composants plus complexes de l’interface utilisateur. Ils peuvent être composés de groupes de molécules, d’atomes et même d’autres organismes. Ils forment des portions ou sections bien particulières de l’interface.
Un organisme peut par exemple constituer l’entête d’un site web. Il pourra être composé de plusieurs molécules assemblées, comme un menu et un formulaire de recherche par exemple.
Un organisme peut être composé de molécules différentes, mais également d’une seule molécule répétée plusieurs fois. C’est le cas par exemple pour l’affichage d’une catégorie de produits sur un site de e-commerce. Une molécule servira à afficher un produit (photo, titre, description rapide et prix) et elle sera répétée et affichée sous la forme d’une grille.
Les modèles (ou templates)
Les templates permettent de positionner différents composants dans la structure qui va définir la page web. Le template va fournir un contexte aux molécules et aux organismes afin qu’ils puissent s’articuler et fonctionner ensemble. On se concentre ici sur la structure qui permettra d’afficher le contenu et non sur le contenu final de la page. De cette façon, il est possible de créer un squelette capable de s’adapter à n’importe quel type de contenu.
Les pages
Les pages sont des dérivés des templates. Elles permettent de montrer l’affichage final obtenu avec le contenu réel destiné au site. La page est donc le plus haut niveau de l’atomic design car c’est ce que verra au final l’utilisateur.
Les avantages de l’Atomic Design
Organisation
L’approche atomic design permet d’avoir une vue des composants utilisés dans la construction d’une page.
Il est possible de constituer en quelque-sorte une galerie de molécules et d’organismes afin de les réutiliser à plusieurs endroits dans le site, voire à plusieurs endroits dans une même page. Tous les composants pourront être créés en respectant la charte graphique de l’entreprise par exemple, et les développeurs pourront les utiliser. On obtient ainsi un design homogène pour l’ensemble des équipes.
Simplicité
Lorsqu’il s’agit de modifier un composant, quel que soit son niveau, il est plus simple de le faire. La modification d’une molécule de la galerie se répercutera automatiquement à tous les organismes dans lesquels elle est utilisée. On gagne ainsi grandement en simplicité et on assure la cohérence graphique des développements.
Flexibilité
L’atomic design permet également de gagner en flexibilité. Plutôt que de passer du temps à définir chaque page indépendamment des autres, les développeurs vont pouvoir se concentrer sur la structure et la logique. On dispose de tous les éléments dès le début.
Adaptation Mobile
Enfin, cette conception par composant permet de construire une interface utilisateur qui s’adaptera aussi bien à l’écran d’un smartphone qu’à celui d’un téléviseur 4K. Si les molécules ne sont pas modifiables, en revanche, les atomes qui les composent peuvent réagir différemment en fonction de l’espace dont ils disposent. Les différentes déclinaisons d’un atome seront pensées au moment même de sa conception.
Conception sur mesure pour votre site e-commerce
Je suis à votre disposition pour vous accompagner dans la conception de votre site web de e-commerce. N’hésitez pas à me contacter pour en savoir plus et m’expliquer votre besoin. Nous travaillerons ensemble pour définir la structure et le design de votre site.
