No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
3H
8M
29S

Principios de Atomic Design

8/26
Recursos

Aportes 18

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

鈥淟as 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.