Wireframing 101
A beginner’s approach to wireframes
Our next approach to UX and Sketch App in the prework has been to get familiar with wireframes. Wireframes, as I understand them, are a way of laying out the content of an application/website and understanding basic interactions before visual design happens. Wireframes serve as a tool to work on the design without losing time on details: they are fast, simple and schematic.
For this exercise we were asked to do reverse engineering on a carsharing app, Emov, and to create a series of wireframes based on the app screens. The goal was to determine which content might be relevant at this stage of design, and which is to be considered later. Not very exciting to see, but I learned this is indeed a fast way to translate your drawings to the screen. Specially if you have a good library of wireframes and symbols.
Below you can see my first wireframes, and the real, finished screens of the app that I used as reference.

As you can see, I chose not to show the colored areas as grey blocks and went for a line wireframe, but I believe sometimes blocks may be useful to better understand the content display — in this case, that there is some kind of content expanding down.

