Atomic design : la conception d’interface modulaire

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

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.

De quoi parle-t-on ?

L’Atomic design est une méthode de conception par composants dont Brad Frost est le créateur.

Le concept est simple : la page web provient de l’idée d’une page de livre, mais aujourd’hui on ne peut plus penser en terme de pages puisque les éléments que nous créons doivent pouvoir se déployer tout aussi bien dans des environnements minuscules que dans des environnements immenses (projeté sur un mur, ou sur l’écran d’une montre connectée).

C’est pourquoi nous devons penser davantage en terme de système de composants multiples.

Concrètement, ça veut dire quoi ?

De manière simplifiée, l’interface utilisateur est découpée en différents composants :

  • Les atomes, éléments qui ne peuvent pas être divisés mais qui composent la base de tous les éléments graphiques et ergonomiques de l’interface (des icônes par exemple) ;
  • Les molécules, des collections d’atomes (un item dans une liste par exemple) ;
  • Et les organismes, combinaison d’atomes et molécules qui forment l’interface finale.

Pourquoi ça nous intéresse ? Parce que l’Atomic design permet un assemblage beaucoup plus rapide et une meilleure interconnectivité et interaction entre les composants.

Représentation graphique de l’Atomic Design… Un dessin vaut mieux qu’un long discours.
Représentation graphique de l’Atomic Design… Un dessin vaut mieux qu’un long discours.

Une conception proche des besoins utilisateur

Avant tout, il est important de définir les profils des utilisateurs de manière très précise. Il s’agit de créer des personnages fictifs (représentant vos futurs utilisateurs) avec le plus de détails possibles pour en déduire leurs modes de raisonnement, leur niveau de compréhension et leurs comportements. C’est à partir de là que vous pourrez identifier les fonctionnalités, comportements des composants et les informations qu’ils contiennent.

Il faut également identifier les contraintes des utilisateurs en fonction du support de consultation. C’est là que le Responsive Web Design (RWD) apporte un bénéfice majeur en permettant d’assembler les composants dans une interface plus facilement, puisqu’ils sont traités de manière modulaire.

Des bénéfices immédiats

Plusieurs avantages découlent directement de cette façon de faire :

  • Une maintenance corrective simplifiée : il est plus facile de corriger les bugs.
  • Une maîtrise de la montée en charge, qui, à l’inverse, peut provoquer des interruptions de service ou des surcoûts.
  • Une amélioration de la lisibilité du code et et des corrections/évolutions plus aisées : et oui, l’’Atomic design va aussi de paire avec la factorisation du code.

Conclusion

Il s’agit donc d’une méthode de travail qui permet de s’adapter à un environnement changeant, à ses utilisateurs, tout en bénéficiant d’avantages majeurs et en simplifiant la conception des interfaces.

Designers ou développeurs : en créant ainsi un système de composants qui améliorent la productivité des équipes, tout le monde y gagne !

À 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

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.
Par Olivier, il y a 3 ans
Temps de lecture : 4 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 3 ans
Temps de lecture : 5 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.