UNIVERSIDAD PARA EL

DESARROLLO ANDINO -
UDEA
SEMANA 11:
- DISEÑO DE PROTOTIPOS.
- PROTOTIPO DIGITAL.
- PROTOTIPO NATIVO

ING. JHAN CARLO ALVARADO PEREZ

Diseño de Prototipos
 El diseño de prototipos es un proceso fundamental en el desarrollo de
productos y servicios que permite crear representaciones tangibles de una
idea. Estas representaciones ayudan a visualizar, probar y validar conceptos
antes de pasar a la producción final.
Objetivos del Prototipado
1. Validar ideas: Asegurarse de que el
concepto cumple con las expectativas de
los usuarios.
2. Detectar errores: Identificar problemas
en la usabilidad o en el diseño antes de
la implementación final.
3. Facilitar la comunicación: Servir como
una herramienta de discusión entre los
miembros del equipo y los interesados.
4. Explorar soluciones: Probar diferentes
enfoques y funcionalidades.
Tipos de Prototipos
1. Prototipos de Baja Fidelidad
 Definición: Son representaciones simples y rápidas que no requieren mucho
tiempo ni recursos para crear. Se centran en la estructura y la funcionalidad
básica.
 Ejemplo:
• Bocetos en papel: Un diseñador puede dibujar la interfaz de una aplicación en
papel, mostrando la disposición de los botones y menús sin entrar en detalles
visuales.
• Wireframes: Utilizando herramientas como Balsamiq, se pueden crear
representaciones digitales simples que muestran la estructura de una página web
o aplicación.
 Uso: Ideal para sesiones de brainstorming y para obtener retroalimentación inicial
de los usuarios.
Tipos de Prototipos
2. Prototipos de Media Fidelidad
 Definición: Más detallados que los de baja fidelidad, estos prototipos incluyen
elementos visuales y funcionales más desarrollados.
 Ejemplo:
• Mockups: Un diseñador puede crear un mockup en herramientas como Adobe XD
o Sketch, que muestra cómo se verá la interfaz con colores, tipografías y gráficos,
pero sin interactividad.
• Prototipos interactivos: Usando herramientas como Figma o InVision, se pueden
crear prototipos que permiten a los usuarios hacer clic en botones y navegar entre
pantallas, aunque no sean completamente funcionales.
 Uso: Útil para pruebas de usabilidad más avanzadas y para obtener comentarios
sobre el diseño visual.
Tipos de Prototipos
3. Prototipos de Alta Fidelidad
 Definición: Estos prototipos son casi indistinguibles del producto final.
Incluyen un alto grado de detalle y funcionalidad.
 Ejemplo:
• Prototipos funcionales: Un equipo de desarrollo puede crear una versión beta
de una aplicación móvil que incluye todas las características principales y
permite a los usuarios interactuar con ella como lo harían con el producto
final.
• Modelos 3D: Para productos físicos, se pueden utilizar impresoras 3D para
crear prototipos que se asemejen al producto final en forma y función.
 Uso: Perfecto para pruebas finales con usuarios y para presentaciones a
inversores o partes interesadas.
Proceso de Diseño de
Prototipos
1. Definir el objetivo:
1. ¿Qué aspecto del producto se quiere validar? ¿La funcionalidad, la
usabilidad, el diseño visual?
2. Ejemplo: Un equipo quiere probar la navegación de una nueva aplicación
de compras.
2. Elegir el nivel de fidelidad:
1. Decidir si se necesita un prototipo de baja, media o alta fidelidad según el
objetivo y el tiempo disponible.
2. Ejemplo: Comenzar con bocetos en papel para explorar ideas y luego
avanzar a un prototipo interactivo en Figma.
Proceso de Diseño de
Prototipos
1. Seleccionar herramientas y materiales:
1. Elegir las herramientas adecuadas para crear el prototipo, como papel y lápiz, software de
diseño o herramientas de prototipado.
2. Ejemplo: Usar Figma para crear un prototipo interactivo que se pueda compartir fácilmente con
otros.
2. Crear el prototipo:
1. Desarrollar el prototipo según el nivel de fidelidad elegido, manteniendo siempre el enfoque en
las necesidades del usuario.
2. Ejemplo: Diseñar una interfaz de usuario que permita a los usuarios agregar productos al
carrito de compras.
3. Evaluar el prototipo:
1. Realizar pruebas con usuarios reales, observar su comportamiento y recopilar comentarios.
2. Ejemplo: Organizar sesiones de prueba donde los usuarios interactúan con el prototipo y se les
pide que comenten su experiencia.
Conclusión
 El diseño de prototipos es un proceso esencial que ayuda a transformar ideas
abstractas en soluciones concretas y funcionales. Al utilizar diferentes niveles
de fidelidad, los equipos pueden validar conceptos, detectar problemas y
mejorar la experiencia del usuario antes de lanzar el producto final.
PROTOTIPO DIGITAL
 Un prototipo digital es una representación interactiva de un producto o
sistema que se crea utilizando herramientas digitales. Estos prototipos son
esenciales en el proceso de diseño y desarrollo, ya que permiten a los
diseñadores y desarrolladores visualizar y probar la funcionalidad de un
producto antes de su implementación final. Los prototipos digitales pueden
variar en fidelidad, desde simples wireframes hasta modelos completamente
interactivos que simulan la experiencia del usuario final.
Características de un
Prototipo Digital
1. Interactividad: Permiten a los usuarios interactuar con el prototipo,
navegando entre diferentes pantallas y simulando acciones.
2. Visualización: Proporcionan una representación visual del producto,
mostrando cómo se verá y funcionará.
3. Iteración: Pueden ser modificados y mejorados fácilmente según la
retroalimentación de los usuarios.
4. Pruebas de Usabilidad: Facilitan la realización de pruebas con usuarios reales
para evaluar la experiencia y la funcionalidad.
Tipos de Prototipos Digitales
1. Wireframes:
Definición: Representaciones básicas y sin detalles visuales que muestran la
estructura y el diseño de la interfaz.
Ejemplo: Un wireframe de una aplicación de redes sociales que muestra la
disposición de la página de inicio, incluyendo secciones para el feed, perfil y
notificaciones, pero sin colores ni imágenes.
Herramientas: Balsamiq, Axure.
Tipos de Prototipos Digitales
2. Mockups:
1. Definición: Representaciones visuales más detalladas que muestran el
diseño final, incluyendo colores, tipografías y gráficos, pero sin
interactividad.
2. Ejemplo: Un mockup de una página de inicio de un sitio web de comercio
electrónico que incluye el logotipo, menús, productos destacados y un pie
de página, todo diseñado con los colores y estilos finales.
3. Herramientas: Adobe XD, Sketch.
Tipos de Prototipos Digitales
3. Prototipos Interactivos:
1. Definición: Prototipos que permiten a los usuarios interactuar con el
diseño, simulando la experiencia del usuario final.
2. Ejemplo: Un prototipo interactivo de una aplicación de banca móvil que
permite a los usuarios navegar por diferentes pantallas, como el inicio de
sesión, el saldo de la cuenta y la transferencia de dinero, todo con
interacciones como clics y desplazamientos.
3. Herramientas: Figma, InVision, Marvel.
Proceso de Creación de un
Prototipo Digital
1. Definición de Objetivos:
Establecer claramente qué se
quiere lograr con el prototipo. Por
ejemplo, validar la navegación y la
usabilidad de una aplicación.
2. Investigación de Usuarios:
Realizar entrevistas, encuestas o
análisis de usuarios para
comprender sus necesidades y
expectativas.
Proceso de Creación de un
Prototipo Digital
3. Creación de Wireframes:
Comenzar con wireframes para
definir la estructura básica de la
interfaz y la disposición de los
elementos.
4. Desarrollo de Mockups:
Crear mockups que incorporen
los elementos visuales y de
diseño, asegurándose de que
reflejen la identidad visual del
producto.
Proceso de Creación de un
Prototipo Digital

5. Construcción del Prototipo Interactivo:

Utilizar herramientas de prototipado para crear
un modelo interactivo que permita a los usuarios
navegar y probar la funcionalidad.
6. Pruebas de Usabilidad:
Realizar sesiones de prueba con usuarios reales
para recopilar retroalimentación sobre la
experiencia y la funcionalidad del prototipo.
Proceso de Creación de un
Prototipo Digital
7. Iteración y Mejora:
Basándose en los
comentarios recibidos,
realizar ajustes y
mejoras en el prototipo,
repitiendo el proceso
según sea necesario.
Ejemplo Práctico de un Prototipo
Digital
 Contexto: Desarrollo de una aplicación de gestión de tareas.
1. Definición de Objetivos: Crear una aplicación que permita a los usuarios agregar,
editar y eliminar tareas de manera intuitiva.
2. Investigación de Usuarios: Realizar entrevistas con usuarios potenciales para entender
sus necesidades en la gestión de tareas.
3. Creación de Wireframes: Diseñar un wireframe que muestre la pantalla principal con
un botón para agregar tareas, una lista de tareas pendientes y opciones para filtrar
tareas.
4. Desarrollo de Mockups: Crear un mockup que incluya el diseño visual, con colores,
tipografías y botones estilizados, mostrando cómo se verá la aplicación.
5. Construcción del Prototipo Interactivo: Utilizar Figma para crear un prototipo
interactivo donde los usuarios puedan hacer clic en el botón "Agregar tarea", ingresar
detalles y ver cómo se actualiza la lista de tareas.
6. Pruebas de Usabilidad: Usuario final.
PROTOTIPO NATIVO
 Un prototipo nativo es un tipo de
prototipo que se desarrolla utilizando las
mismas herramientas y tecnologías que se
emplearán en el producto final. Esto
significa que el prototipo se construye con
el mismo lenguaje de programación,
frameworks y plataformas que se utilizarán
en la implementación del sistema o
aplicación. Los prototipos nativos son
especialmente útiles para validar la
funcionalidad, la usabilidad y el
rendimiento del producto en un entorno
que simula de manera precisa el producto
final.
Características de un Prototipo
Nativo
1. Interactividad Real: Permite a los usuarios interactuar con el prototipo de
manera similar a como lo harían con el producto final, lo que proporciona una
experiencia más realista.
2. Rendimiento: Al estar construido con las mismas tecnologías que el producto
final, el prototipo puede ofrecer un rendimiento más cercano al esperado en
la versión final.
3. Validación de Funcionalidades: Permite probar características específicas y
flujos de trabajo, lo que ayuda a identificar problemas antes de la
implementación completa.
4. Feedback Preciso: La retroalimentación obtenida de los usuarios es más
relevante, ya que están interactuando con un sistema que se asemeja al
producto final.
Tipos de Prototipos Nativos
1. Prototipos Nativos de Aplicaciones Móviles:
1. Definición: Prototipos que se desarrollan utilizando herramientas y lenguajes
específicos para plataformas móviles, como Swift para iOS o Kotlin para Android.
2. Ejemplo: Un prototipo de una aplicación de mensajería que permite a los usuarios
enviar y recibir mensajes, utilizando la misma arquitectura y componentes que se
usarán en la versión final.
2. Prototipos Nativos de Aplicaciones Web:
1. Definición: Prototipos que se crean utilizando tecnologías web como HTML, CSS y
JavaScript, junto con frameworks como React, Angular o [Link].
2. Ejemplo: Un prototipo de un sistema de gestión de proyectos que permite a los
usuarios crear tareas, asignarlas a miembros del equipo y marcar su progreso,
todo construido con el mismo stack tecnológico que se utilizará en la versión final.
Proceso de Creación de un
Prototipo Nativo
1. Definición de Objetivos:
Establecer qué funcionalidades y características se quieren validar con el
prototipo nativo.
2. Recolección de Requisitos:
Trabajar con usuarios y partes interesadas para entender sus necesidades y
expectativas.
3. Diseño de la Arquitectura:
Planificar la estructura del prototipo, incluyendo la base de datos, la lógica
del negocio y la interfaz de usuario.
Proceso de Creación de un
Prototipo Nativo
5. Desarrollo del Prototipo:
Utilizar las herramientas y tecnologías elegidas para construir el prototipo.
Esto puede incluir la creación de interfaces de usuario, la implementación de
lógica de negocio y la configuración de bases de datos.
6. Pruebas de Usabilidad:
Realizar pruebas con usuarios reales para obtener retroalimentación sobre la
experiencia y la funcionalidad del prototipo.
7. Iteración y Mejora:
Basándose en los comentarios recibidos, realizar ajustes y mejoras en el
prototipo, repitiendo el proceso según sea necesario.
Ejemplo Práctico de un Prototipo
Nativo
 Contexto: Desarrollo de una aplicación de seguimiento de hábitos.
1. Definición de Objetivos: Crear una aplicación que permita a los
usuarios registrar y seguir sus hábitos diarios, como hacer ejercicio,
leer o meditar.
2. Recolección de Requisitos: Realizar entrevistas con usuarios
potenciales para entender qué hábitos desean seguir y cómo les
gustaría que se presentara la información.
3. Diseño de la Arquitectura: Planificar la aplicación utilizando React
Native para el desarrollo móvil, definiendo las pantallas necesarias
(inicio, registro de hábitos, estadísticas) y la lógica para almacenar
datos.
Ejemplo Práctico de un Prototipo
Nativo
4. Desarrollo del Prototipo:
1. Crear la interfaz de usuario utilizando componentes de React Native.
2. Implementar la lógica para agregar, editar y eliminar hábitos.
3. Configurar una base de datos local (por ejemplo, utilizando SQLite) para
almacenar los datos de los hábitos.
5. Pruebas de Usabilidad: Invitar a usuarios a probar el prototipo
en sus dispositivos móviles, observando cómo interactúan con la
aplicación y recopilando sus comentarios sobre la experiencia.
6. Iteración y Mejora: Basándose en la retroalimentación, realizar
ajustes en la interfaz y la funcionalidad, como mejorar la navegación
o agregar recordatorios para los hábitos.
Conclusión
 Los prototipos nativos son una herramienta poderosa en el
proceso de desarrollo de software, ya que permiten a los
equipos validar ideas y funcionalidades en un entorno que
simula.
GRACIAS…