Sketch Wireframes

From MockUp to Wireframe Hi Fi

Today, as part of the prework of the UX Design bootcamp from ironhack, we will solve an exercise that we will rarely have to face again, it is to make the way back to the usual, that is, to convert the screens of an existing application in wireframes.

The challenge is to preserve the same aspect of the application screens by using black and white wireframes in a very simple way.

The application done was emov, a platform for renting shared electric cars, which since its launch in Madrid in 2016 with 500 cars in its fleet, already have 40,000 users, and plan to expand in other cities in Spain and abroad.

Aplicación emov

The wireframing kit combined with the IOs UI Design models from Sketch were a great help. I learned firsthand the importance of the organization in Sketch because at first I did not realize how to order the layers and I almost went crazy with the huge amount generated.

The truth is that with the defined design I thought that it would be easy to solve the exercise, but the difficulty lies in deciding which visual elements and texts aren’t so important to understand the basic operation for the product, and get it done quickly. Finding that balance between having enough details to understand the application, but not too many to distract with design.

From reality to line (Wireframe) · Image Frances Berry
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.