Exercise: Wireframing in Sketch
Hey, this is an exercise from my UX/UI Design Bootcamp Prework. Here you can see the rest of my projects. Want to know more about me? Click here 🙌🏽 .
In this exercise, I’ll be reverse engineer from the Emov’s high fidelity mockup screens to their bare wireframe state.
WTF is a Wireframe?
A wireframe is a “basic visual guide used to suggest the layout of fundamental elements in a web interface”.
Additionally, I decided to make wireframes to book a car the app. You can see the result below:
As you may notice, the wireframes are a simplification from the high fidelity mockup screens. They have a simple design with super basic shapes. This helps to avoid distractions, which is so important in a design process.
In the wireframes, I kept the important information from Emov screens such as labels and icons to make them clearer and easier to understand.
By doing this exercise, I realized that wireframes are so quick to make and, so, they’ll be so quick to change. Wireframing is an easy technique to take care of the elements’ location as it gives a clear picture of the whole app.
That’s all for now,
see you real soon.
