La guía del diseño atómico

La guía del diseño atómico

Diseñadores de todo el mundo han aprendido a amar el acercamiento más calculado a la hora de diseñar cosas nuevas. Es por esta razón que el diseño atómico ha creado nuevas olas en la industria del diseño UX

Usando conceptos de la química en el diseño web, la mayoría de los equipos de diseño encontraron una forma de hacer su vida más fácil. Esto implica ver la interfaz y los componentes con nuevos ojos, ganando perspectiva. El proceso en sí consiste en hacer un sistema que lista todos los componentes y patrones, como un sistema de diseño que contiene todos los materiales y sus derivados.

¿Qué es el diseño atómico?

Todos los diseñadores saben que en el diseño UX, existen un montón de diferentes acercamientos. El diseño atómico trata de escoger un acercamiento científico a la interfaz, aplicando un marco de trabajo que provenga de la química.

Piensa en tus días del colegio, en tus clases de química. Tu profesor probablemente invirtió mucho tiempo y esfuerzo en hacer que tú veas el mundo por sus ojos. De repente, todo en el planeta puede considerarse como un largo grupo de moléculas, trabajando en conjunto para crear la realidad que conocemos. Nuestros propios cuerpos están hechos por átomos, y cada uno juega un rol importante.

El diseño atómico trae esa manera de ver las cosas, y la aplica a los productos digitales. Un ejemplo puede ser en los componentes individuales del UI, que forma un formulario de registro.  En el diseño atómico, los componentes son átomos, que forman una molécula. La página entera es un organismo vivo.

Esto invita a varios diseñadores a mirar las páginas y productos como a un complejo grupo de organismos, con cada pequeño elemento jugando un papel crucial en el mismo. 

De los átomos, al producto entero

Más que una metodología, el diseño atómico posee cierto marco de trabajo. Este busca organizar los esfuerzos y guiar a los diseñadores durante todo el proceso de diseño. 

Átomos

Los átomos muchas veces son llamados los bloques constructores del universo. Cada átomo en particular, pequeños cómo son, terminan teniendo un gran impacto en todas las moléculas y organismos. El diseño atómico invita a los diseñadores a ver los componentes individuales como átomos. Estos pueden verse como capturas de pantalla del estilo y la función de la página.

Uno debe ver el valor real y el impacto de cada pequeño componente. Con eso dicho, los diseñadores no deben caer en la trampa de limitar su vista de cada componente, sino que tiene que ver el valor que cada componente le añade al todo.

De esta manera, el equipo tiene la oportunidad de crear una lista. Esta incluye todos los componentes que se eligen como los átomos de tu producto. Esto es un recurso para los diseñadores, que pueden volver a esa lista cuándo la necesiten.

Moléculas

En química, las moléculas son un grupo de dos o más átomos que están unidos juntos y demuestran nuevas cualidades. Considera la molécula de agua. Es una combinación de hidrógeno y oxígeno que, juntos, crean algo nuevo. Con el diseño atómico, los diseñadores pueden decir lo mismo de los grupos de componentes. 

Estos pueden acercarse de diferentes maneras. Cuando uno trata con un grupo de componentes, los equipos tienden a afrontar conceptos como vacío o espacio negativo, junto a la necesidad de agrupar elementos de manera que tengan sentido para los usuarios. Generalmente, tener componentes individuales unidos, lleva a los usuarios a creer que trabajan juntos. Aquí hay algunos conceptos interesantes:

  • Jerarquía visual: se refiere a alojar elementos en un camino visual que transmita su respectiva importancia a los usuarios. Las cosas más importantes deben ser más grandes y brillantes; lo secundario debe aparecer de relleno.
  • Espacios en blanco: dejar un espacio entre grupos de componentes ayuda a evitar el cansancio de la vista  y establecer una guía.
  • Información de arquitectura: el mapa general de cómo cada información se relaciona con la otra, mostrando la jerarquía que todo producto debe tener. 

Organismos

Una vez que tienes una molécula…¿Qué pasa? Puede ser tentador mirar cada pantalla como a un organismo individual, pero eso te alejaría del poder que ofrece el diseño atómico. En vez de eso, esta forma de trabajo te encoraja a ver cada página como muchos organismos que, juntos, crean la interfaz.

Un formulario de registro es una molécula que posee otros elementos, como texto, que trabajan con el formulario para crear un organismo. Un carrusel de imágenes, botones y flechas de navegación pueden juntos crear la cabecera de una pantalla, haciendo un organismo. Es importante pensar en estos grandes grupos de organismos en sus propios derechos, ya que este facilita la creación de interfaces.

El diseño atómico significa crear una suerte de rompecabezas, donde los diseñadores pueden intercambiar organismos acorde a lo que necesitan.

Compartir:

Asesoramiento profesional gratuito

Tienes una agencia de diseño lista para ayudarte.​

Queremos escucharte, asesorarte y acercarte las mejores soluciones. Completa el formulario y en breve un experto se contactará contigo.

Haz clic o arrastra un archivo a este área para subirlo.
Lo último en Web
Lo último en Marketing
Lo último en Diseño
Lo último en Empresas

Tienes una agencia de diseño
lista para ayudarte

¡Te asesoramos de manera gratuita!