Understanding the wireframing process (tangible and digital)

Before understanding the actual wireframing process, it will be nice to gather some initial information about things that would help draw some effective wireframes. Once you understand what your app will do, the first step is to list the screens present on the app step by step. Doing this will give you a clear idea about the basic outline of the wireframing screens required.

Wireframing is the step in a design process where screens are laid out creatively, by arranging the UI elements to allow users to navigate through your app. These wireframing screens need not be same as the final UI for the app. They could be somewhat rough wireframes, which would give you an idea of what elements would be present on a screen.

The easiest and fastest way to get started is to sketch out your screens by hand using paper and pencils. Once you begin sketching, you may uncover practicality issues in your original screen map or the patterns you use. In some cases, patterns may apply well to a given design problem in theory, but in practice they may break down and cause visual clutter or interactional issues (for example, if there are two rows of tabs on the screen). If that happens, explore other navigational patterns, or variations on chosen patterns, to arrive at a more optimal set of sketches.

After you're satisfied with the initial sketches, it's a good idea to move on to digital wireframing, using software such as Adobe Illustrator, Adobe Fireworks, OmniGraffle, or any other vector illustration tools. When choosing a tool to use, consider the following features: