Cómo hacer y mantener sistemas de diseño atómico con Pattern Lab 2

Los beneficios de los sistemas de diseño de interfaz de usuario ahora son bien conocidos. Conducen a experiencias de usuario más cohesivas y consistentes. Aceleran el flujo de trabajo de su equipo, lo que le permite lanzar más cosas mientras ahorra una gran cantidad de tiempo y dinero en el proceso . Establecen un vocabulario común entre disciplinas, lo que da como resultado un flujo de trabajo más colaborativo y constructivo.

Facilitan las pruebas de navegador, dispositivo, rendimiento y accesibilidad. Y sirven como una base sólida para construir con el tiempo, ayudando a su organización a adaptarse más fácilmente al panorama web en constante cambio.

Para crear estos sistemas, tenemos que establecer una biblioteca de patrones en Markdown. Necesitamos dividir nuestras interfaces en partes más pequeñas, pero al mismo tiempo debemos asegurarnos de que esas partes se unan para formar un todo hermoso y funcional. El "diseño atómico" es un modelo mental útil que nos ayuda a hacer precisamente eso, y Pattern Lab es un conjunto de herramientas que ayuda a dar vida a estos sistemas de diseño atómico.

Lectura adicional en SmashingMag:

• Llevando las bibliotecas de patrones al siguiente nivel
• Patrones de diseño de respuesta inteligente
• Una descripción detallada de las herramientas de la guía de estilo de vida
• Conozca patrones de diseño front-end inclusivos
  

¡Después de más de dos años de arduo trabajo, nos complace anunciar Pattern Lab 2! Totalmente reinventado, Pattern Lab 2 es un conjunto de herramientas de código abierto para ayudarlo a usted y a su equipo a crear y mantener sistemas de diseño de interfaz de usuario bien pensados . En esencia, es un generador de sitios estáticos que une patrones y le permite diseñar con datos dinámicos.

Algunos aspectos destacados de la nueva versión incluyen:

• Un núcleo totalmente reestructurado que admite más idiomas, motores de plantillas y formatos de datos
• Compatibilidad con Markdown para la documentación de patrones
• Adición de compatibilidad con YAML y JSON para administrar datos dinámicos
• Complementos para ampliar y mejorar la funcionalidad de Pattern Lab
• Una interfaz de usuario temática, ampliable y rediseñada

Pero más que nada, Pattern Lab 2 ha sido diseñado y construido para que su equipo pueda usarlo de manera efectiva durante cada fase del proceso de su sistema de diseño, desde el principio hasta el mantenimiento a largo plazo.

Laboratorio de patrones al inicio del proyecto

Su equipo ha recibido la tarea de crear una nueva aplicación y un sistema de diseño subyacente. Érase una vez, los diseñadores de UX de sus equipos podrían haberse encerrado en una habitación para definir el producto por medio de estructuras de alambre monolíticas y muy anotadas. Una vez aprobados, se pasaban a los diseñadores visuales que luego aplicaban color, tipografía y textura para dar vida a los wireframes. Después de que homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd finalmente se aprueba, los diseños se envían a los desarrolladores de la interfaz, quienes rápidamente se echan a llorar ya que los diseños contienen una gran cantidad de diseños poco realistas, contenido de usuario improbable (cada nombre de usuario tiene solo 4 caracteres, ¡qué conveniente!) , y un popurrí de fuentes y patrones de diseño incongruentes.

El proceso de diseño de lanzar sobre la pared está muerto y desaparecido. La colaboración, la iteración y el desarrollo rápido son esenciales para abordar este panorama web diverso y en constante cambio. Necesitamos ingresar al navegador lo antes posible y probar los diseños bajo variables del mundo real como la capacidad de respuesta, el rendimiento, la ergonomía y el movimiento. Por eso es fundamental tratar el desarrollo de front-end como una parte central del proceso de diseño, y por eso es tan crucial lograr que los diseñadores y los desarrolladores de front-end trabajen en estrecha colaboración. Al final del día, todos estamos trabajando en la misma interfaz de usuario.

Configurar una instancia de Pattern Lab el día 1 de su proyecto puede crear un taller compartido, o laboratorio, si lo prefiere, equipado con herramientas de diseño y desarrollo, un enfriador de agua, una pizarra y un microscopio. Proporciona un lugar para que cada disciplina contribuya con su perspectiva al sistema de diseño de vida y respiración. En un sentido real, Pattern Lab puede servir como el centro de su proyecto de sistema de diseño, minimizando la necesidad de crear wireframes demasiado detallados, composiciones estáticas con líneas rojas y otros artefactos estáticos torpes.

Suena genial, ¿verdad? Analicemos cómo puede poner en marcha Pattern Lab el día 1 de su proyecto.

Pattern Lab 2 viene en PHP y Node. ¡Equipos, elegid vuestra aventura! Algunos proyectos producen una opción clara de pila tecnológica. Otros se reducen al conjunto de habilidades del equipo o la precedencia ambiental. Cualquiera que sea la plataforma, Pattern Lab 2 está preparado para ayudarlo a usted y a su equipo a colaborar en la creación de su nueva aplicación y sistema de diseño. Cualquiera que sea su elección de plataforma, sepa que con cualquiera de las versiones, Pattern Lab producirá resultados casi idénticos, al igual que los automóviles de diferentes marcas y modelos lo llevan al mismo destino.

Instalación del laboratorio de patrones

Una vez que se hayan instalado los requisitos previos apropiados, estará listo para instalar Pattern Lab. Echemos un vistazo a cómo instalar Pattern Lab Node, pero tenga en cuenta que las instrucciones de PHP también están disponibles y son similares.

Desde la ventana de su terminal, navegue hasta el directorio en el que le gustaría instalar Pattern Lab. Luego escriba los siguientes comandos:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Una vez completado, gulp patternlab:serve

Ejecutar npm install desplegará las dependencias más recientes, y gulp patternlab:serve generará y alojará automáticamente Pattern Lab, abriendo la interfaz en su navegador predeterminado. Y si no desea clonar el repositorio de git directamente, también puede descargar la última versión y luego realizar los pasos 2 y 3.

Con Pattern Lab en funcionamiento, su equipo ahora tiene un centro para diseñar, desarrollar y revisar su sistema de diseño que pronto se establecerá.

Sistema de archivos de Pattern Lab

Pattern Lab compila todo lo que se encuentra en la carpeta /source de su proyecto en archivos HTML estáticos que se encuentran en la carpeta /public . Esta salida se puede mostrar o consumir individualmente o dentro de la interfaz de la guía de estilo. Echemos un vistazo al sistema de archivos de Pattern Lab y lo que vive dentro de source/ :

• _annotations/ : donde su equipo puede definir anotaciones vivas para reforzar su documentación de interfaz de usuario
• _data/ : donde residen los datos globales utilizados para representar sus patrones.
• _meta/ - donde reside la información de <head> y pie (que sujetan todos sus patrones).
• _patterns/ : donde residen sus patrones, documentación de patrones y datos específicos de patrones.
• css - donde pueden residir sus hojas de estilo
• imágenes - donde pueden residir sus imágenes
• js - donde puede residir su javascript

Vale la pena enfatizar que Pattern Lab no impone ninguna convención frontend ni dependencias de producción. La forma en que decida estructurar sus carpetas y las tecnologías que elija depende totalmente de usted. Si desea llamar a su carpeta /stylesheets en lugar de /css , ¡hágalo! ¿Quieres usar Sass? ¡Agradable! ¿Te encanta jQuery? ¡Genial! ¿Lo odio? ¡Eso también está bien! Pattern Lab simplemente existe para unir sus patrones y no interfiere con las decisiones de frontend que tome. Incluso puede configurar cómo se administran sus activos a medida que viajan desde el source/ al public/ .

Elige tu propia aventura: convenciones de nomenclatura y configuración

El diseño atómico es un modelo mental útil para pensar en la construcción de sistemas de diseño de interfaz de usuario, pero ciertamente no es un dogma rígido. Es importante elegir una nomenclatura que ayude a su equipo a hablar el mismo idioma y hacer un gran trabajo juntos.

Las convenciones de nombres de Pattern Lab, como la mayoría de los aspectos del software, son completamente configurables. Si bien patterns/ carpeta de Pattern Lab tienen como valor predeterminado "átomos", "moléculas", "organismos", "plantillas" y "páginas", puede modificar, eliminar o agregar lo que desee. Por ejemplo, si tuviéramos que recrear la taxonomía del sistema de diseño Predix de GE, que consta de Principios, Conceptos básicos, Componentes, Plantillas, Características y Aplicaciones, estructuraríamos el directorio /source/_patterns/ de Pattern Lab de la siguiente manera:

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

Pattern Lab está diseñado para adaptarse a su flujo de trabajo, no al revés.

Establecimiento de la dirección de diseño

Incluso durante los primeros días u horas de un proyecto, todos tienen algo que aportar a su Pattern Lab. Este es un momento para explorar, resolver cosas y crear alineación. Cada rol lleva a cabo diferentes actividades, pero su salida y entrada están vinculadas. Cada uno está inflando una llanta separada del vehículo que los llevará a todos a su destino.

Definición de IA de baja fidelidad en Pattern Lab

El trabajo inicial de diseño de UX implica determinar la arquitectura de información de la aplicación. En lugar de buscar de inmediato herramientas de estructura alámbrica de alta fidelidad que tienden a definir prematuramente los diseños y la funcionalidad técnica, es mejor crear bocetos de baja fidelidad que establezcan lo que sucede en una pantalla en particular y en qué orden general. Este trabajo puede tomar la forma de bocetos en servilletas, listas con viñetas u hojas de cálculo. Dado que Pattern Lab admite el marcado básico, es posible traducir rápidamente estos diagramas de referencia de contenido al navegador de inmediato. Para el rediseño del Banco de Alimentos de Pittsburgh, eliminamos cada plantilla utilizando este enfoque.

Entonces, el código de la plantilla de la página de inicio, que se encuentra en /source/_patterns/templates/homepage.mustache , se ve así:

 {{> 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 }}

Incluimos un patrón de encabezado y pie de página, y luego simplemente eliminamos el contenido que anticipamos incluir en esta página.

Captura de decisiones de diseño visual

Los primeros trabajos de diseño visual implican explorar la tipografía, las paletas de colores y otros aspectos de la marca visual. Históricamente, los diseñadores podían saltar a la creación de maquetas de Photoshop centradas en el escritorio y de alta fidelidad; los diseñadores ahora tienen herramientas útiles como mosaicos de estilo, Typecast y collages de elementos para establecer la dirección del diseño visual sin recurrir a composiciones prematuras de alta fidelidad.

A medida que se toman decisiones en torno a las paletas de colores y las combinaciones de fuentes, Pattern Lab puede capturar los resultados de esas decisiones de diseño, asegurando que el equipo de diseño y desarrollo no esté generando involuntariamente 50 tonos de gris.

Convertirse en un chef de preparación de frontend en Pattern Lab

Y luego está el código frontend. En estas primeras etapas de un proyecto, los desarrolladores frontend pueden verse tentados a quedarse quietos y esperar a que los diseñadores den una dirección antes de sumergirse en el código. Pero este tipo de pensamiento hace que los diseñadores y desarrolladores no estén sincronizados entre sí y evita que se produzca una verdadera colaboración.

Al igual que los chefs de preparación en un restaurante, los desarrolladores tienen una gran oportunidad de ponerse a trabajar preparando los patrones y el código que finalmente se convertirán en el sistema de diseño final. En los primeros días del proyecto, los desarrolladores pueden comenzar a eliminar patrones e importar activos en Pattern Lab, configurando las cosas temprano para que los diseñadores y desarrolladores puedan pasar más tiempo trabajando juntos para diseñar y construir la interfaz de usuario.

Las paletas de colores, la copia real y el diseño aún no se han establecido, pero eso no debería impedir que los desarrolladores construyan las estructuras que soportan los wireframes de contenido. Tome un patrón de héroe, por ejemplo:

Este patrón incluye otros patrones, que es una forma poderosa de consumir elementos de interfaz más pequeños en estructuras cada vez más grandes. Aquí está el marcado para 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-->

El código de doble corchete ( {{}} ) es un código de plantilla de Moustache, que nos permite definir contenido dinámico e incluir patrones uno dentro de otro. Por ejemplo, el código {{> atoms-hero-img }} le dice a Pattern Lab que busque un átomo llamado "hero-img" y lo incluya en el patrón. La unidad hero en sí misma se puede incluir en patrones más complejos usando la misma convención de inclusión usando lo siguiente: {{> molecules-hero }} .

Este enfoque de muñeca de anidación rusa para incluir patrones permite que su base de código permanezca agradable y SECA, lo que significa que si realiza una edición en cualquier patrón en particular, cualquier lugar que se incluya ese patrón se actualizará automáticamente. Esto mantiene sus diseños y código base sincronizados y consistentes. ¡Y además de todo eso, esta acumulación continua de patrones puede producir interfaces casi completas en poco tiempo!

Arremangarnos

La arquitectura de la información ha comenzado a tomar forma, se ha establecido la dirección estética inicial y los patrones nacientes se han eliminado en Pattern Lab. Ahora el equipo puede sumergirse colectivamente en la construcción del sistema de diseño de interfaz en serio. Analicemos cómo usar Pattern Lab para convertir un vago sentido de dirección en un sistema de diseño hermoso, funcional, reflexivo y completo.

Diseño con datos dinámicos

Un concepto importante del diseño atómico son las diferencias entre plantillas y páginas. Las plantillas definen la estructura de contenido subyacente de una interfaz de usuario, mientras que las páginas son instancias específicas de esas plantillas que reemplazan esa estructura de contenido con contenido representativo real. Ambos son necesarios para documentar los parámetros de contenido y al mismo tiempo mostrar los patrones de diseño en acción y llenos de contenido real.

Una de las características más poderosas de Pattern Lab es la capacidad de intercambiar diferentes contenidos representativos en sus patrones de interfaz de usuario para garantizar que puedan manejar la naturaleza dinámica de su contenido. ¿Qué pasa si tu usuario no sube una foto de perfil? ¿Qué sucede si el usuario tiene 13 artículos en su carrito de compras versus 2 artículos? ¿Qué pasa si uno de esos productos tiene 14 variaciones potenciales? ¿Qué sucede si el título de la publicación del blog contiene 400 caracteres? ¿Regresar usuario? ¿Usuario primerizo? ¿Qué pasa si el artículo no tiene comentarios? ¿O qué pasa cuando tiene siete capas de comentarios anidados? ¿Qué sucede si necesitamos mostrar un mensaje urgente en el tablero cuando su cuenta es pirateada? Pattern Lab le permite manipular datos para expresar cualquier cantidad de estados de interfaz de usuario y variantes de cualquier plantilla.

Datos específicos de la página

Los datos iniciales en Pattern Lab se almacenan en un archivo llamado /source/_data/data.json , que contiene los datos que los patrones consumirán inicialmente para mostrarse en la guía de estilo y las vistas de plantilla. Su data.json predeterminado puede verse así:

 { "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": [] }

Puede hacer referencia a estos datos en sus patrones (es decir, incluir {{ headline.short }} en un patrón) para lograr resultados como este:

A nivel de página, queremos reemplazar esas imágenes en escala de grises y el texto de marcador de posición de lorem ipsum con contenido real. Para lograr esto, crearemos un nuevo archivo justo al lado de /source/_patterns/pages/homepage.mustache llamado homepage.json , donde podemos anular los datos iniciales definidos en `data.json. Eso podría ser algo como esto:

 "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" } } ]

Esto da como resultado una interfaz de usuario que se ve así:

Pseudo-Patrones

Nuestros sistemas de diseño deben ser flexibles y adaptarse a la realidad del contenido que vive en nuestras aplicaciones. Necesitamos tener en cuenta al mismo tiempo las mejores situaciones, las peores y todo lo demás.

Expresar estas variaciones de la interfaz de usuario en herramientas de diseño estático es un ejercicio de tedio y redundancia, lo que puede explicar por qué rara vez se diseñan. Pero la característica de pseudo-patrón de Pattern Lab nos permite articular (a veces de manera salvaje) diferentes escenarios con solo unos pocos cambios en nuestros datos.

Digamos que estamos creando una aplicación de seguimiento de caminatas cuyo tablero muestra una lista de estadísticas de caminatas: elevación escalada, cantidad de senderos recorridos, pasos dados, etc. Para un usuario activo que ha estado ingresando contenido constantemente en la aplicación, la interfaz de usuario podría verse así:

En /source/_patterns/pages/dashboard.json , nuestros datos se verían así:

 { "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%" } } ], ... }

Con estos datos, Pattern Lab puede completar la interfaz de usuario con la gran cantidad de contenido generado por este usuario.

Sin embargo, este escenario puede no ser tan común. Por cada usuario ambicioso que se toma el tiempo de completar cada campo y conectar cada aplicación disponible, es probable que haya docenas de usuarios ocasionales que no completan todos los espacios en blanco y aprovechan todas las funciones de la aplicación. De hecho, en un punto del viaje de cada usuario, ¡son completamente nuevos en la interfaz! Articulemos estas variaciones importantes usando la función de pseudo-patrón de Pattern Lab.

En nuestro directorio /source/_patterns/pages/ , podemos crear un nuevo pseudopatrón llamado dashboard~new-user.json . Esto creará otra instancia de la página que hereda todos los datos de dashboard.json , pero también nos permite modificar o ampliar los datos. En el caso de dashboard~new-user.json , podemos anular bits de datos para demostrar cómo sería una nueva experiencia de usuario:

Y aquí están los datos que estamos agregando al archivo para lograr esta interfaz de usuario:

 { "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" } } ] }

Al anular algunos de los valores en dashboard.json , podemos modificar el contenido y activar o desactivar patrones particulares.

En otro caso, es posible que necesitemos demostrar cómo se ve la interfaz de usuario cuando hay un problema de seguridad o algún otro problema con la cuenta del usuario. Podemos crear el pseudo-patrón dashboard~hacked.json para crear la siguiente interfaz de usuario:

La mayoría de los datos de dashboard.json permanecerán igual, pero agregaremos lo siguiente para crear el mensaje de error:

 { "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>" } }

Parámetros de patrón

Hay momentos en los que se utiliza Pattern Lab que garantizan pseudopatrones completos, como se ilustra arriba. Pero a veces es posible que necesite ajustar o anular solo un único valor de datos dentro de un patrón, dejando que el resto lo manejen los otros patrones de visualización dinámica. Para estos casos, los parámetros de patrón son su herramienta preferida. Los parámetros de patrón son un mecanismo simple para reemplazar variables en un patrón incluido. Se limitan a reemplazar variables en el patrón incluido y solo en el patrón incluido. Considere este extracto de la plantilla detallada:

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

que incluye el patrón de lista de medios de la sección.

 <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-->

Como hemos aprendido, {{sectionTitle}} para los bloques de datos de las últimas publicaciones y de las personas destacadas se completará desde cualquier archivo .json complementario presente, con /source/_data/data.json como respaldo global. Sin embargo, estamos incluyendo un solo patrón varias veces y es posible que deseemos proporcionar rápidamente datos únicos para cada patrón sin tener que crear estas claves en nuestro .json. Podemos cambiar las listas de medios de la sección incluida a lo siguiente:

 ... <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--> ...

Estos dos organismos ahora usarán la variable sectionTitle definida aquí al renderizar. Los parámetros de patrón son poderosos, pero solo son compatibles con PHP y Node Mustache PatternEngines. Otros lenguajes de plantilla brindan mejores soluciones a este problema. Consulte los documentos para leer el resumen completo de los parámetros de los parámetros.

modificadores de estilo

A menudo, deseará mostrar variantes estilísticas del mismo patrón, como botones de redes sociales de colores o estados de componentes. Una extensión de la sintaxis de inclusión abreviada, styleModifiers proporciona clases adicionales a un patrón. Siempre que construya un patrón block-media con {{ styleModifier}} dentro del atributo de clase:

 <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 -->

Incluir este patrón con dos puntos después del nombre establece el modificador de estilo:

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

produciría una etiqueta de anclaje como esta:

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

styleModifiers se pueden combinar para proporcionar múltiples clases, usando la tubería (|) como delimitador.

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

Entre los pseudo-patrones, los parámetros de patrón y styleModifiers de estilo, Pattern Lab hace que sea más fácil demostrar variaciones de interfaz de usuario a veces muy diferentes mientras mantiene el código base SECO en el proceso.

Iterando con estilo

Un elemento clave de un flujo de trabajo basado en patrones es aceptar la iteración y reconocer que los patrones y el diseño seguirán evolucionando. Las partes darán forma al todo, el todo dará forma a las partes y el sistema interconectado de componentes surgirá como resultado de este proceso.

Otra consecuencia natural de este proceso es que el punto de producción pasa mucho antes de las manos de los diseñadores visuales y de UX a las manos de los desarrolladores frontend. En lugar de gastar mucho tiempo valioso creando una gran cantidad de composiciones de alta fidelidad y estructuras detalladas, el trabajo de diseño puede pasar de los documentos estáticos al navegador, donde su equipo puede abordar antes las realidades de la web.

Con Pattern Lab como abrevadero para todo el equipo, los diseñadores pueden comprender mejor cómo las decisiones tomadas en un área afectan a otras áreas.

Prueba de ventana gráfica con ish.

Es importante que nuestros componentes, así como nuestras páginas, sean flexibles en todo el espectro de resolución. Hornear una herramienta de cambio de tamaño de ventana gráfica como ish. en una biblioteca de patrones asegura que cada elemento se vea y funcione maravillosamente en cualquier tamaño de pantalla. Tomarse el tiempo para crear patrones totalmente flexibles nos preparará mejor para un futuro en el que las consultas de elementos y los componentes web hayan madurado por completo (¡no podemos esperar!).

Al tener estas herramientas de visualización integradas directamente en el entorno de interfaz, los diseñadores y desarrolladores pueden reunirse en Pattern Lab para determinar dónde insertar puntos de interrupción en el diseño. Además, los clientes, el control de calidad y otros colegas pueden identificar áreas específicas donde la interfaz de usuario se desmorona por cualquier motivo.

Listo para lanzar

El proyecto se está armando muy bien, pero antes de que pueda lanzarse al mundo, las cosas deben ajustarse, probarse en varios navegadores/dispositivos y documentarse adecuadamente. ¡Hablemos de cómo Pattern Lab puede ayudarlo a preparar el código y la documentación de su sistema de diseño para el horario de máxima audiencia!

Documentación de patrones accesibles

Algunos patrones pueden presentarse como autodocumentados, pero un patrón a menudo requiere algo de contexto o información adicional para aclarar las cosas. Cosas como definiciones. Las pautas de uso, las consideraciones, los recursos y las imágenes de ejemplo pueden y deben encontrar su camino en la documentación de patrones. La documentación de Pattern Lab 2 utiliza Markdown con material preliminar de YAML para crear esta documentación. El archivo de rebajas acompaña al patrón (por ejemplo, media-object.md debe estar justo al lado media-object.mustache ) y se puede formatear así:

 --- 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 documentación de Markdown significa que los IA, los diseñadores visuales, los estrategas de contenido, la gente de negocios, etc. pueden contribuir más fácilmente a la documentación viva. Los propietarios de productos podrían incluso agregar notas de funcionalidad para nuevos patrones incluso antes de que se cree el patrón. Se planean mejoras para hacer que la documentación de patrones sea más poderosa, lo que hará que Pattern Lab sea un espacio siempre verde para su equipo.

Linaje para un control de calidad más fácil

Al mirar varios patrones en una biblioteca, la falta de contexto puede dificultar discernir dónde se usan realmente. Definir y describir las características de los patrones es una cosa, pero existe la oportunidad de proporcionar información contextual adicional sobre los patrones de la interfaz de usuario.

Gracias a la naturaleza de la muñeca rusa anidada de Pattern Lab, puede mostrar qué patrones componen un componente determinado y también mostrar dónde se consume ese patrón en el sistema de diseño.

Gracias a esta función, los diseñadores y desarrolladores tienen información contextual que resulta útil al realizar controles de calidad y/o realizar cambios en el sistema de diseño. Si quisiéramos realizar cambios en un patrón en particular, como duplicar el tamaño de la imagen o agregar un elemento de texto adicional, sabríamos de inmediato qué patrones y plantillas necesitarían volver a probarse y someterse a un control de calidad para garantizar que nada se rompa con los cambios. . 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. Por ejemplo:

 --- 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.

Ediciones de laboratorio de patrones

Las ediciones permiten a los equipos y agencias agrupar todo lo que respalda sus flujos de trabajo únicos con Pattern Lab. Una edición puede convertirse en el punto de partida de todos sus proyectos mientras los equipos comparten y actualizan la funcionalidad. La versión Node de Pattern Lab usa npm para extraer componentes separados, mientras que la versión PHP usa Composer para ayudarlo a iniciar sus proyectos de una manera simple y estandarizada.

Núcleo de laboratorio de patrones

Core es el centro de Pattern Lab y habilita todas las demás características. Debido a que Core es independiente, un equipo puede actualizar y mantenerse al día con las últimas funciones de Pattern Lab sin interrumpir el resto de su proyecto.

Kits de inicio

¿Tiene un conjunto confiable de código repetitivo con el que comienza cada proyecto? ¿Quizás un conjunto común de patrones básicos, complementos de Sass y bibliotecas de JavaScript que son sus herramientas de acceso? Un StarterKit es perfecto para agrupar estos activos en un modelo que garantiza que cada proyecto comience con el pie derecho.

Ya existen varios kits de inicio para iniciar su proyecto, ya sea que esté buscando un comienzo en blanco, comience con una demostración que muestre las funciones de Pattern Lab o comience con un marco popular como Bootstrap, Foundation o Material Design. Y puede lanzar el suyo propio, que puede controlarse completamente por versión para que el StarterKit de su equipo pueda evolucionar junto con sus herramientas.

La importación de un kit de inicio está a solo unas pocas pulsaciones de teclas después de la instalación. Eventualmente, esta función se integrará en una fase posterior a la instalación como lo es para Pattern Lab PHP a través de composer.

Guía de estiloKits

StyleguideKits son el front-end de Pattern Lab. A esto lo llamamos “El espectador”. StyleguideKits permite a las agencias y organizaciones desarrollar interfaces de usuario de Pattern Lab personalizadas y de marca para mostrar sus patrones.

PatrónMotores

PatternEngines son los motores de plantillas que son responsables de analizar patrones y convertirlos en HTML. PatternEngines le da a Pattern Lab Core la flexibilidad para representar muchos tipos diferentes de lenguajes de plantilla. Los PatternEngines actuales incluyen Mustache y Twig, con otros como Handlebars y Underscore en desarrollo. Y no hay nada que le impida agregar otro motor de plantillas a Pattern Lab.

Complementos

Los complementos permiten a los desarrolladores ampliar Pattern Lab Core y otras partes del ecosistema. Por ejemplo, la versión PHP de Pattern Lab tiene una serie de complementos como la recarga automática del navegador, la herencia de datos y Faker. La arquitectura de Pattern Lab permite a los desarrolladores modificar datos en diferentes etapas, agregar sus propios comandos o reglas de patrones, o cambiar la interfaz para modificar y ampliar las capacidades de Pattern Lab.

Mira mi charla

Pruebe Pattern Lab 2 y participe

La creación de interfaces de usuario basadas en patrones y sistemas de diseño sofisticados es más importante que nunca. Pattern Lab 2 está bien equipado para crear y mantener sistemas de diseño atómico y puede servir como un centro para su sistema de diseño en cada paso del flujo de trabajo de su equipo.

Si su equipo decide descargar Pattern Lab 2 y probarlo, ¡nos encantaría saber de usted! Únase a la conversación haciendo preguntas sobre Gitter, abra problemas si tiene problemas con algo y ayude a proponer y discutir nuevas funciones.

Y si crea cosas geniales con Pattern Lab 2, ¡comparta sus ideas! Styleguides.io tiene más de 150 ejemplos de bibliotecas de patrones, así que agregue su Pattern Lab a la mezcla. La belleza de la web y los proyectos de código abierto es que toda la comunidad puede aprender de su experiencia y aprovechar ese conocimiento.

¡Estamos emocionados de ver las cosas geniales que creas!