L’Atomic Design est une méthode de conception d’interface qui prend en compte les contraintes du développement. Il y a quelques années, les designers devaient créer des chartes graphiques sans forcément prendre en compte des contraintes techniques de conception. Maintenant, il est primordial de réfléchir à ces contraintes techniques quand vous créez des designs pour le web.
La modularité : l'état du web
Aujourd’hui, le web est modulaire, cela signifie que chaque élément (boutons, images, champs de texte, plans, etc.) peut être utilisé de manière indépendante tout en s’adaptant à la technologie utilisée (ordinateur, smartphone, etc.). Pensez aux jeux de construction :
Vous pouvez utiliser les mêmes ronds, carrés ou triangles pour créer des maisons, des châteaux, des ponts — il y a énormément de possibilités ! C'est pareil pour le web, et en plus, c'est nécessaire.
En effet, sur ces 20 dernières années, le nombre de nouvelles technologies a explosé : ordinateur portable, tablettes, smartphone, montre connectée, la VR et j’en passe. Toutes ces tailles d’écrans ont forcé le web à s’adapter et donc être modulable pour chacune d’entre elles.
Naturellement, on sait que pour chacune de ces tailles d’écrans, le rendu ne sera pas le même. On s’est habitué au fait que nos interfaces soient responsives, ou que le contenu s'adapte aux écrans. Pourtant, le designer doit bel et bien créer des interfaces pour chaque taille d’écran, mais pas totalement... Son rôle est de pouvoir expliquer le comportement de l’interface dans ces différents cas au développeur qui s’occupe d’intégrer ses écrans sur le web.
Aujourd’hui, pour créer des interfaces harmonieuses sans devoir tout recommencer depuis le début pour chaque taille d’écran, on a l’Atomic Design ! Grâce à ce concept de modularité (le fait que les éléments soient indépendants), vous pourrez créer des interfaces qui seront facilement évolutives et adaptables tout en facilitant les échanges avec vos équipes.
Pages vs interfaces
Pourquoi dit-on "interfaces" et non pas "pages web"? Avant d'aller dans le vif du sujet, il faut faire une petite précision de vocabulaire.
La métaphore de la page a été utilisée par Tim Berners-Lee, inventeur du World Wide Web (le Web), car l’objectif d’internet était de partager et regrouper les pages de ses documents avec des chercheurs du monde entier. Aujourd’hui, la page web est devenu un terme très répandu et souvent utilisé pour définir la charge de travail sur un projet. Par exemple, un client peut vous demander combien de temps vous avez besoin pour créer un nombre défini de pages.
L’évolution avec les nouvelles technologies font que ces “pages” deviennent de plus en plus dynamiques, avec une multitude de composants qui ont leurs propres fonctionnalités, par exemple une carte interactive. Aujourd’hui, c’est cette interaction du web qui rendent le terme “pages” obsolète ; on parle maintenant d’interfaces.
Pourquoi “atomic” ? L’analogie de la chimie
Pourquoi dit-on Atomic Design ? Ce lien thématique avec la chimie décrit parfaitement les atouts de cette méthode :
Chaque élément peut être fonctionnel tout seul.
Ils peuvent tous être créés dans n’importe quel ordre.
En combinant des éléments, on obtient d’autres éléments encore plus complexes et plus fonctionnels.
Les combinaisons d’éléments sont infiniment variées.
Voyez cela un peu comme le tableau périodique des éléments. Il y a un nombre fixe d'éléments qui constituent l'univers, comme l'oxygène, l'hydrogène, etc. L'Atomic Design prend la même approche, sauf qu'il se focalise sur les éléments qui constituent les interfaces web.
L’Atomic Design organise ces composants en 5 étapes distinctes : les atomes, les molécules, les organismes, les templates et les pages.
Gardez en tête que ce n’est pas une méthode linéaire, on parle d’étapes pour faciliter la logique de conception, mais il n’y a pas d’ordre prédéfini. C’est un peu comme parler de la poule et de l’œuf.😄
Il est important de comprendre que chacune de ces étapes définissent des éléments fonctionnels sur notre interface graphique. Plus tard dans le cours, nous verrons qu’elles forment une hiérarchie indispensable pour organiser nos éléments.
L'atome
L’atome est l’élément le plus petit, il correspond à n'importe quel élément de base d’une interface. C'est par exemple les inputs (cases d’éditions), les boutons, les labels, etc.
Comme pour la chimie, chaque atome a des propriétés propres. Dans notre cas, ces propriétés sont la taille, la couleur, la police, l’opacité etc. Par exemple, si on a deux boutons avec deux tailles différentes, ce sont deux atomes distincts.
La molécule
Comme en chimie, une molécule est tout simplement l'assemblage de plusieurs atomes. Par exemple, une barre de recherche est une molécule composée de plusieurs atomes. En assemblant les atomes, on obtient une molécule qui se différencie par un objectif précis. Ici, l’objectif de notre molécule est : faire une recherche à partir du texte écrit par l’utilisateur, tout simplement.
Soyez vigilant ! il faut rester sur des combinaisons simples d’atomes pour ne pas rendre vos molécules trop complexes et difficiles à manipuler. Par exemple, si vous ajoutez un bouton avec des filtres à votre barre de recherche, vous ajoutez un objectif. La molécule aurait donc deux objectifs : faire une recherche et paramétrer des filtres. Si vous créez ce type d’élément, on parle d’organismes !
Les organismes
Les organismes sont un assemblage d’atomes et de molécules, ils définissent des composants d’interfaces complexes. Ces organismes vont vous permettre de créer des interfaces très rapidement.
À la différence des molécules, ils n’ont pas forcément un seul objectif. Par exemple, un header peut permettre : la navigation sur un site, faire une recherche et retourner sur la home page en appuyant sur le logo du site web.
Un organisme peut également être une répétition d’une même molécule dans un espace défini, comme une galerie de photos ou un carrousel (ou slider, qui est un défilement de photos) par exemple.
Le template
Template, vous vous demandez certainement pourquoi on retourne vers un terme plus numérique qui n’est pas associé avec la chimie. Si les principes d’atomes, molécules et organismes parlent à (presque) tout le monde, aller plus loin dans le domaine de la chimie risquerait d’être très compliqué pour la plupart des gens. 😅De plus, cela permet de faire une transition vers la conception d’interface. Le template est un rassemblement des trois étapes citées précédemment (atomes, molécules, organismes) pour former une structure d’interface.
Comme vous pouvez le voir, la particularité est que nous n’avons encore aucun contenu de visible. Jusqu’à maintenant, nous n’avons donné aucun contexte à ce que nous avons créé. En ajoutant le contenu, nous arrivons à la dernière étape.
Les pages
Les pages ! Et oui, on y revient, mais vous comprendrez que la page n’est finalement que l’ajout du contenu sur nos templates. Ce sont des instances précises de nos templates, c’est comme si on ajoutait un constituant à notre structure.
Les maquettes créées par le designer à ce stade sont concrètes et statiques, c’est pour cela que cette étape s’appelle pages et pas interfaces. Elles permettent aux clients de se projeter, et elles donnent les éléments aux développeurs pour qu’ils puissent les coder afin de rendre réel un site web. Ce n’est qu’une fois que les pages sont codées et en ligne qu’on peut normalement parler d’interfaces. 😉
Exemple simple d’un Atomic Design
Ça fait beaucoup de définitions pour un premier chapitre, vous ne trouvez pas ? 😅Ne vous inquiétez pas, la bonne nouvelle c’est que cette méthode n’est pas écrite dans le marbre (et c’est son créateur qui le dit). Vous pouvez exploiter cette méthode comme bon vous semble, vous pouvez même décider de changer le nom de chaque étape (dans un autre thème par exemple) tant que cela prend sens pour vous et vos collaborateurs !
Voici un petit exemple de ce que pourrait être un Atomic Design très très simple. Sans forcément parler d’interface, cette méthode peut s’appliquer à ce que l’on veut !
En résumé
Faisons le point sur ce premier chapitre :
Le Web est basé sur la modularité issue de la nature responsive des interfaces.
Les “pages” est un terme datant du début d’internet qui n’a plus sa place, aujourd’hui les possibilités d'interactions pour l’utilisateur font que l’on parle d’interfaces.
L’Atomic Design est une méthode de conception qui va vous permettre de créer des interfaces de façon à ce qu’elles soient fluides, interactives et indépendantes.
La méthode est organisée en 5 phases : atomes, molécules, organismes, templates et pages qui définissent les niveaux de hiérarchie de vos interfaces.
Comme en chimie, chaque étape de l’Atomic Design se compose des parties précédentes.
