La química y el diseño

Primeros apuntes de Atomic design

Valentina Reyes
Feb 6, 2019 · 4 min read
Le pregunté a 4 personas cuantos elementos recordaban sin mirar la tabla, la que más recordó fueron 5.

Cuando partí leyendo el libro Atomic Design de Brad Frost y me propuse escribir sobre él, empecé a pensar en la química, no en términos románticos ni nada por el estilo, principalmente en mi experiencia escolar con ella. Me acuerdo bien poco de las clases, nunca presté mucha atención y creo que con suerte recuerdo 3 elementos de la tabla periódica (SHAME, VALE, SHAME).

Pero como dicen, la vida da muchas vueltas y en una de esas vueltas me reencontré con la química y sí, con la tabla periódica también. Me imagino que en éstos momentos están pensando algo como “¿y qué tiene que ver esto con Atomic design?” Bueno, harto en realidad y JURO que desde esta línea en adelante me enfocaré a lo que nos compete.

Tabla periódica de los elementos HTML (VEEEN que sí tenía algo que ver!)

Al empezar a estudiar sobre sistemas de diseño, me encontré con esta metodología y toda la explicación sobre cómo construirlos. La forma de trabajo que propone Atomic design es descomponer/organizar el diseño desde elementos muy pequeños a organismos más complejos. Durante mi investigación, me encontré con Josh Duck quién creo una tabla periódica de elementos HTML, la cual nos será de gran ayuda en el proceso de reconocer los componentes más pequeños de nuestra estructura (o cómo los veremos más adelante átomos).

Ahora, voy a comenzar a contarles sobre la metodología Atomic Design ❤, ésta se compone de cinco etapas las cuales se trabajan en conjunto y no de forma lineal, están definidas jerárquicamente, desde el elemento más pequeño a composiciones complejas.

Composición de Atomic design

Como podemos ver en la imagen, las etapas se separan en:

  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas
https://patternlab.io

Si me pongo a pensar en mis años mozos como productora web (entiéndase, en ese tiempo como una maqueteadora de mails) sería algo como “Contenedor grande > Contenedor más pequeño > contenido” o “Elemento de bloque > Elemento de línea”. En cambio en la metodología de Atomic design, el orden es de elementos pequeños o más simples a organismos más complejos y grandes.

Para lograr entender aún mejor cómo funciona la metodología de Atomic design, iré describiendo cada uno de sus elementos:

Átomos: Son los elementos más básicos en los bloques de construcción, aplicado en el diseño de interfaz lo podemos ver cómo botones, fuentes tipográficas, paleta cromática.

En la imagen podemos ver 3 tipos de átomos (Átomo label, átomo input y átomo botón)

Moléculas: Las moléculas son grupos de átomos que funcionan juntos como una unidad, aplicando al diseño de interfaz, podemos pensar en campos de formulario (input + label) o campo de búsqueda (label + botón).

Aquí comenzamos a ver cómo se van agrupando los átomos de forma tangible. Si separamos el ejemplo que tenemos abajo (molécula de búsqueda), podemos darnos cuenta lo poco útil que resulta tener un “átomo label” o un “átomo input” sin el resto de los elementos, pero al combinarlos logramos construir un buscador.

Esta molécula de búsqueda está compuesta por un átomo label, átomo input y átomo botón.

Organismos: Los organismos son grupos de moléculas unidas para formar módulos de componentes, secciones importantes de la interfaz, tales como: Header, Footer, Navbar.

Organismo header

Cuando comenzamos a construir organismos podemos ver lo poderoso que es Atomic design, ya que, comenzamos a tener acercamientos a lo que sería el diseño, sin tener que llegar a procesos más complejos.

Plantillas: Las plantillas son grupos de organismos, en este momento empezamos a generar la estructura del contenido, en otras palabras comenzamos a crear lo que conocemos como wireframes.

La función principal de las plantillas es dar contexto a los organismos y moléculas, jerarquizándolas para generar un orden de lectura.

Páginas: Las páginas vienen a ser la versión final y de alta fidelidad de las plantillas, dándole contenido real y estilos finales.

Las páginas son la prueba de fuego para comprobar la eficacia y efectividad de los componentes que construimos y nos permite una visión en contexto para poder iterar algún elemento si es necesario.


Y a ustedes ¿les ha tocado trabajar con esta metodología en sus proyectos? ¿La utilizarían? Les cuento que continuaré escribiendo más artículos sobre Atomic Design y cómo poder integrarlo en sus proyectos :).

Referencias:

https://allthetags.com/

http://atomicdesign.bradfrost.com/table-of-contents/

https://patternlab.io


Gracias Mariana Valenzuela Silva por tus correcciones ❣️

Thanks to Mariana Valenzuela Silva

Valentina Reyes

Written by

UX Lead en Mutual de Seguridad. Co-Lider de Talleres en @masmujeresux y Encargada de diseño en @ixdasantiago

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade