Animation 101 PT. 2

Jonah Van Why

Category: Creative

06.01.2017

These days, it’s hard to scroll through social media without seeing attention-grabbing motion graphics. Within those graphics, animation is a key player. Luckily, the NJI Media design team not only has experience developing animation for social media, but using animation as a tool within the design process. Here are a few of our tips. (If you missed our Animation 101 PT.1 blog, you can check it out here

Infographics

When it comes to infographics, the first question we ask ourselves is “How can we make the data tell a story?” Animation offers simple solutions. We can show the data under different conditions. If you want to see the increase of inflation from 1986 to 2017, we can do that in the same graph. If you want to see a pie chart of US exports re-categorized as state exports, we can do that too. Stocks rising and falling with constantly changing number percentages? Done. Simply put, animating different data conditions is how you can bring graphs to life. Scrolling through pages and pages of pie charts and bar graphs may become visually redundant and disinteresting to the audience. Having the bars rise from the y-axis or each slice of the pie graph separate from group, can give each graph its own identity and encourage memorability.

Slideshows

More often than not, the first proposed slideshow solution is usually a PowerPoint. Yet the benefit of these files, that their content is easily editable, does not always outweigh the disadvantages of compatibility issues. Recently we embedded several videos within a PowerPoint file. When the client would open/save the files in an older version of PowerPoint, it would instantly delete them. Unfortunately, this kind of file behavior is not uncommon. Multiple settings in PowerPoint are dependent on the software version, the operating system, and how the presentation was exported. Rendering an animated presentation as a MP4 video, on the other hand, guarantees compatibility with an abundance of operating systems, programs, and websites.

Creating a slideshow in a program like After Effects offers greater flexibility with presentations. We can highlight certain image areas through color changes and panning movements. Transitions can be fine tuned with custom shapes and images. Finally, we can display alterations to multiple images at once (such as grids where certain images grow and shrink).

UI/UX Mockups

Websites and apps function best when motion is involved. We’ve known for a long time that scrolling encourages user engagement far more than clicking. And that’s not just statistics. I’m talking to you Web. M.D. Just show me my maladies on one page, I’m tired of clicking through these slideshows. Users expect a certain amount of motion on websites, so it makes sense that our mockups and prototypes should animate. Think of the questions that reactive elements of UI raise. Should buttons change color or gain a drop shadow when hovered over? Should pages scroll like print media or should a parallax effect add subtle panning to images? Will the navigation menu move with the page or will it slide in after the user selects an icon? By answering these questions with animation in the design process, we avoid any unexpected final results.

Any one of these animations could engage audiences and keep campaigns from social media obscurity. We have the animation capabilities to breathe life into an old logo, deconstruct complex data, and explain the potential of a website.

fortune favors

the bold

We collaborate with tenacious organizations and ambitious people.