This week I jumped into the task of wireframing my next app. The app I am working on is a iPad version of an app I already have created so the only thing left to do was the iPad UI. But, for lots of reasons I needed to get help to develop this one so I needed to learn about wireframing.
What Is Wireframing?
For those who don’t know, wireframing is simply drawing out each screen of your app and they laying out the flow that you intend users to follow. By flow I mean: what buttons (or other control) will lead to what screen. This activiity is typically used by a project manager to communicate to first a graphic designer and then a programmer.
Usually, the project manager is me as is the graphic designer and programmer. But, this week I am only the project designer who is using wireframing to communicate with another developer.
How To Wireframe Your App
My first “wireframing” activity involved me drawing on some printer paper and then programming off of that. But, if you working with remote programmers (like me) then you will need some electronic. Of course, you could scan in your drawings or use a desktop tool.
What I used to wireframe my app was Keynote. This is Apple’s presentation tool (it’s like Power Point) and the reason I use it is that Keynote makes it easy to create simple shapes. My strategy is to layout my UI only using black and white squares and circles to represent user controls and screens. That way, I have something I can give to a graphic designer if I want her to create something unique.
Of course, if I want to stick to standard UIKit controls I could use a tool like Keynotopia. This is a Keynote template that you can add into your presentation that gives you all the graphics that you would see in a typical iOS app. Keynotopica also includes stuff that you can use for Android and traditional web design.
Wireframing And More On The iPad
Now you might think that the iPad would be the pan-ultimate tool for wireframing. It’s touch screen is basically a drawing pad that. Over the past year I’ve looked in vain for a tool like this. That is, until now…
The guys at Hot App Factory also think that the iPad would be a great wireframing tool so they went ahead and created a new iPad app called App Cooker. Now even though I didn’t get a chance to use App Cooker before they released it this week I was able to play around a bit with the app and it looks promising.
You can basically create the UI for your app right on the iPad and App Cooker gives you plently of help. You can add the UIKit elements that you expect and they just snap into place. App Cooker (like Keynote) gives you an easy way to create your own shapes and colors. You can even import your own pictures and graphics from the photo library.
One really really nice touch that would have saved me some time with my developer is the “linking” tool. Basically, once you have created a bunch of screens for your app you can link each one to a user control effectivity creating a map that shows your app’s flow. That’s a real help for a difficult task.
BTW: App Cooker also ships with a few more tools to help you with your app project (icon builder, app store description, help with budgets and forecasted profits). App Cooker is available today for only half price so if you act now you can get a deal (this is the early adopter price b/c they are adding more stuff and will raise the price once they are finished).
What I Learned From This
The more detailed and explicit that you can be to a developer the better. Luckily for us there are plenty of tools to help get this task done. Stay tuned to find out how my own wireframing adventure goes.
No comments yet.