Una de les fases més clàssiques i necessàries en creació és l’anomenat esbós o croquis. Traslladat al camp del disseny web seria l’anomenat “Mockup”, que bàsicament s’utilitza per crear una interfície que pugui ser testejada abans de dissenyar i muntar. Necessitem deixar definida l’estructura, funcionalitats i disseny abans de començar amb el desenvolupament en si. Aquest esbós servirà per anar concretant detalls i anar desenvolupant el disseny final, per presentar als clients o altres treballadors de l’equip que treballen en el projecte.
Amb Justinmind Prototyper podem fer això i molt més d’una forma bastant senzilla. Es tracta d’una aplicació d’origen espanyol, encara que s’ha establert a USA, a Silicon Valley. Google, Audi, Paypal, NASA, Redbull, Sony i MTV són algunes de les empreses que utilitzen aquesta eina.
Per crear el nostre prototip distribuirem diferents ginys a la pantalla. Podem crear diverses pantalles i anar enllaçant-les per obtenir la simulació d’una aplicació web completa.
A més dels ginys inclosos amb l’aplicació, podem descarregar alguns més des de la web de Justinmind: http://www.justinmind.com/prototyper/widgets-web . També podem crear els nostres propis sets, específics per a cada projecte.
L’aplicació és bastant senzilla d’utilitzar i té 2 parts principals, els panells dinàmics i els esdeveniments. Els panells dinàmics permeten posar diversos elements a la mateixa àrea, d’aquesta forma podrem simular botons, canvis de pestanya o altres continguts que canvien dinàmicament, etc. Els esdeveniments ens permeten indicar accions sobre els elements que tenim en el nostre disseny.
Podem consultar un manual d’iniciació a la següent web:
Enllaços d’interès:
- http://www.justinmind.com/(web oficial)
- http://www.justinmind.com/prototyper/learn-build (tutorials oficials en anglès)
- 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