Over the past few years, motion has been added more and more to the web design space. If you take a look at the most prestigious sites released lately, they all have the same thing in common; a sense of fluidity. Now, why is this becoming so popular? Let’s explore how to implement this new trend into your designs and why it has become so popular.
In the early days of the internet, you needed a roller-ball mouse to navigate the web. It was clunky, didn’t match well with your hand-eye coordination, and was not that intuitive of a user experience. Now, we have mobile computers that use our fingers to navigate, and If you ever scroll down a feed of a social media app, you’ll notice how the app simply continues to scroll, easing off until finally stopping. This is a relatively new user interaction that was never experienced before the smartphone age. It’s satisfying because the fluidity of the scroll actually mimics real world physics similar to, say, a hockey puck sliding across the ice slowly stopping from the friction of the ice and gravity. This causes a sense of immersion and a feeling of being truly connected to the device. No longer are you a user trying to understand a system, you control the system and it reacts perfectly with how your brain expects it to.
How can we add this fluidity effect to our designs and mimic that satisfying connection we have with our mobile devices on a desktop experience? This is what web designers have been working on over the past few years, and there’s a lot of fantastic examples of brilliant, fluid execution.
Let’s take a look at the following website (pictured below) and we will dissect the ways it brings fluidity to the design.
This effect is achieved by adjusting the levels of ease on an animation. There's many different ways to ease, and here's 12 of the most common methods.
This is the most important part of making your website intuitive with motion. Adding this scroll effect is going to take that easing effect to the next level. The reason for its importance is that it actually makes the user's interactions fluid! Previously the user has only seen the visual of fluid, but now when they interact with the website, they actually get to create the effect themselves. Pictured below is a fantastic example of that smooth scrolling effect. Elements enter the site from a wide variety of locations which completely disrupts the expected behavior of the site.
This is an easy addition to every new website. It doesn't really have a style bias, you can apply it to tech websites, furniture sites, or really any other industry you can think of. It's a nice feature that enhances the user experience and makes scrolling a site just a little more interesting. I don't foresee us adding this technique to all of our sites, but definitely ones where it can suit the company well.
Sources: Videos by Cuberto
Take your business to the next level and get Canada's leading advertising agency on your next campaign.
Let's Get Started
