12 Creative, Clever Loading Screens
You never want your web visitors to wait. Some argue that the use of a loading screen on your website is unnecessary and can potentially discourage your visitors. Others contend that with ever-quickening connection speeds and a distinct need to stand apart, well-designed immersive websites are well worth the wait. Regardless of where you stand on the matter, it is hard not to appreciate a clever, creatively-designed loading screen that transforms a test of patience into something playful and captivating.
From hand-drawn designs to loading screens that implement 3D elements, there is a multitude of ways to design an clever preloader. If you have ever thought about adding a loading screen to your website, this is the showcase for you. Today, I share 12 inspirational loading screen animations that will hopefully fuel your imagination and inspire you.
SectionSeven Inc.
SectionSeven’s site is already visually creative given its unorthodox horizontal scrolling. Their loading screen furthers the creative look and design by using vertical lines. While the site loads, various lines in various colors begin to grow from the bottom of the screen to the top. It’s a simple but effective design.
Escriba
It’s always a good idea to try to brand and contextualize your website elements. Escriba’s loading screen makes perfect sense for the website as a whole. Their loading image uses a cute chef character who is baking. To top it off, when the loading finishes a “ding” noise reminiscent of a cooking timer is heard.
ZZZ
Your loading screen doesn’t always have to stay in the center of your screen. If you’re creative enough you can very easily have the loading utilize the entire space. ZZZ’s achieves this very easily with the use of color and movement. The sheep, the clouds, and the moon complement the night sky.
Max Shaman
Shaman’s site as a whole is wonderfully inspiring. The treatment of the loading page is a great touch, because not only does the moderately-creepy voodoo doll show up on the screen, but it appears even bigger on the actual website itself, needles and all.
Platin
A great way to design your loading page is by utilizing an element that can grow, developed, or transform as your site loads. This conveys that the site is loading and gives the visitor the indication of progress. Platin does this perfectly with their watercolor-esque design of a building that begins to be surrounded by growing trees.
Museum of Science and Industry
Depending on your website’s targeted demographics and subject matter, you can get away with using a cute character to attract attention and entertain the visitor briefly until your site is finished loading. The MSI does this on their website by having an appealing character dance as the site loads.
Food of the Food
It isn’t unheard of to create strange and maybe unsettling designs whether for print or web. You might also incorporate hand-drawn elements into your website. Food of the Food accomplishes both simultaneously. The character is entangled in spaghetti; as they look on in peril, the hand-drawn image is slowly filled with color to indicate the loading time of the site before completing the homepage.
Erky Perky
Erky Perky’s website has great graphics, attractively designed characters, and an all around sharp preloader design. You can’t help but be intrigued by their little caveman character running on top of the loading bar.
Xixi No Banho
Simple solutions can make for superb designs, and choosing simplicity doesn’t mean that visitors will be less impressed. Banho’s loading screen is simplistic but well beyond the standard, uninspired progress bars. The bright and welcoming colors of the site itself is perfectly paired with the loading bar. The animation added once the site is finished loading is testament to what is in store for those who actually explore this exceptionally creative site.
Mary and Max
If you are into films and animations, then you are no stranger to loading screens. More often than not, websites for visual entertainment will feature some form of preloading graphic before the homepage. This is no different for the Mary and Max site. The loading image is a simple yet engaging with the use of a retro-inspired television screen that broadcasts a countdown until the site loads.
W. Brett Wilson
Another simple but clever loading screen can be found on W. Brett Wilson’s website. The site itself is creatively designed, and when you explore it you will find that the loading image makes perfect sense. The simple animated graphic of a man running on a hamster wheel creates a relatable context.
Identification05
Identification05’s 3D graphics and jumping character is truly inviting. The site quickly loads similar graphics and characters. Pair that up with the well-chosen music, sound effects, and color choices and you end up with an artful website.
What do you think about websites using loading screens? Should you avoid them at all costs, or are there ways to turn a tedious loading time into a clever introduction? Do you have any favorites above?
