We had a wonderful event in San Francisco last night. Hamza Sidd presented how to use Sketch, After Effects, and Xcode to craft the animation used in the Uber watch app.

Video & Sample Code

apple-watch-meetup-audience

Thoughts from Hamza

The biggest thing I want to leave you with is the workflow and the practical tools for developers to be able to design experiences and for designers to develop these experiences.

~

We have to think about motion beyond what we think of today. The big first step is haptic feedback. So when a user is in a certain area its gonna physically respond to us. Apple updated iMovie to use the force touch trackpad. When you hit the end of the video timeline, you get feedback. So think about what events should trigger feedback. In the future, pixels will be less important and interaction will be way more important. Physical communication is beyond what you can see.

Notes

  • Images must go in xcassets. If you just put them into the Project Navigator, they will work in the simulator but not on the physical device
  • When designing your interface don't get tripped up by your group layout being horizontal vs vertical
  • You can change the frame rate in After effects. On the physical Apple Watch device PNG sequences run well between 15-30 frames per second. Learn more about animation on the Watch
  • You can use a JPG sequence instead, but then you would sacrifice background transparency
  • Flipbook is an alternative to After Effects. It is a Swift tool to render UIViews to image sequences for use with WatchKit, and accompanying sample WatchKit project.
  • Sketch file for Apple Watch GUI template by Meng To. 
  • Advanced tricks in After Effects to make it look even nicer: motion blur and easing
Snacks and drinks, thanks to Saddle House

Snacks and drinks, thanks to Saddle House

Upcoming events

sandbox-suites-apple-watch-meetup