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
Conceptos básicos de prototipado
Qué aprenderás sobre diseño de prototipos móviles
Beneficios del Prototipado
Niveles de Fidelidad del Prototipado
Ténicas para estructurar información
Introducción a Patrones de Diseño
Introducción a UX Orientado a Objetos
Definición de Flujos de Tareas
Prototipado de Baja Fidelidad
Bocetado Rápido
Sistemas de Diseño
Principios de Atomic Design
Ventajas de Atomic Design
Prototipado de Mediana Fidelidad
Bocetado en Figma
Diseño de Wireframes (Mediana Fidelidad)
Librerías Compartidas de Componentes
Introducción a Componentes
Creación de Componentes
Detallado de Componentes
Estilos de Componentes
Librerías de Componentes Compartidas
Prototipado de Alta Fidelidad
Diseño de Mockups de Alta Fidelidad en Figma
Construcción de Prototipo Interactivo en Figma
Entregables de Diseño
Mejores prácticas de Entregables para Desarrollo usando Overflow y Zeplin
Exportación de Assets a Zeplin
Cierre
Cierre
Contenido Bonus
Tips básicos para prototipar una idea
Cómo hacer prototipos funcionales de Apps iOS o Android
Crea un prototipo interactivo de tu aplicación
Mentoría expert
Los 10 pecados del Product Designer
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Principios de Atomic Design
8/26Recursos
Aportes 19
Preguntas 1
Ordenar por:
Á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!
### Introducción al Sistema de Diseño
#### Definición
Un **sistema de diseño** es una colección de reglas, restricciones y principios que guían tanto la implementación de diseño como de código en un proyecto. Sirve como una guía para mantener la coherencia y eficiencia en el desarrollo de nuevas funcionalidades.
#### Utilidad
* **Coherencia:** Al agregar nuevas funcionalidades, se utiliza la colección de reglas y componentes previamente definida, lo que asegura una experiencia uniforme para los usuarios.
* **Eficiencia:** Reduce el tiempo y esfuerzo necesarios para diseñar y desarrollar nuevas partes de la interfaz.
* **Facilidad de Aprendizaje:** Previene que los usuarios necesiten aprender cosas nuevas con cada actualización o cambio en la interfaz.
* **Comunicación:** Sirve como un lenguaje común que todos los miembros del equipo pueden usar para colaborar y comunicar sus ideas de manera efectiva.
### Atomic Design
#### Definición
**Atomic Design** es una metodología para crear sistemas de diseño desarrollada por Brad Frost. Propone construir interfaces dividiéndolas en sus componentes más pequeños y fundamentales, llamados átomos.
#### Principios
1. **Átomos:** Los bloques más básicos de una interfaz. Ejemplos incluyen etiquetas, botones y campos de entrada. Son los componentes más simples que no se pueden dividir en partes más pequeñas.
2. **Moléculas:** Combinaciones de átomos que trabajan juntos como una unidad. Por ejemplo, un formulario de búsqueda que combina un campo de entrada (átomo) y un botón de búsqueda (átomo).
3. **Organismos:** Combinaciones de moléculas y átomos que forman secciones más complejas de una interfaz. Por ejemplo, una barra de navegación que incluye múltiples moléculas como menús desplegables y botones.
4. **Templates:** Plantillas que representan la estructura básica de una página, compuestas por organismos arreglados en un layout. No tienen contenido específico sino una estructura general.
5. **Pages:** Páginas completas con contenido real. Representan la aplicación en su forma final, con todos los componentes y datos reales integrados.
#### Beneficios
* **Escalabilidad:** Facilita la expansión y modificación del diseño de manera modular.
* **Reutilización:** Permite reutilizar componentes en diferentes partes del proyecto, lo que ahorra tiempo y recursos.
* **Mantenibilidad:** Simplifica el mantenimiento del sistema de diseño, ya que los cambios en componentes básicos se reflejan automáticamente en componentes más complejos.
### Ejemplo Práctico
#### Creación de un Sistema de Diseño con Atomic Design
1. **Átomos:**
* **Botón:** Un botón simple con estilos básicos.
* **Campo de Entrada:** Un campo de texto con estilos básicos.
2. **Moléculas:**
* **Formulario de Búsqueda:** Combina un campo de entrada con un botón de búsqueda.
3. **Organismos:**
* **Barra de Navegación:** Combina múltiples moléculas como menús desplegables, íconos de usuario y botones de acción.
4. **Templates:**
* **Página de Inicio:** Plantilla con secciones para la barra de navegación, contenido principal, y pie de página.
5. **Pages:**
* **Home Page:** Página completa con contenido real, usando la plantilla de inicio, llenada con datos reales y componentes funcionales.
### Conclusión
Un **sistema de diseño** es fundamental para mantener la coherencia y eficiencia en proyectos de diseño y desarrollo. La metodología de **Atomic Design** facilita la construcción de estos sistemas de manera modular y escalable, asegurando que cada componente, desde los más pequeños átomos hasta las páginas completas, se pueda desarrollar, mantener y reutilizar de manera efectiva.
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?