Motion in UI and UX Design
In a field that is always evolving, UI/UX designers should be able to show and present ideas in a manner that captures the attention of the audience. Static interface mocks have had the benefit of allowing a designer to show off the concepts of their ideas for a project. But recently, having motion within static visuals improves a designer’s ability to shed light on interfaces and bring designs to life.
Companies are now hiring strictly on the ability to not just create designs, but create with the focus on motion to present ideas to clients. This new title is called Interactive Designer or Motion Designer. With this new title, a UI/UX Designer takes static interface designs and integrates motion into the piece, giving the design a feeling of being alive. Animated interfaces allow the audience to have a better connection with ideas being presented to them.
Being a UI/UX designer myself, I have been enhancing my skills and progressively start to include animation into work I have created. Recently I challenged my abilities by taking on a 100 Day UI challenge, where for 100 days you develop a new interface or piece to solve a problem to a prompt you receive. Through the challenge I have noticed other designers adding animation in their work. Seeing these animations made me understand that to keep up with the times and improve my abilities, I must grow and integrate animations into the designs that I create.
(UI Animated Interface I've Created)
Designing animated UI interfaces benefits the designer by improving their storytelling abilities and show concepts off to the audience.
Improvements to storytelling
As a designer, you are provided with opportunities to present your ideas and solutions for a client. Rather than having to explain the intentions of your designs or how functions should work within a static image, using animation allows your vision come to life. The audience wants to be told a story, they want to be engaged with designs. So by using motion driven UI, it allows for a better connection and that story to be told.
Human beings are naturally drawn to visual cues and imagery that stimulate our senses and imagination. Take, for example, a young child being read a story or a book. A normal, standalone static image book allows the child to use their imagination, by forming in their minds, what is being read to them. But being presented with a popup book or an interactive visual, it brings to life what the author ideas and is more engaging with the audience.
This same approach can be applied to both developers and clients, as providing a static interface can give a bare bones sense of what you are trying to convey for a project. Though, having an interactive or animated design gives a clearer grasp to the audience on how an application should look and feel.
Not only do animated interfaces improve storytelling abilities, it enhances the cooperation with developers working on a project to have a clear understanding of designer’s vision.
Better interactions with development team
Designers and developers work in unified environment where the main goal is to bring a client’s vision to life. Within this team setting, by providing animated UI designs, designers can clearly show developers how an interface should work. It also, in the long run, creates a better working relationship between the team.
Providing developers with clear visuals, helps limit miscommunication and potentially having the end-result turning out to be something that the designer or client didn’t intend for. Without having visual cues, developers are forced to take verbal explanations from designers and translate into actions seen on the screen. There needs to be a clear line of communication by having the team working together in unison to create a product for its intended purposes.
Animated designs give the designer the opportunity to show, rather than tell, how features on the interface should look and function. This process provides a better approach to development and create an end-product that the client is happy with.
Enhances designer’s ability to improve concepts
Creating animated visuals enable the designer to see whether their idea is a viable solution to the problem they are trying to solve. An idea might sound good when initially conceptualized but seeing it in motion gives a better understanding to what will and won’t work with the design.
An additional benefit is being able to take a solution to a problem and improve it further. Viewing an interface or function in motion, can expose potential flaws to the concept. Discovering these flaws in an early stage of development and providing feedback, can help improve the design process and force the designer to alter their vision. It allows the designer to take the current solution, make changes and refine it for a proper end-product.
Motion helps confirm actions
Including motion into designs brings life to actions that need confirmation from the user. With every interaction that we have with an interface, there are motions that either deny or confirm the actions that we are performing. By applying motion into visual or interaction cues, it can give a user a better overall engagement with your product.
Programs that can be used
To be able to create animated interfaces, there are a multitude of programs that are able to be used to bring ideas to life.
Adobe Photoshop
Adobe Photoshop is the go-to tool for many designers working on either a graphical image for a project, looking to edit images or even create UI interfaces. Through Photoshop the designer will create the overall look to the interfaces that users will interact with.
I have used Photoshop for years as my main tool for working on user-interfaces and the designs that I have created. With the amount of tools provided by the program it might seem overwhelming at first usage but after a few experiences at creating designs, a novice can master many of the features in no time. Though there are limitations to the program compared to other UI design tools such as Sketch 3, it still does its job in providing a great foundation to getting started in user interface design.
Using Photoshop in conjunction with After Effect allows for ease of importing layers from Photoshop into After Effects to create the intended animations.
Adobe After Effects
)
Adobe After Effects is a motion graphics and digital visual effects program that is used to composite the animation for the design.
After creating the designs in either Sketch, Photoshop or any other graphics tool, you will import the files into After Effects to create the final animation that will be presented to either the developers or client.
Sketch
Sketch 3 is a fantastic vector based UI/UX designing and development program that allows for designers to easily create interfaces for mobile and web applications and sites.
I recently have purchased a license for Sketch and have noticed the variable amount of benefits it has over Photoshop when it comes to working on UI designs. Sketch provides resources and symbols that are prevalent in many Android and iOS applications, allow for the ability to create a mock for these platforms extremely easy and precise.
Prototyping
Outside of creating animated UI interfaces using programs like Photoshop and Sketch, designers also benefit from the ability of creating prototypes of their designs to present to both developers and clients alike. It is an integral part to the design process in the early stages of development.
Programs such as InVision, Pixate and Flinto allow for designers to take screen mocks that they designed, group them together and create an animated prototype. With these prototypes, designers can provide their audience a sense of how an application or site is supposed to function and flow. It allows for better user engagement and gives direction to designs. Development teams also benefit from prototyping as they are able to review early concepts of application, share feedback with designers, understand potential flaws and improve solutions to problems.
Previously I have used Flinto and InVision for various projects I have worked on and it has improved my ability engage with both clients and my fellow co-workers. By providing the team with an animated visual of how navigation should flow or functions should work, it also improved overall development on tasks.
Conclusion
As the world of interactive design continues to change, it is up to designers to evolve themselves and improve the way we share our ideas. Static interfaces can do justice by giving a client or fellow developer an idea of what the product is intended to look like, but doesn’t fully engage with or enlighten the audience. Designing with motion, though, allows the designer to clearly show the intentions of their designs.
Switching to animated interfaces creates a human approach to designs and allows the audience to have a better connection with your brand. Gone are the days of static designs and welcome are the times of alive interfaces.