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
¡Hola entusiasta del diseño! Hoy vamos a explorar cómo comenzar con el prototipo Ad O para un portal de viajes, ¡un espacio especialmente diseñado para facilitar la planificación de viajes para mujeres! Elaborar un prototipo eficiente y efectivo es crucial en el desarrollo de soluciones digitales. Aquí vamos a desglosar cómo abordar esta tarea, enfocándonos en los flujos de trabajo y pensando en los casos de uso especiales que determinarán el éxito de tu diseño.
Los flujos de tarea funcionan como una hoja de ruta para guiar al usuario a través de una serie de acciones que culminan en la finalización de una tarea. Esta estructura se basa en una secuencia visual donde cada acción lleva a una nueva pantalla, permitiendo a los usuarios comprender qué acciones realizar para avanzar en su tarea.
La herramienta recomendada en esta fase es InVision, una plataforma que permite crear prototipos de baja fidelidad rápidamente, incluso de manera colaborativa. Es fundamental para idear una solución básica y mínima que resuelva eficazmente el problema del usuario.
Diseñar un prototipo no es solo sobre crear pantallas; se trata de entender las necesidades de los usuarios y cómo presentar la información de manera accesible y atractiva.
El espíritu del prototipo Ad O reside en la colaboración. Tener diferentes perspectivas enriquece el diseño y asegura que la solución final sea robusta y adaptable.
El desarrollo del prototipo para un portal de viajes es un proceso emocionante que combina la creatividad y la técnica. Al utilizar herramientas efectivas como InVision y fomentar la colaboración, lograrás un diseño que no solo cumpla con los requisitos funcionales, sino que también ofrezca una experiencia excepcional para las usuarias. ¡Sigue explorando, diseñando y aprendiendo!
Aportes 68
Preguntas 3
También llamado: Prototipado de solución
Flujos de tarea: el usuario ve algo -> el usuario hace algo -> hasta terminar el proceso.
Casos de uso especiales: El usuario busca X pero no hay retorno de información. Se diseña una pantalla vacía. Esto aporta a la completa interacción de un proceso, los desarrolladores y usuarios entienden que pasa en estos casos.
Reto de la clase: prototipado rápido con nivel de fidelidad bajo.
Patrones de diseño: Tomar patrones de diseño con los que el usuario ya está familiarizado para diseñar rápido.
El espíritu del prototipado es: hacerlo de manera colaborativa con desarrolladores y usuarios para que todos desde su perspectiva den su opinión con: que deberíamos construir, que se puede construir y como.
Invision te permite prototipar rápido, digital y coloborativo.
Crear el dlujo de tareas por funcionalidad sirve demasiado para tener presente que integrar en las pantallas y cuantas pantallas integrar.
InVision me pareció super practico para realizar prototipos de baja fidelidad
😃 El ejemplo del maestro me ayudó. Terminar este ejercicio servirá para el video sobre figma
. Y claro que se le reconoce ser una excelente herramienta, especialmente para bocetos rápidos, como lo acaba de demostrar el profesor.
Mi aporte para la clase:
Este es mi aporte
Home
Inicio de sesión
Este es mi aporte
Esta herramienta se ve súper útil cuando tienes una tablet o algo similar 😅
Este es mi prototipo? Agradezco feedback
Muy útil InVision
Aquí mi aporte chicxs
![](
Más que solo conseguir hotel, intente unificar todo lo que se podría pedir para el viaje seguro para mujeres: viaje por tierra o aire, hotel, taxi, paquetes turisticos… e incluso elegir los detalles de los vuelos como el tipo de comida, asiento y demás.
Diseño sencillo
Bueno aquí sigo maquetando mi proyecto, tengo poca experiencia y muchas ideas, con estos cursos he logrado organizar mi idea gracias.
No conocía de FreeHands de Invision. Muy buena herramienta paracer wireframes de mediana fidelidad 😁
Sólo hice la primera página 😅
07 PORTAL DE VIAJES PLATZI - InVision.png
Comparto mis primeras 2 pantallas que hice para el proyecto, es la primera vez que uso Invision y me parece bastante sencillo.
Pienso que una de las complicaciones en mi caso es que quise detallar y acomodar todos los elementos olvidando que es sólo un boceto.
Utilizo figma.
Hola. El requetimiento en el que escogí trabajar es:
**Buscar hoteles y viviendas para rentas con las amenidades que me gustan como piscina, desayuno, Wi-Fi gratis, gimnasio, cuarto de juegos, etc
**
y aqui esta mi intento de Sketch…
hasta ahora siempre recomendaban hacerlos en papel para que salieran rápido y fácil, pero esta herramienta es hermosa para hacer bocetos, hasta me dan ganas de complementarlo con un lápiz digital o algo por estilo.
Qué sucede cuando la aplicación no se limita a la consecución de una tarea, sino que hay alternancia entre las funciones y el mapa de navegación es algo más complicado?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?