SydJS App Talk

In July, 2014, I gave a joint talk at SydJS with Tom Walker (@bladey) describing and demonstrating how we about conceived, designed, prototyped and built the SydJS mobile app.

SydJS app is built with Cordova and is open source.

What's here

• iOS App PSD (with layer comps. Requires Photoshop CC or later)
• Edge Animate composition

If you're new to Edge Animate or wondering what do to with the Animate composition, I published a tutorial here.

The Gist

I made the case that interaction design (specifically motion design) is a core part of the user experience, especially on mobile, and that skipping it is both unacceptable and unnecessary. UI designers should design and prototype with interactive motion, and that developers should expect this from the designers that they work with.

I demonstrated briefly how I used Adobe's Edge Animate to setup the wireframe of the SydJS app, and then, using Edge Animate's neat integration with PhoneGap Build, turned the composition into an interactive app prototype that would run natively on iOS.

App Links

• SydJS for iOS
• SydJS for Android
• Source code on GitHub

Useful Links

• Adobe Edge Animate basics
• [Creating a PhoneGap Build app with Edge Animate] (http://www.lynda.com/Edge-Animate-tutorials/Creating-PhoneGap-Build-app-Edge-Animate/124307/127570-4.html)

Recommended reading / watching

• Prototyping UI Animation by Boris Bozic (me)
• Transitional interfaces by Pasquale DSilva
• Designing with animation (video) by Pasquale DSilva
• 12 basic principles of animation
• [UI Animation and UX: A Not-So-Secret Friendship] (http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship) by Val Head
• Designing UI Animation by Mariusz Ciesla

==========

If you have questions, comments or ideas, tweet at @bladey or @borisbozic on Twitter.