Sequential Pixel

Digital Inspiration for a Creative World

mobile

Drama, an All-in-one Design Tool

For UX designers today, there are a plethora of design tools that they can use to animate mobile interactions. It’s helpful to standardize on a short list of 2-3 that you will be using regularly in your workflow. For us on the mobile side, that has been Sketch, InVision, and some combo of After Effects, Principle, Flow, Keynote, and/or Anima.

Because there are so many options, it can be hard for upstart companies to stand out among the crowded marketplace. Drama, a new tool introduced by a company of the same name, bills itself as an all-in-one prototyping, animation & design tool.

On the surface, it would appear to have a lot in common with its brethren. You can see from the application environment that there appear to be screens/artboards that connect to one another with drivers that no doubt make up the interaction portion of the UI. There are about a half dozen example files you can download to get you started. With the exception of some 3D specific features, most showcase functionality we’ve grown accustomed to in mobile apps. They feel realistic and appropriate despite them being limited content-wise.

Example Drama Animation Tool Screens

A quick look at the feature set reveals that transitions are very similar to other animation applications in that you transition between scenes with a timeline editor. One of the more exciting things (and something I’ve grown to love about Keynote) is Magic Move, which auto-animates layers with the same name. This makes transitions incredibly easy. But don’t let the ease of use fool you, underneath the hood of this app hides a powerful animation engine that supports 3D layers, a version control system that looks easy to use, and some truly elegant micro-interaction ability that provide seamless integration with your iPhone via mirroring. Features shown on cards from the Drama application

The software runs $9 a month with a 14-day trial. If you’ve got some time, it’d be worth taking a look to see if it fits into your workflow. I’m imagining if you’re looking for something that does a bit of everything and aren’t already heavily invested in other tools, this could be the solution for you.

Mobile UI Animation as a Driver to Better Experiences

Woman holding a phone with her left hand and tapping with her right

The thing I appreciate most about Nick Babich’s article on UX Planet entitled “3 Key Uses for Animation in Mobile UI Design” is the liberal use of example animations as a way to communicate core concepts.

When talking about system status, he’s clear to delineate between loaders, refreshes, and notifications – all important aspects for users to understand that the system is still working. There’s the notion of perceived time that Babich seems to capture well with his reference to creative progress indicators.

With regard to Navigations & Transitions, he again brings examples of complementary design, transport effects, relationships. One thing to be mindful of with transitions is Fitt’s Law, which describes (among other things) elements being within the same range as one another. His explanations do a nice job here of that.

And finally, give the user control by providing feedback. While are mobile touchscreens are an abstracted view of the physical world, we should expect to have immediate and responsive feedback that empowers the user and gives them confidence.

Take a look at Nick’s other work and make sure you clap back for all of the great articles he’s put into this original post. For a deeper dive you can also reference some of the tools and tutorials links as well.