¿Qué es el Atomic Design? Guía a los ui ux components

Un buen desarrollador front-end debe estar familiarizado con los conceptos y componentes de UI/UX, acrónimos de User Interface y User Experience. El desarrollador front-end no está exento de los roles que puede desempeñar un UI UX designer.

ui ux designer, ¿qué hace?

Un UX/UI designer diseña la experiencia del usuario y la interfaz de usuario dentro de una página web. Se asegura de que el sitio sea user-friendly, fácil de usar e intuitivo. Son muchos los factores que debe tener en cuenta un rol de este tipo, como la escalabilidad, la accesibilidad, la reutilización y el rendimiento de la interfaz gráfica.

En proyectos grandes, es fácil que el programador front-end y el diseñador de UX sean dos figuras separadas. Sin embargo, en general, uno no excluye al otro, ya que desarrollar el layout de un sitio web requiere parte de este conocimiento.

Estrechamente relacionado con el UX/UI design está el Atomic Design que se considera un modelo mental para concebir mejor una interfaz de usuario conectada con el resto de los componentes gráficos.

El concepto de Atomic Design ayuda a construir sistemas de diseño robustos, lo que permite una implementación rápida, consistente y de alta calidad. Pensando en grande, podemos imaginar nuestros componentes de UI como átomos. Los átomos son los componentes básicos de nuestro universo, en el diseño de UI UX los átomos son los elementos más comunes (botones, entradas, etiquetas, etc.). A través de estos átomos, podemos componer elementos más grandes que se asemejan a moléculas. En el desarrollo de la interfaz de usuario, podemos pensar en estos átomos como los componentes básicos de la interfaz de usuario. Cada uno tiene su propia responsabilidad individual definida y enfocada.

Por ejemplo, si creamos un prototipo de interfaz, tenemos que pensar en los componentes y las propiedades que tienen, que juntos forman una molécula. Imaginemos nuestra molécula como un formulario de búsqueda, compuesto por entrada de usuario + etiqueta de identificación + botón de envío. Estos serán nuestros “átomos”.

Estas moléculas jugarán un papel clave cuando se contextualicen. Insertar nuestra página web, o al menos la estructura de esta, dentro de un organismo.

¿Cómo implementamos el Atomic Design utilizandoJS puro o framework como Laravel, Symfony o Angular?

Es suficiente con razonar, como lo hemos apenas hecho. Los componentes de UI UX como línea o input son nuestros átomos. Cuando se combinen, formarán moléculas, como una barra de navegación basada en pestañas.

La mayoría de las bibliotecas de UX UI design que vas a crear incluyen átomos y moléculas. La razón es que los desarrolladores a menudo buscan piezas funcionales prefabricadas que se puedan usar de inmediato. La Atomic UI permite combinar átomos y moléculas de UI para que la interfaz sea modular y eficiente. Entonces, cuando te acerques al diseño de su biblioteca atómica, debes pensar en los componentes que construyes como átomos modulares y composición de átomos (moléculas).

Hacer que tus componentes sean reutilizables es una manera perfecta de administrar la biblioteca y crear una interfaz profunda. Aquí te dejamos algunos consejos:

• Minimiza las dependencias globales o redundantes para los componentes: Evita acoplar un componente de bajo nivel a partes más grandes de la biblioteca o a toda la biblioteca. Esto va en contra de la jerarquía natural de los átomos. Descomprime la biblioteca con Bit.
• El estilo no debe tener componentes acoplados: Evita los métodos de styling que van en contra de la composibilidad y reutilización. En su lugar, escoge las técnicas que transforman los temas de estilo en átomos, como cualquier otro componente.
• Crea y prueba de forma aislada: Crea y prueba cada componente por separado de la biblioteca, para garantizar que funcione como una unidad independiente que pueda ejecutarse en cualquier lugar y en otros proyectos.

Para evitar tener que dividir tu biblioteca, usa Bit para aislar cada componente con sus dependencias y vincularlo a un compilador.

Lo bueno de Atomic Design es que es la forma más efectiva de construir una interfaz sólida: a partir de piezas más pequeñas, reutilizables e independientes.

Cómo funciona el mundo real, también es cómo funciona el UI y UX design y, afortunadamente, cómo funciona el mundo del desarrollo de software. Cuando implementa Atomi Design, realmente implementas los principios de modularidad, reutilización, responsabilidad única y todo lo que puede ayudarte a crear un software mejor y más manejable. También será más fácil la próxima vez que desees reutilizar componentes existentes para crear algo nuevo.