Hacer mockups para tus proyectos web

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Los mockups son, por así decirlo, un esquema básico de una web que sirve para hacerse una idea de como va a ser dicha web. Brevemente diremos que son la maqueta previa de una web y por tanto todo error que detectemos en la maqueta será más fácil y barato de subsanar que en el desarrollo final. De ahí viene todo su valor y utilidad. Podemos usarlas para presentarselas al cliente y que vea el aspecto y el funcionamiento primario de la página antes de empezar a desarrollarla. Así evitamos que luego no le guste o que no sea lo que esperaba y haya que rehacerla.

También nos sirve para ir estudiando la usabilidad y la accesibilidad de la web. Podemos poner el mockup delante de un betatester y pedirle que nos diga que haría para realizar determinada tarea, como encontrar una sección de la web, buscar un contenido o ir a la “Ayuda”. Si vemos que tiene problemas para desarrollar alguna de esas tareas deberíamos plantearnos cambiar la definición del proyecto, hacer un nuevo mockup y volver a testarlo.

La mejor herramienta que he visto para hacer mockups es Balsamiq Mockups. Aunque sea de pago, merece la pena pagar la licencia de 79$, frente a los gastos y el tiempo que nos puede ahorrar.  También tienen  una versión de prueba de una semana.

El funcionamiento es sencillo, es como un programa de dibujo con capas al que podemos meter diferentes elementos o controles como cajas de textos, combo-boxes, imágenes, … Está pensado principalmente para páginas webs y aplicaciones de smartphones, pero con un poco de ingenio se puede usar para diseñar cualquier tipo de aplicación de escritorio. Si necesitamos más controles de los que ofrece el propio programa podemos recurir a Mockupstogo.com, donde podemos descargarnos controles generados por los usuarios que van desde anuncios de Adsense hasta teclados de iPhone o de Android. Esté es un ejemplo de como quedaría el mockup de un proyecto web.

Otra opción muy buena para el desarrollo de mockups es Pencil Evolus. Es una herramienta muy potente y completa creada por la fundación Mozilla, pero también más complicada de usar. Es esencialmente igual que Balsamiq pero pensado tambien para otra serie de diagramas como esquemas de flujos. Aunque tiene la ventaja de ser libre y gratuita y con una comunidad que desarrolla gran cantidad de controles nuevos continuamente. Esta en vuestra manos probar las dos y ver cual os conviene mejor.

4 comentarios

  1. Adpv dijo:
    23 febrero, 2011
    Responder

    @pablo Gracias por la sugerencia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.