Sketch Wireframing Challenge

Last exercise of the Sketch exercises serie from Ironhack prework. In order to learn how to design wiframes, the exercise proposed to use the ‘reverse engineering’ technique: create those wireframes from final screens of a mock app.

Emov

Emov is a mobile app allowing people to rent an electric car for short periods of time. They’re planning to grow in more cities.
Here is how it looks.

Emove final screens

Time to wireframe !

Wireframe is the step after the rapid prototyping and before the final screens. It consists in designing the final layout. The focus is only the layout. That’s why it will be in black and white, there won’t be any style on text. Images & text are replaced by placeholders, icons are usually not the final ones.

My wireframes from final screens

How was it ?

This exercise was really helpful to learn to focus more on layout instead of styling. We naturally tend to want seeing beautiful screens but well, let’s see that as a reward from building the app with strong foundations.

I take this exercise like an introduction because creating wireframes from final screens is quite easy and I guess there is a huge gap with creating them from scratch.