Reto completado: https://xd.adobe.com/view/a2ca8a14-882f-43fe-96de-449039d7dbe2-f799/
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
Convertir un diseño desde una herramienta como Figma a un entregable real es un paso crucial en el desarrollo de un proyecto digital. Aunque un diseño en alta fidelidad puede parecer completo, sigue siendo inútil hasta que se convierte en un producto funcional. Socializar el diseño con los desarrolladores y proporcionarles todas las herramientas necesarias es esencial para lograr una implementación exitosa.
Las guías de estilo entregadas en formatos como PDF pueden ser obsoletas y causar confusiones. Estas pueden dejar elementos al aire, obligando a los desarrolladores a adivinar detalles como distancias exactas o colores específicos. Los desarrolladores necesitan:
Proveer una guía de estilo dinámica es el camino moderno y eficiente. Herramientas como Figma, Zeplin o InVision permiten crear guías que incluyen fragmentos de código directamente integrables, facilitando una interoperabilidad perfecta entre diseño y desarrollo. Este enfoque ofrece:
Además de guías de estilo, crear flujos de tarea visuales es esencial para mantener alineado al equipo. Esto se puede lograr mediante:
Estos flujos, que conectan maquetas en alta fidelidad en un orden secuencial claro, facilitan entender qué pantalla sigue a cuál. Herramientas como Overflow permiten crear estos flujos de manera accesible y compartible.
Overflow permite no solo crear, sino también socializar tu diseño. Una vez generado el flujo, puedes:
Crear un flujo de tarea no solo aclara qué pantalla sigue a cuál, sino que también ofrece una presentación refinada de tu proyecto. Con herramientas que facilitan desde el diseño inicial hasta la socialización con stakeholders, el proceso es más eficiente y efectivo que nunca. ¡Anímate a explorar estas herramientas! Con cada proyecto, adquieres habilidades valiosas que impulsan tu carrera en diseño.
Aportes 20
Preguntas 4
Reto completado: https://xd.adobe.com/view/a2ca8a14-882f-43fe-96de-449039d7dbe2-f799/
Buenas tardes, en caso usemos windows que programa podremos usar alternativo a overflow.
Entregables del diseño (prototipos) - Tener claro el mismo lenguaje - Minimizar el retrabajo - Tener assets y estilos actualizados - Es fácil de mantener - Requerimientos claros
Con Overflow . io puedes importar tus diseños desde Figma y tener un flujo de trabajo con tus pantallas conectadas pero mostrado de una manera más limpia, ideal para presentaciones de negocio o ante directivos y accionistas de la empresa, evitando así que vean el alambrado intrincado de interacciones de tus frames de Figma, ya que Figma le da más peso a la funcionalidad del prototipo que a una presentación estética y depurada.
Los flujos de tarea son geniales para que todo el equipo del proyecto esté en sintonía de cómo funciona la herramienta.
Incluso el equipo de marketing o los Growth hackers pueden identificar fácilmente donde se “cae” el usuario. Esto permite hacer experimentos para “evitar las caídas” y que la experiencia siga mejorando.
El objetivo de una herramienta de esta naturaliza es que permite socializar tu diseño de una manera mucho mas limpia de tal manera que puedas esconder todos esos alambrados técnicos que tu sigues en tu proceso en figma. Muy bueno lo de socializar el diseño.
En Figma puedes hacer flujos usando un plugin llamado Autoflow
Con Figma no es posible hacer lo mismo que con Overflow y Zeplin?
¿Cuales son las guías de estilos?¿De qué tratan?
adobe xd ya tiene esa opción
Presentación mas limpia con otras áreas
en el mismo figma se puede hacer
Yo no pude hacer este paso, me pedía instalar un pluggin y aún instalado no pude TnT
Adicionalmente el diseñador debe tomar algunas otras cosas en cuenta para entregar un producto de calidad al equipo de desarrollo. Les dejo un blog al respecto aquí. Saludos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?