Why you should animate your Webdesign with GIFs ?

The GIF has back in trend recently. Webdesigners use it more and more to present their animations. I’m going to explain in this article, why you should use animations on your Webdesign and present them with GIFs .

From Static website to animated website

Designer vs. Developer - Webdesign with Gifs

Designer vs. Developer by Gal Shir (Twitter)

Since 2 or 3 years, animations and transitions became very important in web design creation. Every day if you follow websites like awwwards, Css Design Awards, you should see this trend. Most of the websites awarded are very interactives and animated with smooth animations. 

Animations add emotion, continuity in the website and a little extra for the visitor to remember your website.

But web designers don’t have enough skills or training about how to create their website with animations. They don’t know really how to use the specific tools to create animations.

The revival of gif

In the years 90’s, 2000’s, the Gif was considered unfashionable. With the increase of computer power and the growth of animations and videos in web design, the GIF is back in trend.

With the new Photoshop video feature introduced with CS6 and the generalization of After Effect, Web Designers have now all the tools to create animation in their website templates.

If you are used to follow the Dribbble or Behance community, you can notice that the number of websites using web design animations is increasing and especially using GIFs. As animation takes more place in web design creation, web designers needed a support to present their animations. GIFs are the solution.
With their lower sizes, and the auto play, web designers can emphasize on particular animation without playing a video.

Now, Web Designers don’t hesitate to think of their animations. It’s a real reflection because animations need to be according with the art direction and make easier the work of web developers.

Some examples of Webdesign GIFs interactions :

GIF for Restaurant Menu - Webdesign with Gifs

GIF for Restaurant Menu by Sergey Valiukh (Twitter)

Liquid Pull Down - Webdesign with GIFs

Liquid Pull Down by Ramotion (Twitter)

Submenu animation - Webdesign with Gifs

Submenu animation by Lukáš Straňák

VO2 - Webdesign with Gifs

VO2 by Christophe Zidler (Twitter)

So if you don’t have any training on animation with After Effect or the video feature of Photoshop, I cheer you to take a look at these tutorials and start to think of your website template with the vision of a motion designer:

Mt Mograph Youtube Channel

12 Basic Principles of Animation in Motion Design


Intro to Motion Graphics | After Effects Tutorial

What about you? When will you animate your website template or do graphic concepts with GIFs? 🙂

You could like ....

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *