Inspiration

Our Motion UI Crushes

November 14, 2016 | Citizen Inc.

Citizen Inc.

Sometimes an animation comes along and stuns us with how beautifully it deploys motion, conveys a mood or simply delivers information. This is a love letter to our favorite motion UI examples.

1. Gretel NY’s work with Netflix’s The Stack.

netflix

Metaphor
The metaphor and motion of the stack highlights the value and organization of the Netflix service. According to Gretel,“[The stack] implies both the infinite, ever-changing catalogue and the custom-curated selections.” It is endless, and always changing.

Z-Axis
The Stack is a killer example of intentional z space. The z-axis (the plane that appears top-most) is often overlooked in digital design. It can be a challenging dimension to pin down, as it’s technically infinite. The Stack’s system communicates the endless nature nature of the content without feeling overwhelming.

2. Google’s brand ID.

We love this animation because it is supports and enhances the user experience. There is nothing worse than meaningless motion—when it’s just tacked on to provide quick delight or show off a new capability. Motion should support an experience. Google’s animation is restrained, purposeful, and packed with nuance. The abstract movements are clever, expressive, and perceivable. The motion feels like it’s both listening and responding to the user.


User Feedback

Providing users with clear and immediate feedback is a core principle of great interaction design. Google’s dots accomplish this by acting as a bridge between the user’s action and the anticipated result. It hears you. It understands you. It wants to loop you into what’s going on behind the scenes.

Improves Perceived Performance
The perceived performance of an experience can be more impactful than actual performance. Google’s motion is positioned to make the user experience feel faster, and more immediately responsive to the user’s actions.

3. Active Theory’s work on Adult Swim Singles.

Intentionally Gorgeous
Adult Swim Singles is like a charming online advent calendar mixtape. The first-billed motion at work here is less functional and more an exploration between sound, color and movement. The subtle feedback animations that radiate from the control panel and the slowly shifting gradient background feel just right for the experience.

The motion here is just a beautiful blooming effect that keeps on giving the longer you linger on the page. It’s a humbling display of skill and living art.

4. Stink Digital’s clock display.

Subtlety
We are big fans of subtlety in UI animation. Stink Digital does a great job with understated animation, using it to direct user focus and add a touch of personality without getting in the way or distracting the viewer.

This row of international clocks at the bottom of the home page is a great example of that. As you scroll to the bottom of the page, they animate on and come to a stop, with the city label acting as the hour hand. Hovering reveals some nice illustrations and clicking takes you to the agency location page. It’s a clever treatment for a footer area that’s usually overlooked.

At Citizen

In our own work for clients, Citizen strives to consider motion as an integral part of an experience. As a discipline, it must be given equal importance in creating a digital product because it overlaps and touches every other discipline. Not strictly a part of user experience or user interface design, motion blends between lines like a smudge stick on a work of charcoal art: it brings the design elements into harmony with each other. In understanding that principle, Citizen works with animators as it works with other key creators—folding them in early in the process and listening to their input to help mold solutions.

As animators blur the lines within an experience, the lines between animators and designers themselves are becoming more blurred. Designers now work in tools like Principle and Invision to better translate their static ideas into smooth concepts for our clients to understand. For this reason, animators and designers must work closer together than ever to learn each other’s skill sets and cross-pollinate for more effective solutions to complex problems.


Do you love motion, too? Reach out to us on Twitter and send us your UI motion crushes! Get in touch @pluscitizen.

Author:
Citizen Inc.