As technology improves, animation becomes increasingly available in different aspects of design. It wasn’t that long ago that people were amazed at loading animations for their mouse cursors; today, it’s the rare corporate website that eschews motion graphics in their entirety.
The trend isn’t slowing down anytime soon.
Animation can be a vital tool in storytelling and presentation; designers are always looking for ways to save time without sacrificing quality, so the smart money is probably placed on motion graphics integrating both 3D and 2D elements, trying to strike a balance between depth, usability, and ease of creation – leading to some unique design aesthetics.
Firstly, enhancing user interfaces are going to be a goal of many a UX designer. Malleable logos – transforming into GIFs, icons, or (if we must) emojis – are another trend that’s emerging; and animating documentaries has been on the rise for the past few years.
Motion graphics aren’t going anywhere. Here are some of the slickest trends to keep you ahead of the curve.
Logo design has been moving towards a simpler, stroke-based aesthetic for some time now; expect that trend to continue. Minimalist logos feel modern, efficient; and there’s no denying their visual appeal. Additionally, simple logos are significantly easier to deploy in different use cases; your clean, minimalist designs can be quickly transformed into a dozen different forms. Don’t limit yourself; make sure your iconography translates to opening titles, keynote presentations, and short promo videos.
The modern logo needs to be ready to move. Design with that in mind.
While hardly a new phenomenon in the world of motion graphics – or indeed, moving pictures as a whole – their popularity is exploding right now. As the public becomes increasingly aware of “single shot” cinematography – with TV shows like Game of Thrones and Daredevil elevating the concept in the popular zeitgeist – the ability to create a fluid transition between scenes is increasingly associated with skill, professionalism, and succeeding at a difficult task.
Clients are going to be asking for it. Get out ahead of the trend.
Animating Illustrations, and Documentaries
With the rise of YouTube, illustrating narratives has taken on a new life in raising awareness for issues, explaining difficult concepts, and highlighting untold stories. The animation is beginning to see real utility as a communication tool in these contexts; the ability to add nuance and perspective can’t be overstated.
Time was, nobody tried to mix 2D and 3D. That time is long since gone; modern motion graphics place a heavy emphasis on blending these two disparate styles to give a dynamic punch to their animations.
Most of the time, this means dropping 3D objects into a 2D environment, giving a sense of scope. A liberal application of viewing angles and perspective make this a great way to use layers in your design – your final product winds up complex, dynamic, and captivating – it’s a great way to send a narrative home.
The debate on the correct pronunciation isn’t going away anytime soon, and neither are these beloved micro-animations; not with Twitter and Facebook allowing users to embed and share them. Using custom GIFs is an excellent way to sidestep unintended context, or appearing behind the times – as meme culture moves at breakneck speed.
Your typography is already at the cornerstone of half your designs; time to put it to work. Using type in your design is a time-honored way to highlight concepts, but by animating it, you can not only highlight the words themselves but add much-needed context to intricate messages, effectively moving toward a richer communication vector.
There’s also no shortage of nostalgia for Saul Bass-inspired designs, so it’s a great way to get some positive associations stirring in the brain.
Mixing Live Action with Animation
While this is hardly new – Disney’s been blending actors with animated characters since its inception – adding in some CGI elements can be a fantastic way to spice up your video. Explaining complicated concepts can actually be aided by some timely elements; adding a feeling of wonder to an otherwise mundane description, and providing insight into just how complex a construct might be, without boring our audiences.
Trends cycle, and what’s old will one day be new again. Of late, it’s the 1980’s that have come into vogue; for many, this evokes warm nostalgic feelings. Don’t just stop at neon colors – VHS effects can make your design feel surprisingly charming.
Design Keeps Moving
Regardless of the current trends, it’s key to remember that motion graphics are one more method of communication; of sending information to your audience. Knowing what you want to say – and who you want to say it to – remain more important than any trend. But if you keep that in mind, these styles can invigorate your design.
You can’t go more than 5 seconds on a phone or PC without seeing some kind of web animation. Bringing the content to life, making things pop, and providing a utility function tied with an enjoyable aesthetic, web animations are more challenging than those outside the business would first assume. Able to improve the experience of the user, getting your web animations down will dramatically improve how people interact with your website. One exciting way to do this is by understanding a few basic principles in neuroscience. In particular, let’s take a moment to discuss how attention and memory can play a big role in improving your design.
Understanding Sensory & Iconic Memory
Sensory memory is the leftover experience we remember after an event has passed. For example, if we traveled through a busy marketplace, then our sensory memory would be us thinking back to the sounds, sweet smells, colors, and vibrancy of people we witnessed. Our brains automatically store things as sensory memory in a split second after we experience them. The fast storing time is due to evolution, where we as people required rapid responses to our environment as a means of survival.
Sensory memory gathers all kinds of information. However, we as people are particularly good at recording and identifying movement. Navigating with our sight was the primary means through evolution that we stayed alive and dealt with the wider dangerous world around us.
This is where Iconic Memory comes into play. Helping us to understand better what we are seeing, Iconic Memory is responsible in part for the after image we see when looking away from something we were previously staring at. Iconic memory can work with our talent in pattern recognition to perform some neat visual tricks. For example, it is easy for humans to see a circle out of a spinning rope because the after image continues the shape while pattern recognition completes the picture in our own mind. When you get right down to it, we people are pretty incredible!
How We Can Use These Principles In Neuroscience To Aid Our Design
Let’s be real for a moment. People are not the best at remembering things, especially when the list begins to grow. We are more designed for speed and quick reaction times. This is why a lot of web animation focuses on improving speed and quick movement visuals over other factors. The amount of sensory time we have is relatively short, making web speed more about our basic needs as people and less about any sense of entitlement.
Your goal as a web designer is to decrease the cognitive load of the person using your app. The more a person has to work against instinct and what comes naturally to navigate animations and links you create, the worse the experience will be perceived. There are three things you can do to decrease the amount of mental energy is required and create a more fluid experience as a result.
So how will all of this help you? Well, visualization that connects views will improve the chance that people stay on your site. Quick speeds and relevant animations will keep individuals engaged in the right content. A typical example of how this knowledge affects web design is through persistent animation. Take the Logo for Twitter as an example.
The icon that you click on a mobile device opens you into a program where that image is now the background that you are doing your business over. This function keeps continuity throughout the experience, providing a sensible process that our brains more easily understand. Another interesting effect is that it makes the app appear as if it loaded faster than it actually did. A persistent animation is easy to do and can be deployed in a number of different ways to improve the overall experience.
Precursor to Fast Actions
Another way that neuroscience and memory interact in how we perceive web design is when it mimics the real world. For example, things rarely happen out of the blue in nature. Every fast change has something else that leads up to it. For example, take a tree falling in the woods. Before the tree suddenly falls, you hear the wood creaking and breaking. It prepares you for the fast experience that is about to happen. Things that occur fast visually without having something come before it is typically seen as alarming.
When it comes to your web design, having a visual that ‘speeds up’ into the animation or otherwise gives your brain a second to process the change will dramatically improve the experience. It decreases the mental load caused by the sudden change and leaves your user with a smoother overall experience.
It is common in our lives where reversing an action is simple. For example, you can raise your fork off the plate after putting it down, close a dresser drawer after opening it, etc. Persistent actions in web design provide continuity in the experience of the user. More to the point, it is what people will naturally expect and what the sensory memory will more easily identify as fast and free flowing. As a typical example, take exiting an app. Making it similar or the same as entering provides a great experience to the user and improves how they will remember the experience.
As a final consideration, consider the concept of the ‘central path’ in Buddhism. Your goal is not to overdo it but rather find a happy medium where you incorporate these principles into your design. Good luck!
The animation of user interfaces is growing more commonplace as of late. These days, the quality of the animation is often the focus. Of course, the overall goal is to enhance the end-user’s experience via animation which is low-key and serves a practical purpose.
Today, we’d like to talk about this popular marketing trend and how to use it to best effect.
What Does Invisible Animation Mean?
The invisible animation is an animation that you don’t notice. It’s there to make it easier for end-users and to ensure that end-users are able to offer feedback if they want to. Web animation is a challenging field (versus apps which are native), so the best invisible animation is a superb blend of easing, poses, timing, and spacing.
As you may already know, the animation doesn’t display in the same way on different types of hardware. This means that compromises to animation quality are sometimes necessary to ensure that every user (on every type of hardware) has a good experience.
For example, animation which looks gorgeous on a big and tricked-out iMac may not look good on a “lesser” device. It may seem slow and disjointed. It may not display in a fast, smooth and seamless manner.
Testing out different animations on a variety of devices is important. To make the best invisible animation, you will need to make invisible animations which perform well on most types of hardware. Narrow the field with testing and then decide what to add to your final product.
Creating impressive invisible animation is all about trial and error, with a mind to offering the end-user a superlative experience. Here are some forms of invisible animation which have made the cut at our company. We use these invisible animation strategies in order to build an email that hits the targets with consumers.
Layout Drop-downs Are Sensible
When a visitor hits the “add layout” icon, a drop-down for the layout will fade in. This drop-down for the layout will come right from the button. This will highlight the fact that what just displayed is linked with the button.
We Love Sidebar Accordions
When you are able to slide other headings in a downward direction, it’s simpler to make a connection between a heading and content. As well, fading logo types within a content section (after a brief delay) will make it clear that the end-user is in a setting of the Image type.
When a visitor is waiting for a process, time may seem to drag. For example, if an end-user to waiting to get digital files via e-mail, the sidebar accordion will show that person which process is currently happening. The invisible animation will make the end-user feel that things are moving faster, although there is no actual change is how long it takes to get the file(s) in question!
Create or Copy a Layout
If a user adds or copies a layout, a new space is made quickly, and the brand-new layout will fade in via the center. This makes it obvious that a new element is now present.
Delete a layout
If an email has a lot of layouts which are very similar, the “delete a layout’ type of animation becomes a practical option. It will show which layout has been taken away, by moving email content upwards.
A Layout Controller Adds Value
When an end-user is hovering an email, you may use a layout controller to show him or her an array of controllers. These controllers will come from the layouts that they control. When an end-user sees them, he or she will know that a prospective action will alter the layout.
Please Your Clients with Invisible Animation
It’s always possible to improve on invisible animation. We’ve provided examples of invisible animation options which work for our clients and us. However, feel free to get creative or to refine the examples that we’ve discussed here. Again, if you want everything to look great on every piece of hardware, you may need to compromise. Sometimes, the most polished details will not display correctly on less-powerful devices.
Ninety-three years ago The Walt Disney Company was founded. Bringing a revolution in animation with an impact that can be seen and experienced today, Disney has led the field of animation for decades. Despite its incredible impact, Disney is sometimes seen as being a bit outdated when it comes to interface animation. In fact, you might be asking yourself what a company that has specialized in full length animated movies even knows about interface animation?
It all comes down to the 12 classic (basic) principles of Animation. Pioneered by Frank Thomas and Ollie Johnston, these simple principles transcend styles and remain relevant in most animation venues. If you are interested in designing the best most eye popping interfaces for websites and apps, then keep reading. We get into how you can learn from the best and incorporate principles that will make your concept and designs stronger.
Incase you are unfamiliar, the 12 basic principles of animation include an appeal, solid drawing, exaggeration, timing, second action, arc, slow in and slow out, follow through and overlapping action, straight ahead action and pose to pose, staging, anticipation, and squash and stretch.
Why The 12 Basic Principles Are Relevant Today
You might be asking yourself how basic principles of animation have anything to do with a split second animation or even UX purposes. Even in extreme instances, the basic principles of design are still relevant. Simply put, they help to create a set of standards and rules that allow us to better communicate our ideas through the animations we create.
An animation is a representation of something real or imagined that is judged by human nature. What this means is that we as people have a universal “common sense” when it comes to what we expect out of objects moving. Everything obeys the laws of gravity, moves in predictable ways, etc. Stepping away from these things can cause interface animations to become jarring and stand out for the wrong reasons. While you can leave things up to defaults, you can gain more and communicate your message better by focusing on the 12 basic principles.
For example, take spacing and timing. These two classic principles can help you express things like causality, emotions, and even express weight or the gravitas of a particular moment. Stretch and Squash can show you how the traits of a particular objects shape can change how people react and identify with it. Anticipation and follow through can help you imply certain things with simple movements. The 12 basic principles can help you make something that distracts and turn it into something that effectively grabs attention.
Another way to consider how the 12 basic principles can affect your interface animation is to consider typography. The very words you are reading are written in a font that is specifically designed to convey meaning simple and straightforward. Behind the design of these words were countless rules and decisions that helped make it as popular as it is today. You can go with a simple typeface or create something that better expresses and works with the underlying meaning central to your project. Similar to the rules of typography, the 12 principles of animation can help you better understand why specific changes can make such dramatic changes in the representation of your animation.
It provides you with the vocabulary you need to understand your craft fully.
How You Can Benefit From The 12 Basic Principles
The 12 basic principles help you to understand better how the changes you make affect the final result. They also help you limit the potential of expression to create something that people can better relate to. For example, the principle of exaggeration provides a framework for you to overemphasize what is important without seeming overly comical or ludicrous. Instead of limiting yourself to a single principle, tying everything together in the 12 principles total will provide the full range of expression you are looking for.
For the longest time, web design was static. Having a way to talk about animations within this context is central to doing it right. It allows you to better convey your ideas to clients as well as makes your discussion more focused on changing specific things if something is wrong or out of place.
A shared vocabulary can save a lot of time. It becomes the starting point for your design team in which a more complex and nuanced understanding can emerge. It saves you a great deal of time trying to build up terms from scratch and provides an existing structure that is relatable well beyond interface animation.
The 12 basic principles of animation can provide the framework you need to better understand animation. At the same time, it is not without its limitations. While the 12 basic principles can teach us a great deal. They should not be followed too literally. They were designed within a context dating back several decades before many of the newer techniques we utilize were designed. Another thing to remember is that when dealing with interface animation, utility and purpose trump telling a story. The basic principles were designed with story telling in mind, and as a result, can be limiting if followed too strictly. Consider focusing on squash and stretch, anticipation, follow-through, appeal, and timing in particular.
The 12 basic principles form a tool for learning. How you incorporate them into your business and design will depend entirely on your needs and what your objectives as a designer and artist are. Your ultimate palette is the Internet, which is in and of itself constantly changing, updating, and expanding. These are all things that the original creators of the 12 basic principles of animation could have never guessed when they made their list.
Where Does That Leave Us?
Our toolset is dramatically different from what the original Disney animators used. Also, our goals are different. With these two important caveats in mind, you can begin integrating what you have learned from the 12 basic principles of animation into your work. Representing countless decades of research in their own right, you stand to gain a lot by learning from animators who came before you.
The best way to begin is by taking individual principles and playing around with them. See what each does to the final result and get a sense of how they can make your animations change. Doing so can give you the understanding you need to effectively change what you have created if your client has an issue with some part of it. The more you experiment with the techniques of the past, the more you’ll be ready for whatever comes next.
Movement is all around us. It’s an integral part of the human experience. And yet, we often forget its importance as a vector for communication. Research has shown that additional avenues of communication lead to a “richer” message, with face-to-face communication being much richer than other forms, due to the many different feedback channels at play,
The same holds true for communication media as well. Motion is an important tool for adding context and nuance to a message. From human body language to object physics, motion can show us a lot.
- What should be animated?
- Ease in? Or should we ease out?
- Should it be precise and rigid? Bouncy and floaty? Something else?
- How fast or slow should different elements be?
- Should this even be animated in the first place?
Animation in Goal-Oriented Design
If you don’t have ready answers to those questions, it’s all too easy for your animations to become superfluous “delighters” – fun little touches that don’t accomplish much besides looking nifty. Which is great – the first time you see them. After that, they’re dismissed as superfluous fluff.
We want to avoid that.
To do so, we need to communicate the problems, goals, and scope of the project. Web animation is more than just a neat distraction; it’s a way to solve design problems, communicate information, and otherwise achieve your project’s goals. So to do that here’s some questions to ask.
What Does the User Have to Do?
What’s the primary action your users are going to perform here? How are they going to do it, and what will they expect to happen when they do? In light of that, is your animation a help, or a hindrance?
How Does the User Arrive at Specific Actions?
Does your spatial layout make logical sense? Can you incorporate motion to create a feeling of depth, thereby communicating a hierarchy?
What Ideas Need to be Reinforced?
Will interactions feel more responsive by showing a reaction? If a user successfully interacts, should that be visually verified? Can we illustrate the site’s quality and performance speed through interactive elements?
Once you’ve got an answer to these questions, you can move away from subjective design, and into a goal-oriented, objective mode. And once you’ve done that, now you can focus in on having fun conveying a brand’s tone and voice through animation.
What Makes a Quality Animation?
If you do even a tiny amount of research, you’ll run into something called the 12 Principles of Animation. Introduced by two Disney animators in 1981 – and based on the work of top Disney animators leading back to the 30’s – these factors are readily observable in human motion, and help gauge what feels real to us. Identify these movement patterns in everyday life, with their actions and reactions, and you’re on your way to understanding motion in design. They are:
- Squash and Stretch
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Motion
- Slow In and Slow Out
- Secondary Action
- Solid Drawing
Applying the Principles to Interactive Design
Text, buttons, links; these elements don’t move the way that humans or animals do. Even so, these principles can help guide your use of motion. Every movement contains actions and reactions, and your interface should be no exception. Using these animation principles, you can highlight and identify key elements, by telling users what’s interactive, guiding them visually through your content, orienting them to your page, giving them feedback, and of course, making the interface visually appealing.
If you’re part of a team, you’ll want to be proactive about the role of animation in your project. Talk about interactions early in the project, figure out the priority actions for each page, and you can likely benefit from a style guide for your animation.
Animation is Communication
Just like any design element, animations are a tool in your kit, a way to communicate information. A well-crafted animation can be clearer than any static element.
Keep in mind; your goal is to communicate, not animate. Do that, and you’ll be fine.