Prototipado

digital
3X90
Facilitadora
ANA RODERA - anarodera@gmail.com
- Objetivos diversos
1 - identificar
qué es un prototipo, sus tipos y algunas
tecnologías para desarrollarlos

2 - Diseñar
tres prototipos personalizados de baja, media y “alta”
fidelidad (en tiempo récord)

3 - disfrutar
del proceso creativo exprés
- bloques temáticos

01 02 03
prototipo tipos tecnologías
02.3

Prototipo HI-fi

02.2
04
Prototipo MID-fi
Contacto
02.1

Prototipo low-fi
 01
prototipo
Idea que toma una buena forma en la nube

top⬆
 - definiendo prototipo digital

Representación interactiva
y visual de un producto,
servicio, sistema,
experiencia o proceso

01
- Dinámicas para prototipar
A la hora de determinar los elementos del prototipo de vuestra solución, os
podéis ayudar de algunas dinámicas para definirlos y priorizarlos, como por
ejemplo:

− Técnica MOSCOW (Must, Should, Could y Won’t)

− Diversas técnicas de priorización

01 Técnica RICE
- Beneficios del prototipo

probar ahorrar
nuestra solución con tiempo + recursos
informantes clave validar
conceptos + funcionalidades
+ viabilidad =
antes del desarrollo final
equipo identificar
mejora la comunicación problemas + puntos fuertes =
a bajo coste
01
- Ojito con el prototipo

¡prototipo a la vista!
− Prototipad para llegar a vuestro objetivo-deseo
− Unificad las diferentes versiones de la idea para ir
descubriendo aspectos de esta
− ¡Fallad rápidamente!
− ¡Evitad enamoraros de vuestro primer prototipo!
− Usad vuestro prototipo para detectar puntos débiles
de vuestra solución, gracias al feedback constructivo
(barato), rápido y continuo de las personas

01
- Acceso a la presentación
URL de la presentación

https://bit.ly/prototipadodigital3x90
 02
tipos
División de prototipos según su fidelidad o
precisión

top⬆
- TIPOS DE prototipoS
Prototipo de ALTA
03 Fidelidad O PRECISIÓN
PROTOTIPO HI-FI (High Fidelity)

Prototipo de media
02 fidelidad O PRECISIÓN
PROTOTIPO MI-FI (Mid Fidelity)

Prototipo de BAJA fidelidad

01 O PRECISIÓN
PROTOTIPO LOW-FI (Low Fidelity) 02
- TIPOS DE prototipoS

PROTOTIPO LOW-FI
(Low Fidelity)
PROTOTIPO MID-FI
(Mid Fidelity)
PROTOTIPO HI-FI
(High Fidelity)
02
- TIPOS DE prototipoS

PROTOTIPO LOW-FI
(Low Fidelity)
PROTOTIPO MID-FI
(Mid Fidelity)
PROTOTIPO HI-FI
(High Fidelity)
02
- Prototipo DE baja fidelidad

Prototipo low-fi
dibujo simple, esbozo, sin colores ni
muchos detalles que representa la idea
de un proceso, producto, servicio,
sistema, experiencia, etc.
+
ofrece una visión general de la solución

Ejemplo de un sketch o esbozo de

Spotify
02
- Prototipo DE baja fidelidad

Prototipo low-fi
Seguramente habíais escuchado
muchas veces eso de que una imagen
vale más que mil palabras

A vuestro prototipo, le podéis dar forma

física haciendo uso de diferentes
materiales, recursos o tecnologías, pero
por razones de tiempo, intentad poner
en práctica el visual thinking para
presentar vuestra solución
02
- Prototipo DE baja fidelidad

Prototipo low-fi
Aquí tenéis algunas pautas por si
queréis aplicar el pensamiento visual

Recordad que con un buen uso del

pensamiento visual podéis...

02
 01
- Prácticas exprés
Dibuja un nuevo logotipo para Instagram, TikTok, Spotify o la
aplicación que quieras, con lápiz y papel
A

Crea la publicidad para un evento que desees convocar sobre un

b papel y usando un solo color

Diseña el dibujo de una camiseta a favor de la paz; puede incluir

c textos e imágenes
8’
 02
- Prácticas exprés
Usa la aplicación Ideogram o Firefly para pasar el nuevo logotipo
de la app que has seleccionado del papel a la pantalla
A

Utiliza la tecnología Wepik para generar la llamada de atención

b para acudir a tu evento o su imagen

Entra en la herramienta Kittl para convertir los trazos físicos de

c tu camiseta a un formato 100% virtual
10’
A Logos de RRSS
- Prototipo DE media fidelidad

Prototipo mid-fi
incluye más detalles que
el prototipo low-fi
+
wireframe que permite relacionar
elementos
+
puede incluir interacción
Ejemplo de prototipo mid-fi (con
02 formato wireframe) de Spotify
 03
- Prácticas exprés
Dibuja, en un papel, como transformarías dos pantallas de la
aplicación de la app que has elegido (añade alguna funcionalidad
A extra que ahora no tenga) insertando tu nuevo logo

Edita una hoja con las informaciones más importantes de tu

b evento adoptando el formato de reel de Instagram

Diseña, sobre un folio, la página web o la app desde donde se

c podría comprar tu camiseta, y al mismo tiempo dar un donativo a
una ONG
10’
 04
- Prácticas exprés
Usa Marvel app para generar un prototipo con interacción o
mid-fi entre las dos pantallas que has diseñado de la app
A (primero haz las fotos y después señala las relaciones entre
elementos)

Utiliza Wireframe.CC para diseñar el prototipo de media fidelidad

b de un reel de Instagram donde anuncies tu evento

Abre la tecnología MyDraft.CC y produce el prototipo de precisión

c media (o mid-fi) del sitio web o app desde donde venderás tu
camiseta
15’
- Prototipo DE alta fidelidad

Prototipo hi-fi
mockup o modelo a escala real de la
solución
+
prototipo que integra interacciones
entre los elementos
+
cercano al solución final en términos de
diseño, funcionalidades y detalles
Ejemplo de prototipo Hi-Fi de Spotify
02
 05
- Prácticas exprés
Entra en Draw.io o en Canva y prototipa en alta fidelidad las dos
A pantallas (de las que ya tienes sus wireframes)

Regístrate en Canva y produce el reel de Instagram (o prototipo

b de alta precisión) de tu evento

Date de alta en Mockitt o Draw.io para producir el prototipo hi-fi

c de tu página web o app de doble propósito: venta de tu camiseta
y donación
15’
- Técnicas de prototipado rápido

Lucía Ruíz comparte tipos de prototipos y

tecnologías con las que los podéis
desarrollar técnicas de prototipado rápido

Echadle un par de ojos a este vídeo, si

queréis llevar a vuestros prototipos a otro
nivel🚀
 03
tecnologías
Herramientas digitales para prototipar

top⬆
- Tecnologías para prototipar 03

Tipos de
Prototipos
Tecnologías

Prototipo
Figma Mockitt Mockplus Invision UXPin
hi-fi

Marvel Draw.io Genial.ly Canva Tinkercad

Prototipo
mid-fi Wireframe Justinmind
Mockflow Mydraftcc Framer
cc (escritorio)

Scribble Adobe
Ideogram Autodraw Kittl
Prototipo Diffusion Firefly
low-fi
Vectr Bing imágenes Wepik Vistacreate Visme
 top⬆

- Tecnologías para prototipar

03
 - Tecnologías para prototipar

Si ya estáis on fire con el prototipado de

vuestra solución, os puede ir bien este
👀mural virtual colaborativo

En él podéis ir determinando y votando los

puntos/funcionalidades/características de
asociados a vuestro prototipo. También
tendréis la opción de subir imágenes para
ver la evolución de vuestra propuesta y
realizar valoraciones, desde este espacio
 - Tecnologías para prototipar

Con esta intuitiva herramienta de diseño

vais a poder generar diferentes
prototipos, de manera individual o
colaborativa, para informar sobre los
resultados de los prototipos en los que
que estéis trabajando
Si queréis editar prototipos de baja y
media fidelidad, con formato de mapas
mentales, diagramas de flujo, infografías,
etc. de manera ágil… ¡esta es vuestra
tecnología!🔝
 - Tecnologías para prototipar

Para prototipar soluciones, añadiendo

elementos de interactividad, Marvel es
una herramienta estupenda👌
A partir de esbozos (que hayáis hecho
en papel físico o virtual), os va a
permitir integrar transiciones y
acciones entre los diferentes
componentes, ofreciendo una visión
global vuestro proceso, producto,
servicio, experiencia, etc.
 - Tecnologías para prototipar
Tenéis disponibles las versiones para trabajar con Marvel desde dispositivos
móviles. Solo os tenéis que descargar la app para Android o iOS
Para generar vuestros prototipos solo tendréis que subir vuestras fotos, señalad
dónde queréis la interacción dentro de un proceso y elegir el lugar de destino
Repetid las acciones anteriores
tantas veces como queráis hasta
que vuestro prototipo luzca
estupendo
03
 - Tecnologías para prototipar
Una vez tengáis vuestro prototipo dibujado sobre papel o en la nube, le
podéis dar vida (interacción) con la herramienta colaborativa Draw.io

Tanto si se trata de una aplicación, como

de un sitio web, de un proceso, de un
producto o de un servicio, echadle
imaginación y experimentar con sus
funcionalidades para generar un
prototipo de lujo mid-fi✌
- Tecnologías para prototipar

Si necesitáis saber más sobre Draw.io,

tomaos un momento para 🔍ojear este
vídeo
- Tecnologías para prototipar

Para 󰩃“hacer magia” y convertir

vuestros prototipos editados a mano
en un papel en prototipos con un
acabado casi, casi perfecto, ¡utilizad
Uizard!
- Tecnologías para prototipar

Podéis descargaros su app o

trabajar directamente con esta
tecnología desde vuestro ordenador.
📢¡Ah! Tenéis la posibilidad de ir
dejando comentarios sobre el
prototipo que estéis desarrollando
para poder irlo mejorando
 - Tecnologías para prototipar

Otra tecnología muy intuitiva para

diseñar vuestros prototipos y probarlos
en vuestro smartphone es Proto.io
Con un poco de práctica podéis
conseguir prototipos mid-fi de calidad
- Tecnologías para prototipar

Su canal en Youtube cuenta con numerosos vídeos para aprender a manejar las
diferentes funcionalidades de la herramienta. 󰡸¡Investigad un poco para saber
más!
 - Tecnologías para prototipar

Por si encontráis tiempo para poder

editar conjuntamente vuestro prototipo,
echadle una mirada a Figma
📢¡Aviso! Vais a tener que dedicarle unos
minutillos para aprender algunos de sus
entresijos más eficaces
 - Tecnologías para prototipar

Desde Figma, podéis utilizar FigJam una

funcionalidad que os va a permitir
generar flujos de proceso de manera
colaborativa
Incluye diversas opciones para realizar
valoraciones de vuestros prototipos
sobre la marcha
- Tecnologías para prototipar
Dos recursos que os recomiendo tener abiertos en vuestras
pestañas, si queréis aprender sobre Figma, son estos…
 - Tecnologías para prototipar

Si os decidís por descargar Origami

Studio, en este vídeo encontraréis las
acciones básicas de la herramienta
Haced una prueba, y si os convence,
diseñad vuestro prototipo interactivo
con esta tecnología
¡Ah! En la página web de esta too,
encontraréis información adicional
sobre ella. ¡Echadle un ojillo!
- Tecnologías para prototipar
Con esta herramienta gratuita de diseño en 3D vais a poder
utilizar plantillas o idear vuestra solución desde 0 de una
manera rápida e intuitiva. Tened preparados vuestro sketch
para darle forma y, si queréis, exportarlo para llegar a
imprimirlo
- Tecnologías para prototipar

Otra herramienta que ofrece resultados

espectaculares a la hora de diseñar en
3D es Vectary
Vais a tener que dedicarle un tiempo
para conocer y dominar a la perfección
sus múltiples funcionalidades, pero
¡vale la pena la inversión!👍
De momento, os dejo algunas de las
acciones iniciales para desarrollar un
proyecto en este vídeo👉
- Tecnologías para prototipar

Si necesitáis generar prototipos

realistas de diferentes espacios o
productos de manera ágil y muy
profesional, ¡esta es vuestra
herramienta!
Dominarla a la perfección lleva su
tiempo, pero podéis 👣empezar con
estos 10 pasos para ver si os convence
y después ya podréis seguir
aprendiendo sobre ella
- Contacto con tacto

Ana Rodera
📧anarodera@gmail.com

top⬆
- Recursos varios

- SlideGo - Plantilla de la presentación: Día de los bloques en

construcción
- Fuente - Bungee - https://fonts.google.com/specimen/Bungee
- Fuente - Exo 2 - https://fonts.google.com/specimen/Exo+2
- Removebg (tecnología para eliminar fondos en las imágenes)
- Youtube (repositorio de vídeos)
Prototipado
digital
3X90
Facilitadora
ANA RODERA - anarodera@gmail.com