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.