EMOV wireframe exercise
Using Sketch and creating a wireframe version of the Emove app
Reverse engineering was never been so enjoyable! The exercise asked to understand what was the layout behind an high-fidelity mockup screens for a car sharing app called EMOV.
Ok, but what is a wireframe?
“Also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.” Wikipedia
Two main points to remember are:
-wireframe is always black and white
-wireframe isn’t interactive.
During the design process the wireframe creation usually follow the production of site maps because it is the first move into a real concrete visual process. The goal is to focus on functionality, behavior, how to display certain information and prioritize content.
The challenge for the exercise was to extract from the final product (the high-fidelity mockup) the wireframe.
The starting point was this:
First, I saved the images, and I inserted them in a new canvas in Sketch.
After that I created 7 artboards, and I drew wireframe out, from the shapes to icons and fonts. The UI Wireframing Kit was helpful in this and whether I couldn’t find what I needed, I searched for it on the web.
This is the result:
I enjoyed this exercise; I tried to keep in order the work not only renaming layers but also grouping them.
What I want to learn next? I’d like to understand better different ways to create wireframe, using content blocks and particularly how to set a grid. Columns, points, margin are still a path to explore!
