¿ Qué son los  Mockups ?

Aplicando este término para desarrollo de aplicaciones Web, es una maqueta a escala que nos ayuda a plasmar la vista previa para una interfase de usuario, en wikipedia aparece de la siguiente forma:

Systems engineering

Mockups, wireframes and prototypes are not so cleanly distinguished in software and systems engineering, where mockups are a way of designing user interfaces on paper or in computer images. A software mockup will thus look like the real thing, but will not do useful work beyond what the user sees. A software prototype, on the other hand, will look and work just like the real thing. In many cases it is best to design or prototype the user interface before source code is written or hardware is built, to avoid having to go back and make expensive changes. Early layouts of a World Wide Web site or pages are often called mockups.

Información Completa (Inglés)

En la red podemos encontrar una gran variedad de aplicaciones tanto de software propietario como de uso gratuito.

Yo uso una llamada Balsamiq Mockups (Software Propietario), llevo más o menos un año con el y la verdad cumple con las opciones necesarias para maquetar interfases de usuario para la web y para dispositivos móviles entre otros. La interfaz es my sencilla e intuitiva, los elementos se encuentran distribuidos por categorías, te permite exportar los diseños a PDF y PNG, puedes crear links entre diferentes diseños y hacer una presentación en pantalla completa, también cuenta con una extensa librería de ejemplos que van desde lo sencillo hasta interfases de usuario completas.

Aplicación para crear diseños de navegación para la web

Lista de plantillas para mockups prediseñadas

Barras de navegación y diseño de mockups

Otras Apps

Pencil Project (Extensión para FireFox)
Link al Sitio Oficial

Aplicación para crear mockups desde FireFox


MockFlow (Software Gratis)

Link al Sitio Oficial

Alternativa de uso libre para crear mockups

 

MockingBird (Software Propietario)
Link al Sitio Oficial

Aplicación para la creación de mockups con pago de licencia


Mockup Builder (Software Gratis)
Link al Sitio Oficial

Alternativa de uso libre para la creación de MockUps

 

Les presento un par de ejemplos que he diseñado con balsamiq mockups

Interfase inicial de proyecto ExpoTeam

 

Diseño de Menu con tabs

Ejemplo de naveganción proyecto Morelia 2011