Japan Favorites

Our 3 month Japan trip has come to an end  😭💔. Tokyo will be very missed and a more permanent visit is definitely in our future. For any future travelers, I've been slowly making a giant compilation of our favorite places to eat, drink, and wander. I don't know how to summarize this trip other than to say it was amazing and a much-needed breath of fresh air and perspective. My only travel tip is that, despite what you'll hear sometimes, there is no bad time to visit. I've now been here in the dead of winter, the rainy season, and sweltering summer. Japan is gorgeous in every season with so much to do that 3 months felt like we just brushed the surface. Now we head back to SF and LA as we plan the next leg of our trip: Europe.

The Art Island, Naoshima

A recommendation we've been getting from everyone we've met in Tokyo is to visit Naoshima Island. It's a small remote island of the coast of Okayama (southern Japan) that's full of contemporary art and outdoor museums. It took about 6hrs to get there from Tokyo but it's worth the long trip. It's basically real-life Myst, very few people and lots of hidden spaces to explore.

We stayed at the Benesse House, a hotel + museum with individual pieces of art for each room.

We stayed at the Benesse House, a hotel + museum with individual pieces of art for each room.

Yayoi Kusama's Yellow Pumpkin

Yayoi Kusama's Yellow Pumpkin

All the museums on the island incorporate the natural environment and light. (Seascapes by Hiroshi Sugimoto)

All the museums on the island incorporate the natural environment and light.
(Seascapes by Hiroshi Sugimoto)

The Chichu Art Museum (my favorite) designed by Tadao Ando is open-air and carved into the hillside. There's a special night program of James Turrell's Open Sky that takes place here at sunset.

The Chichu Art Museum (my favorite) designed by Tadao Ando is open-air and carved into the hillside. There's a special night program of James Turrell's Open Sky that takes place here at sunset.

The Art House Project is a collection of empty houses around town that were turned into works of art. Some you enter one at a time. This one houses James Turrell's Backside of the Moon

The Art House Project is a collection of empty houses around town that were turned into works of art. Some you enter one at a time. This one houses James Turrell's Backside of the Moon

I♥湯 “I Love YU” bath house

I♥湯 “I Love YU” bath house

Again, kinda eerie place but an amazing experience. 10/10 would recommend forever.

Again, kinda eerie place but an amazing experience. 10/10 would recommend forever.

Prototyping with iAd Producer

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 🙊.

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. 

8.jpg

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!

9.jpg

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