animation techniques ux designers need to know

5
Animation Techniques UX Designers Need to Know Animation brings to the world of UX design the same possibilities and characteristics that make it such a useful part of other fields. With animation, the UX designer can create the subtle, interactive elements that make moving through websites, forms, and other online material easier and more rewarding. However, in order to make the most of animation in their design, there are a few techniques the UX designer must master. Following are four of these techniques. Storyboards: For any animated production, workflow is essential to efficiently creating a polished and engaging finished product. One of the foundational aspects of animation workflow is the storyboard. The storyboard is a set of drawings that outlines the development of each scene of the project. Storyboards are so useful to the animation process that every animation studio uses them in their work.

Upload: powerhouse-animation-studio-inc

Post on 10-Feb-2017

266 views

Category:

Services


3 download

TRANSCRIPT

Page 1: Animation techniques ux designers need to know

Animation Techniques UX Designers Need to Know

Animation brings to the world of UX design the same possibilities and characteristics that make it such a useful part of other fields. With animation, the UX designer can create the subtle, interactive elements that make moving through websites, forms, and other online material easier and more rewarding. However, in order to make the most of animation in their design, there are a few techniques the UX designer must master. Following are four of these techniques.

Storyboards:

For any animated production, workflow is essential to efficiently creating a polished and engaging finished product. One of the foundational aspects of animation workflow is the storyboard. The storyboard is a set of drawings that outlines the development of each scene of the project. Storyboards are so useful to the animation process that every animation studio uses them in their work.

Page 2: Animation techniques ux designers need to know

Storyboards offer a number of benefits to anyone engaging in 2D animation. For the UX designer, these benefits include increased efficiency and a more useful, streamlined animation. For instance, by sketching out the design ahead of time, the designer has the opportunity to notice and rectify problems in the design before they begin the animation. As a result, they avoid the need to redo parts of the animation due to preventable oversights. In addition, storyboards force the UX designer to think through the purpose of every part of their animation. UX design is, above all, about creating highly functional elements that allow users to enjoy a smooth and engaging experience. If animation is to contribute to that experience, it must be highly functional, serving a specific purpose within the overall user interface. A storyboard allows the UX designer to visualize how and where the animation will best serve their design, increasing its usefulness within the designer's project.

Character design :

Character design is another essential skill utilized by most 2D animation companies. It is the process by which the characters that populate an animated production are created, including their background stories, their appearances, and their personalities. Effective character design

Page 3: Animation techniques ux designers need to know

results in unique, engaging characters that appeal to the target audience. UX design, at first glance, does not require the use of characters. However, the ability to engage in effective character design is an important technique for the UX designer to master, because infusing personality into the user interface is critical to its success. For instance, any truly successful user interface must come across as an element that has a point of connection between it and the user. When the user feels this connection, they are more likely to engage with and enjoy the experience. One of the ways in which effective character design builds this connection is by effective branding. Any character, even the “personality” of the user interface, must look and act in such a way as to meet the expectations of the intended audience. For instance, a law firm would require a more understated animation than, say, an entertainment company. As a result, the UX designer needs to be able to implement the basics of character design to achieve a design that matches their client's brand and appeals to the users of the finished product.

Interactive Animation :

Figure 1http://laughingsquid.com

The point of UX design is to create an interface with which the user can easily and productively interact. As a result, the ability to create interactive animation is an important skill that the UX designer will need in order to create effective animation for their projects, because the designer can use this type of animation to improve the user's interactive experience with the design. Interactive animation within UX design is not restricted to the finished product, however. It also allows UX designers to create an interactive prototype of their design. This prototype provides a functioning example of the design so that it can be tested. This testing allows any weaknesses

Page 4: Animation techniques ux designers need to know

or errors to be caught before the design is finalized. It also allows the UX designer to test the product on a variety of devices in order to identify and fix any incompatibilities or issues the product has with any of those devices. The result is a better finished product and an improved interactive experience for the user.

Motion Graphics:

Finally, every UX designer should know how to create and use motion graphics. Motion graphics are any kind of animation that allows elements of the animation to look as if they are moving on the screen. In order to successfully integrate motion graphics into a user interface, the UX designer will need to be familiar with the12 principles of motion design created by Disney. These principles, such as squash and stretch, staging, and arc, are what allow movement to appear realistic instead of rigid and forced. Software that the UX designer may find useful in achieving the appearance of motion in their design includes After Effects animation, Photoshop, Adobe Illustrator, and more. Using both the techniques and the tools associated with motion graphics will lend the UX designer the skill they need to create realistic, engaging and, ultimately, useful pieces of animation for their user interfaces. As animation becomes ever more present in UX design, those who work in this field will need to devote more time to learning and utilizing the animation techniques that will enrich the animation

Page 5: Animation techniques ux designers need to know

they include in their designs. By utilizing storyboards, character design, interactive animation, and motion graphics, the UX designer can achieve a more rewarding, useful, and engaging user interface than ever before.