Comment créer et maintenir des systèmes de conception atomique avec Pattern Lab 2

Les avantages des systèmes de conception d'interface utilisateur sont maintenant bien connus. Ils conduisent à des expériences utilisateur plus cohérentes et cohérentes. Ils accélèrent le flux de travail de votre équipe, vous permettant de lancer plus de choses tout en économisant énormément de temps et d'argent dans le processus . Ils établissent un vocabulaire commun entre les disciplines, ce qui se traduit par un flux de travail plus collaboratif et constructif.

Ils facilitent les tests de navigateur, d'appareil, de performances et d'accessibilité. Et ils constituent une base solide sur laquelle s'appuyer au fil du temps, aidant votre organisation à s'adapter plus facilement au paysage Web en constante évolution.

Afin de créer ces systèmes, nous devons établir une bibliothèque de modèles dans Markdown. Nous devons décomposer nos interfaces en parties plus petites, mais nous devons simultanément nous assurer que ces parties s'assemblent pour former un tout beau et fonctionnel. La « conception atomique » est un modèle mental utile qui nous aide à faire exactement cela, et Pattern Lab est une suite d'outils qui aide à donner vie à ces systèmes de conception atomique.

Lectures complémentaires sur SmashingMag :

• Faire passer les bibliothèques de modèles au niveau supérieur
• Modèles de conception réactifs intelligents
• Un aperçu détaillé des outils de guide de style de vie
• Rencontrez des modèles de conception front-end inclusifs
  

Après plus de deux ans de travail acharné, nous sommes heureux d'annoncer Pattern Lab 2 ! Totalement repensé, Pattern Lab 2 est une suite d'outils open source pour vous aider, vous et votre équipe, à créer et à maintenir des systèmes de conception d'interface utilisateur réfléchis . À la base, il s'agit d'un générateur de site statique qui assemble des modèles et vous permet de concevoir avec des données dynamiques.

Voici quelques points forts de la nouvelle version :

• Un noyau totalement restructuré qui prend en charge plus de langues, de moteurs de modèles et de formats de données
• Prise en charge de Markdown pour la documentation des modèles
• Ajout du support YAML ainsi que JSON pour la gestion des données dynamiques
• Plugins pour étendre et améliorer les fonctionnalités de Pattern Lab
• Une interface utilisateur frontale thématique, extensible et repensée

Mais plus que tout, Pattern Lab 2 a été conçu et construit pour que votre équipe puisse l'utiliser efficacement à chaque phase du processus de votre système de conception, du tout début jusqu'à sa maintenance à long terme.

Pattern Lab au début du projet

Votre équipe a été chargée de créer une nouvelle application et un système de conception sous-jacent. Il était une fois, les concepteurs UX de vos équipes se sont peut-être enfermés dans une pièce pour définir le produit au moyen de wireframes monolithiques et fortement annotés. Une fois approuvés, ils seraient transmis aux concepteurs visuels qui appliqueraient ensuite la couleur, la typographie et la texture pour donner vie aux wireframes. Une fois que homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd a finalement été approuvé, les conceptions sont envoyées aux développeurs frontaux, qui ont rapidement éclaté en sanglots car les conceptions contiennent une multitude de mises en page irréalistes, un contenu utilisateur improbable (chaque nom d'utilisateur ne comporte que 4 caractères, comme c'est pratique !) , et un pot-pourri de polices et de modèles de conception incongrus.

Le processus de conception à jeter par-dessus le mur est mort et révolu. La collaboration, l'itération et le développement rapide sont essentiels pour faire face à ce paysage Web diversifié et en constante évolution. Nous devons entrer dans le navigateur dès que possible et tester les conceptions sous des variables du monde réel telles que la réactivité, les performances, l'ergonomie et le mouvement. C'est pourquoi il est essentiel de traiter le développement front-end comme une partie essentielle du processus de conception, et pourquoi il est si crucial que les concepteurs et les développeurs front-end travaillent en étroite collaboration. En fin de compte, nous travaillons tous sur la même interface utilisateur.

La configuration d'une instance de Pattern Lab le jour 1 de votre projet peut créer un atelier partagé - ou un laboratoire, si vous préférez - équipé d'outils de conception et de développement, d'un refroidisseur d'eau, d'un tableau blanc et d'un microscope. Il offre un lieu à chaque discipline pour apporter sa perspective au système de conception vivant et respirant. Dans un sens réel, Pattern Lab peut servir de plaque tournante de votre projet de système de conception, minimisant le besoin de créer des wireframes trop verbeux, des compositions statiques à lignes rouges et d'autres artefacts statiques maladroits.

Ça sonne bien, non ? Voyons comment vous pouvez lancer Pattern Lab le premier jour de votre projet.

Pattern Lab 2 est disponible dans les versions PHP et Node. Equipes, choisissez votre aventure ! Certains projets donnent un choix clair de pile technologique. D'autres se résument aux compétences de l'équipe ou à la priorité environnementale. Quelle que soit la plate-forme, Pattern Lab 2 est prêt à vous aider, vous et votre équipe, à collaborer à la création de votre nouveau système d'application et de conception. Quel que soit votre choix de plate-forme, sachez qu'avec l'une ou l'autre version, Pattern Lab produira des résultats presque identiques - un peu comme des voitures de marques et de modèles différents vous amènent toutes à la même destination.

Installation de Pattern Lab

Une fois les prérequis appropriés installés, vous serez prêt à installer Pattern Lab. Voyons comment installer Pattern Lab Node, mais gardez à l'esprit que les instructions PHP sont également disponibles et sont similaires.

Depuis la fenêtre de votre terminal, accédez au répertoire dans lequel vous souhaitez installer Pattern Lab. Tapez ensuite les commandes suivantes :

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Une fois terminé, gulp patternlab:serve

L'exécution de npm install supprimera les dernières dépendances et gulp patternlab:serve générera et auto-hébergera Pattern Lab, en ouvrant l'interface dans votre navigateur par défaut. Et si vous ne souhaitez pas cloner directement le référentiel git, vous pouvez également télécharger la dernière version, puis effectuer les étapes 2 et 3.

Avec Pattern Lab opérationnel, votre équipe dispose désormais d'un hub pour concevoir, développer et réviser votre système de conception qui sera bientôt mis en place.

Système de fichiers de Pattern Lab

Pattern Lab compile tout ce qui se trouve dans le dossier /source de votre projet dans des fichiers HTML statiques qui résident dans le dossier /public . Cette sortie peut ensuite être affichée ou consommée individuellement ou à l'intérieur de l'interface du guide de style. Jetons un coup d'œil au système de fichiers de Pattern Lab et à ce qui se trouve à l'intérieur de source/ :

• _annotations/ - où votre équipe peut définir des annotations dynamiques pour renforcer la documentation de votre interface utilisateur
• _data/ - où résident les données globales utilisées pour rendre vos modèles.
• _meta/ - où se trouvent les informations <head> et foot (qui terminent tous vos motifs).
• _patterns/ - où résident vos modèles, la documentation des modèles et les données spécifiques aux modèles.
• css - où vos feuilles de style peuvent résider
• images - où vos images peuvent résider
• js - où votre javascript peut résider

Il convient de souligner que Pattern Lab ne vous impose aucune convention frontale ni dépendance de production. La façon dont vous décidez de structurer vos dossiers et les technologies que vous choisissez dépend entièrement de vous. Si vous voulez appeler votre dossier /stylesheets au lieu de /css allez-y ! Vous voulez utiliser Sass ? Agréable! Vous aimez jQuery ? Génial! Le detesté? C'est bien aussi ! Pattern Lab existe simplement pour assembler vos motifs et s'écarte de toute décision frontale que vous prenez. Vous pouvez même configurer la façon dont vos actifs sont gérés lorsqu'ils voyagent de source/ à public/ .

Choisissez votre propre aventure : conventions de dénomination et configuration

La conception atomique est un modèle mental utile pour réfléchir à la construction de systèmes de conception d'interface utilisateur, mais ce n'est certainement pas un dogme rigide. Il est important de choisir une nomenclature qui aide votre équipe à parler le même langage et à faire du bon travail ensemble.

Les conventions de nommage de Pattern Lab, comme la plupart des aspects du logiciel, sont entièrement configurables. Alors que Pattern Lab patterns/ dossier par défaut est «atomes», «molécules», «organismes», «modèles» et «pages», vous êtes libre de modifier, supprimer ou ajouter au désir de votre cœur. Par exemple, si nous devions recréer la taxonomie du système de conception Predix de GE - qui comprend les principes, les bases, les composants, les modèles, les fonctionnalités et les applications - nous structurerions le /source/_patterns/ de Pattern Lab comme suit :

 /00-Principles/ /01-Basics/ /02-Components/ /03-Templates/ /04-Features/ /05-Applications/

Pattern Lab est conçu pour se conformer à votre flux de travail, et non l'inverse.

Établir la direction de la conception

Même pendant les premiers jours ou les premières heures d'un projet, tout le monde a quelque chose à apporter à votre Pattern Lab. C'est le moment d'explorer, de comprendre les choses et de créer un alignement. Chaque rôle mène des activités différentes, mais leur sortie et leur entrée sont liées. Chacun gonfle un pneu séparé du véhicule qui vous amènera tous à votre destination.

Définition de l'IA basse fidélité dans Pattern Lab

Les premiers travaux de conception UX impliquent de déterminer l'architecture de l'information de l'application. Plutôt que de rechercher immédiatement des outils filaires haute fidélité qui ont tendance à définir prématurément les mises en page et les fonctionnalités techniques, il est préférable de créer des croquis lo-fi qui établissent ce qui se passe sur un écran particulier et dans quel ordre général. Ce travail peut prendre la forme de croquis de serviettes, de listes à puces ou de feuilles de calcul. Étant donné que Pattern Lab prend en charge le balisage de base, il est possible de traduire rapidement ces diagrammes de référence de contenu dans le navigateur immédiatement. Pour la refonte de la Pittsburgh Food Bank, nous avons supprimé chaque modèle en utilisant cette approche.

Ainsi, le code du modèle de page d'accueil, trouvé dans /source/_patterns/templates/homepage.mustache ressemble à ceci :

 {{> organisms-header }} <div class="fpo">Mission Statement</div> <div class="fpo">Campaign</div> <div class="fpo">Get Help</div> <div class="fpo">Give Help</div> <div class="fpo">Learn</div> {{> organisms-footer }}

Nous incluons un modèle d'en-tête et de pied de page, puis supprimons simplement le contenu que nous prévoyons d'inclure sur cette page.

Capturer les décisions de conception visuelle

Les premiers travaux de conception visuelle impliquent d'explorer la typographie, les palettes de couleurs et d'autres aspects de la marque visuelle. Historiquement, les concepteurs pouvaient se lancer dans la création de maquettes Photoshop haute fidélité et centrées sur le bureau. Les concepteurs disposent désormais d'outils utiles tels que les mosaïques de style, Typecast et les collages d'éléments pour établir une direction de conception visuelle sans recourir à des compositions prématurées et haute fidélité.

Au fur et à mesure que des décisions sont prises concernant les palettes de couleurs et les associations de polices, Pattern Lab peut capturer les résultats de ces décisions de conception, garantissant que l'équipe de conception et de développement ne génère pas involontairement 50 nuances de gris.

Devenir un chef de préparation frontale dans Pattern Lab

Et puis il y a le code frontal. Dans ces premières étapes d'un projet, les développeurs frontend peuvent être tentés de rester assis et d'attendre que les concepteurs proposent une direction avant de plonger dans le code. Mais ce type de réflexion empêche les concepteurs et les développeurs de se synchroniser les uns avec les autres et empêche une véritable collaboration de se produire.

Comme les chefs de préparation dans un restaurant, les développeurs ont une énorme opportunité de se mettre au travail pour préparer les modèles et le code qui deviendront finalement le système de conception final. Dans les premiers jours du projet, les développeurs peuvent commencer à supprimer des modèles et à importer des actifs dans Pattern Lab, en préparant les choses tôt afin que les concepteurs et les développeurs puissent passer plus de temps à travailler ensemble pour concevoir et créer l'interface utilisateur.

Les palettes de couleurs, la copie réelle et la mise en page doivent encore être établies, mais cela ne devrait pas empêcher les développeurs d'échafauder les structures qui prennent en charge les structures filaires du contenu. Prenez un modèle de héros, par exemple :

Ce modèle inclut d'autres modèles, ce qui est un moyen puissant de consommer des éléments d'interface plus petits dans des structures toujours plus grandes. Voici le balisage pour block-hero.mustache :

 <a href="{{ url }}" class="c-block-hero"> {{> atoms-hero-img }} <h2 class="c-block-hero__headline">{{ headline.medium }}</h2> </a><!-- end c-block--hero-->

Le code à double accolade ( {{}} ) est un code de modèle Moustache, qui nous permet de définir un contenu dynamique et d'inclure des modèles les uns dans les autres. Par exemple, le code {{> atoms-hero-img }} indique à Pattern Lab de rechercher un atome appelé "hero-img" et de l'inclure dans le modèle. L'unité héros elle-même peut ensuite être incluse dans des modèles plus complexes en utilisant la même convention d'inclusion en utilisant ce qui suit : {{> molecules-hero }} .

Cette approche de poupée gigogne russe pour inclure des modèles permet à votre base de code de rester agréable et sèche, ce qui signifie que si vous apportez une modification à un modèle particulier, partout où ce modèle est inclus sera automatiquement mis à jour. Cela permet de garder vos conceptions et votre base de code synchronisées et cohérentes. Et en plus de tout cela, cette accumulation continue de modèles peut produire des interfaces presque complètes en peu de temps !

retrousser nos manches

L'architecture de l'information a commencé à prendre forme, la direction esthétique initiale a été établie et les modèles naissants ont été supprimés dans Pattern Lab. Désormais, l'équipe peut maintenant se plonger collectivement dans la construction du système de conception d'interface pour de bon. Voyons comment utiliser Pattern Lab pour transformer un vague sens de l'orientation en un système de conception beau, fonctionnel, réfléchi et complet.

Concevoir avec des données dynamiques

Un concept important de la conception atomique est les différences entre les modèles et les pages. Les modèles définissent la structure de contenu sous-jacente d'une interface utilisateur, tandis que les pages sont des instances spécifiques de ces modèles qui remplacent cette structure de contenu par un contenu représentatif réel. Les deux sont nécessaires pour documenter les paramètres de contenu tout en montrant les modèles de conception en action et remplis de contenu réel.

L'une des fonctionnalités les plus puissantes de Pattern Lab est la possibilité d'échanger différents contenus représentatifs dans vos modèles d'interface utilisateur pour s'assurer qu'ils peuvent gérer la nature dynamique de votre contenu. Que se passe-t-il si votre utilisateur ne télécharge pas de photo de profil ? Que se passe-t-il si l'utilisateur a 13 articles dans son panier contre 2 articles ? Que se passe-t-il si l'un de ces produits a 14 variantes potentielles ? Que faire si le titre de l'article de blog contient 400 caractères ? Utilisateur de retour ? Premier utilisateur ? Que faire si l'article n'a pas de commentaires? Ou qu'en est-il lorsqu'il comporte sept couches de commentaires imbriqués ? Et si nous devions afficher un message urgent sur le tableau de bord lorsque leur compte est piraté ? Pattern Lab vous permet de manipuler des données pour exprimer n'importe quel nombre d'états et de variantes d'interface utilisateur différents de n'importe quel modèle.

Données spécifiques à la page

Les données initiales dans Pattern Lab sont stockées dans un fichier appelé /source/_data/data.json , qui contient les données que les modèles utiliseront initialement pour être affichées dans le guide de style et les vues de modèle. Votre data.json par défaut peut ressembler à ceci :

 { "headline" : { "short" : "Lorem ipsum dolor sit (37 characters)", "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)" }, "url": "#", "imgHero" : { "src": "../../images/fpo_hero-opt.png", "alt": "Hero Image" }, "imgLandscape" : { "src": "../../images/fpo_16x9-opt.png", "alt": "Landscape Image" }, "mediaList": [] }

Vous pouvez référencer ces éléments de données dans vos modèles (c'est-à-dire inclure {{ headline.short }} dans un modèle) pour obtenir des résultats comme celui-ci :

Au niveau de la page, nous souhaitons remplacer ces images en niveaux de gris et le texte d'espace réservé lorem ipsum par du contenu réel. Pour ce faire, nous allons créer un nouveau fichier juste à côté de /source/_patterns/pages/homepage.mustache appelé homepage.json , où nous pouvons remplacer les données initiales définies dans `data.json. Cela pourrait ressembler à ceci :

 "imgHero" : { "src": "../../images/sample/hero-forest.jpg", "alt": "Forest" }, "headline" : { "medium" : "Track your hikes. Challenge your friends. Get out there and start exploring." }, "toutList" : [ { "url": "link.pages-blog-detail", "headline": { "short" : "Best winter hikes around the world" }, "imgLandscape" : { "src": "../../images/sample/tout-winter-hiker.jpg", "alt": "Hiker with back pack walking in snow" } }, { "url": "link.pages-login", "headline": { "short" : "Sign in to view your dashboard" }, "imgLandscape" : { "src": "../../images/sample/tout-leaves.jpg", "alt": "Green Leaves" } }, { "url" : "link.pages-about", "headline": { "short" : "Learn about our mission" }, "imgLandscape" : { "src": "../../images/sample/tout-mountains.jpg", "alt": "Mountain" } } ]

Cela se traduit par une interface utilisateur qui ressemble à ceci :

Pseudo-modèles

Nos systèmes de conception doivent être flexibles et s'adapter à la réalité du contenu qui vit dans nos applications. Nous devons tenir compte simultanément des meilleures situations, des pires et de tout ce qui se trouve entre les deux.

Exprimer ces variations d'interface utilisateur dans des outils de conception statiques est un exercice fastidieux et redondant, ce qui peut expliquer pourquoi ils sont rarement conçus. Mais la fonction de pseudo-modèle de Pattern Lab nous permet d'articuler (parfois de manière extravagante) différents scénarios avec seulement quelques modifications de nos données.

Disons que nous créons une application de suivi de randonnée dont le tableau de bord affiche une liste de statistiques de randonnée : dénivelé gravi, nombre de sentiers parcourus, pas effectués, etc. Pour un utilisateur actif qui a constamment saisi du contenu dans l'application, l'interface utilisateur peut ressembler à ceci :

Dans /source/_patterns/pages/dashboard.json , nos données ressembleraient à ceci :

 { "blockFeature":{ "number":"4,500", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"100", "label":"Progress: 100%" } }, "tileList":[ { "number":"16", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"20", "label":"Progress: 20%" } }, { "number":"500", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"40", "label":"Progress: 40%" } }, { "number":"62,500", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"60", "label":"Progress: 60%" } }, { "number":"94,300,843", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"80", "label":"Progress: 80%" } } ], ... }

Avec ces données, Pattern Lab est en mesure de remplir l'interface utilisateur avec la richesse du contenu généré par cet utilisateur.

Cependant, ce scénario n'est peut-être pas si courant. Pour chaque utilisateur ambitieux qui prend le temps de remplir chaque champ et de connecter chaque application disponible, il y a probablement des dizaines d'utilisateurs occasionnels qui ne remplissent pas tous les champs et profitent de toutes les fonctionnalités de l'application. D'ailleurs, à un moment donné du parcours de chaque utilisateur, ils sont entièrement nouveaux dans l'interface ! Artifions ces variations importantes à l'aide de la fonctionnalité de pseudo-modèle de Pattern Lab.

Dans notre /source/_patterns/pages/ , nous pouvons créer un nouveau pseudo-pattern appelé dashboard~new-user.json . Cela créera une autre instance de la page qui hérite de toutes les données de dashboard.json , mais nous permet également de modifier ou d'étendre davantage les données. Dans le cas de dashboard~new-user.json , nous pouvons remplacer des éléments de données pour montrer à quoi pourrait ressembler une nouvelle expérience utilisateur :

Et voici les données que nous ajoutons au fichier pour réaliser cette interface utilisateur :

 { "blockFeature":{ "styleModifier":"featured", "number":"0", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Let's go on a hike and climb in elevation", "overlayAction":"Find a Hike" } }, "tileList":[ { "number":"0", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"What National Parks have you visited?", "overlayAction":"Find a National Park" } }, { "number":"0", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Been on a hike recently?", "overlayAction":"Log Your First Hike" } }, { "number":"0", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Trying to stay healthy?", "overlayAction":"Track Calorie Count" } }, { "number":"0", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Counting steps?", "overlayAction":"Connect Your Fitbit" } } ] }

En remplaçant certaines des valeurs de dashboard.json , nous sommes en mesure de modifier le contenu et d'activer/désactiver des modèles particuliers.

Dans un autre cas, nous devrons peut-être montrer à quoi ressemble l'interface utilisateur en cas de problème de sécurité ou d'un autre problème avec le compte de l'utilisateur. Nous pouvons créer le pseudo-modèle dashboard~hacked.json pour créer l'interface utilisateur suivante :

La plupart des données de dashboard.json resteront les mêmes, mais nous ajouterons ce qui suit pour créer le message d'erreur :

 { "alert" : { "alertClass" : "error", "alertText" : "On May 22nd, hackers from a hidden underground tunnel somewhere in Siberia hacked our servers and compromised all of our sensitive data. <a href='#'> Please reset your password immediately!</a>" } }

Paramètres de motif

Il y a des moments où l'utilisation de Pattern Lab justifie des pseudo-modèles complets, comme illustré ci-dessus. Mais parfois, vous devrez peut-être modifier ou remplacer une seule valeur de données dans un modèle, laissant le reste être géré par les autres modèles d'affichage dynamiques. Pour ces instances, les paramètres de modèle sont votre outil de choix. Les paramètres de modèle sont un mécanisme simple pour remplacer les variables dans un modèle inclus. Ils se limitent à remplacer les variables dans le modèle inclus et uniquement le modèle inclus. Considérez cet extrait du modèle de détail :

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

qui inclut le modèle de liste de médias de section.

 <section class="c-section"> {{# sectionTitle}} <h2 class="c-section__title">{{ sectionTitle }}</h2> {{/ sectionTitle }} {{> organisms-media-list }} {{# textButton }} {{> atoms-text-button }} {{/ textButton }} {{# overlay }} {{> molecules-overlay }} {{/ overlay}} </section><!--end section-->

Comme nous l'avons appris, {{sectionTitle}} pour les blocs de données latestPosts et featurePeople sera rempli à partir de n'importe quel compagnon .json présent, avec /source/_data/data.json comme solution de secours globale. Cependant, nous incluons un seul modèle plusieurs fois et nous souhaitons peut-être fournir rapidement des données uniques à chaque modèle sans avoir à créer ces clés dans notre .json. Nous pouvons modifier les listes de médias de la section incluse comme suit :

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list(sectionTitle: "The latest from the moleskine") }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list(sectionTitle: "Staff Hikers") }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

Ces deux organismes utiliseront désormais la variable sectionTitle définie ici lors du rendu. Les paramètres de modèle sont puissants, mais ne sont pris en charge que par PHP et Node Moustache PatternEngines. D'autres langages de modèles offrent de meilleures solutions à ce problème. Consultez les docs pour lire le maigre complet sur les paramètres des paramètres.

styleModifiers

Souvent, vous souhaiterez afficher des variantes stylistiques du même modèle, telles que des boutons de médias sociaux colorés ou des états de composants. Une extension de la syntaxe d'inclusion abrégée, styleModifiers fournit des classes supplémentaires à un modèle. À condition que vous construisiez un modèle block-media avec {{ styleModifier}} dans l'attribut class :

 <a href="{{ url }}" class="c-block-media c-block-media--{{ styleModifier }}"> <div class="c-block-media__media"> {{> atoms-square:c-block-media__img }} </div> <div class="c-block-media__body"> <h2 class="c-block-media__headline">{{ headline.short }}</h2> <p class="c-block-media__excerpt">{{ excerpt.medium }}</p> </div><!-- end c-block-media__body --> </a><!-- end c-block-media -->

Inclure ce modèle avec deux-points après le nom définit le styleModifier :

 {{> molecules-block-media:fullBleed }}

donnerait une balise d'ancrage comme celle-ci :

 <a href="path/to/url" class="c-block-media c-block-media--fullBleed">

styleModifiers peut être combiné pour fournir plusieurs classes, en utilisant pipe (|) comme délimiteur.

 {{> molecules-block-media:fullBleed|is-lazyLoaded }}

Entre les pseudo-modèles, les paramètres de modèle et styleModifiers , Pattern Lab facilite la démonstration de variations d'interface utilisateur parfois très différentes tout en gardant la base de code sous-jacente DRY dans le processus.

Itérer dans le style

Un élément clé d'un flux de travail basé sur des modèles consiste à adopter l'itération et à reconnaître que les modèles et la conception continueront d'évoluer. Les parties façonneront le tout, le tout façonnera les parties, et le système interconnecté de composants émergera à la suite de ce processus.

Une autre conséquence naturelle de ce processus est que le point de production passe beaucoup plus tôt des mains des concepteurs UX et visuels aux mains des développeurs frontaux. Plutôt que de perdre un temps précieux à créer une multitude de compositions haute fidélité et de wireframes détaillés, le travail de conception peut passer de documents statiques à un navigateur où votre équipe peut aborder plus rapidement les réalités du Web.

Avec Pattern Lab comme point d'eau pour toute l'équipe, les concepteurs peuvent mieux comprendre comment les décisions prises dans un domaine affectent d'autres domaines.

Test de fenêtre avec ish.

Il est important que nos composants, ainsi que nos pages, soient flexibles sur l'ensemble du spectre de résolution. Cuire un outil de redimensionnement de fenêtre comme ish. dans une bibliothèque de modèles garantit que chaque élément ressemble et fonctionne parfaitement à n'importe quelle taille d'écran. Prendre le temps de créer des modèles entièrement flexibles nous préparera mieux à un avenir où les requêtes d'éléments et les composants Web auront pleinement mûri (nous ne pouvons pas attendre !).

En intégrant ces outils de fenêtre d'affichage directement dans l'environnement frontal, les concepteurs et les développeurs peuvent se regrouper autour de Pattern Lab pour déterminer où insérer des points d'arrêt dans la conception. De plus, les clients, l'assurance qualité et d'autres collègues peuvent identifier des domaines spécifiques où l'interface utilisateur s'effondre pour une raison quelconque.

Prêt à lancer

Le projet se déroule bien, mais avant de pouvoir être lancé dans le monde, les choses doivent être resserrées, testées sur plusieurs navigateurs / appareils et correctement documentées. Parlons de la façon dont Pattern Lab peut vous aider à préparer le code et la documentation de votre système de conception pour les heures de grande écoute !

Documentation accessible sur les modèles

Certains modèles peuvent se présenter comme auto-documentés, mais un modèle nécessite souvent un contexte ou des informations supplémentaires pour rendre les choses parfaitement claires. Des choses comme les définitions. les directives d'utilisation, les considérations, les ressources et les exemples d'images peuvent et doivent trouver leur place dans la documentation des modèles. La documentation de Pattern Lab 2 utilise Markdown avec le front-mater YAML pour créer cette documentation. Le fichier Markdown accompagne le modèle (par exemple, media-object.md doit se trouver juste à côté media-object.mustache ), et peut être formaté comme ceci :

 --- title: Utility Colors --- The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

La documentation Markdown signifie que les IA, les concepteurs visuels, les stratèges de contenu, les gens d'affaires, etc. peuvent plus facilement contribuer à la documentation vivante. Les propriétaires de produits pourraient même insérer des notes de fonctionnalité pour les nouveaux modèles avant même que le modèle ne soit créé. Des améliorations sont prévues pour rendre la documentation des modèles plus puissante, faisant ainsi de Pattern Lab un espace permanent pour votre équipe.

Lignée pour une AQ simplifiée

Lorsque vous examinez divers modèles dans une bibliothèque, le manque de contexte peut rendre difficile de discerner où ils sont réellement utilisés. Définir et décrire les caractéristiques des modèles est une chose, mais il est possible de fournir des informations contextuelles supplémentaires sur vos modèles d'interface utilisateur.

Grâce à la nature russe des poupées gigognes de Pattern Lab, il peut afficher les motifs qui composent un composant donné, et également montrer où ce motif est consommé dans le système de conception.

Grâce à cette fonctionnalité, les concepteurs et les développeurs disposent d'informations contextuelles utiles lors du contrôle qualité et/ou de la modification du système de conception. Si nous voulions apporter des modifications à un modèle particulier, comme doubler la taille de l'image ou ajouter un élément de texte supplémentaire, nous saurions immédiatement quels modèles et modèles auraient besoin d'être testés à nouveau et vérifiés pour s'assurer que rien ne rompt avec les modifications. . The lineage feature also helps point out unused or underutilized patterns so that teams can weed them out of the pattern library.

Showing Progress with Pattern States

Taking the concept of pattern lineage a step further, you and your team can keep track of each pattern's progress and how it affects the whole system. Pattern Lab's pattern state feature can track progress of a pattern from development, through review, to completion. With pattern states, you'll always be able to answer “Are all the patterns that comprise this template complete?”

To give your pattern a state, you add a state to the frontmatter in that pattern's documentation file. Par exemple:

 --- title: Block Media state: inreview --- The media block consists of...

Applying this status will present the pattern state in a couple places across Pattern Lab.

It's important to note that the state of a pattern can be influenced by the patterns it contains. Flagging a pattern like {{> molecule-media-block }} as inreview will cause a ripple effect anywhere that pattern is included. This helps identify bottlenecks that need addressed in order to bring your design system home.

You can create your own pattern states that match your team's workflow. These methods of understanding the state of your patterns can help larger teams keep track of the airplane as it's being built and flown at the same time.

Maintaining An Effective Design System

"The biggest existential threat to any system is neglect." – Alex Schleifer, Airbnb

There is a very real risk that despite your team's best intentions, your carefully-crafted design system and pattern library will slip into oblivion. “Never!” you exclaim, but unfortunately design system efforts fall into a state of disrepair for a number of reasons:

• The level of effort required to keep pattern code up to speed with applications' code bases is too high
• The pattern library is thought of as mere documentation rather than as housing a living, breathing system.
• The team fails to make the design system a key part of their workflow, and instead lets their process devolve into a series of hotfixes and ad hoc changes.
• One discipline serves as gatekeepers to the pattern library, preventing it from becoming a helpful resource for every discipline
• The pattern library isn't visible or attractive
• Many other factors (lack of funding, technology mismatches, lack of governance model, and more)

As Nathan Curtis rightly says, making a design system isn't just another project, but rather a product meant to serve your organization's sites and apps. To create a system that serves your organization for years to come, your UI design system needs to be properly maintained, serve as an essential resource for the organization to keep coming back to, and continue to be a core part of your team's design and development workflow.

Pattern Lab has always been an effective tool for creating UI design systems, but has historically lacked in the maintenance department. Thankfully, that's all changed with Pattern Lab 2. The new version has many features that helps you successfully document and maintain your pattern libraries while continuing to serve as a key tool in your pattern-driven design and development process.

Seeking the Holy Grail

It's critical to reduce the amount of effort and friction required to keep both your pattern library and production environments up to date. The Holy Grail of design systems is an environment where changes to patterns in a design system are automatically updated in both the pattern library and production environments.

The Holy Grail is often accomplished by using a frontend templating language to serve as the bridge between your pattern library and production environments. Pattern Lab 2's architecture now makes it possible to choose the templating engine that's right for your particular environment. As a result, you're able to get closer to achieving the Holy Grail. For instance, the team at Phase2 Technology have successfully integrated Pattern Lab 2 into their Drupal builds so that their clients' pattern libraries and production builds are always in step with one another.

“By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!”

– Evan Lovely, Phase2 Technology

Currently Pattern Lab 2 supports the popular Mustache and Twig templating engines, but the decoupled nature of Pattern Lab 2's editions (more on these in a bit) means that you can power Pattern Lab using the templating engine of your choice.

A Helpful Resource

Your pattern library and accompanying style guide should be something that your team comes back to reference again and again. While it may not make sense to immediately surface code snippets and pattern usage information during the initial design and development process, design system users will find themselves reaching for these things as they apply the design system to actual applications. Pattern Lab 2 now has more advanced config options that let you switch on pattern info by default to become a more helpful documentation and reference tool.

In order for your design system to thrive across your entire organization, it should be approachable and attractive. Pattern Lab 2 allows you to create your own custom front page for the component library, and also skin Pattern Lab's (intentionally bare bones) default UI to better serve your brand.

Doing It All Again

There are some teams that need only to set up and maintain a single design system, but many of us work on multiple projects for multiple clients. Wouldn't it be great to start new design system projects from a setup that's tuned to your workflow and tool choices?

Pattern Lab 2 has been re-architected to achieve just that. No longer is Pattern Lab a standalone tool, but rather it's an ecosystem built atop a core library. These changes will also make it easier for the Pattern Lab team to push out new features.

Éditions Pattern Lab

Les éditions permettent aux équipes et aux agences de regrouper tout ce qui prend en charge leurs flux de travail uniques avec Pattern Lab. Une édition peut devenir le point de départ de tous vos projets pendant que les équipes partagent et mettent à jour les fonctionnalités. La version Node de Pattern Lab utilise npm pour extraire des composants séparés, tandis que la version PHP utilise Composer pour vous aider à lancer vos projets de manière simple et standardisée.

Noyau de laboratoire de modèles

Core est le cœur de Pattern Lab et active toutes les autres fonctionnalités. Étant donné que Core est autonome, une équipe peut mettre à jour et rester à jour avec les dernières fonctionnalités de Pattern Lab sans perturber le reste de son projet.

Kits de démarrage

Vous disposez d'un ensemble fiable de code passe-partout avec lequel vous démarrez chaque projet ? Peut-être un ensemble commun de modèles de base, de mélanges Sass et de bibliothèques JavaScript qui sont vos outils de prédilection ? Un StarterKit est parfait pour regrouper ces actifs dans un passe-partout qui garantit que chaque projet démarre du bon pied.

Plusieurs kits de démarrage existent déjà pour lancer votre projet, que vous recherchiez un départ vierge, que vous commenciez par une démo présentant les fonctionnalités de Pattern Lab ou que vous commenciez par un framework populaire comme Bootstrap, Foundation ou Material Design. Et vous pouvez lancer le vôtre, qui peut être entièrement contrôlé par version afin que le StarterKit de votre équipe puisse évoluer avec vos outils.

L'importation d'un kit de démarrage ne se fait qu'en quelques clics après l'installation. Finalement, cette fonctionnalité sera intégrée dans une phase de post-installation comme c'est le cas pour Pattern Lab PHP via composer.

StyleguideKits

StyleguideKits est le front-end de Pattern Lab. Nous appelons cela "Le spectateur". StyleguideKits permet aux agences et aux organisations de développer des interfaces utilisateur Pattern Lab personnalisées et personnalisées pour montrer leurs modèles.

Moteurs de motif

PatternEngines sont les moteurs de modèles qui sont chargés d'analyser les modèles et de les transformer en HTML. PatternEngines donne à Pattern Lab Core la flexibilité de rendre de nombreux types de langages de modèle différents. Les PatternEngines actuels incluent Moustache et Twig, avec d'autres comme Handlebars et Underscore en cours de développement. Et rien ne vous empêche d'ajouter un autre moteur de création de modèles à Pattern Lab.

Plugins

Les plugins permettent aux développeurs d'étendre Pattern Lab Core et d'autres parties de l'écosystème. Par exemple, la version PHP de Pattern Lab comporte un certain nombre de plugins tels que Browser Auto-Reload, Data Inheritance et Faker. L'architecture de Pattern Lab permet aux développeurs de modifier les données à différentes étapes, d'ajouter leurs propres commandes ou règles de modèle, ou de modifier le front-end pour modifier et étendre les capacités de Pattern Lab

Regardez ma conversation

Essayez Pattern Lab 2 et impliquez-vous

La création d'interfaces utilisateur basées sur des modèles et de systèmes de conception sophistiqués est plus importante que jamais. Pattern Lab 2 est bien équipé pour créer et maintenir des systèmes de conception atomiques et peut servir de plaque tournante pour votre système de conception à chaque étape du flux de travail de votre équipe.

Si votre équipe décide de télécharger Pattern Lab 2 et de l'essayer, nous aimerions avoir de vos nouvelles ! Rejoignez la conversation en posant des questions sur Gitter, ouvrez des problèmes si vous avez des difficultés avec quelque chose, et aidez à proposer et discuter de nouvelles fonctionnalités.

Et si vous faites des choses sympas avec Pattern Lab 2, partagez vos idées ! Styleguides.io a plus de 150 exemples de bibliothèques de modèles, alors ajoutez votre Pattern Lab au mélange. La beauté du Web et des projets open source est que toute la communauté peut apprendre de votre expérience et s'appuyer sur ces connaissances.

Nous sommes ravis de voir les belles choses que vous créez !