Diseño y croquis atómicos: una guía para mejorar el flujo de trabajo

Sketch y Atomic Design son un poderoso conjunto de herramientas y metodologías que los diseñadores pueden usar para crear sistemas de diseño que permitan la estandarización y un flujo de trabajo más eficiente.

Sistemas de diseño: una introducción

Un sistema de diseño es un conjunto de componentes y pautas reutilizables que ayudan a los equipos a unirse en torno a un lenguaje común durante la creación y la vida útil de un producto.

En la mayoría de los casos, los sistemas de diseño se componen de una guía de estilo y una biblioteca de componentes. También pueden incluir elementos como la voz y el tono, así como los valores de la marca. El objetivo de tener un sistema de diseño es crear un conjunto de estándares que actúen como una única fuente de verdad para un producto o una marca.

Material Design de Google es un ejemplo de un sistema de diseño de interfaz de usuario estructurado. Material Design se introdujo en 2014 como una forma de diseñar y desarrollar aplicaciones de Android cohesivas.

Otro ejemplo es Voice and Tone de Mailchimp. Describe cómo la voz de uno es siempre la misma pero el tono cambia según el contexto. Ser consciente de ello ayuda a potenciar el contenido y dotar de personalidad a la marca.

Si bien existen muchos métodos diferentes que se pueden usar para crear un sistema de diseño, es una buena idea elegir un marco que permita que el equipo se unifique en torno a un lenguaje común y un conjunto de estándares. Atomic Design es un gran ejemplo de un marco que logra estos dos objetivos.

Diseño atómico: sistemas de diseño de edificios

Atomic Design, una metodología introducida por Brad Frost en 2013, se basa en la idea de que cada sistema de diseño se puede definir como una serie de bloques de construcción que coexisten.

Aquí hay una descripción general rápida de los componentes de Atomic Design:

• átomos Representar los componentes básicos de un sistema de diseño. Un ejemplo es un botón o un estilo de texto.
• Moléculas . Un grupo de átomos trabajando juntos como una unidad. Las moléculas son elementos tangibles de la interfaz de usuario. Por ejemplo, un botón y un campo de texto se pueden agrupar para crear un formulario de búsqueda.
• Organismos Átomos y moléculas trabajando juntos en una estructura compleja. Un campo de búsqueda agrupado con una barra de navegación forma un organismo de encabezado en un sitio web.
• Plantillas. Objetos a nivel de página que colocan componentes en un diseño que define la estructura del contenido. Por ejemplo, tomar un organismo de encabezado y colocarlo en una plantilla de página de inicio.
• Paginas. Instancias de plantillas que representan el producto final.

“Tenemos la tarea de crear interfaces para más usuarios en más contextos utilizando más navegadores en más dispositivos con más tamaños de pantalla y más capacidades que nunca. Eso es una tarea desalentadora de hecho. Afortunadamente, los sistemas de diseño están aquí para ayudar.”—Brad Frost como una introducción al diseño atómico y los sistemas de diseño.

El uso de Atomic Design para crear y mantener un sistema de diseño ayudará a los diseñadores a trabajar de manera más eficiente y comunicarse mejor dentro de sus equipos. Hay una plétora de herramientas y métodos para crear y mantener sistemas de diseño, pero a menudo las mejores herramientas son aquellas con las que estamos más familiarizados.

Cómo usar el diseño atómico con Sketch

Para desarrollar un sistema de diseño usando Atomic Design, una gran (y ya familiar) herramienta es Sketch. Nos proporciona un lienzo para crear átomos, moléculas y organismos: los elementos necesarios para definir el núcleo de un sistema de diseño.

Creando átomos

Comenzamos creando tres tipos de átomos en Sketch: símbolos, estilos de capa y estilos de texto.

Símbolos. Los símbolos no son más que componentes reutilizables. Se definen una vez porque se pueden instanciar en todo un producto. Por ejemplo, un símbolo de flecha (átomo) se puede definir con propiedades como el color del borde, el tamaño, etc. Luego, podemos reutilizar este símbolo sin tener que volver a crearlo cada vez.

Estilos de capa . Los estilos de capa son los elementos de estilo visual reutilizables que se mantienen uniformes en todas las capas. Por ejemplo, el color de relleno de la flecha definida anteriormente.

Estilos de texto. Los estilos de texto, al igual que los estilos de capa, son elementos reutilizables que garantizan la coherencia entre objetos de texto similares. Por ejemplo, definir el tamaño de fuente y el color de un elemento h1. Funciona de manera similar a los estilos de texto en Google Docs o Microsoft Word.

Cuando definimos símbolos, estilos de capa y estilos de texto, Sketch puede dividirlos en categorías jerárquicas en sus menús de símbolos y estilos de texto con el uso de una "/" (barra inclinada). Seguir las convenciones de nomenclatura y tener un conjunto bien definido de categorías maestras dará a los archivos una estructura organizada, lo que reducirá la confusión y las incoherencias.

Aquí hay algunas formas de crear categorías jerárquicas para símbolos, texto y estilos de capa en Sketch.

Podemos representar símbolos usando la siguiente convención de nomenclatura sugerida en Atoms/ :

• Activos
• Botones
• Controles de entrada
• Imágenes
• Navegación
• Información

No convertiremos los estilos de capa en símbolos, por lo que es suficiente con identificarlos por su grupo semántico. Nuevamente, usando Atoms /:

• Rellenos
• Fronteras
• Oscuridad
• Gradientes

Similar a los estilos de capa, así es como podemos crear estilos de texto en Atoms /:

• encabezados
• Cuerpo
• Subtítulo
• Etiquetas
• Enlaces

Un lenguaje de diseño unificado no debería ser solo un conjunto de reglas estáticas y átomos individuales; debe ser un ecosistema en evolución.—Airbnb sobre la creación de un lenguaje visual.

Creando Moléculas

Los átomos definen la parte básica de las pautas de diseño de un producto, pero por sí mismos no son del todo útiles. Para obtener alguna funcionalidad, unimos átomos y creamos moléculas.

Unir una etiqueta (átomo) con un botón de entrada (átomo) para crear una función de búsqueda es un buen ejemplo de un elemento de molécula de uso común.

Una palabra de precaución ya que puede haber un poco de área gris aquí. Un botón, a nivel de código , se considera un átomo, pero un botón a nivel de diseño se considera una molécula ya que estamos agrupando un estilo de capa y un átomo de estilo de texto. Para evitar cualquier confusión, es una buena idea pensar solo en los elementos de nivel de código.

Las principales categorías que se incluyen en Moléculas/ son:

• Información
• Navegación
• Controles de entrada

Dado que las moléculas comenzarán a dar forma a nuestros productos de forma interactiva, es una buena idea definir mejor las categorías anteriores. En este caso, definiremos un conjunto de subcategorías que representan una biblioteca de patrones:

• Listas desplegables
• Alterna
• Controles deslizantes
• Pestañas
• Paginación
• Indicadores de progreso
• Campos de fecha
• Campos de texto
• Casillas de verificación
• Botones de radio
• Módulos

Creando Organismos

Los organismos son grupos de átomos y moléculas. También pueden ser parte de otros organismos.

A diferencia de los átomos y las moléculas, los organismos no tienen una inclusión abstracta en los productos que estamos diseñando; son componentes concretos y reutilizables que se pueden identificar fácilmente con acciones específicas. Su estructura es más compleja que un átomo o una molécula.

Si el campo de búsqueda previamente definido se agrupa con otros componentes, como una barra de navegación (molécula) y un logotipo (átomo), se crea un organismo. Un ejemplo es una barra de navegación o un calendario.

Los organismos, como las moléculas, pueden encajar en las mismas categorías y subcategorías:

Estas son las categorías principales que crearemos para Organismos/:

• Información
• Navegación
• Controles de entrada

Al igual que con las moléculas, también crearemos subcategorías para los organismos:

• Listas desplegables
• Alterna
• Controles deslizantes
• Pestañas
• Paginación
• Indicadores de progreso
• Campos de fecha

Hasta este punto, la mayor parte de la interfaz de usuario ya se ha diseñado, por lo que ahora es tan simple como llamar a las instancias de nuestros componentes cuando se necesitan para el diseño.

Es fácil ubicar cada uno de estos componentes por sus grupos semánticos, ya sea buscándolos directamente usando el panel de inserción en la barra de herramientas de Sketch, donde encontraremos un conjunto bien organizado de 3 categorías principales, o usando un complemento como Corredor de Sketch.

Runner for Sketch optimiza el flujo de trabajo de un diseñador al proporcionar un conjunto de comandos de teclado que pueden usar en lugar de buscar cosas en menús interminables. Por ejemplo, pueden escribir la palabra insertar , presionar la tecla de tabulación y buscar los componentes que necesitan.

Al escribir atoms , una lista desplegable nos mostrará todos los elementos que se incluyen en esa categoría. Si los átomos y las moléculas tienen categorías compartidas, solo se verán los átomos y se ignorarán todas las moléculas.

Envolviendolo

Sketch y Atomic Design son un poderoso conjunto de herramientas que se pueden usar juntas para mejorar los flujos de trabajo de diseño y facilitar un marco de sistema de diseño efectivo.

Utilizando el concepto de átomos , moléculas y organismos como base de componentes, Atomic Design ayuda a los diseñadores a unificarse en torno a un lenguaje común durante la creación y la vida de un producto.

Los diseñadores pueden usar herramientas como Sketch para implementar Atomic Design, lo que proporciona un flujo de trabajo más eficiente y un conjunto de estándares que todos los miembros del equipo de diseño, incluidos los desarrolladores, adoptan durante las etapas finales del proyecto.

Lectura adicional en el blog de diseño de Toptal:

• Cómo construir un marco de diseño eficaz
• Comprender los sistemas y patrones de diseño
• Cómo crear una guía de estilo de boceto, una biblioteca y un kit de interfaz de usuario
• Por qué las startups necesitan una guía de estilo
• Zeplin Sketch Plugin: el puente de flujo de trabajo entre el diseño y la ingeniería