Atomic Design: ¿culminación del diseño web responsive?

Antes de abordar el web design, piensa en el rostro más hermoso que conoces. Esa cara posee relaciones numéricas y geométricas en su estructura donde se repite el número áureo  (Φ= 1,61803). La proporción aúrea es una de tantos patrones matemáticos presentes en la naturaleza. Esta proporción natural sirve desde la antigüedad como andamiaje teórico para el planteamiento de obras de arte, alardes arquitectónicos e hitos de ingeniería y el diseño (divide la longitud y la anchura de un bote de refresco, o una tarjeta de crédito, y es probable que arroje un resultado cercano a Φ).

Cuando adaptas al orden natural el desarrollo de un proyecto, su resultado puede ser tan práctico, como estético. Dentro de este paradigma de diseño amigable y basado en las leyes de la naturaleza, se encuentra el Atomic design.

Desarrollo front end con Atomic Web Design

Detrás de cada elemento web, programa o aplicación, subyace un determinado enfoque. Desde un diseño plano, hasta la apariencia retro del esqueumorfirmo, cada filosofía del diseño posee sus propias ventajas y puntos flacos con respecto a la usabilidad o la estética.

Hasta hoy, el enfoque más socorrido por los desarrolladores se basa en comenzar el diseño de una interfaz desde sus elementos más generales (como el diseño de la plantilla de la página) hasta ocuparse, al final, de incluir los detalles más pequeños. El control de calidad del producto terminado inspira este sistema de trabajo.

Representación de elementos en Atomic Design

Elementos individuales che forman objetos mayores.

La nueva metodología para el desarrollo informático, el atomic interface design, actúa justo en dirección contraria: la creación parte desde los elementos individuales y, cimentados en ellos, se edifican objetos mayores. Los elementos más pequeños determinan la configuración de la plantilla. Brad Frost, creador del atomic web design, lo define como una metodología para crear sistemas de diseño. En teoría, un experto en atomic design podría crear una interfaz de usuario más rápida, versátil y estable que otra basada en un enfoque más tradicional. En la misma línea, Stephen Hay, impulsor del diseño adaptable (web responsive), aduce que en la actualidad no diseñamos páginas, sino que diseñamos sistemas de componentes.

Las webs y elementos web fruto del atomic design pueden requerir mayor trabajo constructivo, debido a que el planteamiento del diseño web no es lineal. Tal estrategia merece la pena, pues al planificar un proyecto como la suma de sus partes, cada etapa influye de forma decisiva en la usabilidad y la experiencia de usuario de la web final. Se consiguen sistemas robustos que se adaptan con mayor facilidad a los cambios que incorporen los portales web por el paso del tiempo.

Metodología Atomic Design

Las ventajas de un diseño tan intuitivo y sencillo resultan patentes desde el momento inicial de la codificación. Un código limpio facilita los ajustes futuros de la web y su comprensión si se incorporan nuevos desarrolladores al proyecto. Un recién llegado sólo necesitaría acceder al correspondiente libro de estilo de la interfaz para familiarizarse con el sistema. También se minimiza la posibilidad de escritura de código duplicado y, si se necesitara replicarlo en otro lugar del portal, se ubica con rapidez dónde se almacenaron esas líneas de código.

Proceso creativo del Atomic Design

Imagen vía bradsoft.com

El proceso de diseño en orden ascendente se denominó atómico por la influencia de la química y la organización visual de la tabla periódica de los elementos. El sistema imita la estructura de los organismos de la naturaleza a partir de la estructura atómica:

  • En la química, los átomos son los bloques más básicos de construcción de la materia y, si se dividen, dejan de ser el elemento químico que conforman. Si separas los átomos que conforman una molécula de agua, obtienes oxígeno e hidrógeno, pero deja de ser agua.
  • Los átomos son unidades de construcción muy versátiles, y al combinar los átomos se obtienen moléculas.
  • El siguiente paso evolutivo consiste en la creación de organismos mediante la unión de moléculas.

Desde el punto de vista del diseño atómico, los elementos básicos de HTML pueden combinarse para la creación de entes superiores más funcionales sin necesidad de repetir código. Gracias a esta sencillez, las webs generadas por este sistema resultan más fáciles de mantener. La evolución de los sistemas atómicos se lleva a cabo en los siguientes niveles:

Átomos

Los átomos constituyen el primer nivel de abstracción de los cinco que incorpora el sistema. Los átomos son pilares constructivos básicos de las páginas, y desempeñan ese papel las etiquetas en HTML: negritas, cursivas, tablas, campos de los formularios, paletas de colores, párrafos, h1, h2, y el resto de elementos tipográficos.

Etiquetas HTML como átomos en Atomic Web Design

Las etiquetas HTML son átomos

Cuando se divide un sistema en los elementos más básicos, resultará sencillo averiguar cuáles pueden reutilizarse en otros sistemas, o cómo mezclarlos para crear entes más complejos. El diseño atómico resulta perfecto para aquellos Websites que precisan distintas interfaces para sus diversas url.

Moléculas

La combinación de átomos construye moléculas, o elementos visuales sencillos que poseen nuevas propiedades. Un ejemplo de moléculas, en el desarrollo front end, son los formularios de búsqueda.

Molécula representada por un buscador en Atomic Web Design

Molécula representada por un buscador

El formulario consta de la unión de diferentes átomos: un botón de acción, una etiqueta de formulario y un imput. La guía de estilo de una web diseñada mediante átomos y moléculas es tan accesible, que incluso se pueden extrapolar elementos a un diseño no atómico.

Organismos

Son las secciones del interfaz, o grupos de elementos sencillos formados por la unión de moléculas y de otros organismos. Un ejemplo de organismo es la cabecera de una web con su logo y menú de navegación (ambos moléculas), o las barras laterales de los blogs.

Organismo representado por una cabecera en Atomic Web Design

La cabecera de una página web es un organismo.

Plantillas

Se trata de un conjunto de organismos que actúan unidos para crear objetos que articulan la estructura de un diseño a nivel de página. Se trata de elementos tales como los wireframes: guías visuales que muestran la organización básica de componentes de una interfaz.

Páginas

Las páginas son instancias finales que pueden ver los usuarios. Se agrega el contenido real a la plantilla y se genera la interfaz definitiva con texto, imágenes y el resto de elementos con los que interactúa el visitante del sitio.

Atomic Interface Design: infinitas ventajas y una pega

El diseño atómico permite a los diseñadores realizar un control de calidad. Cuando construyes o pruebas un Website, ya incorpora su guía de estilo en el inventario del interfaz,  se puede auditar la consistencia del mismo; también se permiten maquetaciones y prototipos más rápidos. Brad Frost implementó este enfoque con el diseño gráfico en mente, y busca estructuras que ofrezcan la mejor usabilidad para el usuario (experiencia UX). Al proporcionar una metodología para los diseñadores basadas en componentes, pueden confiar en su creatividad sin chocar con los desarrolladores.

La guía de estilo aporta a ambas partes un lenguaje común que puede ahorrar mucho tiempo y roces entre diseñador y desarrollador. Por ejemplo, las actualizaciones del diseño se llevan a cabo con rapidez. Imagina que un desarrollador necesita agregar un nuevo formulario de contacto a un Website y, como ya existe un inventario de interfaces, obtiene el estilo que necesita para crear el formulario sin necesidad de involucrar al diseñador. Se trata de optimizar el flujo de trabajo, porque ya no se requiere que el diseñador cree nuevas maquetaciones para cada proyecto.

La pega, relativa, del atomic web design es su misma esencia atómica, pues necesitas replantear el proceso creativo entero desde las partes más pequeñas. La creación de la web se vuelve un trabajo metódico y laborioso, como añadir teselas en la construcción de un mosaico. Puede resultar innecesariamente complejo si lo que necesitas es crear una web o aplicación con poco contenido, o que no vaya a sufrir modificaciones significativas a lo largo del tiempo. En estos casos, podrías confiar tu proyecto a un WordPress o Prestashop y evitas complicarte la vida sin necesidad. El diseño atómico muestra sus virtudes en los sistemas grandes y que precisan mantenimiento y actualizaciones frecuentes, o en el cual vayas a reutilizar componentes.

Conclusión sobre el Atomic Web Design

Con este sistema de diseño, te olvidarás de aprender otro método existente (y de reescribir las reglas que no te convengan). Gracias al sistema atómico, creas el que más te conviene, con tu propio libro de estilo, y lo adaptas a las necesidades de tu proyecto. Lo trabajoso del diseño inicial se amortiza con su robustez, la facilidad de mantenimiento y la posibilidad de reciclar los patrones que necesites. Tú decides: o usar frameworks o gestores de contenido, o crear los tuyos propios.

Photo by Daniel von Appen

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *