The Role of Wireframing in Mobile App Design

By Jorge Robles | Sep 11, 2017

 

What are wireframes and why are they important?

A great way of consolidating your ideation process and putting it into something that is more tangible and easier to visualize is sketching wireframes. To many, the term “wireframe” may sound unfamiliar, but wireframes are simply a representation of the skeletal structure of a mobile application, very often compared to a building’s blueprints. Being an application’s backbone, they lay out the structure, hierarchy and relationship between the elements that make up a mobile application.

The intention of these structured drawings is to focus mainly on what the screen does, and not exactly what it looks like. Wireframes are supposed to lack color, graphics, or typographic styles; they are not meant to be viewed as final designs and are certainly intended to be a part of an iterative process. Mobile application design could be a long process, and wireframes play a key role in defining the structural foundation of the product, making it easier to understand and refine in the long run.

What is the lifespan of a wireframe?

Clients and designers must be aware that the process of wireframing starts at a very early stage of app design, but it is definitely not over there. It is a powerful ongoing activity that allows for the strategic arrangement of the elements of an application. Even though it might sound like a complicated and tedious activity, wireframing should be a quick and straightforward task. Before trying to get ahead and create an initial look and feel, the basic layer of usability and navigation must be worked thoroughly by developing wireframes of all the different sections of the product. One by one, all possible interactions must be anticipated and designed in order to make a well-rounded application. On the other hand, the client must understand the importance of this step and take advantage of the opportunity to communicate any desires and needs that could be missing. Often times, wireframes are underestimated and not very well appreciated, but it is in this phase that the client can collaborate the most with the designer to lay the foundation of the final product.

Are wireframes meant to show layout only?

Wireframes provide an easy way to validate the usability of an application by allowing the user to visualize and navigate through its different sections. They guide the user through a full experience without being distracted by the visual design and graphic elements that at this stage may cause undesired draws of attention. Constantly being engaged in wireframing allows the designer and the user to perform deeper and more valuable explorations of multiple design ideas, concepts, and workflows, resulting in an application that is fully-functional, intuitive, and user friendly.

What are some tools to create wireframes?

There are a variety of programs that help facilitate the process of wireframing and among the most popular are Adobe Illustrator, Balsamiq, Omnigraffle and Sketch. These tools enable designers to easily map out and organize content in a systematic manner. In other words, designers frequently use these programs to create libraries of design elements to be reused in wireframes for common areas of the application. Some of these libraries may include navigation and tab bars, menus, notifications, popovers, buttons, sliders, and icons, among others. By doing this, designers can dramatically cut down production and refinement time.

Yes, wireframes rock.

Well-designed wireframes must give the user a clear understanding of the structure and functionality of an application. Go ahead, take a closer look at those wireframes to double check that the app’s structure and workflow make sense and your users are happy.

Image Credit: baldiri


ux_design

Let's Talk :)