How to use wireframing for better mobile app design

A flowchart can be part of the wireframing process. (Photo Credit: CC BY-SA/Lori/Flickr)

Developing a good mobile app takes time and patience, whether you’re talking iOS, Android or any other platform. Coding and UI design are both important, but a developer shouldn’t discount the planning phase. If an app’s functionality can be envisioned, it can be made real. That’s why wireframing a mobile app first is so important; the sketch of what an app will look like can be as simple or complex as an app designer desires.

Sketching the user experience

With a wireframed plan already in place, the act of programming and UI design can be given greater focus. Here are some tips for taking an intuitive approach to mobile app wireframing.

Planning page views

Like a website, the visual representation of a mobile app is composed of page views. These page views carry an app’s content to the user, whether it is text, a table, photos, a button interface or one of many other possibilities. In a wireframe plan, it’s a good idea for a designer to consider all the possible page views a user will encounter. Beginning with root view – the home page of the app – then spider-webbing outward, the designer can sketch out the vital visual elements of the app, as well as application flow. Chief among these elements should be in-app navigation aids.

More on navigation

Wireframing navigation shouldn’t be overlooked. Sketching out the arrows and other visual elements through which a user can move and access various levels of a mobile app is important. Wireframe software and in-browser apps like Mockflow make this easy, notes SpeckyBoy.

The larger a concept a mobile app becomes, the more important easy navigation becomes. Utilizing all UI elements in a seamless fashion increases the level of immersion that a user will experience. By wireframing, a designer eliminates most potential mistakes that can occur when a step in the navigation chain is overlooked. In instances in which a UI element is only to appear on a single page, the wireframe sketch is where this distinction is noted.

Sketching input methods

If a mobile app’s design must account for user input, the means of interactivity should be sketched out before coding. Whether it’s a keyboard or other pop-up button or field, the means of interface and where they route the user should all be noted in the wireframe sketch.

From a design standpoint, it’s a good idea to use varying shapes to represent the difference between function and view. Whether a designer chooses speech bubbles or anything else, notes in the wireframe should make all designations clear so that the programmer need not try to guess when it comes time to code the app.

Filling in the fine details

While navigation and major visual content is most vital, filling in the gaps is also important. Filler content rounds out the entirety of a mobile app. Clearly delineating where text will go, as well as standard photographic page media, is the more traditional desktop publishing phase of wireframing for app design. Designers can specify where objects sit in the layout.

To make things easier, numerous developers have created open source templates to aid in this and other aspects of the wireframing process. Not only that, but sample app UI sketches are readily available on sites like Flickr to give novice mobile app developers a frame of reference for what can truly be accomplished with an effective wireframe presentation.