Gracias al prototipado podemos ahorrarnos tiempo, dinero y futuros problemas con el cliente. ¿Y ésto por qué? Por el simple hecho de que lo que el cliente ve en el prototipo es el resultado final que va a obtener. De esta manera, si el cliente desea hacer cualquier cambio en el diseño o en la funcionalidad no nos supondrá ningún problema ya que no tendremos que tocar ninguna línea de código por la simple de razón de que en el prototipado no existen. Vamos, todo un lujo.
¿Qué es Prototyper?
Justinmind Prototyper es una herramienta de prototipado que nos permitirá crear bocetos tanto para aplicaciones web como aplicaciones móviles, pudiendo elegir, aparte de la resolución de la pantalla, los dispositivos móviles concretos para los que queremos realizar el boceto (móviles, tablets, e incluso el SO en los dispositivos de Apple).
Versiones de Prototyper
Actualmente existen dos versiones de prototyper: Una versión gratuita, prototyper free con funcionalidades muy reducidas, y una versión de pago, prototyper pro la cual podemos adquirir por un precio que varía entre los 19$ y los 29$ mensuales. Aunque también tenemos la posibilidad de probarla durante 30 días.
Ambas versiones son compatibles tanto para la plataforma Windows en sus versiones XP, 7 y 8 como para la plataforma Mac OS X en sus versiones igual o superior a 10.6.
Comenzando con Prototyper
Una vez descargado e instalado, lo primero que nos encontramos al abrirlo es la opción de crear un nuevo prototipo o abrir uno anterior. Si seleccionamos crear uno nuevo, nos da la posibilidad de elegir el dispositivo para el que queremos diseñar el boceto. Podemos elegir tanto aplicaciones web como aplicaciones para dispositivos móviles o tablets (iOS y Android). Además, en el caso de haber seleccionado una aplicación web, podremos elegir la resolución de la pantalla que nosotros queramos.
Una vez creado el nuevo prototipo, nos aparece el menú de edición que como podemos ver en la imagen es bastante intuitivo.
En la parte central nos encontramos el lienzo en el cual diseñaremos el boceto. Para introducir elementos en él disponemos de distintos tipos de widgets como entrada de texto, cuadros de selección, botones, formas geométricas, etc.
También disponemos de widgets personalizados de cada sistema operativo, tanto para Android como para iOS. Para acceder a ellos pinchamos en la pestaña “My Widgets” y seleccionamos el que queramos incluir en nuestro boceto. También tenemos la posibilidad de incluir widgets mediante librerías de widgets disponibles en la página de Prototyper.
Para incluir cualquier widget en el lienzo bastará con arrastrar y soltar.
Para cambiar los valores de un widget (posición, borde, dimensiones, etc) lo seleccionamos y en la pestaña “Properties” podremos modificar el valor que deseemos.
Eventos
Prototyper, a diferencia de Axure, incluye eventos gestuales orientados al uso de dispositivos móviles, tales como el cambio de orientación de la pantalla, la rotación de objetos, el desplazamiento de la pantalla, etc.
Simulación
Una vez que hayamos terminado el boceto podemos ver cómo quedaría nuestro diseño. Para ello, solamente debemos pulsar en la pestaña “simulate” situada en la parte de arriba del lienzo.
En el caso de que hayamos seleccionado un dispositivo móvil, lo podremos emular sin problemas ya que el boceto se mostrará a través de la pantalla del dispositivo seleccionado.
¿Qué es Axure?
Axure, al igual que Prototyper, es una herramienta de prototipado especialmente orientada al diseño de wireframes.
Versiones de Axure
Actualmente, Axure se encuentra disponible en su versión 7 en dos modelos: Axure standard cuyo precio es de 289$ y Axure pro con un precio de 589$. Al igual que Prototyper, disponemos de una versión de pruebas de 30 días.
Es compatible con sistemas Windows para sus versiones XP, Vista, 7 y 8, y para sistemas Mac OS X para versiones superiores a 10.6.
Comenzando con Axure
Al igual que Prototyper, la interfaz es muy intuitiva y además la distribución del área de trabajo es idéntica: El lienzo para trabajar con el prototipo se sitúa en el centro y las columnas para seleccionar los widgets y sus propiedades se sitúan a izquierda y derecha, respectivamente.
También coincide con Prototyper en el tema de los widgets, ya que posee una gran cantidad de ellos además de la posibilidad de añadir nuevas librerías creadas por la comunidad de usuarios y disponibles en la propia página de Axure.
En lo que se refiere a eventos quizá destaque menos que Prototyper por el simple hecho de no incluir eventos gestuales para dispositivos móviles, por lo que en este apartado Prototyper tendría un punto a favor. En cambio, Axure ha incluido el evento onWindowScroll con el que podemos incluir el efecto Parallax scrolling el cual se comenta a continuación.
Parallax scrolling
Gracias a la inclusión del evento onWindowScroll, tenemos la posibilidad de realizar el efecto conocido como Parallax scrolling. Este efecto consiste en el movimiento del fondo de pantalla de forma más lenta que los objetos situados encima del fondo. De esta forma conseguimos un efecto de movimiento 3D y todo ello mediante el scroll del ratón.
En la siguiente dirección podemos ver un ejemplo de este efecto para entender mejor en qué consiste: http://zrlqi7.axshare.com/home.html
Simulación
Para visualizarlo, solamente debemos hacer click en F5 para ejecutar la vista previa. De esta forma, se abrirá una nueva ventana del navegador en la cual se mostrará el prototipo realizado.
Ventajas
Una de las principales ventajas de utilizar estas herramientas es la sencillez que aporta al desarrollador a la hora de crear un prototipo, ya que no es necesario tener conocimientos de programación para realizar el más simple diseño.
Otra funcionalidad, por no decir requisito imprescindible hoy en día, que nos proveen ambas herramientas es la posibilidad de realizar páginas adaptativas, lo que en diseño se conoce como Responsive Design. Debido al uso cada vez mayor de dispositivos móviles, es necesario la creación de aplicaciones que se adapten a los diferentes tamaños de pantalla. Aunque si es verdad que con ambas herramientas podemos realizar diseños adaptativos, cabe destacar que con Axure estos diseños se realizan de una forma más sencilla, casi automática mediante el uso de las Adaptative Views, mientras que con Prototyper el trabajo es un poco más costoso.