Utiliser la conception atomique dans le développement Web moderne
S'il y a quelque chose que j'ai appris en travaillant pour une entreprise de technologie, c'est que pour créer un site Web - un site Web vraiment magnifique, beau et performant - une multitude de talents et d'éléments doivent s'unir et travailler en harmonie. Parfois, on peut avoir l'impression de travailler sur la tour de Babel: une personne passe au crible une palette de codes hexadécimaux, les gars à l'autre boutent une soupe à l'alphabet avec des acronymes différents et le directeur de compte est au téléphone. Expliquer comment utiliser un système de gestion de contenu pour un client, tout en essayant d'écrire cet article en anglais.
Tous ces éléments ont besoin d'un moyen de se rassembler sans rien perdre dans la cacophonie, et il y a un concept relativement nouveau qui nous a vraiment aidé à travailler en équipe: concepteurs, développeurs, testeurs… tout le monde.
C'est appelé Conception atomique .
Qu'est-ce que la conception atomique?
Les composants de conception atomique ont été dérivés du concepteur Brad Frost La fascination pour la chimie; les atomes étant la plus petite unité, se liant à des molécules, qui à leur tour forment des organismes plus complexes, créant éventuellement toute la matière dans l'univers.
Donc, si nous sommes dans la Station spatiale internationale, en regardant tout le projet dans son ensemble, voici la page d'accueil complète d'un projet récent auquel nous avons appliqué Atomic Design, Moulin à pizza Route 93 :
La page d'accueil de Route 93 Pizza comprend tous nos éléments en tant que site Web unifié et fonctionnel. Maintenant, si nous plaçons le site au microscope, nous pouvons voir ses composants granulaires:
Atomes: Voici les atomes du site Web de la Route 93 Pizza Mill. Les atomes sont les éléments de base, tels que les étiquettes, les étiquettes de formulaire, les boutons, la palette de couleurs et les polices. Bien que peu utiles seuls, les atomes sont votre point de référence préliminaire - les débuts de votre création.
Molécules: les molécules sont les endroits où les atomes sont mis au travail - où la conception du site Web achevée commence à se sentir tangible. Dans les molécules de la Route 93, vous pouvez voir la palette de couleurs, les polices et l’iconographie se fondre dans les champs de formulaire, les superpositions d’images et les boutons. Ils sont, comme le dit Frost, votre outil pour "faire une chose et le faire bien".
Organismes: au moment où nous arrivons à des organismes, nous pouvons créer le pied de page complet pour la Route 93. Il combine tous les composants susmentionnés en un site Web réalisable et esthétique.
L'inventaire de l'interface: maintenant que nous avons tous les ingrédients, nous avons besoin d'un menu concret sur lequel les ranger dans quelque chose de digeste. un document contenant tous les éléments ci-dessus en tant que ressource lisible et utilisable - un inventaire d'interface.
Alors que certaines organisations appellent cela un modèle de bibliothèque ou un guide de style et utilisent spécifiquement l' Inventaire d'interface pour faire référence à un audit effectué sur un site Web existant, nous utilisons le terme Inventaire d'interface pour nos propres projets (ainsi que des audits d'autres sites). partie d'un processus d'évaluation continue.
Comme le flux de travail d'Atomic Design imite quelque peu un dilemme de type poule ou œuf, l'inventaire de l'interface prend généralement un aspect assez organique après la création de la page d'accueil et d'une autre page du site Web, mais peu de temps après. Au fur et à mesure que ces deux pages initiales prennent forme, le concepteur s'assure que les éléments sur les deux sont cohérents. Pour toutes les pages suivantes, ils ont alors la possibilité de tirer de l'inventaire. Cela produit une source canonique sur la manière dont les styles visuels doivent être appliqués dans le projet, un langage commun littéral, en anglais clair, des codes hexadécimaux, des styles de boutons, des largeurs de remplissage, etc. auxquels les développeurs et toute l'équipe peuvent se référer.
En concevant un inventaire d'interface avec le processus de conception atomique, nous pouvons commencer par des modules primitifs et les assembler en éléments complets. Ce processus améliore l'efficacité, la communication entre les membres de l'équipe et produit un site Web plus beau dans l'ensemble.
Qu'est-ce que Atomic Design fait pour nous
Atomic Design nous aide à découvrir des «vérités» solides sur la conception du projet sur lequel nous travaillons et à créer un vocabulaire commun entre ses aspects artistiques et techniques. Il encourage un système global plus robuste, qui améliore la technologie UX et fournit une méthodologie permettant aux concepteurs d’adhérer aux directives basées sur les composants des développeurs tout en maintenant la créativité.
Naturellement, les développeurs codent à partir de zéro alors que l'approche d'un artiste commence généralement par une forme plus nébuleuse, qui se transforme alors en page Web fonctionnelle après un certain moulage. Atomic Design encourage et exige que les concepteurs travaillent également à partir de rien pour rendre tous les composants de l'interface cohérents et utiles au niveau le plus bas possible.
L’établissement de ce langage commun, représenté par l’Inventaire d’Interface, garantit que les concepteurs et les développeurs n’inventent pas de nouvelles solutions aux problèmes déjà résolus. Par exemple, si un nouveau formulaire de contact est ajouté à un projet, les styles nécessaires pour créer ce formulaire existent déjà et peuvent facilement être utilisés pour créer la page, estimant inutile que le concepteur fasse des efforts supplémentaires. Cela n'empêche pas nécessairement le concepteur de travailler, mais permet aux développeurs de créer plus rapidement des solutions plutôt que de demander au concepteur de simuler chaque page ou chaque organisme. Le rôle du concepteur est ensuite déplacé vers quelque chose qui ressemble plus à la direction artistique après la création des pages. Ces «vérités» tangibles éliminent également la nécessité d’utiliser le concepteur en tant qu’arbitre. Des questions telles que "ce choix de conception est-il intentionnel?" Ou "quelle couleur devrions-nous utiliser sur cet élément particulier?", Ainsi que les modifications de dernière minute ou les ajouts à une page
Le langage commun se poursuit également dans l’assurance qualité. Lorsque je teste une page Web à la fois pour le contenu et les fonctionnalités, je récupère l’Interface Interface dans mon écran en guise de guide. Bien que ce soit avant tout un outil de concepteur et un outil de développement, il permet à tous les membres de l’équipe de participer en toute confiance à des conversations sur le design et la cohérence.
Conclusion
Afin d’assurer la bonne exécution d’un projet, en particulier de certaines des plus grandes, nous nous trouvons souvent en train de nous attaquer, la communication est essentielle; Si vous criez un éventail d'idées différentes dans la pièce, rien ne sera jamais possible. Atomic Design aide à agir comme traducteur pour ces différents départements et les "langages" qui les accompagnent pour maintenir la cohérence dans la conception. Il établit une ressource modulaire pour l’équipe, permettant une cohérence et un résultat efficace, moins d’erreurs et un produit fini plus soigné.