Principles of UX in Motion. Part 2

Ruslan Galba
@hellotegra
Published in
4 min readFeb 27, 2020

Principles of UX in Motion. Part 2 🏃‍♂️

Courtesy of @bazen.agency

How animations can get UX in your project better and kore engaging. The second part of the amazing learning experience!

Thank you @easyease_ae for doing this for @bazen.agency and special thanks to Issara a person that taught us this @uxinmotion

07: Overlay

Overlay supports usability by allowing users to utilize flatland ordering properties to overcome a .k of non-spatial hierarchies. To land the plane a bit, Overlay allows designers to use motion to communicate location dependent objects that exist. behind or in front of others in non 3D space.

08: Cloning

When new objects are created (and from current objects), it is important to narratively account for their appearance. In this manifesto, I argue forcefully for the importance of creating a narrative framework for object origin and departure. Masking, Cloning, and Dimensionality are three usability based approaches to produce a strong narrative.

09: Obscuration

Similar to the UX in Motion Principles of Masking, Obscuration lives as both a .atic and temporal phenomena. This can be confusing to designers who don’t have experience thinking temporally -that is, the moments between moments. Think of Obscuration as the a, of being obscured and not the state of being obscured.

10: Parallax

‘Parallax,’ as a UX in Motion Principle describes different interface objects moving at different rates. Parallax allows users to focus on primary actions and content while maintaining design integrity. Background elements ‘recede’ perceptually and cognitively for the user during a Parallax event.

11: Dimensionality

Critical to User Experiences is the phenomenon of continuity as well as the sense of location. Dimensionality provides a powerful way to overcome the flatland non-logic of User Experiences. Humans are remarkably adept at using spatial frameworks to navigate both in the real world and in digital experiences.

12: Dolly & Zoom

Dolly and Zoom are filmic concepts referring to the movement of objects relevant to the camera, and the size of the image its& in the frame smoothly changing from a big shot to a close up shot. In certain contexts, it is impossible to tell if an object is zooming, if it is moving towards the camera in 3D space, or if the camera is F, moving towards the object in 3D space (see below references).

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

--

--

Ruslan Galba
@hellotegra

Increasing revenue for DTC brands via Facebook / Google ads 🚀Growth Strategist 🤘 Founder @hellotegra growth team 🤖 $5M+ profitable ad spend in 2020