Wireframing

Victoria Aróstegui
2 min readSep 28, 2018

Wireframing enables a visual representation and understanding of an interface. This would mean the preliminary sketch of the visuals and flow of a design, without taking into consideration interaction or aesthetics. Therefore, this will be the schematic skeleton of what the interface will be.

Wireframing Challenge

The following exercise is a mockup for the emov a carsharing app, which belongs to Vulog. Such company builds technology solutions in order to provide shared mobility businesses all over the world.

Such exercise requires a step back in the design of the emov app in order to go through the different steps learned in this unit. Therefore, in order to do so, the current design has been a reference to fulfill such task.

emov screens’ design

The process required the implementation of most of what we learned in previous units. In my case it was very good to go back to basics and only focus on the content and flow of the app, without loosing myself in aesthetic details. This gave me a hands-on experience on how important the structure of an app is before proceeding with the final design.

The exercise has been done on Sketch using the provided Wireframing Kit, which certainly helped a lot. I also downloaded some icons needed and build other manually.

Find below the screens I built for this wireframing exercise.

I truly enjoyed myself building these screens and I slowly feel more confident using Sketch, I definitely need to keep it up!

--

--

Victoria Aróstegui

UX/UI Designer, experience using agile methodologies. MBA professional and entrepreneur. Worked with start-ups in creative industries in Spain and UK.