First of all, let’s get synced up. What is a micro-interaction anyway? In doing my due diligence for this post, I came across this handy definition by Carrie Cousins, who seems like a cool person. She says – “A micro-interaction is any single task-based engagement with a device.” Well ok then. I don’t know about you but I found that invigorating. Enjoy with relish. Before we get into the ‘5 mistakes,’ I want to mention that the following UI animations I am about to rip into are all from extremely talented designers. I have huge respect for them and their work. They are kind enough to offer their portfolios and ‘work in progress’ pieces publically for us to enjoy and learn from. I’ve known quite a few designers to be elitist assholes when critiquing work. That has never been my style. If I come across as mean, just know that I find design seriousness highly entertaining. I am not attacking anyone. I am amusing myself, and hopefully you, dear reader.

Almost every app has them, but no-one wants to see them. Yet these are a fundamental element in designing a product where content loading is a consideration. These little animations that progress while content is fetched serve as a reinforcement of our expectation that something is happening, and what we are looking for will eventually arrive.

Our Yalantis design team loves trying new prototyping tools. We’ve worked with Flinto, Floid, Pixate and many others. But our team has a particular affection for Principle. We published a brief review of this tool on our blog before, and now we’ll dig a little deeper into Principle’s possibilities and share some hacks and hidden possibilities we’ve discovered while working with Principle.

I think spatially, and so do you. Can you scratch your left ear without looking? Pick a booger out of your nose, without poking your brain? Remember where you left your keys? Can you type, without looking at your keyboard? Know which pocket your phone is in? Which way is up? Do you know where the bathroom is? Of course you do! We imagine multi-dimensional models in our minds, to help understand the complex world around us. We can also leverage this powerful way of thinking, to process more abstract information.

Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys. But there's little consideration about how it all fits together outside of a static comp. You tap a button and the form just ...appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.

It is time to stop looking at design as a series of static pictures that you click through, tackling transition and animation in the development stage – if at all. There are plenty of mobile prototype tools out there, but Principle stands out by better lending itself to designing for bigger screens as well.

You’ve probably heard the saying “Good design is obvious and great design is invisible.” The same principle applies to developing animations for mobile apps: a really great animation makes your app user-friendly and catches attention, but it mustn’t distract your user from the app itself. The main task of any animation is to explain the logic of an app to the user. We wanted to share our expert knowledge about designing beautiful and useful animations.

ations are great, when properly utilised they can be used for both usability and delightful reasons. I recently watched Jared Spool give a talk about Using the Kano Model to Build Delightful UX. In it, he raised some excellent points about a user’s satisfaction level and I drew a lot of parallels on how we, at Lukibear, feel about giving users delight through animations.

Have you been noticing the words ‘motion design’ popping up around the design world? Companies big and small are starting to hire designers specifically with this title. Google recently gave a talk at its I/O conference, outlining the motion language that will be standardized across Google’s product line. So what is all the fuss about? And why does it matter? Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows. For example, lets look at how animation can help when creating and deleting items.

The steady stream of new UX prototyping software continues. Last week saw the widely praised release of Principle, an OS X app that allows users to design and animate anything from multi-screen flows to individual interactions and behaviors. It’s the brainchild of Daniel Hooper, a former Apple engineer who worked on core photography apps for iOS and OS X. Hooper left the Bay Area in 2014 and moved home to Atlanta, where he was able to focus on creating Principle as a small, independent concern. I asked him a few questions about the launch over email.

When Principle first came out, it took me a couple weeks to try it out for the first time, despite all the rave reviews I’d heard about it. Mainly because it’s always a recurring cycle for designers, new prototype tool comes out > designers get excited about it > use it for a while and the cycle repeats. But the day I did come around to using it, I was blown away.

Principle for Mac, or FramerJS, and why? An important distinction to make between the two is that FramerJS requires you to code, and Principle for Mac does not allow you to code. There are obvious benefits to both, so I created this comparison.