System Design
O cómo Brad Frost acudió a tu rescate
Tags
El riesgo no es una actitud. Es el contexto
Alberto Barreiro.
Diseñador estratégico experto en transformación
¿Qué es esto de sistemas de diseño? ¿Conoces el diseño nuclear? ¿Te suena un tal Brad Frost? Desde Genetsis Group vamos a intentar ilustrarte sobre todo esto y mostrarte cómo la utilización de System Design en la creación de tus productos digitales te va a ahorrar esfuerzo, inversión y dolores de cabeza.
Pensemos en cómo diseñábamos hace no tantos años. Utilizábamos un pensamiento en cascada, nuestro producto digital era diseñado página a página, sin una documentación clara de los componentes que iban a formar parte de esos diseños. Los componentes nacían según las necesidades.
Así, surgía uno de los grandes problemas con los que nos encontrábamos al final del proceso: la INCONSISTENCIA. Nadie sabía ya cómo se componía un botón. De repente, aparecían colores con variaciones y textos a tamaños poco coherentes. En resumen, se propiciaba un diseño caótico.
Este pensamiento único y en cascada añadía un esfuerzo y un problema extra: la NO ESCALABILIDAD. Al centrar todos nuestros esfuerzos de diseño en una sola página o pantalla concreta, obviábamos que el producto puede crecer, reinventarse y escalar. Y que, en caso de ocurrir dicho crecimiento, se hacía imprescindible un esfuerzo adicional de adaptación.
Y este Brad, ¿quién es? Descomponiendo el diseño en 5 niveles
Pues nuestro “salvador”, nuestro apreciado Brad. Es ese visionario que, en 2013, lanza una obra de referencia titulada Atomic Design, donde desarrolla una metodología que revoluciona los procesos de diseño, desarrollo y mantenimiento de productos digitales. Lo que hace Frost es inspirarse en la naturaleza y entender cómo la misma evolución ha ido creando diseños orgánicos, desde los diseños más primarios (como un átomo o un organismo unicelular), hasta los más complejos (como organismos como los propios seres humanos).
Brad Frost descompone el diseño en 5 niveles:
Átomos
Un átomo es la unidad de partículas más pequeña que puede existir. Aplicado al diseño, hablamos de átomos cuando hablamos de elementos de la interfaz que, por sí mismos, tienen alguna funcionalidad: las tipografías, paleta de colores, espaciados, párrafos, iconos…
Moléculas
Del mismo modo, una molécula en Atomic Design es la conjunción de diferentes átomos para formar un elemento de interfaz mas complejo. Por ejemplo, botones, campos de texto, selects…
Organismos
En este tercer nivel es donde encontramos elementos de la interfaz más complejos, ya que son la unión de varias moléculas y/o átomos. Estos organismos conforman distintas partes de la estructura de una interfaz como pueden ser la cabecera de una web, un formulario, una card, etc.
Plantillas
Las plantillas organizan los distintos componentes u organismos, dando forma y estructura al contenido. Por ejemplo, la página de detalle de un producto, un carrito de la compra o la página de contacto.
Páginas
Este es el último nivel del Atomic Design: la utilización de las plantillas con el contenido adecuado a cada pantalla especifico. Esto es lo que conforma el diseño final de una pantalla o página concreta, como es la home de nuestra web, o la página de compra de producto de nuestra app.
Ya podemos, entonces, aventurarnos a responder a "¿qué es un sistema de diseño?"
Un sistema de diseño es un conjunto de reglas, normas y procedimientos que los equipos de diseño, negocio y desarrollo establecen internamente y que les permite trabajar de forma alineada a través de un lenguaje común.
Alla Kholmatova lo define como un conjunto de patrones y prácticas compartidas que se usan para alcanzar el propósito de un producto digital. Estos patrones y elementos reutilizables permite a los equipos de diseño y desarrollo construir productos digitales de una manera más eficiente y escalable.
¿Te interesa implementar
sistemas de diseño para optimizar tus productos digitales?
¿Qué beneficios nos aportan los sistemas de diseño?
Escalabilidad
La aplicación de un System Design habilita la automatización en el proceso de diseño, lo que permite hacer crecer, evolucionar y escalar los productos digitales de una manera sencilla, con poco esfuerzo y menor gasto de recursos.
Cambiando el ratio diseño-pensamiento, donde antes los esfuerzos se enfocaban en el diseño, ahora tenemos más tiempo para dedicar al pensamiento y a la creación de soluciones.
Consistencia
Los sistemas de diseño aseguran que la experiencia de usuario sea consistente. En este tiempo de omnicanalidad, nuestro producto digital puede conectar con el usuario desde diferentes puntos de contactos digitales y este debe reconocer nuestra marca y patrones esté en el punto en el que esté.
Eficiencia
Los sistemas de diseño ahorran tiempo, dinero y recursos. La reutilización de componentes y la documentación generada en el sistema de diseño facilita el desarrollo de nuevas versiones de producto, adaptaciones a nuevos puntos de contacto y su escalabilidad, suponiendo todo ello una mejora en los tiempos de creación y puesta en marcha.
Algunos ejemplos de sistemas de diseño
Material Design de Google
Material Design es uno de los sistemas más populares. Actualmente es utilizado no solo por el equipo de Google sino también por muchos creadores de Android y aplicaciones web.
Atlassian Design System
Uno de los más completos del mercado, Atlassian Design System es utilizado en productos reales creados por Atlassian.
Polaris, el sistema de diseño creado por Shopify
Este sistema de diseño, cuyo objetivo fue inicialmente documentar y alinear las experiencias de los usuarios de la empresa, ha ido evolucionando para contemplar numerosos patrones y guías, aceptando contribuciones de terceros.
Carbon Design System, por IBM
Sistema de diseño de código abierto de IBM para productos y experiencias digitales, ofrece múltiples pautas, herramientas, ejemplos y tutoriales en su web carbondesignsystem.com.
Human Ingerface Guidelines, el sistema de diseño de Apple
Las Guías de Interfaz Humana (Human Interface Guidelines o HIG) creadas por Apple ayudan día a día a miles de diseñadores y programadores a lograr la famosa apariencia y usabilidad que tanto caracterizan a la compañía ubicada en Cupertino. creación y puesta en marcha.
Genetsis Group
Compartir
Contacto
¿Te interesa el mundo del diseño UX/UI?
Subscribe to our Newsletter