Making of Cicleta (II): prototipar y diseñar
Después de recopilar tanta información y definir qué funcionalidades incluiríamos en la primera fase de desarrollo había que ponerse a definir la interfaz.
Prototipando
Tenía que comunicar a @durbon de manera muy rápida las ideas de diseño e interacción que me rondaban para, después, poner en común distintos puntos de vista.
Así que empecé definiendo las páginas esenciales para realizar los flujos funcionales de nuestra aplicación (buscador y las estaciones favoritas). Después, me puse a dibujar las pantallas y, a nivel muy genérico, los elementos que considerábamos fundamentales.
Para ponerle las cosas fáciles a @durbon usé POP y convertí esos wireframes en un prototipo interactivo (¡qué pena que lo borrara!). Charlamos, aplicamos cambios y continuamos.
Y el siguiente paso fue pasar a limpio estos wireframes.
Antes de nada, una guía de estilos
Antes de empezar a diseñar había que definir una pequeña guía de estilos. Y digo pequeña porque muchos elementos y estilos ya estaban definidos (por ejemplo la tipografía, que hemos utilizado la nativa de Android).
Elegir la gama cromática fue lo que más nos costó. Nos inspiramos en el comedero de Fellini.
No, en realidad no. Nos ayudamos de la herramienta Material Palette aunque casualidad (o no) en casa tenemos un montón de cosas de este color que ahora hemos comenzado a llamar azul Cicleta.
Diseño visual: poniendo guapa a Cicleta
En esta etapa del proyecto, además de poner guapa a Cicleta, redefinimos algunos aspectos de interacción que no nos terminaban de convencer.
Para diseñar la app usé Sketch que, además, trae una template basada en Material Design. Y qué maravilla, oiga.
Después de convencernos el resultado quedaba: generar assets, diseñar el icono de la app y preparar fotos e imágenes para Google Play.
¡Listo!
Y así es como llegamos a lo que ahora podéis ver en vuestras pantallas. Estamos trabajando en una nueva versión que esperamos vea la luz pronto, muy pronto.
Puedes descargar Cicleta en Google Play.
