Animation At Work: Tips on How to Engage Your Audience

Image for post
Image for post

Until the mid-2000’s most web design imitated traditional print layouts, as the success of a website mainly depended on the structure of its visual organization. Yet, since contemporary web is able to employ more advanced methods of animation and interactivity, we can use them to create new forms of visual storytelling.

In this article, Readymag’s Product Designer Stas Aki shares some suggestions on how to command a viewer’s attention and communicate ideas in an efficient way.

Design is about communicating ideas, and communication is only successful when the recipient grasps the entire message. This is why it’s so important to keep readers engaged from the top to the bottom of your page.

Wow Them At The First Screen

It’s important to command your visitor’s attention immediately. There is an inverse correlation between bounce rates and visit duration; in other words, the longer someone lingers on a page the less likely they are to leave it.

Enso editorial. It’s been made with Readymag and employs on-scroll animations.

Sustain Their Attention

Guide your readers through the content. Use visual anchors that remain in view while they scroll, or arrange elements so that they flow seamlessly. Doing so maintains a visitor’s attention and keeps them engaged.

Highlight With Motion

Use motion to focus a viewer’s attention on specific details within the content. For example, by altering the size of photos you can indicate the order in which they should be viewed, clarifying a viewer’s experience.

In addition, these techniques can transform even the simplest page into a visually rich and memorable layout, without cluttering it with unnecessary distractions.

Encourage Interaction

On-scroll animations not only bring a page to life, they empower the viewer. Allowing visitors to explore at their own pace, according to their own curiosity, changes them from passive onlookers into active participants, making their experience more memorable.

Moving Flags visual experiment

People remain focused for as long as they feel stimulated. Therefore the imagination and quality of your visual content is crucial. Strive to make your project clear and compelling, so that its message is both understood and enjoyable. Begin with a basic layout that conveys the essence of the project then get motion on board and bring it to life.

Dynamic Grid System editorial.

Explore other design stories from Readymag.

Want to master the tool? See our tutorials.

Written by

The most elegant, simple and powerful web-tool for designing websites, presentations, portfolios and all kinds of digital publications.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store