Wireframes: designing the skeleton of an app
Emov, enjoy electric cars in your city
Products are the result of a long and careful designing process. It begins with a user research and context of use research and “ends” -if we can say that- testing and releasing the product to the general audience.
Designers have a large toolbox to get the best results, that is, those which let the users achieve their goals with the app (or any other interactive product) and feel satisfied. This collection of tools are thought to help designers to achieve this objective, saving time and money at the same time.
One of my favorite tools are wireframes. Basically, they help designers to focus on the functionality of a product, instead of spending time in other visual considerations. This last part is also important, but it will be nothing if we create a product that is messy, difficult to learn, unreadable, slow, hard, etc. Wireframes let designers make quickly changes according to the team’s feedback.
One of my favorite tools are wireframes. Basically, they help designers to focus on the functionality of a product, instead of spending time in other visual considerations. This last part is also important, but it will be nothing if we create a product that is messy, difficult to learn, unreadable, slow, hard, etc. Wireframes let the designer make quickly changes according to the team’s feedback.
How can we omit the visual features and shut up our aesthetic voice? wireframing! This tool allows designers to draw the skeleton of an app (or any interactive product). The purpose here is not to distract ourselves with the details, but drive our attentional resources to what matters: the basic structure and the functionality.
Is it understandable? easy to follow? clear? readable? easy to learn? Will the user understand the next step in this screen? Will she understand how to go back to the previous screen? How are the screens connected? These are some of the questions you might ask yourself when wireframing.
Recently I’ve been practising this great tool with Sketch. As an example, I took emov, a electric sharing car company, settled in Madrid, that plans to growth in other cities. During the process, I have had to remind myself several times the definition of a wireframe, and to make decisions about what is essential and what it isn’t, to understand the structure and workflow within this app.
These are some of the screens I produced during my practise.
Wireframing is one of a large number of UX/UI design techniques that designers have to develop a successful product. It help keep the focus on the essentials of an app, that is structure (skeleton) and functionality, leaving the aesthetic for a future step. It’s a practical, easy to use, fast and cheap technique and the most important, it is a great tool of communication.