Principios de Atomic Design

Un Sistema de Diseño es la colección de reglas, restricciones y principios que guían la implementación de diseño y código. Es útil porque cuando queremos agregar nuevas funcionalidades, se hace uso de la colección previamente definida. Previene que los usuarios aprendan cosas nuevas.

Un sistema de diseño es un lenguaje en el que pueden hablar todos los miembros de un equipo.

Un Atomic Design es la manera de construir un sistema de diseño.

“Las interfaces están hechas de componentes más pequeños. Hay que romperlas en sus bloques más fundamentales… átomos” - Brad Frost

Componentes

Átomos: Por si mismos no hace nada. Son la constitución mas básica de una interfaz.

• Input (Text Field)
• Etiquetas
• Botones
• Text

Moléculas: Es la unión de dos o más átomos. Aun no tiene un uso por que no esta dentro de un contexto donde podamos entender qué hace exactamente.

• Avatar + Text
• Input + botón + text
• Icon + Text

Organismos: Al juntar varias moléculas conformamos una forma más compleja que se convierte en una pieza coherente y con más sentido.

• Header
• Carrousel
• Card
• Table

Templetes: Combinando varios organismos en una sola pantalla conseguimos obtener un contexto mucho mayor.

• Low Fidelity wireframe o esqueleto del sitio web o aplicación

Página: Contiene color, imágenes y detalles que hacen que ese archivo ya esté listo para el desarrollo o, en su defecto, test con usuarios o el equipo.

• Hight Fidelity wireframe o diseño final

• Atomo: puede ser un boton un espacio simple,
• Molecula_ nosirve d enada carece de contexto
• Organismo: es la agrupacion de atomos y moleculas
• Template, son variosorganismos serai un wireframe
• Paginas: cuando tiene colores y fotos boceto de alta fidelidad

A mi me gusta como Elementor para wordpress nos deja crear elementos globales lo que se pueden usar con este resultado, de global objects, y que nos se deja reutilizar elementos asi. muy rapido, pero hasta ahora lo veo como un frame work, me ha fascinado este curso

Que increíble, en los proyectos en los que he trabajado regularmente y en base a la experiencia he terminado con las mismas conclusiones que se exponen en este curso y realmente uno descubre la importancia de no parar de aprender porque ya una documentación y una metodología estructurada cambia totalmente lo esquemas. Uno cree que realmente es bueno en lo que hace, pero este mundo es jodidamente enorme. Excelente curso, Platzi siempre sorprendiendo. Excelente profesor, 10 estrellas.

Design System o Sistema de diseño es una colección de reglas, restricciones y principios que guían la implementacion de diseño y código. Es el lenguaje que los usuarios ya conocen sobre el manejo de interfaces, el usuario no debe aprender de nuevo como manejar una interfaz.
Atomic Design es una manera contruir el Design System, mediante la división de partes más pequeñas. Los componentes son: átomos, moléculas, organismos, templates y páginas.

Entren a este link para saber cómo implementar el atomic design en sus proyectos.
.

Me sorprendió saber que Brad Frost se inspiró en la tabla periódica de los elementos de la Química, que había aprendido de adolescente en el colegio, para crear su modelo Atomic Design. Les dejo este enlace que ayuda a documentarse más sobre el tema:
https://www.uxbooth.com/articles/how-atomic-design-found-brad-frost/

Design system es un lenguaje
Atomic Design es un marco de construccion

Muy buena explicación del uso de los átomos en diseño y como su organización lleva a estructuras mas grandes y con mas cuerpo

Mis apuntes

Recomiendo mucho el curso de Sistemas de Diseño: https://platzi.com/clases/sistemas-diseno/

Organizar cómo será nuestro diseño y organizar los elementos de nuestra página en Atomic Design. Un curso muy recomendado.

• Átomo: El elemento más básico, como en la naturaleza
• Molécula: La conjunción de átomos forman moléculas
• Organismo: es la agrupación de átomos y moléculas
• Témplate: son varios organismos será un wireframe
• Paginas: cuando tiene colores y fotos boceto de alta fidelidad

Por favor dónde encuentro el prototipo? dice en el video que lo comparte. Muchas gracias!

Excelente clase, muy claro los conceptos y ejemplos.

Definición de Design System (sistema de diseño)

Un Sistema de Diseño es la colección de reglas, restricciones y principios que guían la complementación de diseño y código.