Step 5. Prototype con InVision.
El siguiente paso al que me lleva el prework de Ironhack es la creación de un prototipo con InVision.
Para la creación de este prototipo he utilizado los wireframe que había creado en el ejercicio anterior sobre la aplicación Emov. Pero vamos paso por paso.
Antes de crear el prototipo con InVision he estado trasteando tanto con Sketch como con Flinto, programa muy top que habíamos visto en el punto anterior. Y aquí tenéis el camino que he seguido y las ventajas e inconvenientes que he encontrado en cada programa.
Sketch.
Ventajas: es muy sencillo de usar, muy intuitivo y además no tienes que salirte de Sketch para crear el prototipo.
Inconveniente: las transiciones que tiene para pasar de una pantalla a otra son pocas y no personalizables. Además no he encontrado la opción para que la primera pantalla se diluya sola tras unos milisegundos.
Para una primera toma de contacto con la creación de prototipos está bien, pero me ha dado la sensación de que se quedaba un poco cojo cuando quieres customizar un poco más tu prototipo.
Flinto.
Ventajas: Un programa intuitivo y sencillo de usar (una vez que te has visto los tutoriales). Se puede importar directamente el proyecto desde Sketch. La mayor ventaja que le veo es la personalización de las transiciones, un enorme mundo de posibilidades. Te permite grabar tu prototipo en acción y guardarlo en GIF y MOV.
Inconvenientes: Cuando quieres grabar un prototipo tienes que darle primero al play y luego a grabar, por lo que la primera pantalla temporizada es muy complicada de coger.
InVision.
Y por último llego al prototipo con InVision. Me ha chocado un poco en una primera toma de contacto, estaba un poco perdida. Flinto, al tener un espacio de trabajo como Sketch me ha resultado muy sencillo de usar, InVision ha sido más complicado.
En mi caso lo he importado como PDF, aunque también tiene la posibilidad de importar el proyecto desde Sketch, de esta forma si modificas el proyecto en Sketch no tienes que volver a cargarlo en InVision, solo sincronizarlo.
El primer problema con el que me he encontrado es que en la creación de mi wireframe no había contado con la barra superior de los dispositivos móviles donde está la cobertura, Wi-Fi, batería, etc… por lo que se me cortaban algunos elementos de la parte superior de la pantalla y tuve que modificar el diseño. ¡De todo se aprende!.
Una vez que comencé a crear el prototipo es bastante intuitivo de usar, y aunque no tiene transiciones personalizables como Flinto, ofrece bastante más posibilidades que la opción de Sketch.
Paso por paso:
- La primera pantalla está temporizada para que se disuelva después de 500ms.
- En la segunda pantalla, donde se encuentra el mapa, puedes pulsar:
- Menú: te lleva a las opciones de registro e inicio de sesión. Al volver a clicar el menú vuelves al mapa.
- Filtro: donde aparecen las opciones para filtrar la búsqueda. Al clicar OK vuelves al mapa.
- Lupa: te lleva a la pantalla de búsqueda de coches disponibles. Al clicar la X vuelves al mapa.
- La pantalla donde se encuentra desplegado el menú:
- Registro: te lleva a un formulario de registro. Clicando la X vuelves al menú.
- Login: te lleva a un formulario de inicio de sesión. Desde aquí puedes volver a atrás (<) o puedes volver a la pantalla del mapa al clicar “Mapa”.
Aquí podéis ver mi prototipo realizado con InVision: https://invis.io/MZJA6O1XUNQ
Como conclusión, InVision es muy claro y atractivo a la hora de realizar la presentación un wireframe o aplicación. Y aunque ofrece menos posibilidades que Flinto para crear transiciones es muy rápido, sencillo de usar, y crea una presentación muy limpia. También he abierto el link en mi móvil, y parece que corta la parte superior debido a la barra de navegación de Google Chrome. En este caso, Flinto lo tiene muy bien resuelto, me descargué la App y reproduje el prototipo en esta.
Personalmente creo que cada programa tiene su aplicación dependiendo del resultado que quieras.
