iAd Producer is a favorite of mine (I actually worked on its design for awhile at Apple) it's a little-known but extremely powerful tool from Apple. Think of it as "advanced Keynote", or "actually accessible Interface Builder". Alas the app is meant for not-so-popular content like iAds and iBooks widgets, but it can easily be repurposed to prototype iOS and Mac apps. It handles UI elements, screen flow, and animation really well. Better yet, an iAd project is based in HTML5, CSS3, and javascript which a lot of designers are already familiar with.

Here's a look at how iAd Producer works:

Overview

Tip: You'll see (annoying) default iAd UI overlays on your screens. You can open the app's package contents, give yourself permission, and replace those images with empty ones instead 🙊.

iAd Producer's main screen shows the flow of your app. You can start from scratch but there are tons of "iAd Blueprints" templates that have prebuilt navigation and actions. There are two types of screens you can add: Pages and Shared Layers. Pages are, well...pages, and shared layers are reusable UI you can place across multiple screens (like a navigation menu).

Objects

iAd Producer is a drag-and-drop program so all your elements will come from the object library. The library provides default iOS UI but also comes with some fun stuff like 360 views, interactive drawing, maps, webGL, and more. Objects can be nested within each other (like the gallery I nested in a scrollview above) and are highly customizable. And if you still can't find what you're looking for, there's an HTML object that let's you write your own code.

Animation

iAd Producer gets animation timing really right. Recognize the UI? Keynote adopted it in its major update. If you open up the Action sidebar, you'll see all the various properties and Keynote-like animations you can apply onto object (they're all made from CSS-transitions). This includes keyframing your own animation. The timeline UI let's you to scrub through your animation or play back only certain parts of it, which is a real help for tweaking timing (and something woefully missing from Keynote).

Events

In addition to animation, you can set up actions to trigger when an event happens on an object. In the example above, when I tap on this button it will change the color of my drawing brush to grey. Events can trigger actions like navigating to a different page, playing audio, or taking a picture. You can even combine a whole slew of actions/animations into an "Action List" and call that instead. 

More advanced events can be reached in the Code panel. I wrote this snippet of javascript to tell my slider to change the size of my drawing brush based on its current value. As you can see, iAd Producer generates all the web code for you so you don't have to hunt for how to access your objects. I'd also like to acknowledge how great it is that renaming objects in iAd Producer renames it everywhere in the code and doesn't break everything (looking at you Xcode).

CSS Filters!

Who doesn't like CSS Filters? No one, that's who. Filters are available for all objects (this is how the DSCO filters were made) and they're animatable. 🎉Blur filters for everyone 🎉. 

Previewing The most important part of a prototype is getting it on a real device so you can actually play with it. One of the best parts about iAd Producer is being able to download it to your phone using their iAd Tester app. You'll get some unneeded iAd UI with your prototype but it's definitely a step up from Keynote, where all you can do you is fake the interactions. It's also worth noting that you can preview your app in Safari and iOS simulator and utilize Safari's web inspector for debugging.

And there you have it! I think everyone should give this app a try. It's fantastically powerful and strikes one of the best balances between design and code I've seen in any app.

You can download iAd Producer here (you'll need a free developer account) and my project here.