GIFs are a powerful way to capture someone’s attention. They can be used in a number of different ways, but one of the most popular is in marketing. GIFs can be used on social media, websites, and even in emails. They are eye-catching and engaging.
When it comes to marketing, GIFs can be used in a number of ways. Read on below about common GIF uses and best practices.
Quick Tips…
This page contains a lot of GIFs and animations, I don’t recommend doing this on any single page (but of course examples are needed here). Typically it’s recommended to use GIFs sparingly and consider load page load time (more on this later).
Too many GIFs can be overwhelming and distracting. Only use them when they really add value to your website.
When considering where and how to embed a GIf on a website, it can be as easy as drag-and-drop installation or you might need the assistance of your developer. While GIFs can be the easiest to install, sometimes it can be beneficial to use an embedded HD video or another animation type for lower file sizes (while maintaining quality).
It’s no secret, if you compress GIFs to smaller file sizes you will lose out on quality and resolution.
Shorter GIFs require less memory and space requirements
GIFs do a terrible job with transparent backgrounds and resolution
What text, if any, would you like to incorporate into a GIF?
What's the purpose of your GIF? Banner ads, landing pages?
Just as a photo, GIF animations have borders and size considerations
Do you want your GIF to play once or loop continuously (no skips)?
When creating a custom GIF for your company, website, or social media, there are a few considerations to take into account. In a nutshell, these four stages below condense the GIF creation process into the order of how one should make them (regardless of software used).
Depending where your GIF will go, this will affect the dimensions and file-size requirements.
Do you have preferences for clean and minimal animation or real creative assets (photos & icons).
Once you have determined the GIF style and placement, the design creation begins.
Incorporate your headlines, photos, or 2D Motion Graphic preferences
For starters, you’ll need to determine where the GIF will be utilized. Is it for an email signature (Gmail, Outlook, etc.) or will it be utilized on social media or the web? This is an important stage because size requirements will vary depending on the medium (i.e. smaller file sizes and less effects for a smaller space such as email).
The attached is a business card GIF that features a clean and corporate animation-style.
Have a squeeze page (also known as a landing page) that you want a visitor to take a specific action on? This could be clicking a button onto the next page, filling out a form or visually-directing their attention span to a specific part of the page.
These animated landing page GIFs can do wonders to help show the non-readers what your process or business does in a nutshell.
Like the GIF banner example from above, the ecommerce mobile device, animated ads can depict a message or story. Typically these are quite short, the one above is exactly 10 seconds in length.
Banner GIFs can have a URL embedded within your website that could act as a button to an affiliate site or a product that you may be selling.
Animated GIF ads are great for platforms like social media and WordPress websites where inserting them is as easy as pie.
UX (otherwise known as “user experience”) is similar to a landing page GIF but does not necessary mean your site visitor needs to take some kind of action just yet.
A user experience animation or GIF can do wonders to help supplement the visual-learners flow of information from the site. Pages of text can get quite boring and GIF animations are simply a step above static images.
Your logo is your brand’s face and digital snapshot. Minimal-looping animation can go a long way of sticking in your client or customers mind.
Logo GIFs can be clean and corporate (plenty of empty space perhaps) or fun and colorful with animated shapes and lines.
An important consideration when creating a GIF is the placement. Something too large or too in-depth with the animations, effects and amount of text will quickly ramp up a larger file size.
Small icons and minimal charts and graphs for something like powerpoint however will typically take up a lower amount of space.
If page-load time is an important factor to you, a smaller GIF file size will be far better so that your SEO efforts can also be taken into account. The example above (with the drone and online shopping) is pushing the limits for effects and size, starting at about 1,500 mb before compression.
One of the great things about social media platforms and 3rd party channels, besides the cats in hats, is that platforms like Twitter or Facebook will automatically play GIF formats once you drag and drop them in.
Of course the GIF has to be created to loop and a seamless stop and end point needs to be designed, but once you have your GIF ready and the dimensions are good-to-go, drag and drop and watch the animations go!
What’s going on behind-the-scenes?
Let’s use the example from above, just because it’s already here and you’ve seen it at least once by now. So, what’s actually going on behind the scenes from a design-perspective? Let’s take a look…
Popular placements for GIFs include landing pages, social media, and even video formats.
Everything you see moving on this page was creating using a GIF format.
I make GIFs using a variety of software but the first two I would recommend is Adobe After Effects and a GIF plugin called GIFGUN.
My animation style and preference lives in the 2D-realm and I prefer to incorporate shapes,buttons and micro-animations to mimic an online environment.
Let's take Instagram for example, while they don't necessarily support the .GIF extension, they DO support video files (1080x1080 dimensions). These video files can be created just as a GIF would and designed to loop seamlessly.
Get in touch using the form below for any animated GIF projects or ideas? Animated GIFs can range from simple icon animations all the way to custom landing page GIFs.
Quite often, animated charts and graphs are used to be placed into a presentation or slideshow that you might be creating .
Whether for education or business-purposes, animated GIFs and icons can help supplement the level of audience engagement.
Video can be converted to a GIF format but keep in mind a GIF is almost like a memory card that holds all your video, photos or information. It can only hold so much before quality is affected (think somewhere between 8-12 seconds) depending on the type of content used.
Get in touch using the form below and I’d be glad to chat further about any GIF questions or projects you might have. I’ll get back to you ASAP!
Get In Touch
Questions and Conversations
Submit Your Project Info
Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.
