3 Excellent Reasons to Wireframe Your Mobile App

android how to wireframe

What is a Wireframe?

A mobile wireframe is the blueprint for the screens you want your app to contain. As part of your creative brief, it’s the rough draft created before your designer can produce the final, polished version. Wireframes are used to share your vision with the designer without drowning them in details.

Wireframing helps you build the structure and functionality of your app. Features, navigation and other user interface elements are the focus of this step in the design process. That means you should wait to decide details like the color of buttons until you figure out where those buttons go.

Creating a mobile app wireframe is  the quickest, easiest and cheapest way to test out ideas and concepts. It can be as simple as sketching your ideas out on paper. You don’t even need design experience, because you can download stencils to help you.

Why Should I Wireframe My App?

1) Wireframing Helps Your Designer Share Your Vision

Designers understand wireframes, because they show a simpler version of your user interface. The emphasis is on your features, buttons and text rather than on color, shading or textures. This makes the framework and functionality of your app is the focus. Designers will then use your framework to add layers of style and personality to your app.

Too-detailed mock-ups give designers preconceived images and constraints instead of allowing them to pull from their own creativity. You might think it’s a good idea to include  as much detail as possible, but actually the opposite is true. The more details you pile on a designer, the less flexibility and freedom they have to design for you.

To avoid constraining your designer, create a wireframe instead of a mock-up. Give your designer the form and function, but leave out the colors, gradients and textures. This forces the designer to pull from their own imagination. With added flexibility, the designer can make revolutionary design changes not just incremental ones.

2) Wireframing Helps You Make Tough Design Decisions

Excellent user interface design is all about making the right choices. Where should this button go? Where should I place this text? Unfortunately, there are an infinite number of possibilities. So how do you begin to make the decisions? You wireframe.

After you come up with the idea for your app, you’ll want to explore all the possible features and functionality. By wireframing you will be putting these ideas on paper. This will help you to see if they make sense in the context of your app.

When you see your ideas on paper it’s easier to understand how all of these elements work together. You may find that you have too many buttons on one page, or your content needs to be moved to a separate page. These are things you will only find out once you get them out of your head and onto paper.

3) Wireframing Will Save You Money

It’s easy to make changes, since wireframes are usually done on paper. If you work through an idea and it doesn’t make any sense, you can erase it and move on to the next idea. This will save you money, because sketches cost much less than having your app re-programmed.

Most of the development costs I’ve incurred have come from re-designs, since it’s tough to know what you want until you actually see it in front of you. Putting your ideas on paper will help you understand what it will be like to use your app.

Now that you know what a wireframe is and why it is so important we can talk about the next step. In my next post, I’ll discuss how to wireframe your Android app.

Sign up for our mailing list.



About Brandon Nolte

Hi, my name is Brandon Nolte, and I'm an Android junkie. I have tons of ideas for great apps but no programming experience. So I learned how to outsource my app development to freelancers on oDesk.com. Follow me to learn how you too can hire freelancers to create a unique and custom apps - all without any programming skills.

  • http://twitter.com/chrishii Chrishan Jayakody

    Great Post ! Waiting for the next one.

    • http://www.DIYDROID.com/ Brandon Nolte

      Thank you Chrishan!

  • pareshmayani

    Its a great and detailed post about Wireframe of mobile app.

    I would say, Balsamiq is the best tool for preparing mockup design / wireframe for the Mobile app.

    • http://www.DIYDROID.com/ Brandon Nolte

      Yes, Balsamiq is a great tool to use. The only reason I hesitate recommending that is because they don’t have an Android specific design elements. It’s hard to make your wireframe look like an Android with only iOS stuff. But otherwise, Balsamiq a great choice, because it’s so simple to use.

      • pareshmayani

        No Its there, check: https://mockupstogo.mybalsamiq.com/projects/android/story

        You can have many BMML from there, even you can also create your own control/widget for Android, iOS or any.

        • http://www.DIYDROID.com/ Brandon Nolte

          Oh wow, you are right. They really expanded their symbols library since the last time I used their product. The ICS symbols look great!

          • pareshmayani

            Glad that you got to know :)

  • Pingback: How to Wireframe Your Mobile App in 5 Steps - DIY DROID

  • Pingback: 10 Tech Stories To Read This Week – October 23 Edition » iRomin

  • Pingback: How to Make an Android App: The Step by Step Process

  • Ramesh Akula

    Great explanation ever! I m clarified the importance of the wire frames. I m glad for ur explanation.

    • http://www.DIYDROID.com/ Brandon Nolte

      Thanks for the comment Ramesh. I’m glad you liked the explanation.