Publicado el 7 Ago, 2020 5 minutos de lectura
“¿Cómo se puede diseñar para todos sin comprender la imagen completa?”
Como diseñadores nuestro día a día siempre se vuelve desafiante, hay etapas más duras que otras, y más aún cuando nos toca un proyecto nuevo o entramos a un equipo de cero. Y ahí es donde surge la pregunta ¿dónde están los insumos gráficos, la guía? ¿Por qué veo tantas inconsistencias? Si trabajas en esta industria, alguna vez te ha tocado vivir esto.
Con mi equipo actual, más conocidos como el "lab" quisimos resolver esta problemática. Nos propusimos crear un design system (ya te contaré más sobre esto) que nos facilitara el trabajo a todos, que nos permitiera tener productos consistentes, escalables y además que beneficiara al negocio.
Es por esto que nace este artículo, para compartir a otros diseñadores las metodologías de trabajo que utilizamos; desde un design system hasta atomic design, e ir evidenciando este proceso, sus beneficios y recomendaciones.
Comencemos
Desde que el mundo digital tomó fuerza, la velocidad del trabajo y los artefactos se aceleraron así cómo también sus procesos y la búsqueda por disminuir la cantidad de errores.
La consistencia y el desarrollo de productos digitales están basados en componentes. Y la reutilización de estos componentes son destinados a múltiples usos.
Hoy en día, existen diversos frameworks tales como foundation o bootstrap. Cada uno de ellos comparte muchos componentes reutilizables, desde formularios, botones, cards, dropdowns, etc. Esto genera un ahorro de tiempo y disminuye frustraciones a los desarrolladores.
Para los diseñadores de interfaces, las guías de estilos y librerías de componentes en general abordan el uso de la marca, fuentes tipográficas, colores, grillas, componentes etc. Cabe destacar que la idea principal de una guía de estilo es generar consistencia en toda la marca o producto.
Si unimos los conceptos a trabajar de un framework más una guía de estilo, nos acercaremos a lo que es un design system.
“Un Design System es un enfoque sistemático que genera los componentes básicos para diseñar de manera escalable y sostenible”
- Shane Williams
Entonces ¿Qué sería?
Es un conjunto de componentes interconectados, reutilizables y con reglas que conforman un producto digital. Es decir, los elementos repetitivos combinados crean una interfaz y las reglas nos permiten saber cómo usar y compartir esos elementos.
La idea principal también es poder generar un puente entre diseño y desarrollo, permitiendo así, experiencias visuales coherentes en dispositivos y plataformas.
Lo positivo de contar con un design system es que permite escalar productos, ser consistentes, ser eficientes y habilitar el trabajo colaborativo.
Genial ¿o no?
Atomic Design & Design System
“Atomic Design es una metodología ideada por Brad Frost que explica cómo aplicar un modelo mental para crear un Design System de forma eficiente”
Una analogía que se usa comúnmente para explicar este concepto es construir con Legos y también viene del mundo de la química.
Cada pieza elemental de un lego es análoga a un átomo, es la unidad básica y mínima de una composición. Digamos que estás tratando de construir el trono de hierro de Game of Thrones y este requerirá diferentes bloques de Lego que se puedan combinar para construirlo ¿Y sabes qué? Los mismos bloques de Lego se pueden usar para construir el Gran Salón o toda la fortaleza roja. Esta analogía de construcción de Lego nos permite entender la manera de trabajar un sistema de diseño en base a atomic design.
¿Cómo se construye?
Átomos
Son los bloques de construcción más pequeños de un proyecto. Legos individuales. Estilos de texto, botones, iconos, campos de entrada, casillas de verificación, etc. Todos estos elementos no se pueden dividir en partes más pequeñas sin perder su uso (por ejemplo, ¿por qué necesitaría un botón sin etiqueta o icono?)
Moléculas
Son las formas más complejas que consisten en varios átomos.
A veces, las moléculas ya son elementos funcionales que podrían colocarse en cualquier lugar de la página y funcionar por sí mismos. Por lo general, sin embargo, deben ser parte de un organismo, para tener un verdadero valor.
Organismos
Partes verdaderamente funcionales de una página, hechas de grupos de átomos y moléculas. Muchos organismos funcionan por sí solos, sin depender de otros elementos en la página. Por lo general, son componentes grandes, como navegación, barras laterales, formularios, ventanas emergentes con muchos datos, etc.
Plantillas
Son páginas sin contenido real. Combinan organismos en un diseño de sitio web adecuado.
Páginas
Son instancias de plantillas. El contenido falso en la plantilla se reemplaza con contenido real para que los usuarios lo lean. Las páginas que se derivan de la misma plantilla pueden variar según la cantidad de contenido que pueda tener.
Resultados de diseño
Dado ya todo lo mencionado, no solo desde lo teórico, también en lo práctico es como hemos ido evolucionando nuestro proceso de creación en los design system y artefactos similares, trayéndonos los siguientes resultados:
-
Diseños consistentes y fáciles de digerir
-
Organización en el equipo
-
Aplicar los principios de diseño atómico
-
Flujos de trabajo eficientes (en el diseño y en el proceso de implementación)
-
Formar un lenguaje universal entre los miembros de tu equipo, clientes y usuarios
Recomendaciones
Compartir
La construcción de un sistema de diseño requiere mucho tiempo y esfuerzo. La participación de los demás nos ayuda a mejorar el flujo de trabajo constantemente, el feedback y la toma de decisiones.
Darle presencia y un nombre al design system
Cuando un sistema de diseño ha alcanzado la madurez suficiente para ser utilizado, necesita un nombre o una presentación tal como es un cover. Al tener un nombre, la gente lo podrá recordar más fácilmente y podrá comenzar a compartirlo, muchas veces incluso los colores, tipografías y formas permiten este factor diferenciador para cada sistema de diseño.
Establecer un proceso
Un sistema de diseño crecerá demasiado para que una persona pueda mantenerlo. Es por eso que como equipo de diseño deben trabajar en conjunto y bajo un mismo lenguaje.
Esto permitirá establecer un proceso, dividir los roles y así permitir que otros colaboradores como los desarrolladores y PM puedan contribuir de manera fácil y fluida.
Tener paciencia e intentarlo una y otra vez
Al principio nos costó como diseñadores el querer sistematizar un proceso, pero luego de resistir, tener paciencia e intentarlo una y otra vez ya vamos por buen camino.
Como diseñadores comenzó a darnos frutos el crear hifi con mayor velocidad, así como también conocer más sobre Figma.
Lo que nos queda pendiente, es aprender y colaborar más con el equipo de desarrollo para así en un futuro lograr tener cada fragmento en código.
“Cuando sistematizamos lo operativo se libera más creatividad”
Gracias por leer.