Creating a New App (step 1)

I decided I’d walk through creating a new app to replace one I’ve used for years on my iPhone that no longer appears to be maintained. The app in question is called GasBag which as near as I can tell stopped being updated in 2009 (see: http://blog.jam-code.com/).

I could just write a quick and dirty web app to store my mileage, but I figured I’d approach this as an exercise in building an iOS application with a design first approach.

At a high level, what I want is an app that easily captures my mileage, and allows me to save that information somewhere that won’t get destroyed. There are a number of features that GasBag had that I liked (for instance being able to send an email with my mileage information), and a number that it doesn’t have that would be nice (like allowing me to use it for multiple cars, or to do some data capture from a gas station receipt).

This brings me to the place where I typically start, which is to lay out the application. By starting with the visual design, I have to think about what the user experience should be, and in so doing I begin to think about what the model looks like.

At the Google Drive hackathon, I was introduced to a new feature of Google Drive that apparently has been there for some time, but I’d never noticed: Google Drive Apps. When you are in Google Drive, and you click on the “Create” button, you will see a button that reads “Connect more apps”:

That turns out to be a button that will take you to the Chrome store, and you’ll see a list of popular applications that are written specifically to integrate with Google Drive:

You can add as many of these as you might be interested in. For this exercise, I want to add a tool that I love for drawing up wireframe mockups called Balsamiq.

Balsamiq (http://www.balsamiq.com) is an awesome tool that is a bit like a web version of Visio, but is specifically meant to be used by designers to communicate UI. It is very powerful, easy to use, and produces drawings that are in essence sketches that can be built collaboratively  and are much easier to read than hand scrawled UI sketches tend to be.

So in the search area of the Drive App store, type in “balsamiq” and add that tool (Note: I believe this is a trial version, that you will eventually have to pay for, but you can use it for a few days before deciding if you want to pay them).

Once you have it added, you’ll see the Balsamiq application in your “Create” list, and get started by creating a new wireframe:

Now Balsamiq has some great information on their site and in the help, so I won’t go too deep here, but suffice to say that basically all you do is to choose the object you want to place on the canvas, set some values, and you get a nice wireframe.

Once you get the mockup looking like what you hope to accomplish, you can save it to Google Drive, create an image to share with others, or export it to the XML format that Balsamiq uses.

Dragging and dropping items onto the cavas gets you to a nice layout that you can continue to tweak easily without needing to write any code or commit to anything too deeply, and helps you be a bit more creative, since you’re working with something abstract.