Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Industry
Webdesign

Le développement pour les designers : Penser design atomique

by
Length:ShortLanguages:
This post is part of a series called Development for Designers.
Designers, We Need to Talk About Development

French (Français) translation by Henri Lotin (you can also view the original English article)

Bienvenue à la tranche suivante de développement pour les designers ! Si vous avez manqué le dernier article s’il vous plaît faites-y un tour. Dans cet article, je vais discuter ma pensée autour d’une école de pensée qui sans doute fait le pont entre le développement et le design.

Le slogan, le mot-clé ou le concept auquel vous avez besoin de vous familiariser sérieusement  est « Atomic Design ». Le design atomique a été inventé comme :

«.. .une méthodologie pour la création de systèmes de design. » – Brad Frost

Pour moi, cela a été une percée. En tant que développeur, je sais que logique est constitué de concepts plus petits ; variables, tableaux, fonctions, classes. Comme designer, la même chose s’applique. Je peux construire quelque chose de complexe en sélectionnant des couleurs complémentaires, des polices, de l'espace négatif, de l’espace et de la forme. En effet, c’est une métaphore géante pour notre propre existence humaine.

atomic design gonna be a book
Ce sera un livre

Essentiellement, le design atomique fonctionne comme suit : les atomes forment des molécules, les molécules forment des organismes. Les organismes peuvent être simples ou complexes. Une bactérie ou un être humain assis derrière cet ordinateur écrit au sujet de chaque concept. Nous sommes tous des exemples de design atomique.

Cette méthodologie se caractérise parfaitement pour des expériences web, l’IoT (Internet of Things) ou le développement mobile, car il fournit une architecture qui solidifie la simplicité pour créer quelque chose de complexe. Après tout, la simplicité n’est-elle pas la sophistication ultime ?

Systèmes, pas pages

Le design atomique est un système. Un système qui travaille en collaboration avec plusieurs parties pour créer quelque chose d’unique. C’est un système qui peut être compris si vous êtes un designer ou un développeur et donc, et rend les deux emplois faciles à maintenir, de modifier et de pousser vers l’avant. Sans oublier, elle soulage également le stress et la pression si, disons, un designer ou développeur clé a besoin d’être remplacé ou quitter une équipe.

Voici un petit aperçu :

Atomes

Les atomes sont les éléments de base ; des entités qui ne peuvent pas être décomposées plus loin tout en restant fonctionnelles. Ce sont les balises HTML telles que <p>, <label>, <input>, <span>.

Les atomes peuvent également servir pour les palettes de couleurs ou de polices. Il serait bon de noter, toutefois, que les atomes peuvent être assez abstraits en soi sans contexte. Un atome  bien défini va produire une molécule bien formée.

Molécule

Les molécules sont des combinaisons et des arrangements d’atomes. Essentiellement la colonne vertébrale de votre système de design. Une molécule serait quelque chose comme la navigation ou un formulaire de recherche, comprenant par exemple une <input> atome, <label> atome et un <button> atome. Avec un peu plus comme si créiiez une molécule complexe.

Organismes

Un organisme de batit encore plus loin, ce qui nous donne une combinaison de molécules. L’intégralité de l’en-tête d’un site web peut être considéré comme un organisme. De sa structure de base, il implique un arrangement unique d'atomes et de molécules pour créer un organisme complexe. Une section de pied de page serait considérée comme un organisme. Si nous regardons au contexte, la grille de produit au sein d’un modèle de WooCommerce serait considérée comme un organisme ; Il répète la même molécule avec un contenu différent, ou encore les mêmes atomes avec des valeurs différentes pour chacun.

Grayson - A Stylish and Versatile Shop Theme
Grayson - un thème pour boutique élégant et polyvalent

Templates

Bien que cette section n’ait vraiment rien à voir avec l’analogie, que Brad a mise en place, les templates peuvent être utilisés ou réutilisés pour afficher des arrangements d’organismes. À ce stade, la mise en pages​ devient vraiment indispensable. Les humains commencent comme des cellules simples, grandissent en foetus, puis en un bébé complètement formé, puis en enfant, puis en adolescent, ensuite en jeune adulte, et nous allons arrêter l’analogie lorsque nous arrivons à notre maturité. Le premier template étant un arrangement esthétiquement plaisant, sémantique d'organismes, de molécules et d'atomes. Essentiellement, nous nous référons aux wireframes qui ont été développés au fil du temps.

Pages

Lorsqu’un template atteint sa maturité, et nous l'étoffons avec des images, du contenu et de la rédaction etc., nous avons une page. Une page par exemple serait chargée dans un outil comme InVision pour des tests utilisateurs de base avant d’entrer dans le développement.

Conclusion

Je vais vous laisser avec quelques réflexions finales. Il n’y a aucune bonne manière de gérer la relation entre les développeurs et les designers. Construire une expérience web : que ce soit un site Web, une plateforme, un réseau, SaaS ou PaaS, c'est combiner les talents et les idées de designers et de développeurs. L’un, ne peut pas vivre sans l’autre. Aucun projet ne devrait donc jamais être vide de designer ou de développeur. J’espère qu'à la fin de cette série vous comprendrez ce que je veux dire sous un meilleur jour, et peut-être cela vous donnera quelques idées sur la façon de mieux travailler avec vos collaborateurs.

Je tiens également à mentionner qu’autant que cette série se concentre sur les développeurs et les designers, cela ne signifie pas de dire que je ne reconnais pas les gestionnaires de contenu ou les rédacteurs ; votre travail est tout aussi primordial lorsqu’il s’agit de faire une super expérience web.

Maintenant que vous avez une compréhension du design atomique, nous pouvons vraiment pouvoir travailler à étoffer comment il se transcende dans le design et le développement.

Dans les prochains articles nous allons plonger en profondeur​ dans les mondes respectifs du front et back-end. Si vous êtes un designer, ou même un développeur débutant, les deux prochains articles vous aideront à acquérir les connaissances fondamentales requises. Si vous venez du monde du design, ou encore de celui de l’impression, et êtes en train de vous orienter vers le développement, les concepts que je vais expliquer vous aideront à combler l’écart dans la compréhension qui est la transition du design au développement.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.