Este ejercicio me ayudó mucho a identificar, es práctico para divisar los elementos que se repiten y su forma para poder organizar el sistema de diseño.
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
El diseño de sistemas es fundamental en la creación de proyectos digitales eficientes y escalables. Adoptar esta práctica moderna y generalizada de construir interfaces y mantener sistemas de diseño tiene numerosas ventajas. No solo estableces una base sólida para tu producto, sino que también facilita la adición de nuevas funcionalidades conforme tu producto madura. Además, contar con un sistema de diseño en marcha asegura que todos en el equipo hablen el mismo "lenguaje", optimizando la comunicación entre diseñadores, desarrolladores y otras áreas involucradas.
Un sistema de diseño robusto permite una comunicación clara y efectiva. Cuando un diseñador solicita a un desarrollador implementar un filtro o un botón, existe una comprensión mutua de cómo debe verse y funcionar. Esto también es fácilmente comprensible para personas fuera del área de diseño, como los equipos de producto o de negocio. La estandarización del lenguaje se traduce en sesiones colaborativas más fluidas y permite un desarrollo más rápido y consistente del producto.
El Atomic Design es un enfoque práctico que ayuda a estructurar y organizar los componentes de diseño en un sistema. Se basa en identificar y comprender elementos básicos y cómo estos se combinan para formar estructuras más complejas. Comienza con los átomos, que son las partes más pequeñas y fundamentales, y avanza hacia moléculas y organismos, que son combinaciones de estos átomos.
Por medio de esta metodología, se busca identificar los patrones recurrentes para establecer estructuras modulares y reutilizables en el diseño.
El reto de crear un inventario de componentes es central en el Atomic Design, ya que permite controlar y entender cada elemento del sistema. Este proceso meticuloso implica listar cada uno de los componentes identificados presentando la nomenclatura adecuada. Esto conlleva un trabajo minucioso pero esencial para garantizar que el sistema sea fácil de manejar y escalar a lo largo del tiempo.
Esto permite que los equipos de desarrollo y diseño trabajen de manera más ágil y coordinada, evitando duplicaciones y asegurando la consistencia visual y funcional del producto. Al manejar este inventario, se facilita la creación futura de prototipos y wireframes de mediana y alta fidelidad, otorgando una eficiencia sin igual al proceso de desarrollo.
Aportes 20
Preguntas 2
Este ejercicio me ayudó mucho a identificar, es práctico para divisar los elementos que se repiten y su forma para poder organizar el sistema de diseño.
Ventajas de Atomic Design:
Ventajas de Atomic Design (una forma de contruir el Design System)
¿Para el inventario de componentes no deberíamos hacerlo pensando en código? Es decir, ponerle los nombres que van a ser utilizados en desarrollo para que todos hablemos el mismo lenguaje.
¿El footer podría considerarse como “template”?
Por cierto chicos, en Figma se pueden crear elementos para replicarlos rápidamente
Mi aporte
Cuando empecé a hacer este ejercicio me puse a pensar que anteriormente solo diseñaba con creatividad y buscando patrones pero ahora entiendo que todo es parte de un sistema y que en el fondo tener uno nos va a facilitar el trabajo de seguir diseñando nuevas interfaces en el futuro. A seguir practicando.
sinceramente el curso es demasiado interesante, pero como profesor creo que el profesor queda mucho a deber, no le entiendo a la manera en como baja la información a los formatos
Mis apuntes
Dupliqué el formato del listado de componentes y está quedando de esta forma:
Nunca había hecho un documento de este tipo pero es interesante analizar cada componente desde su forma más básica.
Las primeras paginas del prototipo, identifique los atomos, moléculas y organismos con colores y su inicial. Hecho en invision app
¿Alguien sabe qué comando dbo usar para “clonar” un elemento en Invision? Como hace el profe al seleccionar una imagen y la arrastra y la está duplicando. Intento usar los comandos de Adobe, como Alt + arrastrar, pero no me funcionan 😦
💥 Spoiler del reto: Los componentes son cientos, puede que miles dependiendo que tan larga sea la web y que tanta información contienen. 👋
Atomic Design es la metodología de diseño más demandada por reclutadores. 💪
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?