Wireframing 101

A beginner’s approach to wireframes

Celia Viudes
Aug 8, 2017 · 2 min read

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.

My wireframes

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.

Emov App

Celia Viudes

Written by

Architect, coffee lover and UX/UI designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade