Thursday, August 20, 2015

Web design trends: Animated GIFs and SVGs

Adding movement to your website can help it make it more dynamic and interesting for users. There are a variety of modern techniques for adding movement to your website, from videos to advanced CSS techniques to animated graphics. Animated graphics in particular can be an easy and fun way to add a sense of interactivity to your website.

We’ve discussed the re-emergence of the animated GIF in web design in the past, and this continues to be a popular trend. Furthermore, animated SVGs (scalable vector graphics) have become a popular choice as well for adding movement to a website. In this showcase, we’ll explore some websites that have successfully and creatively integrated animated GIFs or SVGs into their designs.

Stumptown Coffee: Loading graphic animation (GIF)

This website uses animated GIFs for the loading graphics that display before the products are fully loaded.
View it live:

Web Designer Depot: Logo animation (SVG)

The logo in the header of the Web Designer Depot website animates when hovered over.
View it live:

Froont: Graphic element animation (GIF)

The Froont website uses animated GIFs on its homepage to help illustrate its main features.
View it live:

We Ain’t Plastic: Heading animation (SVG)

The title headings on the We Ain’t Plastic website animate as you scroll down the page, adding a sense of interactivity.
View it live:

Icons Responsive: Hero graphic animation (GIF)

The Icons Responsive site used an animated GIF in its hero section to showcase how their icons work.
View it live:

Melanie Daveid: Title graphic animation (SVG)

The hero graphic on the Melanie Daveid website uses an SVG animation, making it more dynamic
View it live:

Learn how

If you’re interested in how these techniques are implemented, check out the links below for some helpful tutorials:

Add interest to your website

Adding animated graphics is just one way to make your website more interesting. TBH Creative can help you develop a strategy and choose the best methods for improving your website with our variety of web design services. To find out more, contact us today.

About the author | Kayleigh Circle

Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful.

View more posts by Kayleigh

Subscribe to this blog