The work begins, Part 1 – “Building the skeleton”

In May of 2009, about a month after we first met Johnny, we began the real work of making the app.

It began with me needing to tell Johnny—in more detail—what we wanted so he could turn the idea in our heads into an iPhone application. To do this, Johnny asked me to create “wireframes.” Wireframes are just what they sound like: a skeleton of the idea sketched out in frames that represent each step or screen. Often, in the world of web or software development, you hire a design firm to listen to you talk about your idea and they produce the wireframes for your technology staff to use as a skeleton or even a prototype. If you find yourself needing to create wireframes, you may in fact want to hire someone to help, but you can do it yourself. You just need to convey the steps and ideas in a logical, visual way so that someone else can understand better what you have inside your head. You can use any program that can make a flowchart or you can write it on sheets of paper with a pen.

I took the written description that I had sent to our family friend, Mike, several months earlier and put that into outline form in a word processing program to help me see the sequence of steps. After a little editing, I tried to imagine the steps as the sequence of screens you would see in the application and I wrote each of these out in a “frame” using a basic paint program such as you can find on any computer. I did this mostly with just words and arrows like a flow chart, but I did draw some pictures, too. It has changed a bit but here are a few thumbnails of the original wireframes to give you an idea of what they can look like.

Frame 1	Frame 4
Frame 7	Frame 9

Johnny looked these over and asked me questions about anything that didn’t seem clear to him, such as “where in this sequence do you want the user to click to take a picture” or “what if in screen 3, someone makes C happen instead of just A or B?” We spent some time emailing back and forth about the steps and I made updates until we agreed it made sense.

From this process, we determined that the “version 1” of our app—the prototype—would be just a few screens. There would be a screen where you could take a photo from your camera or saved images and a screen where the head would appear on a generic body sitting over a tank (with a generic background and some balls in the foreground to throw at the target). Then, after the player throws the balls and hits the target to get the person in, there would be one more screen with a menu to let you go again or send the final image as an email to someone or possibly post to Facebook or Twitter. Essentially, this was 3 screens. How complicated could this be? The schedule was for this to take 1 month. I secretly bet on 2-3 months.