Splash screen is a term that comes from the computer industry, which needed some distraction tricks while heavy software, programs or processes are loading. However, as is usually the case, as befits every useful technology with a trace of UX like this, it has been successfully migrated into mobile applications and web-based projects, having carved out a special niche for itself there.
Initially, a splash screen is a graphical element that covers some corporate identity elements including logotype, title of the program and a current version. Its prime aim is to notify the regular user about progress of the process that is loading, in that it is akin to a basic loading page, the trend that is gradually gaining popularity nowadays, but with some minor differences.
When it comes to website design, a splash screen can be referred to as an introduction page, which precedes the appearance of the front page. If you take into account its other key purposes such as unobtrusive promotion, clarifying issues that need to be done only once per visit or providing helpful instructions, you will definitely see its appropriateness and aptness in this sphere. Besides, splash screens are great instruments for strengthening the first impression of your project.
Today we are going to explore some basic yet eye-catching and nifty splash screens that include animations and embrace loading indicators, logotypes, catchy phrases, guidance or enlightenment; so, stay updated with our magazine publications, since we are going to examine other visually-appealing and complex splash screens that have been skillfully turned into video introductions. Now let’s look through our collection.
Splash Screens in Web Design
Corentin Bac welcomes its online audience by showcasing a simple animation that smoothly draws the “Welcome” word on a clean black monochrome backdrop. The project in such way tries to behave according to some rules of etiquette.
The Mobile Company
The Mobile Company opts for incorporating a series of witty slogans that should characterize the agency’s sphere of work, by including such phrases as “we design apps”, “we develop apps” and “we love apps”. Each phrase lays a special emphasis on the word “apps” unobtrusively making it the key one.
Sound City Project
Here the splash screen is used for informational purposes. The animation comprises the alternation of the intro phrase, the helpful instruction and the loading bar. Everything is bolstered by an amazing cityscape view placed on the background that naturally strengthens the overall urban atmosphere.
While the page is loading the user has an opportunity to quickly contemplate a series of highly energized, music-themed photos that flash in the center of the page. Such a solution is aimed to set the tone of the project and immediately give a hint about what to expect.
Alpha Beta Fox
Alpha Beta Fox has an amusing character that performs a series of movements to the music. It marks the splash screen, providing regular users with a pleasant dynamic background while you decide whether you want to dip into the project or not.
The website features a small intro that quickly familiarizes the online audience with luxurious watches. Moreover, it includes a fantastic lineart that accompanies the loading bar.
Before letting you in, the website asks you a simple question “How long is forever for you”, thereby trying to encourage you on some speculations as well as boost the creativity in you. The front page of the project gives its own answer, providing users with some spectacular photo-based proof.
Maddalena Del Gobbo
It becomes transparently obvious from the first seconds that the website is dedicated to some talented female musician. The elegant silhouette figuratively serves as a “hole” through which the home page appears. Such an approach immediately establishes a marvelous womanish and highly artistic vibe.
Though the artist goes for a minimal approach, its realization looks absolutely refined and subtle that provides the content with a contrasting background and sharp appearance. The splash screen includes a title and several catchy words that instantly characterize the owner.
The website has a distinctive geometry vibe that is achieved through diagonal wide stripes that populate the design; the same design pattern runs through the splash screen. It features a lopsided image-based block with the name of the agency that lasts only few seconds.
The website is brightened by 2 splash screens, each of which includes a different animation. The first one includes a puzzle featuring the logotype, the second one also makes use of the logotype, yet it is enlivened by a “blowing up”-style effect. The designer wisely puts the brand identity to the fore.
Raise the River
The website aims to highlight the burning issues of the ecological problem of The Colorado River, so it is quite obvious that the first few seconds of the website’s loading time are reserved for displaying a series of spectacular pictures of this river. Each shot is supplied with some accompanying info in order to produce a truly dramatic effect and skillfully draw you into the project.
Here minimalism meets the classic color combination in order to recreate a truly refined appearance corresponding to this brand of luxurious jewelry. The splash screen comprises the logotype, an instructive animation, navigation aids and of course, the watchword.
The Building of Memories
While the website generates for you a scenic background by drawing illustrations of buildings, the splash screen tries to clarify some issues concerning the right utilization of the project through providing you with clear instructions bolstered by a clean vector-style animation.
Elmore includes a regular splash screen that features only an official garish logotype. This multicolored centerpiece foreshadows the appearance of the home page, preparing you for some upcoming fun.
Red Bull Soundclash
The first screen gives a clue about the project. It features a date and a place where the Red Bull Soundclash event will occur. As befits all websites dedicated to leading producers, the page is presented in brand colors and includes the corporate identity symbol.
Dagobert has a quite enigmatic splash screen that has a quick alternation of slightly animated geometry-style shapes. Such an intriguing solution definitely forces you to stay in order to find out what else the project is hiding from you.
K-Swiss features several highly-realistic mockups of sneakers painted in rigid, almost toxic coloring. The animation absolutely corresponds to the theme of the website and is made in one spirit.
Extreme Sensio is brightened by a toxic splash screen that embraces a series of phrases, where each one begins with “a story of”. It is aimed to demonstrate a huge scope of work done by the agency in a pretty creative manner.
Sometimes the first few seconds decide everything, so strengthening the first impression is really vital. The effect can be produced through various means, and incorporation of splash screens is one of such productive and beneficial method. Have you used splash screens in any of your designs? Do you have a splash screen on your own page? Please share your links and opinions with us in the comments section below.