Mémo Atomic Design

Source : Atomic Design par Brad Frost

Bénéfices du 'Style Guide'

• Promouvoir la cohérence et la cohésion de l'ensemble de l'expérience (multitude de tailles d'écran, de dispositifs, de navigateurs et d'environnements)
• Accélérez le workflow de votre équipe et gagnez du temps et de l'argent.
• Établir un workflow plus collaboratif entre toutes les disciplines impliquées dans un projet.
• Établir un vocabulaire partagé entre tous les membres d'une organisation, y compris les fournisseurs externes.
• Fournir une documentation utile pour aider à éduquer les parties prenantes, les collègues et même les tiers.
• Faciliter les tests croisés navigateur/dispositif, de performance et d'accessibilité.
• Servir de base aux équipes pour qu'elles puissent modifier, étendre et améliorer leur travail au fil du temps.

Contenu du 'Design System'

• Guide de l'identité de marque : logos, typographie, palettes de couleurs, messages, illustrations...
• Guide de langage : orientation générale de la conception, philosophie et approche de projets ou de produits spécifiques.
• Style de voix et de ton : comment la voix et le ton de l'entreprise doivent évoluer dans divers scénarios.
• Guide de rédaction : quelques lignes directrices et garde-fous pour la contribution au contenu.
• Guide de code : conventions, modèles et exemples pour écrire un code lisible, évolutif et facile à maintenir.
• Bibliothèque de modèles : guides de style / bibliothèques d'interface utilisateur / bibliothèques de composants

Méthodologie 'Atomic Design'

• Atomes : éléments html de base (ex : étiquettes de formulaires, entrées, boutons, h1...)
• Molécules : groupes d'éléments de l'interface utilisateur fonctionnant ensemble comme une unité (ex : étiquette de formulaire + recherche + bouton)
• Organismes : composants complexes de l'interface utilisateur composés de groupes de molécules, d'atomes et d'autres organismes. Ces organismes forment des sections distinctes d'une interface (ex : un en-tête)
• Modèles : mise en page de composants et structure des contenus (contenus génériques)
• Pages : un contenu réel dans des modèles et des variantes, pour montrer l'interface utilisateur finale et tester sa pertinence.

Inventaire de l'interface

• Éléments globaux : en-têtes, pieds de page et autres éléments qui sont partagés à travers l'expérience.
• Navigation : navigation principale, navigation secondaire, pagination, fil d'ariane et tout ce qui est utilisé pour naviguer.
• Types d'images : logos, images de héros, avatars, vignettes, arrière-plans...
• Icônes : toutes les icônes de l'interface et leur signification.
• Formulaires : entrées, zones de texte, menus de sélection, cases à cocher, interrupteurs, boutons radio, curseurs...
• Boutons : primaires, secondaires, grands, petits, désactivés, actifs, de chargement, et même les liens textuels.
• Titres : h1, h2, h3, h4, h5, h6 et variations des titres.
• Blocs : légendes, résumés, annonces, les blocs sont des collections de titres typographiques et/ou d'images et/ou de texte de synthèse.
• Listes : non ordonnées, ordonnées, définitions, à puces, numérotées, lignées, rayées...
• Composants interactifs : accordéons, onglets, carrousels et modules avec éléments mobiles.
• Médias : lecteurs vidéo, lecteurs audio et autres éléments media.
• Composants annexes : widgets, iframes, tickers boursiers, boutons sociaux, scripts de suivi invisibles...
• Publicités : tous les formats et dimensions publicitaires.
• Messages : alertes, succès, erreurs, avertissements, validation, chargements, fenêtres contextuelles, infobulles, etc.
• Couleurs : toutes les couleurs uniques présentes dans l'interface.
• Animations : Éléments de l'interface qui se déplacent, s'effacent, tremblent, font des transitions ou des scintillements sur l'écran.

Maintient du 'Design System'

• Faites quelque chose : commencez maintenant et améliorez-le ensuite.
• Rendez-le officiel : mettez en place une équipe; les faiseurs (visuel, produit, ux, frontend, qa) et les utilisateurs.
• Rendez-le adaptable : pensez aux futurs changements et établissez un plan clair.
• Rendez-le maintenable : facilitez son déploiement et sa communication (liste des changements, futurs développements, exemples de réussites, conseils et astuces...)
• Rendez-le accessible : créez un guide facile à utiliser (documentation, noms logiques, cas d'utilisation...) et éduquez (sessions en binôme, ateliers, webinaires, tutoriels, intégration...)
• Faites-en un projet global (suivi des problèmes, chat, forum, suggestions, demandes de commentaires, enquêtes...)
• Rendez le projet visible : rendez le design system public
• Faites-le grandir : inclure la marque, la voix et le ton, le code, les principes de conception et les guides de rédaction.
• Faites-le durer en établissant une base solide.