Archives for May 2020

Inspiration from the Big Screen to the Mobile Screen

If you’ve spent as much time watching movies as the average person, you’re well aware that the intro or title sequences at the beginning of the movie can really set the scene for the entire film. A site called Art of the Title has become an archive for some of the most amazing introductions to cinema and television shows with wonderful critiques, examples, influences, and interviews. Not only does the site offer an extensive list of designers and studios responsible for creating this killer content, but they’ve also got some amazing, in-depth write-ups that go into the nuances of how each came into being including scripts, storyboards, and quotes from the creators.

One of my favorite shows on AMC several years ago was Halt and Catch Fire, named after the early 80s programming function in which the computer would freeze up, causing a full system reset. Programming idioms aside, you can find a great interview on their site with the creators along with a ton of behind the scenes information that extends your understanding of the show in a fun, yet meaningful way.

Other titles from the small screen I’ve been impressed are from the Marvel Comics catalog — in particular, Netflix’s Daredevil and Luke Cage which is also represented on the site. While these shows are no longer actively being produced, it does provide some insight into how they set the stage for future shows.

The big screen is not neglected, as they’ve got the Black Panther represented as well. I enjoyed watching the trailer again as it captured all of the excitement from the movie. It’s a great way to relive it from the creators’ perspective.

And lastly, the site does a great job paying homage to the classics such as Terminator, and the creepy Se7en intro with powerful typography and images that really add to the horror. Not only are they mindful of things that made movie history, but they also roll up recent title sequences into Top 10s by genre. Here’s an example:

If you haven’t spent time on the site perusing all of the great talents, I highly suggest you do. At the very least, it’ll provide inspiration for your next animation project. Check it out here.

NN/G: Accessible Animation

The Nielsen Norman Group, a longtime leader in user experience, has published an article regarding accessibility and animation best practices entitled, “Executing UX Animations: Duration and Motion Characteristics.”

While interactivity can be used to great effect in making things noticeable on mobile and web, defining a purpose to your animations is paramount. The author, Page Laubheimer, describes the various ways you can disorient and (at worst) cause seizures or sickness when animations are done without consideration given to all audiences.

Animations usually begin with a trigger, whether it’s a tap, gesture, page load, or click. Laubheimer provides wonderful examples that show nuanced interactions such as hovering over a button, tapping on an icon, or even scrubbing a timeline that indicates helpful affordances for the user.

Speed and timing are also discussed and harken to the 12 Disney Animation Principles, with overly exaggerated stop sliders and adjusted length of time so as not to disorient the user. Some of the examples refer to Google’s Material Design library as well.

The author determines appropriateness for things like duration — specifically when screens change like when a modal window comes into view. The recommendations are prescriptive (200-300ms for a modal appearing, then 100ms less to disappear for example). When it comes to easing in and out, many software programs handle it differently, which means the design to production handoff should be coordinated to ensure both teams are speaking the same language.

The ultimate takeaway is that animation is a visual language in and of itself, requiring a more nuanced approach to design. Milliseconds and easing can make a huge difference. All the more reason to create design standards for your own team to ensure you’re considering all facets of communication.

Be sure to check out this and other articles like it on the Neilsen Norman Group website and sign up for their newsletter.

Animation Best Practices

I’ve been using InVision for the past several years now at an enterprise level and am always amazed by the quality of content they put out for their customers. The Animation Handbook, a free guide for understanding UI animation, is no different in that regard.

My animation needs have ranged from loader animations to video prototypes, to actual clickthrough examples of how a UI works for better shared understanding across teams. I found this handbook particularly useful for several reasons, one of which being the great examples they cite, but more than that it was about measuring the value of the animation to determine ROI.

When it comes to the Business value of animation, the book references Headspace and the success they’ve had with their animations being used to note progress within their mobile app. As users progress, additional animations are unlocked. This is something my team and I have incorporated into one of our own applications to track Rewards, however, they take it a step further by sharing the animations on youtube as mini advertisements for the application. Watching the animation compels people to download the app because they see the value in it. This allows HEadspace to track and measure as they would any other marketing channel. Not only is it a wonderful way to provide multiple avenues for engagement, but it also can prove value through attribution.

Metrics are a huge part of anyone’s repertoire these days, and the Animation Handbook doesn’t disappoint there. It touches upon qualitative data, asking the right questions including collecting people’s experiences and feelings towards the offerings.

Take a look and learn for yourself how you can differentiate with animation. You won’t be disappointed. More amazing articles on animation can be found on the Design Better website as well.

Cartoon Animator 4

Several years ago I purchased CrazyTalk Animator and while I had fun using it, I was never really able to put it to practical use. With the release of Cartoon Animator 4, Reallusion is hoping to make authoring animated characters even more robust.

Taking a quick peek at a recent CreativeBloq review would lead you to believe that this tool is the easiest tool on the market for round-trip design production. Having seen several applications claim this over the years including Adobe’s own Character animator, I was interested to see how the product has evolved.

With a more advanced set of features the product is priced at a reasonable $99 for the Pro version. CrazyTalk Animator also came in two different flavors as does this one (Pipeline and Pro), with the Pro being fine for individuals looking to extend Photoshop, Clip-Studio Paint, or Affinity Designer.

The “killer features” or what makes this product unique in my mind are the dead simple Bones effects to control character movement and the Z-depth control, enabling you to do some pretty sophisticated parallax scrolling with it. The Bones tool comes with varios presets for how humanoid characters would behave, which saves a ton of time

And with the Z-depth feature, you can explode out the various sections of a background scene into its respective layers, affording some really fun and interesting effects.

While most of my work consists of UI animations and micro-interactions as of late, for content creators who are looking to extend their skillset into content publication via animation, Cartoon Animator 4 could be for them. They’ve got a trial on the website which is available for both Mac & PC.

CreativeBloq’s article is an “Advertisement feature” therefore take it with a grain of salt. I can say having used the earlier version of this product that it was easy to use, fun, and worked well with Photographs. I’m looking forward to giving the trial a try.

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.

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.

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.

Archives for May 2020

Footer

Text Widget

Recent Posts

Tags