Wireframing Your Mobile App

Once you have an idea of what type of mobile app your group will be designing and what some of the features will be, the next step will be to start sketching out exactly how this app will work. This is done with a technique called wireframing - a rough approximation of what will appear on each screen of your app and how users will interact with it.

Photo by Flickr user Baldiri

Wireframes can be done in many different ways using many different tools - from simple hand drawn sketches to detailed annotated illustrations using robust software tools. For this project you will not need anything more complex than some simple hand-drawn sketches.

Photo by Flickr user Fernando Guillen

The goal of a wireframe is to quickly communicate how the app will look and how it will function for a user.  Wireframing involves multiple screens/pages that connect to one another through buttons or other interface elements.

Here is one helpful tool that you can print out multiple copies of for quick sketching that still has a "clean" look: a set of printable iPhone 4 wireframe templates:

UPDATE: Here is a set of printable iPhone 6 wireframe templates.

If you do a little Googling, there are tons of wireframing tools, templates, and toolkits available out there (including this gorgeous toolkit for Adobe Illustrator).  Most are overkill for this project.  My advice is to stick with sketches and stay focused on the concise communication of your app's layout and functionality.