Atomic Design, última tendencia en diseño web

Vamos a ir al grano y vamos a comenzar definiendo el Atomic Design como una metodología utilizada para construir sistemas de diseño orientados al medio web / digital.

Seguramente os habréis quedado un poco igual, bien si tienes unos minutos, algo de curiosidad y recuerdas un poco la química que dabas en la escuela, continúa leyendo y verás cómo todo se ilumina…

Y es que a Brad Frost, el genio que creó todo este sistema, se le ocurrió utilizar el modelo atómico, para transmitir la idea de que tanto en el diseño como en el desarrollo web se debe trabajar desde los elementos particulares hacia los generales.

Así crea todo un universo de átomos, moléculas, organismos, plantillas y páginas que a continuación iremos desgranando.

 

Átomos

at-1

 

Los átomos son la unidad básica en el Atomic Design, y son las mínimas unidades indivisibles que tienen sentido por sí mismas. Ejemplo de estos serían la tipografía, el color, los botones, imágenes, tablas, campos de formulario y hablando a nivel de código entrarían las etiquetas html de img, p, headings, button, input y table.

 

at2

 

Tener todos estos pequeños átomos nos permite tener un sistema que nos de una visión global del aspecto gráfico del mismo, además facilita el trabajo en niveles más complejos y funcionan como referentes para después construir nuevos componentes.

 

Moléculas

at-3

 

Como en química, las moléculas son las agrupaciones de átomos que al estar unidos adquieren nuevas características y significados y que funcionan como una unidad. Hablando a nivel de diseño web corresponderían a un menú de navegación, una tabla o una caja de búsqueda.

 

at4

 

Con las moléculas nos aseguramos que existe una coherencia gráfica, estructural y conceptual en todos lo componentes que construyamos de nuestra web. Además esto implica que debemos construir elementos pensados para ser reutilizados en diferentes contextos.

 

Organismos

at5

 

Es el conjunto de moléculas y átomos, unidos para crear una sección más compleja de la interfaz. Algunos ejemplos son las cabeceras (logo + menú + buscador) o las parrillas de productos (misma ficha para presentar diferente información repetida con un nombre, descripción, precio, foto…).

 

at6

 

Es posible que nuestros clientes no estén interesados en lo que ven por ahora, pero a partir de aquí la interfaz comienza a cobrar sentido.

 

Plantillas

at7

 

Estas consisten en grupos de organismos colocados de manera conjunta para formar páginas. En este momento comenzamos a ver la coherencia del contenido y el diseño, junto a temas de estructura como la retícula.

 

at8

 

La función principal de estas plantillas es dar contexto a las pequeñas unidades, jerarquizarlos, dar orden a la lectura y disponer los contenidos. En definitiva comenzar a crear lo que conocemos como wireframes.

 

Páginas

at9
Estas reemplazan a las estructuras o contenidos simulados con contenidos reales para dotar de significado y carácter el producto final. Son los sujetos con mayor nivel de fidelidad.

 

at10

 

Estas también permiten simular los diferentes estados de un mismo contenido como titulares más largos o más cortos, o carritos de la compra con 1 elemento o con 20. Representan el paso de prueba y control de calidad del sistema y de su efectividad y permiten ajustar deficiencias en los componentes anteriores para mejorar el conjunto total.
Una vez visto y entendidas todas las partes que componen Atomic Design y cómo funciona, podemos resumir sus principales características en:

Escalabilidad: Se adapta a cualquier dispositivo.
Actualizable: És más fácil realizar una actualización a nivel de diseño.
Mantenimiento: Hacer un pequeño cambio es muy sencillo.
Reutilizable y re-aprovechable: Cada pequeño elemento es creado para adaptarse a diferentes contextos.

Espero que en este viaje entre lo atómico y lo digital, hayáis podido entender un poco mejor en qué consiste esta metodología, que hayáis podido detectar sus ventajas y que las podáis utilizar en futuros proyectos.

Si aún así no lo acabáis de ver claro, y/o os habéis quedado con ganas de más, os recomiendo que visitéis la web de Brad Frost (http://bradfrost.com/blog/post/atomic-web-design/) en la que desarrolla con más detalle los concepto antes explicados.

Saludos!!

Dejar una Respuesta

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

Puede utilizar estos atributos y etiquetas HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

O
CURSO GOOGLE ADWORDS
Para poder descargarte nuestro curso de Google AdWords, solo tienes que dejarnos tu nombre y un email donde recibirás el enlace para descargarte el archivo. ¡Muchas gracias!
¡Muchas gracias!
En breve recibirás un correo con el enlace a nuestro curso de Google AdWords