Wireframing for Game Design

Dave and Ralph over at The Tap Lab created an awesome game called TapCity and gave a great presentation about it at Mobile Monday Boston #momobo.  They also talked game startups at Boston Indies. But before building TapCity they built a binder called BigCity. This binder is a ‘wire frame’ of the game. The intention was to be able to sit down with the binder, and like a choose your own adventure game, play TapCity.  Of course like all projects, the scope had to be reduced to get things moving.  Unfortunately BigCity did not turn into a playable iOS prototype. Despite not being what they dreamed, BigCity is a tremendous resources and is worth learning from.

This post has some rather large graphics in it.  More after the break…

Yes, they really are goofy in person.

Wire Frame vs Playable Prototype

Less involved then a paper prototype the wire frames demonstrate the look, feel, and layout of the product.  They act
as a map for a web page or application.  Generally they show off the user interface.  For example on the website wireframe wikipedia page ‘the back end’ is completely ignored for the purposes of wireframing.

In the context of game design what you get from wire framing a game idea is a sketch of the look and feel before it’s made. This prevents confusion about GUI when the coders sit down to make it. This ended up being a problem on The ZoRTS Project.  It is also a great communication tool which expresses thoughts often missing from the Game Design Document.  A good creative lead in training is going to have at least a few screens done before the project starts.  Ultimately the level of completeness of the wire frame is going to depend on the project.

To create a paper prototype, on the other hand, you need a little bit more of your ‘backend’ in the frame work.  The mechanics have to be in place in order to have a functional paper prototype. Almost like playing a board game version of the game you eventually want to make.  Start with the wireframes of the UI with the paper mock up of the game and then begin adding game play loops, decision tree’s, and the individual game mechanics like mob stats, inventory, combat, etc.

On a hobby project, where you have all the time in the world if you can do this, DO IT.  The ability to play around and figure out what works and what is compelling about the game before writing a single line of code will be worth every minute or every dollar spent in averted disasters based on ineffective communication.  However, for a game with deadlines to meet, or experienced developers, either the wire frame or the paper prototype will be sufficient.  Alternatively some amount of both could work.  Much like a Game Design Document, mostly complete is usually close enough to get started.  Just don’t forget to update as the project changes.  As Rules for Revolutionaries says ‘Don’t worry, be crappy’.  As long as you ‘Churn baby churn.’

Wire frame Resource Kits

Ralph was kind enough to post a .pdf file of the mock up they used for the iPhone.  You can find that on his blog.  This document is great for printing out and hand drawing your game.  If you want something a little more digital, or for the iPad, check out this post on speckyboy which contains a Wireframe kit for the iPad.  Or perhaps this one with an Android kit and iPhone kit.  These resources are provided under a ‘pay what you like’.  If you do some serious development with them, please provide the author some remuneration.


As a hobby game designer looking to become a pro, you absolutely should build a game design document and a paper prototype of your game before coding begins.  Should you do this before assembling a team or after?  Honestly I have no opinion on that yet.  It can go either way.  You might need a paper prototype to convince a team to work with you…  Or you might have a team of passionate friends that would enjoy taking the time to make the prototype.  You could even start a monthly prototyping session just for the fun of it.

Some professional game developers note that there are limitations to paper prototyping and pit falls associated with creating a game design document.  Their warnings should be heeded.  For example making a paper prototype could cause your game to feel like a board game.  Players are going to be able to detect remnants of the foundation during play.  My advice is to wire frame and prototype anyway.  Especially if you are just starting out.  Polish the process until it’s an art form, and then you can start to move beyond those foundation documents.  Besides you might actually want to make a strategy game.  In which case, feeling like a board game is no problem.  Feeling like an award winning board game is not a bad thing for your first game.

Of the many things that BigCity did for The Tap Lab, increasing Foosball skill was not one of them.

Dave showing off BigCities ability to teach Foosball.
There were a lot more pictures taken from my visit to Tech Stars.  Check them out on imgur.  Including a full view of the TechStars Logo!  Sorry for cutting it off earlier.

Images are all © Jeremy Springfield 2011 – I made them myself! Please ask permission before using them for any purpose.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s