Have you ever stumbled onto a page that took forever to load online? Some pages, as helpful as they are, have a lot of content to load. A lot of content usually equals a longer load time. The longer the load, the bigger the chance you lose your visitor’s interest. This is especially true if their wait is accompanied by a blank white page. It’s not a good impression or great user experience. Simply creating a loading GIF (also known as preloaders) for your high-content, heavy load-time pages can be the answer to keeping users engaged and interested in your content. Loading GIFs will let the user know their internet browser is still responsive.

Some Considerations of Your GIF Appearance

Do you have a logo? Consider animating the logo mark. The logo mark is a very recognizable image of your brand and is a great thing to bring to life with a simple animation. If you want an even simpler loading GIF like an animating circle, square, etc., consider using your brand palette to reinforce your brand. Finally, don’t forget to add the words “loading” in your GIF or GIF artboard. This is an important consideration because it lets users know what your page is doing rather than having them wonder why something is animating on their screen. Here’s a GIF we created and use here at Red Branch Media on our blog.

Get Inspired

It’s difficult to start from scratch. If you want to make something amazing, you need to get inspired. This will not only ignite your passion to create something awesome as well, but you can see what your fellow designers are creating too. Google, look through design blogs and flip through Pinterest.

Here are some of my favorite loading GIF examples below:

• 10 cool loading animated GIFs from Smashing Hub
• Best loading animation GIFs from Grasp Hub
• Even CollegeHumor provides “24 Mesmerizing Loading Icons That’ll Make You Drool”

Handcraft Your Animations

After you get that inspirational spark, set out to create your own handcrafted animated GIF. I recommend setting your artboards in After Effects or Photoshop (whichever program you prefer) as a square, and always exporting your GIFs with a transparent background. Square images are great for web developers because they can be easily centered and configured. When you start creating your animations, adding physics will give your GIFs a more appealing aspect. For example, notice how each circle in the Marenated loading GIF above scales up from the center. Instead of having the circle stop at its planned size, it expands just a hair larger than it’s supposed to be and then recedes back to the correct size. That little extra motion gives it a “bouncing” effect and makes the GIF feel alive rather than boring and static. Don’t forget to mix it up. Add multiple motions to your GIF as well.

Cycle through brand colors and add multiple motions. Try creating motions that play out like round or canon singing, where one animation will start and a little after the first animation starts the second one will start. Remember that whatever you create for your animations, that it’s unique, appealing, simple and relatable to your brand.

Web users expect speed when surfing today. It’s easy to bore and lose visitors, but with the right web development strategy, there’s still hope. Consider creating a loading GIF for your website so users will stay engaged and not get discouraged or frustrated looking at a blank white screen while a page loads. Create a unique and appealing handcrafted animated GIF for those long load-time pages, and don’t forget to add the word “loading.” As long as you have the right inspiration and your brand palette and logo at hand, you can make an amazing GIF tailored to your brand identity.

Kyle Christensen

Kyle is the Brand Director at Red Branch Media.

Kyle leads our Graphic Design Department at Red Branch Media. His ability to manage incoming tasks, collaborate with the design team, hit deadlines and keep our file storage system well-organized has helped to shape the design department clients love today. While he’s away from the branch, he spends his time playing drums, video games, cranking the latest emo, pop-punk and screamo songs on Spotify, drinking local Omaha brews, and enjoying life with his wife. Kyle has a BASA with a Concentration in Graphic Design and a Minor in Art History from UNO.