Atomic Design es una metodología creada por Brad Frost, diseñador y programador, que revoluciona la manera en que los equipos abordan el diseño y la innovación. Este método consta de fases que facilitan la resolución de problemas de manera eficiente y colaborativa. Cada una de ellas se interrelaciona, creando una sinergia que potencia la creatividad y la toma de decisiones.
Repasemos cada etapa, una por una:
Átomos: Si los átomos son los bloques básicos de la materia, entonces los átomos de nuestras interfaces funcionan como los bloques fundamentales que componen todas nuestras interfaces de usuario. Estos átomos incluyen elementos HTML básicos como etiquetas de formulario, campos de entrada, botones y otros que no se pueden descomponer más sin dejar de ser funcionales.
Moléculas: En química, las moléculas son grupos de átomos unidos que adquieren propiedades nuevas y distintivas. En interfaces, las moléculas son grupos relativamente simples de elementos de interfaz de usuario que funcionan juntos como una unidad. Por ejemplo, una etiqueta de formulario, un campo de búsqueda y un botón pueden unirse para crear una molécula de formulario de búsqueda.
Organismos: Son componentes de interfaz de usuario relativamente complejos compuestos por grupos de moléculas y/o átomos y/o otros organismos. Estos organismos forman secciones distintas de una interfaz. Los organismos pueden consistir en tipos de moléculas similares o diferentes. Vemos estos tipos de organismos en casi todos los sitios web que visitamos.
Plantillas: El lenguaje de átomos, moléculas y organismos nos proporciona una jerarquía útil para construir deliberadamente los componentes de nuestros sistemas de diseño. Pero en última instancia, debemos adoptar un lenguaje más apropiado para nuestro producto final. Las plantillas son objetos a nivel de página que colocan los componentes en un diseño y articulan la estructura del contenido.
Páginas: Son instancias específicas de plantillas que muestran cómo se ve una interfaz de usuario con contenido real representativo. Podemos tomar como ejemplo una plantilla de la página de inicio y agregar texto representativo, imágenes y medios para mostrar el contenido real en acción.
Esta etapa es la más concreta e importante del Atomic Design, es lo que verán y con lo que interactuarán los usuarios cuando visiten un producto digital. Es la etapa donde podemos analizar cómo se mantienen todos esos patrones cuando se aplica contenido real al sistema de diseño.
Ahora que pasamos por todas las etapas en nuestro diseño ¿Se ve genial y funciona como debería? Si la respuesta es no, entonces podemos retroceder y modificar nuestros átomos, moléculas y plantillas para abordar mejor las necesidades de nuestro contenido.
