The main point of the design is to amaze users. When you developed some nice functionality, remember that without an appropriate design it would be not discovered by the users. Because the first thing they see is the product’s wrapping. Motion design is one of the most powerful solutions to accent the way product works. Discover the power of motion design!
In simple words, motion design is a design created using animations and visual effects. 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. And there’s nothing more attractive than a web or mobile app created using motion design.
Why so popular?
Visual feedback is crucial for any user interface. With the feedback, users feel the control, which means knowing and understanding their current context in the system at any given time.
UI design nowadays largely depends on motion design. Not only is motion becoming increasingly important to interface design, it’s starting to drive the entire UI. Remember how iOS podcast app is animated? Sometimes the user will remember not even a static image but the way it’s animated. The animation will compliment your design and brand identity. Motion design is a powerful tool to keep your users oriented in your app.
Nick Babich said: “Using animation help bridge the gap between software and human nature by adding the dimension of time to the product“. And this expression tells everything you need to know about advantages of using motion design. Any other reason we can recall would be just a confirmation of what is said here. Smooth transitions and good animations in the onboarding flow has a tremendous impact on how first-time users will engage with the app.
Let’s get down to details. Motion design can incorporate:
- 3D objects
- video etc.
In mobile UI design all of these elements can be animated for 3 key uses (primarily divided by Nick Babich):
- System status (such as loading indicators and notifications)
- Navigations and transitions (such as hierarchy and connection between elements, function change etc.)
- Visual feedback (such as acknowledgments and results of the actions)
What to pay attention to?
The point isn’t to create smooth transitions, but to establish timing: where design elements will show up and work together in a live composition. It is also used to get a feel for how the visuals will align with the voiceover file.
To ensure good UX in motion there should be an empathy. Right motion design answers the following questions:
- What is the most important content on the page?
- How does the user know that the task is completed by the app?
Make sure you provide good specs. Filling the gap in the communication between the designer and developer is often a challenging subject. It is necessary to translate the visualization into parameters that will allow the implementation. The developer has to receive such data as:
- timing (good specs should include delays between each sequence)
- easing curves (like standard, sharp etc.)
- type of transformation (transition, scaling and so on)
- a short information about an element which is interacting at a particular moment
Where to use motion design?
The most fitting places to add animation in design are at moments of change. Animations can enhance every point of interaction and reinforce the actions a user is performing.
Due to this, there are two kinds of motion design defined:
- Scripted/canned motion — animations that automatically occur without the control of the user (such as when you tap an icon on your phone and there is a motion before it opens).
- Direct manipulation motion — a motion that occurs as a result of an interactive action initiated by a user (when a user deletes something from a list that triggers that motion).
Why use motion design?
Because users enjoy well-designed solutions and animation. Well-designed animations make the experience feel crafted. Don’t you agree with this as the user? Motion design has become a fundamental element that may decide if the solution will be successful or not.
- Read a great article of Nick Babich about Bringing Mobile Apps to life through motion
- Find examples of motion design on Behance, Uplabs, UI Movement, App Animations and on Pinterest
- The transformative power of motion by Paul van Oijen
Thank you for your attention!