Diseño atómico

2/17
Recursos
Transcripción

Aportes 29

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Atomic Design fue ideado por Brad Frost. Es una metodología para crear elementos que forman el sistema de diseño. Su interpretación se forma de:

  • Átomos: elementos básicos como colores, etiquetas, por si mismos carecen de sentido.

  • Moléculas: se forma al juntar varios átomos como una etiqueta y un input; ahora tienen un sentido y función.

  • Organismos: se logra al unir moléculas diferentes, como un formulario.

  • Templates y páginas: se obtienen con varios organismos y son los que esquematizan una página.

Con el diseño atómico: se logran patrones, se acelera el trabajo, se centra en resolución de problemas, promueve la escalabilidad y consistencia.

Lo que más me gusta de atomic design es que permite escalar interfaces de forma ordenada, ahorrando tiempo y evitando las inconsistencias entre elementos. Hay que ser muy cuidadoso al definir los primeros átomos y moléculas ya que serán la base de todo el sistema.

Esta metodología es genial. Yo soy diseñador industrial, y en antuguos empleos hemos tenido la oportunidad de trabajar con Atomic Desing, pero para diseño de producto físico, usando la filosofía de amomos-moléculas-organismos … así fué mucho más fácil identificar las partes involucradas en el producto.

nuestras aplicaciones en algún momento van a ser grandes, no importa si es un ejercicio personal o una iniciativa de negocio pequeña, implementar atomic design desde el inicio nos dará muchas ventajas en el futuro. Lo digo por experiencia.

Les comparto las diferencias y similitudes entre el sistema de diseño atómico, Material Design y Carbon Design System de manera sencilla!

Sistema de Diseño Atómico:

  • Idea Central: El sistema de diseño atómico se basa en descomponer la interfaz de usuario en componentes más pequeños llamados “átomos”, que son los bloques de construcción básicos.
    Niveles: Los átomos se combinan para formar moléculas (conjunto de átomos), organismos (conjunto de moléculas) y plantillas (estructuras más grandes) para construir interfaces de usuario consistentes y escalables.

Material Design (de Google):

  • Filosofía: Material Design se centra en recrear la experiencia táctil del papel y la tinta en las interfaces digitales. Utiliza sombras, transiciones y colores para simular capas físicas.
    Componentes: Proporciona una guía completa con componentes prediseñados y principios de diseño para garantizar la coherencia y la usabilidad en todas las plataformas.

Carbon Design System (de IBM):

  • Enfocado en la Empresa: Carbon Design System está específicamente diseñado para aplicaciones empresariales y se centra en la consistencia y la eficiencia en entornos de trabajo empresariales.
    Modularidad: Similar al sistema de diseño atómico, Carbon utiliza un enfoque modular con componentes reutilizables que se pueden combinar para crear interfaces complejas.

Coincidencias:

Todos tienen como objetivo proporcionar coherencia visual y de experiencia de usuario.
Se basan en la modularidad y la reutilización de componentes para facilitar el desarrollo y la consistencia.
Proporcionan pautas detalladas sobre diseño, interactividad y comportamiento.

Diferencias:

La filosofía y enfoque estético varían entre ellos. Material Design se inspira en el mundo físico, mientras que Carbon Design System se enfoca en la eficiencia empresarial.
Los componentes y principios específicos pueden diferir, ya que cada sistema se adapta a las necesidades y preferencias de sus respectivos desarrolladores.

Me encanta esta metodología porque sigue un patrón natural, la química de las cosas, es como replicir lo que la naturaleza misma nos ofrece para crear elementos complejos.

Acà algunas ventajas que encontré:

  • Facilita la creación de la guía de estilo.
  • Permite hacer más rápido los prototipos, puesto que los elementos ya existirán.
  • Hace más rápido el proceso de actualizar el diseño del producto y/o añadir nuevas funcionalidades, ya que los cambios no harán que se deba programar todo desde cero.
  • Menos componentes hará el diseño y el código más consistentes y eficientes.
  • Permite reutilizar átomos para crear cualquier diseño que se requiera.

La forma en la que se implementó esto me parece genial, al principio puede parecer engorroso, pero a largo plazo es una herramienta que permite trabajar de formas más rápidas y eficientes.

Introducirme a este mundo de lleno ha sido fascinante, no conocía el modelo de diseño atómico, y esta metodología me ha ayudado por mucho en optimizar mis procesos de trabajo.
Me considero un as en temas de mejoras de procesos, adoro estar constantemente mejorando mis procesos de trabajo como diseñador, lo que me permite trabajar de forma cada vez más rápida y eficiente.
El orden para mi es fundamental lo que me facilitó mucho entender como desarrollar sistemas de diseños y en especial este modelo.
Plus: como estudiante de desarrollo de software me da nuevas luces de como interactuar en ambos ámbitos, como diseñador y desarrollador.
Saludos!

En un sistema de diseño, el diseño atómico se refiere a descomponer la interfaz de usuario en componentes básicos y reutilizables, como botones, inputs o tarjetas. Estos elementos fundamentales se combinan para formar patrones, que son conjuntos de componentes dispuestos de una manera específica y coherente. Los patrones, a su vez, se utilizan para construir interfaces más complejas. Así, el diseño atómico establece una base sólida al permitir la creación y gestión eficiente de patrones y componentes. Al tener componentes modulares y patrones bien definidos, se facilita la coherencia visual y la eficiencia en el desarrollo, ya que se pueden reutilizar estos elementos en diversas partes de la interfaz, garantizando una apariencia y funcionalidad consistentes en todo el sistema de diseño.

Genera agilidad a la hora de escalar y nos permite centrarnos en los usuarios

La rapidez en construir una interfaz va ser más optima cuando se tiene un DS de apoyo.

![](https://static.platzi.com/media/user_upload/image-53b6ff0e-c6ea-42e8-9f2c-1f6a6900fcff.jpg) 1\. **Átomos**: Son los elementos más básicos de la interfaz, como botones, colores, tipografías, iconos, inputs y otros elementos que no pueden descomponerse más. Son los bloques fundamentales. 2\. **Moléculas**: Son combinaciones simples de átomos que forman elementos más funcionales. Por ejemplo, un formulario de búsqueda es una molécula que podría estar formada por un campo de texto (un átomo) y un botón (otro átomo). 3\. **Organismos**: Son conjuntos de moléculas que se combinan para crear secciones más complejas de la interfaz, como una barra de navegación, un encabezado con una imagen o una tarjeta de producto. 4\. **Plantillas**: Son estructuras más amplias que agrupan organismos en layouts definidos, mostrando la disposición general del contenido sin los detalles específicos. En este nivel, se establecen las bases del diseño de la página. 5\. **Páginas**: Son instancias específicas de las plantillas con contenido real. Este nivel permite visualizar cómo se verá la interfaz final con toda la información y elementos en su lugar.
Gran tema, es la forma ideal de agilizar el proceso, entonces, el diseñador podrá centrarse más en resolver x problema que en buscar el color o componente que necesita en ese momento, muy bueno.

Me parece que la metodología de Diseño Atómico facilita muchísimo el proceso de desarrollo del producto ya que se va a implementar una documentación óptima al desarrollador y agiliza, en tal caso, al proceso de iteración. Es una metodología que todo UI Designer debería aprender, practicar y perfeccionar a fondo.

El atomic design en la vida real es extremadamente útil y práctico, genera consistencia en el producto y soluciones rápidas. Ademas al momento de crear prototipos quedan de buena fidelidad y es casi armar y testear.
El siguiente paso de molécula debería ser órgano y luego organismo.

No lo conozco a fondo el Diseño Atómico, pero como programador encaja perfectamente en la génesis de cualquier proyecto que esté implementando, me proporciona una gran libertad como programador al trabajar con componentes preestablecidos y la posibilidad de escalar exponencialmente. Eso intuyo.

Basicamente es ir de lo micro a lo macro.

Una ventaja durante el proceso es que si por alguna decisión decidimos cambiar un icono o tipografía, con solo cambiar en nuestro UI Kit, se cambiará en todo el proyecto.

se establece mejor este diseño para empezar con el codigo y recoleccion datos

Tengo un reto, ya lo he visto, pero quiero intentarlo yo… Quiero hacer mi Ui Kit B&W (obvio teniendo en cuenta que los colores semanticos no cuetan) uber logro algo similar, quiero ver hasta donde llego yo.

Gracias por la clase!

Es mucho mas práctico trabajar con sistemas de diseño.

En mi experiencia de trabajo de implementación de diseños en Webflow, he utilizado sistemas como System Flow que han sido super útiles para acelerar el proceso de diseño e implementación.

Logrando sacar proyectos grandes en tiempos mucho mas ligeros.

me encanto la explicacion, lo detalla paso a paso cada componente

Atomic Design es una metodología brutal y como dicen en su página, es una metodología abierta a ajustarse a las necesidades de cada proyecto.

Creo que un punto muy interesante es el que se plantea en este post sobre los Tokens o Iones de la metodología Atomic Design.

Muy buena clase.
Gracias

Me ayudado a ordenar mejor todos los elementos de interfaz con esto ser más ágil al diseñar. Cuando un proyecto va creciendo se vuelve incontrolable manejar los elementos.

Ya he visto con anterioridad este concepto y no es hasta que uno lo usa en el dia a dia que se da cuenta la importancia de el. Trabajar el Atomic Design es lo maximo porque te da una consistencias y te ahorra un tiempo enorme. Tal vez al inicio cuando uno emplea mucho tiempo en la reacion de los atomos y moleculas no se ve mucho avance, pero una vez que ya tienes desarrollados estos elementos te surgen un monton de screens de tu app y page en muy corto tiempo.

Pienso que incluso hay un beneficio a nivel organizacional y de recursos humanos, la consistencia y la velocidad para resolver problemas secundarios permite enfocarse en actividades más importantes para resolver los problemas de los usuarios. Además, el hecho de haberlo implementado y mantenerlo te debe de dar una sensación de productividad muy padre.

Interesante