Información sobre la empresa
Contents
Pattern Lab es muchas cosas maravillosas: una guía de estilo, un inventario de componentes, un sistema de creación de prototipos, y la encarnación de una filosofía de diseño, todo envuelto dentro de una herramienta fundamentalmente simple – un generador de sitio estático. Se ha mejorado en gran medida el enfoque de Phase2 a la forma de construir, tema, y el diseño de sitios web. Vamos a hablar de lo que es Pattern Lab, cómo lo usamos en nuestro proceso mediante la integración en el tema de un CMS como Drupal o WordPress, y el cambio resultante en nuestro flujo de trabajo de desarrollo de lineal a paralelo.
Pattern Lab nos permite crear fácilmente piezas modulares de HTML para el estilismo y el scripting. Llamamos a estas piezas modulares de componentes HTML – es posible que ya haya oído hablar de los icónicos átomos, moléculas y organismos. Pattern Lab proporciona una interfaz fácil de usar para navegar por este inventario de componentes.
Pattern Lab también hace mucho más: cumple la función de una guía de estilo al mostrarnos los colores, las fuentes y los tamaños de letra seleccionados por el proceso de diseño y demuestra elementos comunes de la interfaz de usuario como botones, formularios e iconos junto con el código necesario para utilizarlos. Esa parte es importante: es la distinción entre «esto es lo que vamos a construir» y «esto es lo que se ha construido y aquí está cómo usarlo». Pattern Lab proporciona un manual para guiar el resto de su complejo CMS.
Nodo Patternlab
Ir a la lista de todos los artículosAcerca de los autoresBrian Muenzenmeyer mantiene el Nodo Patternlab. Trabaja en Crunchy Owl, su pequeño estudio. Vive en el noreste de Wisconsin con su mujer, sus dos hijos pequeños y cuatro …Más sobre
Los beneficios de los sistemas de diseño de interfaz de usuario son ya bien conocidos. Conducen a experiencias de usuario más cohesivas y consistentes. Aceleran el flujo de trabajo de su equipo, permitiéndole lanzar más cosas y ahorrando enormes cantidades de tiempo y dinero en el proceso. Establecen un vocabulario común entre disciplinas, lo que da lugar a un flujo de trabajo más colaborativo y constructivo.
Pattern Lab está diseñado para ajustarse a su flujo de trabajo, no al revés.Establecer la dirección del diseñoIncluso durante los primeros días u horas de un proyecto, todo el mundo tiene algo que aportar a su Pattern Lab. Este es un momento para explorar, descubrir cosas y crear alineación. Cada papel lleva a cabo actividades diferentes, pero sus resultados y aportaciones están vinculados. Cada uno está inflando un neumático separado del vehículo que los llevará a todos a su destino.Definir la AI de baja fidelidad en el Pattern LabEl trabajo de diseño de UX temprano implica determinar la arquitectura de la información de la aplicación. En lugar de recurrir inmediatamente a herramientas de esquemas 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 va en una pantalla concreta y en qué orden general. Este trabajo puede adoptar la forma de bocetos de servilleta, listas con viñetas u hojas de cálculo. Dado que Pattern Lab admite el marcado básico, es posible trasladar rápidamente estos diagramas de referencia de contenido al navegador de inmediato. Para el rediseño del sitio web del Banco de Alimentos de Pittsburgh, los esquemas se tradujeron rápidamente a Pattern Lab a partir de bocetos en papel, utilizando un marcado muy sencillo y divs de reserva. (Vista previa ampliada)El código de la plantilla de la página de inicio, que se encuentra en /source/_patterns/templates/homepage.mustache, tiene este aspecto:
Instalación del laboratorio de patrones
Pattern Lab es una herramienta que muchos equipos utilizan para implementar frontales basados en componentes. Transforma las plantillas de patrones, creadas por los desarrolladores, en un sitio estático con todas las funciones. Es fácil de aprender y se puede utilizar en una variedad de diferentes tipos de proyectos. Puede utilizarse como herramienta de creación rápida de prototipos, como guía de estilo de la parte delantera, como plantillas reales para uno o varios sitios en vivo, o como una combinación de las tres cosas.
Pattern Lab se ha vuelto cada vez más popular en la comunidad de Drupal en los últimos años, desde el lanzamiento de Drupal 8 con Twig. La promesa de Pattern Lab es que sus plantillas Twig y CSS pueden ser consumidas como un servicio por Drupal. Si bien hay algunas ventajas claras, también hay costos ocultos y posibles trampas a tener en cuenta. Si está pensando en emprender un proyecto de Drupal con Pattern Lab, a continuación encontrará una lista de consideraciones basadas en nuestra experiencia.
Nota: En el contexto de Drupal, Pattern Lab se utiliza normalmente para implementar «plantillas de componentes», que luego se utilizan dentro de las plantillas normales de Drupal. O bien encontrará que una implementación de pattern lab vive directamente en un tema de Drupal, o que es un proyecto totalmente externo, requerido a través de Composer.
Revisión del Patternlab de Londres
La versión PHP de Pattern Lab utiliza Mustache como lenguaje de plantillas para los patrones. Además de permitir la inclusión de un patrón dentro de otro, también ofrece a los desarrolladores de patrones la posibilidad de incluir variables. Esto significa que los atributos como las fuentes de imágenes pueden ser centralizados en un archivo para una fácil modificación a través de uno o más patrones. La versión PHP de Pattern Lab utiliza un archivo JSON, source/_data/data.json, para centralizar muchos de estos atributos.
Por defecto, los activos de Pattern Lab pueden generarse manualmente y el sitio de Pattern Lab puede actualizarse manualmente, pero ¿quién quiere perder el tiempo haciendo eso? He aquí algunas formas en las que Pattern Lab puede hacer que su flujo de trabajo de desarrollo sea más fluido:
