Conception atomique : exploser ce que vous pensiez savoir sur la conception Web

C'est une croyance commune que la flexibilité est la même chose qu'être débridé, que pour être créatif, il faut aussi être débridé. Pour mener à bien un projet, en particulier un projet aussi complexe que la conception Web, la création d'une structure peut en fait vous donner plus de flexibilité. Vous avez besoin d' un cadre – il n'est pas négociable. En exerçant vos muscles artistiques et créatifs là où vous en avez vraiment la liberté, vous obtiendrez des designs aussi inspirés que fonctionnels et réalistes. La conception atomique est une approche sensée et méthodique de la conception Web qui vous donne toujours la possibilité d'expérimenter dans le cadre.

Systèmes de conception

Les concepteurs ne se contentent plus de créer des pages Web ; ils créent des systèmes de conception. Les systèmes de conception comprennent :

• Couleur
• Grilles
• Texture
• Typographie
• Etc.

J'aime la façon dont Jack Strachan chez UX Planet décrit les systèmes de conception : « En bref, un système de conception est un ensemble de composants réutilisables, guidés par des normes claires, qui peuvent être assemblés pour créer un nombre illimité d'applications. Les systèmes de conception sont une méthode pour traduire une expérience cohérente et un langage visuel à travers un produit lorsque vous travaillez sur différents points de contact.

Les éléments de conception peuvent être subjectifs, et ils peuvent rapidement devenir accablants et chaotiques. Afin de les catégoriser, le design doit être examiné de manière plus méthodique. C'est ce qu'a fait le concepteur de sites Web Brad Frost.

La naissance du design atomique

Voici comment Brad a conçu la conception atomique : « En cherchant l'inspiration et des parallèles, je revenais sans cesse à la chimie. L'idée est que toute matière (qu'elle soit solide, liquide, gazeuse, simple, complexe, etc.) est composée d'atomes. Ces unités atomiques se lient pour former des molécules, qui à leur tour se combinent en des organismes plus complexes pour finalement créer toute la matière de notre univers.

Il poursuit en expliquant que les interfaces sont constituées de composants pouvant être classés en blocs de construction. Voici l'ordre du plus petit au plus grand :

• Atomes
• Molécules
• Organismes
• Modèles
• Pages

Source : BradFrost.com

Les blocs de construction de la conception atomique

Le principal attrait de la conception atomique est qu'elle favorise la cohérence. De nombreux éléments que vous créez peuvent être facilement reproduits, réutilisés ou mis à l'échelle. Et pour les suivre tous, les concepteurs peuvent se créer une bibliothèque où ils peuvent voir tous leurs éléments et styles en un seul endroit. Il y a aussi de la place pour la personnalisation, mais seulement à mesure que les blocs de construction deviennent plus complexes et plus vastes. Entrons dans les cinq blocs de construction :

1. Atomes

Comme les atomes sont importants dans le monde naturel, les balises HTML le sont pour les interfaces Web. Signification : toutes les interfaces Web commencent par des balises HTML ou des éléments fondamentaux (animations, boutons, palettes de couleurs, polices, étiquettes de formulaire, etc.). Bien que ces atomes ne soient pas bénéfiques à eux seuls pour la conception Web, ils sont nécessaires pour créer l'interface Web.

2. Molécules

Les molécules sont plus complexes que les atomes, mais elles ne sont pas complexes dans l'ensemble. Lorsque vous regroupez des atomes pas si utiles, vous avez des molécules plus utiles : Étiquette du formulaire de recherche + Entrée + Bouton (atomes) = Formulaire de recherche complété (molécule)

3. Organismes

Lorsque vous regroupez des molécules, vous obtenez des organismes plus complexes que leurs prédécesseurs : Logo + Navigation + Formulaire de recherche + Icônes de médias sociaux (molécules) = Masthead terminé (organisme)

Idéalement, vous pourrez réutiliser des organismes sur le site Web ou sur différents sites Web, en conservant la mise en page générale et en la personnalisant avec différents textes et images. Par exemple, vous pouvez utiliser le même type de masthead sur tous les sites Web que vous concevez, ou vous pouvez créer un organisme spécifique au produit (image + titre + prix) que vous répétez sur la page du produit.

C'est à ce moment-là que l'interface Web commence vraiment à prendre forme de manière unique et personnalisée. Avant maintenant, votre interface n'est qu'une collection d'éléments simples. Au stade des organismes, le site Web devient plus visuel.

Si vous deviez partager votre processus avec un client, c'est la partie où ils diraient : « Oh, je comprends ». C'est le moment de commencer le wireframing ou de créer des maquettes afin que le client puisse vous donner son avis avant d'aller plus loin.

4. Modèles

Lorsque vous regroupez des organismes, vous avez des modèles. C'est à ce moment-là que la mise en page réelle se met en place. Alors que les molécules et les organismes ont leurs propres dispositions internes, l'étape des modèles est celle où vous commencez à voir comment ils se complètent et interagissent les uns avec les autres ; où ils sont placés l'un par rapport à l'autre; et comment ils s'écoulent dans leur ensemble. Le modèle donne le contexte des molécules et des organismes. Notez que les modèles ont un contenu d'espace réservé, et non un contenu personnalisé ou original.

Source : BradFrost.com

5. Pages

Les pages font passer les modèles au niveau supérieur en remplaçant le contenu de l'espace réservé par le contenu réel. Ce ne sera probablement pas le contenu final, mais ce sera plus représentatif de la conception et du contenu finaux. L'ajout d'un contenu permanent de haute qualité à ce stade pourrait être un gaspillage, car le site Web doit encore être testé, révisé et peaufiné. Cela dit, il est possible que vous branchez le contenu finalisé - cela dépend de l' endroit où vous êtes dans ce processus.

C'est à ce stade que le site Web sera le plus surveillé. En fonction des critiques et des commentaires que vous obtenez, les molécules, les organismes et les modèles peuvent devoir être modifiés. C'est aussi un bon moment pour tester les variations de conception.

Dernières pensées

Le problème avec la conception atomique, c'est que ce n'est pas nouveau – le verbiage l'est, mais pas la théorie. C'est ainsi que les sites Web sont conçus depuis longtemps. Parler en termes de conception atomique ne fera pas automatiquement de vous un grand concepteur ou développeur ; ce n'est pas un remplacement pour un travail solide.

L'un des avantages d'en parler de cette manière, en utilisant ce type de terminologie pour clarifier la méthodologie, est que c'est plus facile à comprendre pour les non-développeurs – vous pouvez expliquer votre processus aux clients. Et pour le développeur organisé, c'est un moyen de compartimenter les conceptions. Vous pourrez explorer un composant ou un petit groupe d'éléments qui ne fonctionnent pas. Cela peut vous aider à voir la forêt pour les arbres au lieu de dire : « Tout cela est imparfait. »

La conception atomique vous permet d'embrasser la créativité sans vous y perdre. Il regroupe les éléments de base et les systèmes de conception d'une manière qui vous permet de démarrer un projet plus rapidement afin que le temps puisse être consacré là où votre talent artistique et vos compétences sont le plus nécessaires - faire des adaptations complexes, résoudre des problèmes, répondre aux besoins des clients et finalement créer un site Web qui va au-delà de la norme.

Maintenez cet élan de conception Web et consultez 10 règles de bonne conception d'interface utilisateur à suivre pour chaque projet de conception Web.

Image en vedette via ShadeDesign / shutterstock.com