Wireframing user flow controls
Once we finished creating our user flow diagrams, we can move on to wireframing. Wireframing is a low fidelity outline for laying out screens. Some designers may jump right to screen mock ups but starting with wireframes can save us time in the long run. Wireframing is a sketch done with pencil to give us place holders for our layout. It allows us to formulate our ideas into something real.
The main reason for wireframing prior to screen mock ups is that it is much quicker to sketch out a simple layout as opposed to either using photoshop or some other drawing program. It is quicker and easier to layout screens with pencil and paper than using Android Studio or Xcode to change layouts. Also, with a free app called Marvel, we can see the flow of the program with just a few steps. Similar to creating user flow diagrams, wireframing allows us to quickly make modifications to our application flow.
When wireframing, keep in mind the design conventions of iOS and Android. Some of the design conventions to keep in mind is the use of hamburger menus ( Android ) vs tabs ( iOS ). Also take the Android's hardware keys in mind that pop up since we don't want two rows of buttons for users to make a mistake on. For more difference in design conventions of iOS and Android, you can check out my other article.
Wireframe details should be kept to a minimum and should only take a few minutes to sketch out. If you want to keep the scales and proportions more accurate, you can use stencils and templates that can be easily found on the web. When converting user flow diagrams to wireframes, remember the conventions you used to represent the screen. In the current case, we used squares to represent screens and rectangles to represent user input. With this in mind, we will create the screens with the number of user inputs from our user flow diagrams.
The main reason for wireframing is that it helps us layout the screens in a logical manner without spending too much time or effort. It also helps us decide what user controls to use and how much text we can use since we are roughing out the layout. Once we have the wireframes done, we can use a prototyping tool such as Marvel's free prototyping app to see our app flow in action. Just like the old adage of "measure twice, cut once," spending the time to get your ducks lined up will save you countless hours when in comes to developing your app.