Much like building a website, mobile app design is a very detailed procedure. Although it may not be sociological rocket surgery(some might say otherwise) but even the best app designers will spend years studying the craft and still have a lot to learn. One of the earlier stages in both website & mobile app design is called wireframing.
This is a bare-bones template of the layout which includes the most important page elements. Content should be kept to a minimum used sparingly on an as-needed basis. Wireframing pushes a direct focus onto the experience – basically how a user will interact with the application. Many designers prefer to draw these by hand but there’s always an option to design wireframes using graphics software.
In this post I’d like to offer an introductory guide to wireframing for iOS apps, and specifically how this can be accomplished using Adobe Photoshop. Other programs like GIMP or Sketch also work just fine. The goal would be to create a layered wireframe which can be edited and rearranged to fit a working mobile app prototype.