Saturday, November 10, 2012

Wire Frames and Prototyping

Wire frames and prototyping methods for mobile game design are tricky topics to write about.  Both methods are considered similar yet very different.  One key difference between the two processes is that wire frames tend to focus on creating a rigid skeleton for a mobile app, and prototyping focuses on the design elements.  Some mobile game developers may choose to bypass wire frames entirely or switch the order of steps in development.  Each development team might have their own development techniques and opinions about the use of wire frames and prototyping.   (Gordon, 2010).  You as a mobile game developer must choose what is best for you. 


The wire frame methods are considered similar to a conceptual reference or rough draft while keeping the general goal in mind.  Wire frames can very useful for ensuring games have the proper placement of user interface elements such as menus and general shapes.  Keep in mind that different mobile devices will have various screen sizes.  For example, the size of a mobile phone is smaller than a screen on a Ipad or tablet.   Sketches are typically used to examine how the general outline of your game would appear on a mobile screen.  Some developers may prefer to complete their wire frames using freehand sketches.  Other methods are often used such as computer software or mobile apps.  (Lim, 2012).


Prototypes are beneficial  for ensuring a game contains the proper design elements and offers early detection of major issues.  (Turner, 2012).  Prototyping tools are often used in the following formats:

  • software programs
  • mobile apps
  • websites with drag and drop capabilities 
  • traditional pen and paper 

 The process for prototyping has the potential of saving a great deal of time and money if done correctly.  Designers can take advantage of finding checking to see how the look and feel of their game will be viewed before it is brought into the development stages.  Some modern prototyping software allows designers to create a test version of their game and exported it to multiple devices.   (Turnbull, 2012).  The exportation of a test version provides the opportunity for users to pre-screen, play test and offer feedback.  Feedback is a valuable resource which can help to ensure the game has the correct focus before proceeding to the later stages of development.


Gordon, J.  (2010, Dec. 22).  5 Steps for Wireframing and Paper Prototyping Mobile Apps.
Retrieved from:

Lim, W.  (2012,  Jun. 18).  A Beginner's Guide to Wireframing.
Retrieved from:

Turnbull, C.  (2012, July 26).  Codiqa: Mobile App Prototyping, Reinvented.
Retrieved from:

Turner, N.  (2010, Nov 18) .Wireframes are dead, long live rapid prototyping.
Retrieved from:


  1. I could see where wire frames would be helpful in designing UI elements but what I think you were actually looking for was prototyping. Normally wire frame is deigned for websites not Mobile Apps.

  2. Wireframes are used for both mobile app and web UI development. Correct me if I'm wrong, but I always thought that the term "wireframe" was interchangeable with the term "paper prototyping".