Motion Design is the SFX of UX Today

by October 29, 2018 2 comments

Authored By: Sharan Grandigae, Founder and CEO of Redd Experience Design

Motion design is the discipline within the graphic design that concerns itself with the question of how to bring animation and visual effects on digital screens. It adds an essential element of expressiveness to digital media today. Everything from digital communication to advertisements is influenced by it and are seeing drastic shifts in the way these things are designed. But arguably the field that has seen the biggest impact of motion design has been that of user experience (UX). The way we structure an interface and think about user experience within an application or a website has changed entirely since its advent.

The Origins

Design, in the world of computers, was influenced largely by print design in the early stages of software interface development so it was natural for them to be static in nature, too. But this idea was being challenged constantly with many designers trying to build in motion design into application interfaces. The most primitive ways in which this was done was to have lights within interfaces blink red and green to indicate things like the computer is connected to the internet or the user is logged in or other such states of the application.

I remember seeing these in early interfaces and being delighted by them even though they barely qualified as motion design. But making these things happen was hard and could only be done in partnership with a programmer. So most interfaces had static graphics within them.

One of the big shifts in user interface design came when the WWDC published the specifications for HTML 5 and CSS 3 (two technologies essential to making the World Wide Web what it is today) in 2014. Digital user interfaces clearly went from being offshoots of the print design world to occupy a pure-digital world where motion became an integral part of the framework.

Why it is Useful

A big part of user experience design is about making it simple for users to understand how to use an interface to achieve their goals. Motion design is an important tool in our toolbox for achieving this primary objective.

For example, until recent times, if we wanted to bring a user’s attention to a specific button on a screen, we could do it in a few different ways — by making it bigger, or bolder or placing it at the top of a screen. But with motion design, we can keep the button small and sleek but just make it fade in ahead of all the other elements on the page so it becomes the first element that catches the user’s attention.

In addition to communicating, motion can contribute to the tone and feel of the application by bringing levity or seriousness to the application as desired. For instance, if clicking a button makes it bounce, it makes the application feel different from an application where the button fades in and out elegantly.

In addition, motion can also be very helpful in providing guidance. From arrows gliding around a screen pointing you to various screen elements, subtler motion design can help guide a user through an application. If a user is scrolling down a list and reaches the bottom, a small bounce may help tell the user that this is the bottom of the list and you can’t scroll further, or if the box that asked you for your password shook horizontally, it may indicate to the user that the password that was put in was incorrect. These are much nicer than to put up a message saying: “The password you’ve typed in is incorrect”.

Previously, applications could also use motion design to make them appear faster than they actually are. Just like in elevators where a mirror was added to distract a user from actually noticing how slowly the elevator was moving, a wheel or ball spinning fast on the screen when it is communicating with a server on the internet may provide the illusion of the application working really fast. Many Android phones have started to remove lengthy animation within the operating systems to make the phones appear to be faster than comparable phones that don’t do that.

Tools Used

After development tools started providing methods to integrate motion design into web applications, interfaces on mobile and desktop applications quickly followed suit and began offering options for motion design within their development platforms.

Tools like Adobe’s After Effects are used to help create motion graphics,  whereas those like Framer are used to create in-page animations and also page transitions. But the field is far from conquered yet and new tools are being released every day that try to make the task of creating motion design simpler.

The principle is a frequently used alternative to Framer that doesn’t produce the code behind the animation but is simpler to create animation and transitions with and is useful to designers in being able to communicate their ideas to developers so they can programme them into the applications when building them.

Dos and Don’ts

Once you use motion design within the interface of your applications, it will be very tempting to use it everywhere. However, this must be resisted as motion design should only ever be used in a supporting role. It adds flavour but if overused, it may render the entire application unusable.

In addition, some people are susceptible to seizures if the graphics on the screen have too many flashes, so this must be kept in mind when integrating motion graphics into applications as well.

Trends in Motion Design

Motion design trends follow closely with those in graphic design but also have unique ones that have sprung up from within the field itself. The following are some recent trends:

Faux 3D — This is a trend where flat style images are spun around to make it look like there is a third dimension to them.

Isometric Views — This is a style that looks at the subject from an angle above, kind of like watching chess pieces on a board. It provides a rich feel where we can use depth to express more.

Seamless Transitions — This style of motion design morphs one object into another seamlessly, creating very interesting visual effects that support linear storytelling techniques.

Big Type — The use of large type with animation creates a bold statement wherever it is used.

Just as SFX adds a distinct flavour and personality and has become an essential device in filmmaking, motion design has become indispensable to application design today. With user experience design becoming more and more widespread and crucial in the world of software, motion design is one of those skills that is going to become very important as well. And it’s about time!

2 Comments so far

Jump into a conversation
  1. Savvy
    #1 Savvy 30 October, 2018, 17:22

    One of the most dramatic—and easy—ways to draw attention to a design or specific element is through appropriate use of white space. While many designs have trended toward more packed full-screen designs recently, there’s a growing shift back to open space.

    And there’s a reason for it.

    This technique and design make content the focus for users. Elements surrounded by white space are obvious focal points. The simplicity and balance of such as design is easy to engage with and isn’t overwhelming to the user.

    Reply this comment
  2. Designer
    #2 Designer 1 November, 2018, 13:07

    I would like to notice that motion design is also great instrument for any type of business to make promotional or presentation video of its service or product.

    Reply this comment