6 minutos

System Design

O cómo Brad Frost acudió a tu rescate

6 minutos

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.

Compartir

Contacto

¿Te interesa el mundo del diseño UX/UI?

Subscribe to our Newsletter

Blog

Related post.

The cloud services revolution

Cloud services have driven the digital acceleration of companies, as they are an efficient and consolidated model. Do you want to know more?

Technology at the service of IMM

Do you know how to optimise processes and results through technology? In examples such as IMM, the strategy developed to platformise its digital transformation is already bearing fruit. Find out more!

Feel the music at Christmas

A playlist full of the hits we’ve been listening to in 2021 and will continue to play in 2022 to fill a new year together with music and energy.

Scroll to Top