10 Web motion design trends to make your site stand out
- Wes McDowell
- December 29, 2014
Gaining and retaining website traffic is fundamental in today’s competitive online landscape. There are some crucial trends that can help any site stand out while remaining engaging, and perhaps most importantly, is easy for users to access and navigate. Animations and motion designs are increasingly popular as solutions with almost any web design agency, and for good reason. Below are 10 of the most popular design choices that can have a huge impact on any site:
1: Page loader effects and header transitions
Animating page loading and transitions can make navigation more interesting and can also become part of the website’s identity if used consistently. Page loading effects are a great way improve the user experience while they have to wait and can reinforce the brand identity at the same time. A great example of this is the well-known Sky TV blue wheel that appears when a program downloads on your TV, desktop or mobile device. Adding header transitions such as swipes, split effects, parallelograms, and so on, can help create a much more dynamic user experience.
You can try some page header transition here: http://tympanus.net/Development/ItemTransitions/
2: Scroll fade ins and hover crafting
Infinite fad ins are a great way to animate additional content as the user continues to scroll down – this can make for a more interesting, sensory experience as users browse. The most famous example of this is Pinterest as their website is based on this idea – it means that users never run out of visual images and never have to click to another page.
Another great technique is to subtly guide users through your content by making key points and text stand out through incorporating hover crafting with a variety of fades or washes. Try some of the most popular hover crafting features here: http://tympanus.net/Development/InlineAnchorStyles/
3: Slo-Mo animation
Bring static backgrounds to life, and create a unique atmosphere by adding slow motion, subtle animations to backdrops on a site’s pages.
4: Slow reveal interaction
Get users more involved on a page by introducing slow reveal animations that react to mouse movement or click. This can really help engage users with your content. Here’s an example of a D Day beach scene in Normandy, which starts with a black and white image and slowly becomes today’s beach. This interactive D Day visual content was put together by the Guardian to great effect.
5: Animated charts and information
Make stats and information more exciting and dynamic by animating them, which in turn makes them much more interesting for users and increases visit duration.
6: Menu transitions
A good creative agency will always attempt to innovate, and coming up with an original idea for a menu transition is a popular area to showcase inventive thinking. Animating a menu can make the user experience much more streamlined and elegant, and help create a sense of identity for the site.
7: Form innovation
Filling forms out often feels like a chore, so helping users overcome this by introducing minimal forms formats to make the process faster and fun is a must when it comes to designing a site. Form optimization should be a priority for all websites!
8: Slide navigation
Pull out sliders, along with pushdown navigation is another fairly new innovation, and continue to grow in popularity. Using this design feature not only makes a site look much slicker, but also reduces clutter while making menu navigation simpler and more intuitive.
9: Modular scrolling
Splitting a web page into multiple scrolling elements can greatly ease navigation, as well as adding a dynamic touch to any design. Users can then scroll through sections of interest without losing their position on the page.
10: Scrolling buttons
With all the excellent and innovative options that incorporate scrolling, it makes sense to incorporate rich arrows and overall high quality design to complement other scroll features.
To conclude, new trends are appearing all the time, but incorporating some of these features into a website can help gain a real advantage by improving users’ experience and perception. At the same time, they will help make the site more interesting and unique. However, motion design elements should be chosen with the website’s objectives in mind in, whether it’s generating sales, repeat visits, or more traffic. The ideal strategy is to test different ideas to make sure that the chosen elements help achieve your goals.
Author Bio: Andy is a director of Beyond, a leading professional design company in London, specializing in user-centered branding and website design services. He specializes in UX led, responsive design. Andy’s passionate about the power of digital to influence user behavior. You can follow him on Twitter and Facebook.
- Infographic: 2017 Web Design & UX Trends to Boost Conversions
- How the Mannequin Challenge Can Help Your Marketing This Holiday Season
- How Your Local Business Can Benefit From the Pokemon Go Craze
- Infographic: 5 Ways Your Website is Losing You Customers (and 5 Easy Fixes)
- Video: 5 Questions Your Web Designer Should Be Asking You (and why it matters)
- 4 Ways to Get Website Traffic Through Facebook
- Video: Where is Your Website’s Content Coming From?
- Video: 1 Single Tip to Writing Web Copy That Sells
- Video: How to Use Your Website to Build Your Email List (and why you should)
- Video: How to Build Instant Trust on Your Website