Desde hace algunos años, en el mundo del desarrollo web viene consolidándose un cambio de paradigma crucial: en vez de diseñar páginas, hay que diseñar componentes, es decir, los elementos independientes que componen las páginas. Frameworks de desarrollo front-end como Bootstrap y Foundation, ampliamente utilizados en la actualidad, proveen componentes separados —botones, tablas, formularios, listas, menús, etc.— en vez de plantillas integrales. Web Components, otra tecnología en auge, promueve un flujo de trabajo similar. El enfoque consiste en pensar cada página, y cada sitio, como la suma de sus partes.

Desde este punto de vista, el diseñador Mark Otto (creador de Bootstrap) acuñó el término «sistema de diseño» (design system): todas aquellas cosas que constituyen un producto. En la definición de Laura Kalbagh, los sistemas de diseño son conjuntos de conceptos, reglas o decisiones de diseño creados alrededor de los componentes fundamentales —tipografía, layout, forma, color—, integrándolos entre sí para construir un producto cohesivo entre distintos entornos. Otros elementos importantes pueden ser los patrones en el flujo de usuario, la estrategia de contenidos, los textos y el tono de voz, como así también las convenciones de codificación y la documentación. Un sistema de diseño sirve como una guía en común para los distintos miembros del equipo de trabajo, dinamizando la coordinación de las tareas; esto contribuye a la coherencia interna del producto final, además de facilitar el testing.

Podemos usar un sistema de diseño ya existente, como Bootstrap, pero quizás nos veamos obligados a sobrescribir muchas de sus reglas originales para adaptarlas a nuestras necesidades. De allí la conveniencia de crear un sistema de diseño propio para cada proyecto que afrontemos. Pero ¿cómo podemos hacerlo? Una opción es utilizar Atomic Design, una metodología para crear sistemas de diseño, inspirada en los principios químicos de la materia. En el mundo que conocemos, toda la materia se compone de organismos complejos, que a su vez se componen de moléculas, que a su vez se componen de átomos. El creador de esta metodología, Brad Frost, propone una jerarquía similar para los productos web, que se compondrían de las siguientes capas, llamadas «patrones» (patterns):

1. Átomos. Son los bloques constructivos elementales de la materia. En las interfaces web, los átomos serían las etiquetas HTML, como por ejemplo una etiqueta, un input o un botón de un formulario. También pueden ser elementos más abstractos, como paletas de colores o fuentes.
2. Moléculas. Son grupos de átomos asociados que funcionan como una unidad. Por ejemplo, un formulario completo.
3. Organismos. Son grupos de moléculas, que pueden ser de distinto tipo. Por ejemplo, una cabecera que contiene elementos diversos, como un logo, un menú de navegación, un formulario de búsqueda y una lista de canales en redes sociales.
4. Plantillas. Son grupos de organismos unidos entre sí para formar páginas, pero en un estado preliminar. Por ejemplo, un wireframe, que no posee el contenido definitivo, pero sirve para saber qué lugar ocupará cada organismo en la pantalla.
5. Páginas. En esta instancia final, se agrega contenido real a la plantilla para obtener una imagen acertada de lo que finalmente verá el usuario.

Para ayudar a la implementación de este proceso, Frost desarrolló Pattern Lab, un conjunto de herramientas que nos permiten crear, manipular, documentar y probar los componentes que necesitemos fácilmente. A diferencia de otras soluciones (como Bootstrap), Pattern Lab no pretende brindarnos patrones listos para usar, sino ofrecernos un marco ideal para que nosotros mismos los creemos. Naturalmente, este flujo de trabajo es mucho más esforzado, pero nos permite construir componentes reutilizables, más fáciles de mantener y más satisfactorios para el cliente.