Our Motion UI Crushes

By: 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. 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.

2. Stink Digital’s clock display.

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.