Wireframing Challenge

Ironhack Pre-work

Laura García Diéguez
2 min readJun 6, 2019

En este ejercicio tenemos que crear los wireframes de una aplicación móvil. Representando visualmente la aplicación de una manera simple y en blanco y negro. Es decir, sacar el esqueleto de la app. Pero en este caso, partiendo de un diseño final ya terminado.

Para realizar los wireframes vamos a utilizar Sketch como herramienta y un Kit de wireframing que nos proporciona Ironhack — con algunos UI elements — para que el proceso sea más rápido y menos repetitivo.

La aplicación con la que vamos a trabajar es Emov app. Emov es una aplicación para alquilar coches eléctricos lanzada al mercado en Diciembre del 2016 en Madrid.

Wireframing en Sketch

La experiencia de crear estos wireframes ha sido muy divertida. Además, me ha hecho darme cuenta de la importancia de tener un Kit de wireframing a mano para aligerar y facilitar el proceso. En la siguiente foto podéis ver el resultado final de los wireframes de la aplicación Emov.

Aunque Ironhack nos ha facilitado un Kit, durante el diseño de estos wireframes, tuve que crear alguno de los símbolos que no estaban disponibles. Como por ejemplo, las tarjetas de login, el map filter y la lista de descripción de cada coche. Es increíble con la facilidad que podemos crear y añadir símbolos al kit e utilizarlos cambiando la información fácilmente manteniendo los estilos.

Símbolos creados para el wireframe de Emov

Y hasta aquí el pre-work de hoy ¡Ánimo y a seguir practicando! 🤙🏼

--

--