Contenido del curso
Prototipado de Interfaces: Herramientas y Técnicas Esenciales
El prototipo es lo más cercano que puede haber al producto final sin ser el producto final.
Los prototipos nos sirven para ejemplificar las funcionalidades y flujos de un producto, son útiles porque no puedes comunicar todo lo que quieres con una imagen estática, por eso los prototipos tienen interacciones, algunas animaciones y los estados de nuestros componentes.
Tanto para los prototipos como para los wireframes puedes hacerlos en programas especializados o también en papel, además existen prototipos de:
Para escoger la calidad del prototipo es un buen ejercicio preguntarte ¿qué tanta calidad se necesita para el momento en el que estás diseñando?
Es importante diseñar lo más rápido posible tu producto y el prototipo no es rápido, por lo que no se debe de hacer prototipos de todo, se recomienda hacer solo prototipos de funcionalidades complejas. Las funcionalidades sencillas las puedes hacer en documentación.
Jorge Trujillo
Estudiante
Aarón González
Estudiante
William Fernando Cañas Salas
Estudiante
Laura Páez
EstudianteAarón González
Estudiante
Felipe Bernardo González Barranco
Estudiante
Tania Ramírez
Estudiante
Julián Rodríguez
Estudiante
Cristopher Galarce
Estudiante
Angela Illiano
Estudiante
Esteban Vásquez Quesada
Estudiante
Darwin Perez
Estudiante
Arles A. Pinzon Molina
Estudiante
Antonio Alexander Estrella Gómez
Estudiante
Laura Naranjo Sánchez
Estudiante
Wilber Antonio Portillo Santos
EstudianteMaría Camila Betancourth Ospina
Estudiante
Marcela Roa
Estudiante
Grelia Velasquez
Estudiante
Raúl González
Profesor
Raul Arenas
EstudianteAarón González
Estudiante
Levi Nuñez
Estudiante
Carolina Gómez
Estudiante
Gabriel Castelblanco López
Estudiante
Juan Esteban Deossa Pertuz
Estudiante
Marina Barraza
EstudianteNico Levy
EstudianteEsteban Vásquez Quesada
EstudianteJosé Bastidas
Estudiante
Juan Manuel Eslava Gordillo
Estudiante
Excelente aporte Armando :D
Gracias,
Gracias!!
"No hagas prototipo de TODA LA APP, porque te tardarás mucho, Solo de funcionalidades complejas."
Animación: Comunicar la entrada y la salida de un componente.
Estados: desconexión, sin respuesta, error en envio de mensaje, por ejemplo. Cómo inicia el componente cuando carga
Interacción: entre usuario y sotftware. On key press, on response, on click rage, enter, emoji
¡Genial Laura :D!
Excelente aporte
:clap: :clap: :clap: :clap:
En mi trabajo me piden hacer prototipos de sitios completos y sí es bastante tardado. Hay veces que para una acción es necesario hacer hasta 4 pantallas u_u Pero prototipar es bastante divertido y no me molesta, siempre y cuando haya tiempo suficiente :D
Siempre puedes hacer prototipado con papel, la mayor ventaja que tiene es su versatilidad y lo rápido que se puede iterar, te comparto este vídeo de un prototipado rápido con papel https://www.youtube.com/watch?v=kXyTKUF0tTY
Prototipo
Es lo que simula cómo se espera que sea el producto final. Sirve para ejemplificar las funcionalidades del producto con:
Interacciones Da paso a las animaciones cuando el usuario entrega una instrucción. Ejemplos: On keypress On response On click rage Enter Emoji
Animaciones Simula los comportamientos de un componente tanto en su entrada y salida, su movimiento entre cambios de estado, etc.
Estados Es el cambio de estilo de un componente cuando se recibe una instrucción. Ejemplos: Conectado Sin conexión Sin respuesta Error de envío Enviado
El proceso de diseñar debe ser rápido. Pero prototipar no lo es. Solo hay que enfocarse en animaciones de funcionalidades muy complejas. No prototipar toda la app porque es muy costoso en tiempo y esfuerzo.
Se puede prototipar en cualquier etapa de diseño:
Low Wireframe análogo Medium Wireframe digital sin color High Estilos visuales acabados
Ya que hablamos de prototipos, comparto algunos ejemplos. No necesariamente vinculados con diseño de interfaz, pero sí para entender el concepto de lo que representan los prototipos en diferentes industrias:
https://vimeo.com/197251003 - NIKELAB | The Nature of Motion https://www.youtube.com/watch?v=6TbyXq3XHSc - iPhone app | paper prototyping https://www.youtube.com/watch?v=jTageuhPfAM - Speedee Service System https://www.youtube.com/watch?v=5R1snVxGNVs - Google Project Glass: Official Concept Walkthrough Video, “One Day” https://www.youtube.com/watch?v=AaChszhz4o4 - Inside Airbus’ modular plane concept
Excelente aporte, muy interesante y enriquecedor .👌❤
El prototipo de mcdonald está genial
Recomendación: Hacer prototipos de cosas muy específicas o de funcionalidades realmente muy complejas.
16. Prototipo
Lo máximo este curso; supongo que antes no estaba tan de moda figma, pero creo que hoy en día es la mejor herramienta para hacer todo el tema de diseño de interfaces. Figma es lo máximo, a parte que es una herramienta colaborativa entonces eso nos ahorra un montón de tiempo., la súper recomiendo <3.
Concuerdo contigo Laura!
¿Qué es un prototipo?
Una versión básica de una app o producto digital cuyo objetivo es probar el funcionamiento esperado.
Estos cursos no son actualizados? por que no habla de Figma?
profe habla muy rapido jajja
jijij :D
Control de Calidad Deberas decidir y compensar la calidad y velocidad en la que realizaras tu prototipo. Si el proceso es lento & highquality, rapido y low quality o un punto medio.
Gracias por el aporte Raul :D Esta increíble
Disfruto cada clase con Rulotico, mas profesores como el...
Siento que debería haber un diccionario del tema, para entender palabras que usa o saber el significado. :)
Es la fase del proceso de creación donde nuestro diseño es el mas acertado con el resultado final que queremos, cuando nosotros acabamos un diseño de algún desarrollo falta la parte de desarrollarla, pero para que el diseño funcione de la forma correcta, debemos comunicar muy bien cada detalle del diseño que realizamos, por eso usamos los prototipos, en esta parte deberemos tener tanto el diseño con sus detalles y especificar como funcionara cada funcionalidad, en caso de que las animaciones sean muy complejas. Es muy importante que antes de empezar a prototipar definamos cuanto tiempo tenemos y/o necesitamos para realizar un prototipo de alta o baja calidad, debido que uno de alta calidad nos llevara mucho tiempo.
hay algun link con los componentes de este projecto o todos lo crean desde cero? las ilustracione?
Hola, hice mi prototipo en Miro porque me resultaba mas facil. Puedo exportar el archivo a Adobe XD o hacer el prototipo directamente en Miro? Gracias
Yo creería que es mejor prototipar desde lo más cercano al producto final, ya que si lo que queremos es ejemplificar. Debemos hacer algo que muestre como se verá el producto en sí y que de esa manera quede mucho más claro como va a funcionar nuestro producto.
SI tienes el tiempo para hacerlo, hazlo! sin embargo si el tiempo juega en contra solo prototipa lo importante desde el nivel de baja fidelidad o mediana fidelidad del wireframe. Recuerda que lo más importante es comunicar la idea para que se empiece a desarrollar.
Lo de estado navideño me recordó a los autos de Uber con cuernos de reno.
