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.
View it live: https://www.stumptowncoffee.com/
View it live: https://froont.com/
View it live: https://www.weaintplastic.com/
View it live: https://melaniedaveid.com/
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.Web Designer Depot: Logo animation (SVG)
The logo in the header of the Web Designer Depot website animates when hovered over.Froont: Graphic element animation (GIF)
The Froont website uses animated GIFs on its homepage to help illustrate its main features.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.Icons Responsive: Hero graphic animation (GIF)
The Icons Responsive site used an animated GIF in its hero section to showcase how their icons work.Melanie Daveid: Title graphic animation (SVG)
The hero graphic on the Melanie Daveid website uses an SVG animation, making it more dynamicLearn how
If you’re interested in how these techniques are implemented, check out the links below for some helpful tutorials:- HubSpot: How to Create an Animated GIF
- The Layout: How to create gifs using Photoshop CC
- CSS Tricks: A Guide to SVG Animations (SMIL)
- MDN: SVG animation with SMIL
Add interest to your website
TBH Creative can help you develop a strategy and choose the best methods for improving your website with our variety of web design services.
Ready to revamp your website? Start here
This post was written August 20, 2015.
About the author Kayleigh Circle
Kayleigh is a web developer at TBH Creative, specializing in front-end development. 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.
