Preloaders

A preloader is how you make your first impression with your users, make sure it is a lasting one.

What are some characteristics of an effective pre-loader?

As simple as possible, but not simpler.

Let’s make them easy to watch, and exciting to stare at, but not with too many movements or excessive little graphic elements. The main reason for this simplicity is to engage visitors and make them stay and stare. In other words, we need to keep them hungry for more content, so when the site is loaded they jump into it and start looking for more stuff. People expect more when they see a nice preloader; keep the preloader simple enough, so you can deliver enough nice content when the site is up and ready to surf.

Fast to load.

We can put everything, any animation, graphics, and basically whatever we want in our preloader, can’t we? Technically speaking, yes, but nobody wants to see a preloader for a preloader. The preloaders must be fast enough to load in less than a second or two, taking into consideration that most users are using hand-held devices with slower internet speeds. So optimize content for your preloader, e.g. Use the “Save for web” feature in Photoshop for preloader images.

Content related.

Generic preloaders, like turning circles, are simple enough and easy to watch. These simple shapes and graphics are the best options for a preloader, right..? We are not Google or Apple with a well-established branding identity. Most of us “Muse users” are designers who use Muse to make a personal portfolio or to create a micro-site for brands or agencies. Preloaders are the best opportunity to show your branding identity before the site loads. When people watch preloaders they know they have to wait, and they know that they do not need to focus, so they use their right-side of their brains while looking at a preloader, which makes it the best time for you to show them something memorable.

Look like a preloader.

How many time have you looked at a preloader and closed the page before the site loads up? Looped animations are common for preloaders, use them, but if you know that your site is heavy and may take a long time to load, then add a percentage sign or a loading bar. The idea is to make visitors stay there. People like chasing things, people like countdowns and progress bars, but they hate to watch the screen for more than 10 seconds without an idea on when the site will load.

Top Reasons For Using A Preloader

They give your page time to load.

Sites, unfortunately, need time to load. Preloaders give your page that needed time. Think of a preloader as the opening act for your favorite band. No one likes watching a terrible opening act, but your band needs time to prepare. However, a great opening act gets you pumped up and excited to see your favorite band. Similarly, having a great preloader will get visitors excited about seeing your site.

Distracts visitors from noticing long loading times.

Here’s an example of a preloader that loads the page once the logo is completed. (Kuum)

Sites loaded with large images, videos, jQuery plugins, and more can take a while to load. This is where preloaders become useful.

Preloaders have two purposes.

Give your page time to load.
Distract visitors from realizing they’re waiting for your page to load.

How do you distract them? Make the experience enjoyable. Well-designed preloaders distract visitors from noticing your page is actually loading. Instead of simply waiting, their time is occupied by watching your preloader unfold. It becomes part of the overall experience of your Muse site.

They’re more attractive and engaging than a blank browser.

A few different preloader gifs available for free at Pixel Buddha.

How often have you gone to a website only to be met with a blank browser window that takes forever to load? Preloaders can help. Instead of forcing users to stare at a blank browser window, you can engage and entertain them with a well-designed preloader instead.

First impressions matter.

Caption: An example of a beautiful preloader by waaark: creative design studio.

The first thing users see is not your homepage, but your page loading. You spent a lot of effort in Muse to make your site look perfect, so why not put effort into designing a captivating loading screen?

A great first impression makes yourself memorable. This is especially important for graphic designers, illustrators, photographers, and other creatives. A preloader is an opportunity to show your creativity and personality. There are millions of portfolios out there, so make yours stand out. If you can captivate your visitors from your loading screen, they’ll be eager to see more.

Final Thoughts

Creating great looking preloaders for your Muse sites is easy and simple when you take advantage of one of the many preloader widgets built for Adobe Muse. QooQee offers the Advanced Preloader widget, but there are many widgets available on the web. When deciding on which widget to use in creating your preloader, choose one that is lightweight, responsive, and fully customizable so you can create one that’s perfect for your site.

Many widgets support GIF animations. Consider creating a custom loading GIF animation with one of these easy to use generators:

Or create your own GIFs using Photoshop or Edge. Here are some quick tutorials to get you started:

How to create an animated GIF in Photoshop

How to create a loading circle animation in Photoshop

Adobe Edge Animate - Create A Loading Page