PROTOTIPOS INTERACTIVOS

(MOCKUPS)
Teoría y Diseño de Sistemas de
Información

Ing. Alberto Redondo Salas

Máster en Gerencia de Proyectos
Especialista en Sistemas de Información
albertoredondo@uniatlantico.edu.co
Móvil: 3114141972
 ¿Qué es User eXperience (UX)?
 El concepto de UX (User eXperience) se
define como la experiencia que el
público tiene al entrar en contacto con
tus productos o servicios.
 Su objetivo es entregar a los usuarios
soluciones agradables, deseables,
intuitivas, atractivas y eficientes, que
hagan de su experiencia con tu marca
una vivencia amena y de alto estándar.

Contempla todos los aspectos que participan en la interacción del

usuario con la empresa, sus servicios y productos.
¿Qué es User eXperience (UX)?

Es una estrategia que

tiene como objetivo
entregar mejores
experiencias a los
usuarios de servicios y
productos digitales o
físicos.
¿Qué es User eXperience (UX)?

Experiencia Experiencia del Experiencia del

Total (TX) cliente (CX) empleado (EX)
 ¿Qué es User eXperience (UX)?
 La UX (User eXperience) es cada vez más
importante a la hora de crear un proyecto de
desarrollo de sistemas, una web o una app, y
es por eso que en las fases preliminares hacer
un mockup interactivo marcará la diferencia.
 Actualmente existen muchas formas de
presentar un proyecto e infinidad de
herramientas para hacerlo.
 Pero, dependiendo de la envergadura del
mismo, es esencial que decidamos bien
cómo trabajaremos, sobre todo en las fases
preliminares.
¿Qué es un Mockup?
 ¿Qué es un Mockup?
 Un mockup, traducido del inglés
como bosquejo, es una maqueta a
través de la cual los diseñadores
presentan sus propuestas a los
usuarios y/o clientes.
 Consiste en un montaje cuyo
objetivo es mostrar y validar con los
clientes (internos y externos) la forma
cómo funcionarán los desarrollos.
 Los mockups cuentan con muchos usos, las versiones conocidas
como maquetas digitales o mockups interactivos se utilizan con
frecuencia en el diseño web y el diseño de apps.
¿Qué es un Mockup?
Herramientas para crear Mockups

 Sketch: Quizá la más famosa y extendida

en el mercado dirigida al ecosistema
Mac.
 Adobe XD: Una potente herramienta de
la casa Adobe, que permite interacción
completa con herramientas como
Illustrator, pudiendo importar un proyecto
completo por capas y preparado para
empezar el prototipado.
 Moqups: Herramienta rápida y con gran
cantidad de elementos prediseñados de
gran utilidad.
 Herramientas para crear Mockups
 Balsamiq: Otra de las más populares,
sencilla y rápida.
 Axure: Quizá la más compleja de
utilizar, pero sin duda de las más
completas del mercado.
 InVision: Con una gran capacidad para
trabajar de manera colaborativa,
ofrece una versión gratuita
prácticamente perfecta para
diseñadores individuales.
 Figma: Muy similar a la anterior, cuenta
con una interfaz colaborativa y una
versión gratuita bastante interesante.
Betatesting Interactivo

 La capacidad de trabajo colaborativo de casi todas las

herramientas que nos permite testear el prototipo casi en
tiempo real, consiguiendo llegar a la versión final con
todos los posibles problemas detectados previamente.
Usabilidad con público real
 Hacer un test previo al desarrollo con un público controlado
sobre la usabilidad del proyecto es una ventaja valiosísima de
los mockups interactivos.
 Una vez realizada la prueba con un público preliminar, se
valoran todas las observaciones y propuestas de cambio, se
aplican en el mockup y esto permite clarificar los requerimientos
que se remiten a la fase de desarrollo.
 Visualización previa del Responsive
 Es esencial que puedan crearse diferentes
versiones y observar las diferencias de
interacción, ya que no es lo mismo una
navegación en escritorio que en una tableta
o un dispositivo móvil.
 Una web vista en escritorio admite mucha
menos gamificación o experiencias a la
hora de la interacción.
 La versión móvil pide simplificar los procesos
y utilizar los tecnologías basadas en
movimientos que pueden hacer la
experiencia mucho más completa y
amigable
Conozcamos Figma:

www.figma.com

https://www.youtube.com/watch?v=7fps9ILAi-8
Para conocer más Mockups:

https://www.mockupworld.co/
PROTOTIPOS INTERACTIVOS
(MOCKUPS)
Teoría y Diseño de Sistemas de
Información

Ing. Alberto Redondo Salas

Máster en Gerencia de Proyectos
Especialista en Sistemas de Información
albertoredondo@uniatlantico.edu.co
Móvil: 3114141972