Mockups

Desarrollo de Aplicaciones

Capacitación INACAP SEDE VALDIVIA 1

Capacitación INACAP SEDE VALDIVIA 2
¿Qué es un mockup?

Un mockup es una representación visual y estática de un diseño. En el

campo del diseño web los mockups se utilizan para que los miembros
de equipo tengan una idea más clara de cómo lucirá el sitio web. De
hecho, más que ser cercana, es una idea exacta de cómo se verá al sitio
web una vez que se pase a la siguiente fase.

En términos generales, Mockup es lo mismo que una maqueta o un prototipo, según si

simplemente es un dibujo del resultado final (maqueta) o una versión con funcionalidad
reducida (prototipo) que permita intuir cuál será su comportamiento o funciones reales

Capacitación INACAP SEDE VALDIVIA 3

En lo que al diseño y desarrollo web se refiere y más aún cuando se trata de un trabajo para un
cliente, un mockup es el primer paso para la conclusión satisfactoria de un proyecto web para
un cliente.

• Permite al cliente visualizar el resultado final. Los que estamos inmersos

en este mundo hemos ido adquiriendo la capacidad de visualizar una web
(o gran parte) sin necesidad de tenerla delante.

• Deja claro el alcance total del proyecto. Puesto que se hacen maquetas de
casi todas las páginas (o al menos de cada una que sea distinta de las
demás), el conjunto deja claro cuál es el alcance del proyecto y evita
suposiciones que luego pueden derivar en situaciones incómodas (y a
veces costosas) tanto para el cliente como para nosotros. En este caso, si el
cliente detecta carencias, estamos en un punto en que se puede rectificar
el presupuesto sin perder demasiado.
Capacitación INACAP SEDE VALDIVIA 4
• Agiliza (lo más que puedas) el proceso de desarrollo. Es increíble el poder
que te otorga la sensación de progresión, de estar avanzando. Tengo
comprobado que se consiguen mejores resultados cuando tienes una guía
de todo el proceso y vas tachando pequeñas partes de ésta, una tras otra.
En este caso, el Mockup puede servirte como una perfecta guía.
• Ayuda en la delegación de tareas. La web en su conjunto esté diseñada
para cumplir los objetivos del cliente. Por eso, cuando construyo el
mockup, me preocupo de que la estructura esté diseñada para conducir al
visitante hacia esos objetivos. Luego, voy añadiendo anotaciones para el
diseñador, programador y redactor, para que conviertan ese lienzo
“bocetado” Acabar el Mockup te permite delegar cada tarea en paralelo a
cada profesional, quien podrá acabar su labor sin depender del otro.

Capacitación INACAP SEDE VALDIVIA 5

Vuelven tangibles tus ideas

Capacitación INACAP SEDE VALDIVIA 6

Ayudan a empatizar
Gracias a los mockups tus trabajos se asociarán a ciertos
valores como el dinamismo o la originalidad. De hecho
no debes olvidar que todos los elementos que estén
cerca de tu diseño tendrán un impacto determinado. Y
esto cambiará la forma en la que lo percibas.

Por ello podrán ayudarte a empatizar, en gran medida,

con las emociones del receptor. Los mockups son una
herramienta de diseño y promoción con gran peso. Y te
servirán como recurso básico para definir las estrategias
de tus campañas de marketing y para tu web.

Capacitación INACAP SEDE VALDIVIA 7

Capacitación INACAP SEDE VALDIVIA 8
Capacitación INACAP SEDE VALDIVIA 9
Herramientas para realizar mockups
• Balsamiq
 Se trata de una de las herramientas más importantes para crear tus mockups, sobre todo si eres principiante. Balsamiq te
hará sencillo todo el proceso y crearás tus mockups más rápido de lo que crees. De hecho, es una de las herramientas más
utilizadas por los diseñadores.
 Entre sus principales características está que dispone de un completo sistema de versiones. Además, ofrece la posibilidad
de crear ramificaciones de tus proyectos. Tiene una interfaz muy sencilla de utilizar y es una herramienta muy rápida.

• Lucidchart
 Esta herramienta aporta una interfaz que funciona arrastrando y soltando elementos para crear tu mockup, es decir, el
sistema “drag and drop“.
 Para utilizar Lucidchart no es necesario instalar ningún software, ya que todo se produce en la nube. Además, puede usarse
desde cualquier navegador y ofrece un historial de revisiones. Esencial para volver atrás si tomas decisiones no adecuadas.

• Hotgloo
 Hotgloo es una herramienta que hará que tus mockups luzcan de manera profesional. Gracias a esta herramienta podrás
crear estructuras de información que combinen elementos de texto, gráficos, formularios o menús.
 Como el resto de las herramientas de esta lista, Hotgloo intenta hacerte la vida más fácil. Sobretodo si eres una persona sin
conocimientos previos de diseño.

Capacitación INACAP SEDE VALDIVIA 10

• MarvelApp
 Puedes acceder a MarvelApp a través de diferentes plataformas. Ya sea PC, móvil o web.
Además, sincronizará los archivos con Dropbox lo que te permitirá acceder desde todos los equipos.
 Entre sus características se encuentran:
 Te permite crear prototipos para sitios web, dispositivos Android e iOS.
 Puede sincronizar tus proyectos por medio de Dropbox.
 Ofrece herramientas colaborativas para trabajar en equipo con chat en vivo.
 Compartirás tus diseños de forma cómoda y sencilla mediante la generación de una url.

• Moqups
 Moqups es una herramienta que te ayudará a crear bocetos de manera muy fácil. Tiene un diseño
minimalista y funcional. De hecho, es una de las herramientas para mockups más completa. Y es que
Moqups está desarrollada en HTML5, lo que hace que los resultados que obtengas sean de alta calidad y
sin la necesidad de instalar ningún software o plugin.
 Esta herramienta te dará la posibilidad de usar más de 60 elementos gráficos para que tu imaginación y tu
creatividad puedan crear los mejores diseños. Además, te permite exportar los proyectos en formato PDF
o PNF.

Capacitación INACAP SEDE VALDIVIA 11

• UXPin
• Igual que las herramientas para crear mockups anteriores, UXPin te ayudará a
crear muy buenos diseños. Cuenta con un buen sistema de versiones y tiene
la posibilidad de exportar a HTML. Su única pega, por poner una, es que no
es gratuita. No obstante, es una herramienta muy buena para llevar a cabo
tus creatividades.

Capacitación INACAP SEDE VALDIVIA 12