Calculating time difference with sky colors

Sometimes you just want to know what color the sky has in Tokyo.

It seems there are two main reasons to use a timezone calculator. The first one is to find out if you can call them without waking them up in the middle of the night. The other one is to find the least devastating time for a meeting between two or more timezones.

In the first case, you probably don’t need the exact time, but more something like the color of the sky.

In the second case, you need some exact times for the meeting invite.

So Kenneth and I made a website that does that – and only that. You can check it out on local-time.in

localtimein

We also made a Chrome extension. In both versions, you can either type in the hour you want to try out, or just use the arrow buttons to cycle through the day.

timein-ext-final

Ideas? Bugfixes? Github.

A remote control with one button

autoremote

I posted this idea to Medium a while back. The channels on your tv are currently ordered by their channel number, or, if you have cable, by which channel pays the most. But what if they were ordered by how interesting they are to you, right now

Thinking about it since then, and monitoring my own use of cable tv, I feel quite confident that flow tv will be of less and less importance. I took this position 10 years ago, and then slowly crept back to thinking that it might have a role after all. You’re hiring the TV to get relaxed and distracted. For that flow tv is great. Except it isn’t. There’s just too much junk, and you always come in somewhere the middle of a show. I still want a one-button remote, just without the flow channels. It should learn that I watch news around 10pm and the occasional talk show after that. Not at exactly that time, but in that order.

Medium: How a remote control with just one button could make your TV great again

Facebook Home in in 20 minutes: Designing and prototyping UI in After Effects

fbhomeIt should just, boom, rotate, and make a swooosh-like turn at 90 degrees and then bam, bounce a like jelly in outer space, but more whop-whop-bang in a microwave. Right?

Blank stares. One guy nodding. At his phone. Still, it was the best explanation I could do in 20 seconds. In fact, it was the best I could do without spending hours hacking Javascript. For something we might decide to abandon the instant we see it.

Getting to know the feature
Product design is really just a race to getting to know the product. It’s about balancing interpretations and knowledge gaps as smoothly as possible, but really, we’re just guessing until we are able to fill the gaps with animations, prototypes and eventually the final product.

know

Quartz Composer

Embraced by Apple and Facebook, QC seemed like a good idea to try out. It’s fun to work with, but it turned out to take up a significant amount of time – 3 times more than After Effects, from my experience. Also, it can seem a bit confusing to some people:

Pasted_Image_8_1_13_12_00_PM-2
(slide from a QC talk at Evernote)

When I decided to check After Effects out, the only tutorials I could find were how to make it look like your car exploded and hatched alien blood. Not plain old interface design. So I decided I’d make one, and I decided that basing it on David’s excellent tutorials for Quartz Composer might be able to help you compare the two options.

What we’ll build

This is the final animation as it will look (before we add it to the skyscraper)

fbhome

Part 1: Basic animation

1-chathead

Using just this you’ll be able to do 80% of anything you would ever want to do. Not bad for 3 minutes.

Part 2 and 3: Don’t repeat yourself

2-flyout
This gets a bit hairy, but hang in there, this can save you hours.

Part 4: Anchorpoints

4-alert

Easy one. Learn how to make it look like the speech bubble comes out of that guy’s mouth.

Part 5: Modal dialog

5-message

Bounce animate a big modal dialog and make the rest of the interface darker.

Part 6: Exporting the video file and creating an animated GIF

The secret sauce. Paste the GIF into G+, emails or presentations and your audience will know exactly what you mean.

Part 7: Motion tracking onto a real skyscraper

fbhome It could be any object, really. Like a mobile phone if you’re into those.