Una de las fases más clásicas y necesarias en la creación es el llamado boceto o croquis. Llevado al campo del diseño web sería el llamado “Mockup”, que básicamente se utiliza para crear una interfaz que pueda ser testeada antes de diseñar y montar. Necesitamos dejar definid la estructura, funcionalidades y diseño antes de comenzar con el desarrollo en sí. Este boceto servirá para ir concretando detalles e ir desarrollando el diseño final, como para presentar a los clientes, u otros trabajadores del equipo que trabajan en el proyecto.
Con Justinmind Prototyper podemos hacer esto y mucho más de una forma bastante sencilla. Se trata de una aplicación de origen español , aunque se ha afincado en USA, en Silicon Valley. Google, Audi, Paypal, NASA, Redbull, Sony y MTV son algunas de las empresas que utilizan esta herramienta
Para crear nuestro prototipo lo vamos a hacer distribuyendo distintos widgets en la pantalla. Podemos crear varias pantallas e ir enlazándolas para obtener la simulación de una aplicacion web completa.
Además de los widgets incluidos con la aplicación podemos descargar algunos más desde la web de Justinmind: http://www.justinmind.com/prototyper/widgets-web. Además de estos sets, podemos crear los nuestros propios, específicos para cada proyecto.
La aplicación es bastantes encilla de usar y tiene 2 partes principales, los paneles dinamicos y los eventos.
Los paneles dinámicos: Te permiten poner varios elementos en el mismo área, de esta forma podremos simular botones, cambios de pestaña u otros contenidos que cambian dinámicamente, etc.
Los eventos: Nos permiten indicar acciones sobre los elementos que tenemos en nuestro diseño.
Podemos consultar un manual de iniciación en la siguiente web (en castellano)
Enlaces de interés
- http://www.justinmind.com/ (web oficial)
- http://www.justinmind.com/prototyper/learn-build (tutoriales oficiales en ingles)
- http://olgacarreras.blogspot.com.es/2007/02/wireframes.html (terminologia)
- http://www.abc.es/tecnologia/moviles-aplicaciones/20131205/abci-justinmind-prototyper-triunfo-espanol-201312042057.html
- http://www.ddw.com.ar/guias/planificacion-web/241-haz-prototipos-para-tu-sitio-web
- http://www.desarrolloweb.com/articulos/prototipado-diseno-web.html