Atomic Design and Sketch - Un guide pour améliorer le flux de travail

Sketch et Atomic Design sont un ensemble puissant d'outils et de méthodologies que les concepteurs peuvent utiliser pour créer des systèmes de conception qui permettent la standardisation et un flux de travail plus efficace.

Systèmes de conception : une introduction

Un système de conception est un ensemble de composants et de directives réutilisables qui aident les équipes à s'unir autour d'un langage commun pendant la création et la vie d'un produit.

Dans la plupart des cas, les systèmes de conception sont composés d'un guide de style et d'une bibliothèque de composants. Ils peuvent également inclure des éléments tels que la voix et le ton ainsi que les valeurs de la marque. L'intérêt d'un système de conception est de créer un ensemble de normes qui agissent comme une source unique de vérité pour un produit ou une marque.

Material Design de Google est un exemple de système de conception d'interface utilisateur structuré. Material Design a été introduit en 2014 comme un moyen de concevoir et de développer des applications Android cohérentes.

Un autre exemple est la voix et le ton de Mailchimp. Il décrit comment la voix d'une personne est toujours la même mais le ton change en fonction du contexte. En être conscient aide à renforcer le contenu et à donner de la personnalité à la marque.

Bien qu'il existe de nombreuses méthodes différentes qui peuvent être utilisées pour créer un système de conception, c'est une bonne idée de choisir un cadre qui permet à l'équipe de s'unifier autour d'un langage commun et d'un ensemble de normes. Atomic Design est un excellent exemple de framework qui atteint ces deux objectifs.

Conception atomique : systèmes de conception de bâtiments

Atomic Design, une méthodologie introduite par Brad Frost en 2013, est basée sur l'idée que chaque système de conception peut être défini comme une série de blocs de construction qui coexistent.

Voici un aperçu rapide des composants d'Atomic Design :

• Atomes . Représenter les blocs de construction de base d'un système de conception. Un exemple est un bouton ou un style de texte.
• Molécules . Un groupe d'atomes travaillant ensemble comme une unité. Les molécules sont des éléments tangibles de l'interface utilisateur. Par exemple, un bouton et un champ de texte peuvent être regroupés pour créer un formulaire de recherche.
• Organismes . Atomes et molécules travaillant ensemble dans une structure complexe. Un champ de recherche regroupé avec une barre de navigation forme un organisme d'en-tête sur un site Web.
• Modèles. Objets au niveau de la page plaçant des composants dans une mise en page qui définit la structure du contenu. Par exemple, prendre un organisme d'en-tête et le placer sur un modèle de page d'accueil.
• Pages. Instances de modèles qui représentent le produit final.

"Nous sommes chargés de créer des interfaces pour plus d'utilisateurs dans plus de contextes en utilisant plus de navigateurs sur plus d'appareils avec plus de tailles d'écran et plus de capacités que jamais auparavant. C'est une tâche ardue en effet. Heureusement, les systèmes de conception sont là pour vous aider. »—Brad Frost en guise d'introduction à la conception atomique et aux systèmes de conception.

L'utilisation d'Atomic Design pour créer et maintenir un système de conception aidera les concepteurs à travailler plus efficacement et à mieux communiquer au sein de leurs équipes. Il existe une pléthore d'outils et de méthodes pour créer et maintenir des systèmes de conception, mais souvent les meilleurs outils sont ceux que nous connaissons le mieux.

Comment utiliser Atomic Design avec Sketch

Pour développer un système de conception à l'aide d'Atomic Design, un excellent outil (et déjà familier) est Sketch. Il nous fournit une toile pour créer des atomes, des molécules et des organismes : les éléments nécessaires pour définir le cœur d'un système de conception.

Création d'atomes

Nous commençons par créer trois types d'atomes dans Sketch : les symboles, les styles de calque et les styles de texte.

Symboles. Les symboles ne sont rien de plus que des composants réutilisables. Ils sont définis une seule fois car ils peuvent être instanciés dans un produit. Par exemple, un symbole de flèche (atome) peut être défini avec des propriétés telles que la couleur de la bordure, la taille, etc. Nous pouvons ensuite réutiliser ce symbole sans avoir à le recréer à chaque fois.

Styles de calque . Les styles de calque sont les éléments de style visuel réutilisables qui restent cohérents sur chaque calque. Par exemple, la couleur de remplissage de la flèche précédemment définie.

Styles de texte. Les styles de texte, similaires aux styles de calque, sont des éléments réutilisables qui garantissent la cohérence entre des objets texte similaires. Par exemple, définir la taille et la couleur de la police d'un élément h1. Cela fonctionne de la même manière que les styles de texte dans Google Docs ou Microsoft Word.

Lorsque nous définissons des symboles, des styles de calque et des styles de texte, Sketch peut les diviser en catégories hiérarchiques dans ses menus de symboles et de styles de texte à l'aide d'un "/" (barre oblique). Le respect des conventions de dénomination et le fait d'avoir un ensemble bien défini de catégories principales donneront aux fichiers une structure organisée, réduisant la confusion et les incohérences.

Voici quelques façons de créer des catégories hiérarchiques pour les symboles, le texte et les styles de calque dans Sketch.

Nous pouvons représenter des symboles en utilisant la convention de dénomination suggérée suivante sous Atoms/ :

• Actifs
• Boutons
• Commandes d'entrée
• Images
• La navigation
• Information

Nous ne convertirons pas les styles de calque en symboles, il suffit donc de les identifier par leur groupe sémantique. Encore une fois, en utilisant les atomes / :

• Remplit
• Les frontières
• Ombres
• Dégradés

Semblable aux styles de calque, voici comment nous pouvons créer des styles de texte sous Atomes / :

• Rubriques
• Corps
• Légende
• Étiquettes
• Liens

Un langage de conception unifié ne devrait pas être simplement un ensemble de règles statiques et d'atomes individuels ; il devrait s'agir d'un écosystème évolutif.—Airbnb on Building a Visual Language.

Créer des molécules

Les atomes définissent la partie de base des directives de conception d'un produit, mais en eux-mêmes ne sont pas entièrement utiles. Afin de dériver certaines fonctionnalités, nous joignons des atomes ensemble et créons des molécules.

Joindre une étiquette (atome) à un bouton d'entrée (atome) pour créer une fonction de recherche est un bon exemple d'élément moléculaire couramment utilisé.

Un mot d'avertissement car il peut y avoir un peu de zone grise ici. Un bouton, au niveau du code , est considéré comme un atome, mais un bouton au niveau du design est considéré comme une molécule puisque nous regroupons un style de calque et un atome de style de texte. Pour éviter toute confusion, c'est une bonne idée de ne penser qu'aux éléments de niveau code.

Les principales catégories qui relèvent de Molecules/ sont :

• Information
• La navigation
• Commandes d'entrée

Étant donné que les molécules commenceront à façonner nos produits de manière interactive, il est judicieux de définir plus précisément les catégories ci-dessus. Dans ce cas, nous définirons un ensemble de sous-catégories qui représente une bibliothèque de motifs :

• Listes déroulantes
• Bascule
• Curseurs
• Onglets
• Pagination
• Indicateurs de progrès
• Champs de date
• Champs de texte
• Cases à cocher
• Boutons radio
• Modules

Créer des organismes

Les organismes sont des groupes d'atomes et de molécules. Ils peuvent également faire partie d'autres organismes.

Contrairement aux atomes et aux molécules, les organismes n'ont pas d'inclusion abstraite dans les produits que nous concevons ; ce sont des composants concrets et réutilisables qui peuvent être facilement identifiés avec des actions spécifiques. Leur structure est plus complexe qu'un atome ou une molécule.

Si le champ de recherche précédemment défini est regroupé avec d'autres composants, comme une barre de navigation (molécule) et un logo (atome), un organisme est créé. Un exemple est une barre de navigation ou un calendrier.

Les organismes, comme les molécules, peuvent appartenir aux mêmes catégories et sous-catégories :

Voici les principales catégories que nous allons créer pour Organisms/ :

• Information
• La navigation
• Commandes d'entrée

Comme pour les molécules, nous allons également créer des sous-catégories pour les organismes :

• Listes déroulantes
• Bascule
• Curseurs
• Onglets
• Pagination
• Indicateurs de progrès
• Champs de date

Jusqu'à présent, la plupart de l'interface utilisateur a déjà été conçue, il suffit donc maintenant d'appeler les instances de nos composants lorsqu'elles sont nécessaires pour la conception.

Il est facile de localiser chacun de ces composants par leurs groupes sémantiques, soit en les recherchant directement à l'aide du panneau d'insertion dans la barre d'outils Sketch, où nous trouverons un ensemble bien organisé de 3 catégories principales, soit en utilisant un plugin comme Coureur pour Sketch.

Runner for Sketch optimise le flux de travail d'un concepteur en fournissant un ensemble de commandes clavier qu'il peut utiliser au lieu de rechercher des éléments dans des menus sans fin. Par exemple, ils peuvent taper le mot insert , appuyer sur la touche de tabulation et rechercher les composants dont ils ont besoin.

En tapant atomes , une liste déroulante nous montrera tous les éléments qui entrent dans cette catégorie. Si les atomes et les molécules ont des catégories partagées, seuls les atomes seront vus et toutes les molécules seront ignorées.

Envelopper

Sketch et Atomic Design sont un ensemble d'outils puissants qui peuvent être utilisés ensemble pour améliorer les flux de travail de conception et faciliter un cadre de système de conception efficace.

Utilisant le concept d' atomes , de molécules et d' organismes comme base de composants, Atomic Design aide les designers à s'unir autour d'un langage commun lors de la création et de la vie d'un produit.

Les concepteurs peuvent utiliser des outils tels que Sketch pour implémenter Atomic Design, offrant un flux de travail plus efficace et un ensemble de normes adoptées par tous les membres de l'équipe de conception, y compris les développeurs lors des étapes finales du projet.

Pour en savoir plus sur le blog Toptal Design :

• Comment créer un cadre de conception efficace
• Comprendre les systèmes de conception et les modèles
• Comment créer un guide de style d'esquisse, une bibliothèque et un kit d'interface utilisateur
• Pourquoi les startups ont besoin d'un guide de style
• Plugin Zeplin Sketch - Le pont de flux de travail entre la conception et l'ingénierie