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.
- 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.
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.
- 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)
- Prototyping UI Animation by Boris Bozic (me)
- Transitional interfaces by Pasquale D’Silva
- Designing with animation (video) by Pasquale D’Silva
- 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.