No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Bocetado Rápido

7/26
Recursos

¿Cómo iniciamos con un prototipo para un portal de viajes?

¡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.

¿Cuál es la importancia de los flujos de tarea en el prototipo?

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.

  • Visualiza cada paso: Imagina que el usuario busca un hotel. Primero, presentan una pantalla inicial, luego una acción lleva a resultados de búsqueda, y finalmente a la reserva.
  • Casos de uso especiales: ¿Qué pasa si no hay resultados en una búsqueda? Diseña una pantalla que informe al usuario de esta situación, asegurando así una experiencia de usuario sin interrupciones.
  • Comunicando con el equipo: Al conocer estos flujos, puedes proporcionar detalles a los desarrolladores y al equipo de productos, facilitando la colaboración.

¿Qué herramientas utilizamos para el prototipado rápido?

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.

  • Configuración inicial: Crea una cuenta gratuita en InVision y utiliza la función Freehand para hacer bocetos colaborativos.
  • Funcionalidades básicas: La herramienta es intuitiva y te permite realizar lo siguiente:
    • Seleccionar elementos.
    • Crear figuras y añadir texto.
    • Añadir comentarios y anotaciones de los miembros del equipo.

¿Cómo estructuramos el diseño del portal de viajes?

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.

  • Pantalla de inicio: Incluye ofertas sobresalientes y componentes de búsqueda para facilitar la navegación del usuario.
  • Interacciones adicionales: Ofrece la posibilidad de explorar ciudades, refinar búsquedas, y administrar perfiles personales.
  • Elementos reutilizables: Utiliza componentes de diseño consistentes para los controles de la interfaz, lo que agiliza el desarrollo y familiariza al usuario con el portal.

¿Cómo impacta la colaboración en el prototipo?

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.

  • Sesiones colaborativas: Invita a tus compañeros de equipo a participar en sesiones de diseño para que aporten ideas, verifiquen funcionalidades, y sugieran mejoras.
  • Iteraciones rápidas: Continúa refinando el diseño basado en las ideas compartidas, lo que permite una rápida adaptación a nuevas necesidades o descubrimientos.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

  • 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

![](

Honestamente nunca me gustó la idea de prototipar a lápiz y papel, me da fastidio y me parece que genera demasiada contaminación y perdida de papel, esta herramienta está genial, de verdad gracias!

Me hubiera gustado conocer invision antes! 😃

Utizo Balsamiq Mockups para prototipos rápidos, tal vez también lo pueden probar

No queria usar otra herramienta pero me gusto mucho y acabo de aceptar que diseñar productos significa manejar una docena de perfiles y programas.

En mi caso utilicé Whimsical para el Bocetado:

😃

.

Profesor, ¿podrías poner un ejemplo de pantalla sin resultado? Para que me quede más claro lo de los casos de uso. Se lo agradecería.

Inicio de página de dramaturgia

¡Súper! No conocía Invision

La herramienta invisiíon me parece que es muy práctica para hacer bocetos rápidos. a continuación comparto mi boceto ![](https://static.platzi.com/media/user_upload/exported-freehand.png-964aabae-0b7d-4f6d-b111-e0ebe3327468.jpg)

La esencia del prototipado:
Generar una solución básica y mínima con la que podamos solucionar el problema del usuario.

Si hay algo que he aprendido durante mi tiempo como diseñadora web, es la importancia de tener la estructura del website ya previamente establecida, te ahorra tiempo y no vas a batallar después con eso.

Acá mi aporte:

Mi aporte!

Boceto rápido.
Tengo una duda, InVision al agregar un texto me lo elimina automáticamente. alguien sabe por que pasa. Gracias.

Muy buena aproximación para hacer el prototipo de baja fidelidad rápidamente con Invision

Lo que no me gusta de InVision es que sólo te deja hacer 3 Frehaands gratuitos (de acuerdo a su sitio web). 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?