Mockup
¿Qué es un mockup o maqueta web?
El mockup o maqueta es una muestra previa de como quedará en diseño de una web o producto antes de que sea realizado de forma definitiva. Su principal utilidad es mostrar al cliente como va a quedar producto final antes de que esté finalizado.
Los mockups, en diseño web, se utilizan en la fase inicial del diseño para definir los conceptos e ideas sobre las que se diseñara la web, e incluyen la estructura de la navegación y resto de elementos que forman parte del diseño, con detalle.
Generalmente, los mockups suelen ser creadas basándose en plantillas y elementos predefinidos de programas de diseño gráfico, así como haciendo uso de herramientas específicas que permiten añadir ciertos elementos de control y funciones simples de navegación.
1. Diferencia entre wireframe y mockup
Es muy habitual que ambos términos se confundan, wireframe y mockup, por ello es interesante tener claro cada uno de ellos.
Un wireframe es un bosquejo ó boceto de baja calidad. Son un conjunto de recuadros y textos grises que sirven para, de un vistazo, ver cómo se organizan la información en pantalla, Ayuda a tener una idea de que contendrá cada sección de la página web y su estructura a nivel básico.
Por su parte un mockup ofrece una mayor calidad y detalle, su aspecto es mucho más detallado con múltiples elementos gráficos, tipografías correctas y se aplica el uso del color. Es una fase avanzada del diseño.
2. Fases para elaborar un mockup
El proceso que se suele llevarse a cabo para creación un mockup un sitio web consta de varias fases que son:
- Definir el uso y objetivos del sitio web. Conoce el tipo de persona que será el usuario de la la web y el uso que se desea hagan de ella.
- Mirar a negocios similares. La competencia es buena y nos hace mejorar, también a la hora de crear nuestra web. Mira sus sitios y toma buena nota de ellos para inspirarte.
- Crear la estructura completa de la página web. Haz una estructura de la web posible donde queden claras las secciones, páginas, colores, tipografías a utilizar, etc.
- Elaborar la maqueta del contenido de cada página. Una vez tenemos la estructura definida, llega el momento de construir cada página y sección de la forma mas precisa y específica.
3. Aplicaciones para crear mockups
Las aplicaciones de diseño, de uso general, que suelen ser utilizadas para crear los mockups son:
Entre las aplicaciones específicas para crear mockups se encuentran:
- Balsamiq
- Invisionapp
- Mockflow
- Gomockingbird
- Hotgloo