Designers spend countless hours making careful color, typography, and layout choices, but despite those worthy efforts, nothing draws the eye as powerfully and dependably as motion. Proven evolutionary and behavioral psychology demonstrates our instinctual draw to visible elements that move and change. Despite vast technological advances, the human mind still works as it always has — with a visual penchant for dynamism and motion. With this reliable principle in mind, why shouldn’t we add some animation to our web design and Internet marketing efforts?
Adding animation to your design is a great way to make it stand apart and command attention. Below are 10 websites that have masterfully integrated animation to their designs. Hopefully they will serve as a testament to the attractive power of motion, as well as a source of inspiration for your next project.
Clean web design is perfect platform for adding animation, no matter how big or small the animation is. Blue Acorn’s website is an exemplary combination of simplicity and motion. The animation takes place in the center of the screen, and by simply clicking on one of the three callouts, you see a city come to life by dropping down into place.
If you want to add animation to your web design, make sure that it serves a clear purpose and isn’t just there as a superficial addition. Universeries’ subtle yet creative animation is a true enhancement to the design, and not a superfluous frill.
The web is an abstract medium with vast potential for animation, allowing you to escape the conventions of reality and delve into the creative. Flip-Universum’s site doesn’t look like your typical website, and with its stylized cartoon look, and the simple parallax type animation works wonderfully.
Mixing design elements is a great way to make your site stand out among the millions already on the Internet. Quechua’s CrossRock 2013 site not only mixes photography with animated elements, but it includes texture and drawings that appear to be drawn by hand. The animation is simple and balanced throughout the site.
Another site that doesn’t overstate their use of animation, Blacknegative at first seems like a normal site that utilizes a horizontal layout instead of a vertical one. But, the site is cleverly constructed, adding some form of animation on every page. Some are less noticeable than others but, the elements of motion are ever-present.
It isn’t necessary to add animation to every single page of your site. Sometimes, just adding animation to the home page serves as a more delicate implementation. Denise Chandler’s creatively-designed website does just that. The animations of a ferris wheel and roller coaster are strategically placed so that you see them but aren’t distracted by its looping animation.
Kikk Festival’s website and the animation employed is as simple as you can get when it comes to integrating an unimposing looping animation that doesn’t interfere with the user experience. The animation is just various sized feathers floating down from the sky. The use of perspective with the feathers is a great addition that adds depth and variety.
There is no better opportunity to add animation to your site than when your site deals with games or cartoons. Metal Junk takes advantage of this immediately. From the animated loading icon to the actual home page, the animation is great. Pair that with the awesome color scheme and you have a great design.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
It’s not often that the animation on a site takes the name of the company into consideration, and whether accidental or intentional, Wondros does and did just that. The constant moving particle dots create various shapes and even a legible “W” to represent the site and brand itself. The animation isn’t mind-blowing, but it is a great touch.
It’s a very brave move when you decide to have your animation dominate the majority of your website, but Cube Slam achieves this by designing the site around a retro video game look. You might be taken aback at first, but it’s hard to deny the draw of both the animation itself and the interactivity.
Do you have any motion-driven sites to share? Do you consider animation a sound technique for increasing design appeal, or is it a cumbersome frill that’s bogged down in browser compatibility problems, plugins, and other technical challenges?
Gabrielle is a creative type who specializes in graphic design, animation and photography.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers