Prototyping Richer Animation for Mobile Apps

A Modest Proposal Introduction Today, flat design is the de facto visual language for both app-based & web-based user interfaces. Bold, clean and monochromatic visuals define the look and feel of what we expect apps to be – and for the most part this is a welcome change over the skeuomorphic interfaces of 2012 & early 2013. (This post won’t get into the differences between “Flat” design and Skeuomorphism. If you’re unfamiliar with these concepts here’s an article with a good overview: While flat design promotes simplicity and familiarity for the end user, it can limit the amount of brand identity your app can get across to the user. Also, the whole flat design aesthetic gets a bit boring after a while when everyones doing it. Riddle me this: if everyone’s app is flat, is anyones app really flat? If you haven’t already, you should definitely read Sophie Paxton’s article on the use of animation in mobile apps – “Your UI isn’t a Disney Movie”. ( “Don’t let your animations get in your user’s way. There’s a reason why an airplane’s navigational UI doesn’t use any animation.” This article is what got me thinking about using animation in a more traditional way in apps. Yes, animation should never get in the way of the user’s experience but that doesn’t necessarily mean we can’t use “gratuitous animation”. Gratuitous animation can be fun and quirky, and if your brand image is fun and quirky then isn’t that a good use of a little bit of purely aesthetic visuals? A Modest Proposal Empty states, loading screens and error states are three common screens found in almost every app, and if you think about it they’re a great place to get your brand across. My proposal is to use these states to create a more fun user experience for an otherwise boring but fundamental part of the app. Actually, it’s not really a proposal – I’m not really trying to convince anyone of anything. This post is more along the lines of “A Writeup Of The Exploration Of A Potentially Poor Idea”. But “A Modest Proposal” is less wordy, so there you go. Using Marcus Magnusson’s method, (Described here: I’m going to prototype a similar 2d animation for a DoneDeal empty state, i.e. a “brandable” character doing something maybe a little bit silly. Character Design Since time is of the essence & this is only a prototype (and I’ve never used Adobe After Effects before), I decided to keep character design very simple only coming up with a few basic designs before deciding to go ahead and animate it. I initially decided on an evil robot themed character, because I thought the geometric shapes would allow me to get started with something very visually simple so that I had more time to animate. However these initial designs were even a little bit too complicated, so I simplified it down again. The sketches were scanned, then drawn up as individual components in Bohemian Coding’s Sketch before exporting each moveable part as a single png image with an alpha channel. Eventually I ended up with a robot that looks like this: I thought I might as well make it a robo-suit instead and put a cat inside it. The head shape was made in sketch, and the facial features were drawn separately in Photoshop. At this point my “rig” was completed and I had to embark on the infamously tedious task of… Making A Robot Move In Two Dimensions (In After Effects) I started off by creating a new project in After Effects and importing all the images. A new comp was created and each image component was added to its own layer. At this point I pieced all the images together to essentially “reassemble” the image. The anchor point of each layer was set to accurately build the skeleton of the robot. For example the top of the lower arm was connected to the bottom of the upper arm which in turn was connected to the torso. Spooky. The parent of each image was also set to its respective anchor parent (shown in the screenshot above). A stationary robot doesn’t make for such an amazing animation so I decided I had better make it move in the form of a “bouncy robot walk” (a moon walk was also on the cards but that would have been overly ambitious for a first attempt). To create the walk cycle I followed one of Preston Blair’s example walk cycles, starting off by setting the keyframes for the legs and feet and working my way upwards. To keep things simple I set the keyframe for each component’s position/rotation every 4 frames to start with, and then tweaked it until it looked somewhat decent, shifting and offsetting the motion of some components as appropriate. Animating the secondary motion for the arms was a particularly tricky challenge, but it made all the difference in the end. An “easy ease” was applied to taste and then the animation was complete (after many hours of indecision and refinements). With the hopes of keeping the animation more performant on mobile devices, the composition was exported as a png sequence with no alpha channel at 30fps. I could have exported the animation with a transparent background, but since I know the background colour of where the final destination of the animation I thought I might as well give each frame its own background colour to improve performance. UIImageView has an animationImages property that the exported animation was passed into. I also set the animationRepeatCount property to 0 so that it will infinitely loop. The animationDuration property was set to 1. Conclusion Here is the final walk cycle: And here is what the animation looks like on the empty state screen in the app: For a prototype animation concept I’m pretty happy with the results. After Effects is very intuitive, surprisingly easy to use & yields some pretty clean results. Obviously the animation itself isn’t perfect & the character would need to be tweaked to be more in line with the brand but I think that it does convey the lighthearted image of DoneDeal to an extent… It should definitely be more yellow though. @_stephen_walsh_