Construyendo un Design System

Uno de los Side projects en los que he estado trabajado en el último año ha sido la creación de un Design System que evolucionará a una Pattern Library.

La necesidad de tenerlo se ha ido haciendo evidente conforme el equipo ha ido creciendo en integrantes y la empresa ha ido adquiriendo otros negocios. Crear los fundamentos de un buen Design System nos ayudará a construir productos más consistentes bajo el paraguas de un lenguaje común.

Detección y definición de la necesidad

Conforme los equipos de producto se han ido separando y focalizando en áreas concretas, han tenido más independencia para ir construyendo features y lanzándolas a producción de forma rápida y autónoma. Este hecho ha provocado que se produzcan ligeras variaciones en los patrones de diseño he interacción en función de la necesidades. Estás variaciones son necesarias en un ecosistema tecnológico vivo pero deben estar basadas en unos fundamentos claros para ofrecer un lenguaje común y consistente a los usuarios.

Por este motivo nos propusimos definir un design system que permitiera a los diseñadores construir ideas con más rapidez y consistencia. Del mismo modo, una vez definido el sistema, el siguiente paso será crear una libreria de patrones para que la implementación de los diseños también sea consistente y rápida.

El output final será una Sticker Sheet en Sketch compuesta por los diferentes componentes convertidos en símbolos para su uso habitual por los diseñadores de producto.

Definición de los objetivos

Los objetivos principales que se determinaron fueron:

  • Crear un “UI component stickers-sheet” para el equipo de UX
  • Agilizar las fase del diseño de interface
  • Mantener el diseño de interfaces consistente

Medidas de éxito

Las principales medidas de éxito que se determinaron fueron:

  • Reducción de los tiempos de entrega
  • Archivos más organizados y pulidos
  • Unificación de componentes entre los diseñadores
  • Felicidad del diseñador

Análisis del estado actual

Para hacer el objetivo más alcanzable definimos como scope inicial las plataformas de escritorio. 

El primer paso fue estipular cuales eran los distintos elementos que se iban a analizar. Para esta tarea se montó un workshop con 5 diseñadores que representaban a diferentes plataformas y áreas de negocio para tener una visión holística y no perder perspectiva. Partiendo de una guía de estilo ya establecida (colores, tipografía, rejillas, etc) nos juntamos para definir que elementos eran susceptibles de ser parte del design system y se definieron 4 grandes áreas de actuación:

  • Form elements
  • Messaging
  • Navigation
  • Displaying data

Una vez definidas estas grandes áreas debíamos establecer qué componentes iban a formar parte de cada una de ellas:

  • Form elements: Input, Predictive, Select menu, Buttons, Checkbox Radiobutton, Expanders, Links, Sliders, Calendar
  • Messaging: Alerts, Toast message, Tooltip, Nag, Bubbles, Loaders, Labels / Promo labels / Pills / Tags / Badges
  • Navigation: Breadcrumbs, Header, Footer, Pagination, Tabs, Menus
  • Displaying data: Cards, Lists, Containers / Wrappers / Boxes, Map, Lightboxes, Layers, Accordions

Con todo claro nos pusimos manos a la obra para analizar cada rincón de la web y capturar y archivar todos los elementos. De esta forma, cumplido el deadline, teníamos un biblioteca estructurada de todos los elementos actuales en producción susceptibles de ser reconstruidos y colocados en una Sticker Sheet.

Imagen de la carpeta con los screenshots

Reconstrucción de los componentes 

Un vez que tuvimos una idea clara de qué era exactamente lo que teníamos en producción nos dispusimos por áreas a reconstruir los elementos detectados, uno por uno, eliminando inconsistencias y asegurando uniformidad.

A medida que avanzábamos en esa tarea íbamos aprendiendo y simplificando la amalgama de elementos que habíamos capturado. El resultado final de esta etapa fue que conseguimos homogeneizar una gran variedad de elementos y recogerlos en un lugar específico: un archivo único de Sketch separado por páginas.

Creación de símbolos

Los símbolos en Sketch son un potente feature que ayuda a reusar fácilmente elementos cuando se trabaja en diferentes archivos, mesas de trabajo y páginas. 

Una vez analizados y clasificados todos los elementos finales, la siguiente tarea fue la definición de una nomenclatura homogénea y los best practices a la hora de crear los símbolos.

Sketch no deja de evolucionar y añadir nuevas funcionalidades. Los símbolos en sketch se han ido perfeccionando y ahora mismo se encuentran en un grado de madurez tal que admiten mucha flexibilidad.

GIF editando un símbolo con el panel de control

Con todos los elementos convertidos a símbolos el trabajo ya estaba hecho. Ahora solo quedaba lanzar la versión Beta a los diseñadores para ponerla bajo testeo y detectar posibles fallos y carencias.

La Sticket Sheet como output final es concebida como algo vivo y en constante evolución.

Creación de una Pattern Library

La evolución natural de este proyecto es la conversión de este Design System en una Pattern Library.

Del mismo modo que los diseñadores históricamente han ido creando los componentes desde cero una y otra vez en función de la necesidades, los desarrolladores han adoptado la misma práctica aumentando los tiempos de entrega y la inconsistencia.

La Pattern Library consistirá en una biblioteca de código construido por bloques y definido conforme al Design System