jueves, 22 de septiembre de 2011

Diseñando mediante prototipos (Mocking, prototyping)

Es recomendable, a la hora de montar una interfaz, de sentarte delante de un papel y un lápiz y empezar a pensar en cómo organizar la información de una web o de un formulario.

La inmensa mayoría de los programadores siempre nos hemos llevado mal con el diseño, pero al final nos hemos tenido que meter en él. Un truco que tengo para lidiarme con colores, fuentes, márgenes, etc... es el truco de los sombreros.
  • Me pongo el "sombrero de diseñador" y, sin entrar en código, monto un prototipo con alguna herramienta (gimp, photoshop, excel...) que quede bien organizado y cuya estética sea agradable.
  • Acto seguido, me pongo el "sombrero de programador" y trato de plasmar ese diseño en la herramienta de desarrollo.

Herramientas de prototipado
Mediante un prototipo se consigue, por una parte, centrarte en el "qué quiero", organizar los contenidos e incluso poder acercar al cliente la solución que se le va a entregar.

Para organizar contenidos, con un programa tipo Visio o Word que te proporcionan formas de controles con los que puedes ir montando un borrador de lo que quieres.

Para trabajos más de diseño gráfico, es bueno apoyarse en Gimp o Photoshop e ir montando el diseño a base de capas

Unas herramientas que he descubierto y que facilitan mucho el prototipado son:

Evolus Pencil
http://pencil.evolus.vn/
Proyecto GPLv2 bajo Linux y Windows (parece que también estará pronto para MAC).
También se puede instalar como complemento para Firefox 3.







iPLOTZ
http://iplotz.com/
Producto comercial con una versión libre pero limitada. El acceso libre limita a 1 proyecto y 5 páginas.

Tiene versión offline.


MockFlow
http://www.mockflow.com/
Producto comercial con una versión libre pero limitada a 1 proyecto y 4 páginas.

Tiene también versión descargable.




No hay comentarios: