You never get a second chance to make a first impression. It is a bitter truth. In the real world, some workarounds may help to fix the situation and make a better general impression. But in the digital world, the prospects are poor.
In most cases, if your website fails to produce a proper impression at the outset, people will turn around and never come back. So whatever you are planning for your web presence, it’s vital to take care of the very first seconds of the user experience. It is here where the concept of splash screens come to the rescue.
A splash screen is a time-tested tool. It assists in various matters, not just in making the first impression pleasant. It can save your audience from the frustration that comes from long loading sequences by replacing that annoying spinner with something more captivating. It can drum up interest and make a dramatic entrance for the homepage. And it can strengthen the overall branding. The latter is a tiny trend these days.
Many website owners prefer to begin a conversation with their audience with a touch of brand identity. And this approach certainly pays off. Here are some prime examples of this technique in action.
Just take a look at Digital Present. Their creative team has prepared not only an exciting hero area powered by high-end technologies but also a splash screen that catalyzes creativity and engages users from the very beginning.
The introductory animation features a 3D version of the a logotype that breaks into small pieces and, in this way, reveals the homepage. It gradually flows into the hero area, becoming an integral part of the canvas.
Note, it is not just a separate piece of the website that serves as a preamble. It is a part of an action that creates consistency, entertains visitors and reinforces the brand identity.
Digital Present is a wonderful example of a splash screen that leverages modern technologies. However, how about some time-proven solutions that have seen improvements to meet the current trends?
One of the popular choices is type-based animation. The reason is simple: many website owners prefer to use their full names as logotypes. These letter-based emblems are just ideal candidates for various kinds of manipulations and metamorphoses.
Here, the website opens with a small introduction that tells us about an artist – literally. There are two phrases that reveal his name and occupation. The solution is simple; I would even say primitive. Nevertheless, it does its job perfectly well. It creates proper anticipation for the website while sticking to the serious, businesslike tone.
There are other fantastic examples, where the names of agencies steal the show and promise to deliver an engaging user experience. Let’s explore some of them.
VLNC Studio is our next stop. The team goes for a brief splash screen that blinks before your eyes. It is a relatively short sequence that shows letters of the nameplate, one by one, in a brisk manner.
The team uses the same curtain effect as on the website and sticks to the same typeface and coloring, making it a part of the brand.
In the previous example, you do not have time to look at each frame, since everything happens very fast. Here, you are welcome to read all of the phrases at a gentle pace.
The team behind Kanarys bets on one small sentence: “Inclusive work cultures”. They have duplicated and enlarged it to fill the entire screen.
The key factor of the solution is, of course, animation. Here the team plays with colors and masking to enrich the routine. It also echoes with the elements in the hero area, as well as brings home the proper message.
Unlike the two previously-mentioned examples, the creative team of Corsaires prefers to stick to the traditional route, which certainly has its own merits. They hit straight to the point, showing the name of the agency straight away.
It is made in the same typeface as a logo to heighten a sense of harmony. The solution gets its beauty from the elegant line style that allows for a stately and graceful revealing of the nameplate. Note, this is another simple animation. Yet, thanks to a skillful play with styles, it looks outstanding.
Eleven Mirrors is another case in point where the splash screen establishes the proper tone from the get-go, thereby strengthening the consistency of the website. The idea is simple, yet smart.
It shows a small animation that gradually reveals the initials of the nameplate. Here, the subtle line style adds a hint of sophistication and elegance, whereas a significant amount of whitespace contributes to the businesslike atmosphere.
Both Alfa Charlie and Stand Proud feature splash screens that can be considered classic.
The team behind the portfolio of Alfa Charlie has taken the regular spinner to the next level. Instead of using dots that run in a circle, they have skillfully used a compact badge-styled version of logotype.
The latter can be seen in the hero area, main menu, and transition animations that accompany shifting between pages. Note, the idea is primitive. Yet in this case, it maintains the user’s focus on the center. This strengthens the brand identity and improves the website with regular structure and gives the neutral design some spice. Isn’t it brilliant?
As for Stand Proud, their splash screen demonstrates a small type-based sequence. The team plays with the messaging. They have made the word “Stand” the central detail and altered the second word, changing among “Together”, “Proud”, “Loud,” and “Equal” – thereby forming catchy phrases.
In this way, the team supports the goal of the website and hints about the content inside, naturally igniting interest.
If you do not want anything extravagant on your site but still feel a need to make the first impression count, then you should certainly adopt one of these solutions. Each of them has its own merits, and each one enhances the brand identity unobtrusively.
Make the Right Impression
Brand-related splash screens help to introduce the company and elicit trust from the first seconds of the user’s presence on the website. There are different ways to add elements of corporate identity. You can go for traditional spinner-based solutions, never-dying type-based animations, or even advanced 3D experiments powered by pioneering technologies.
Whatever fits you most, remember not to overdo it. Splash screens last just a few seconds and should anticipate the appearance of the star of the show: your website. It should echo with the brand identity, strengthen the consistency, and pre-blow the minds of your users, making them want more.
- Using Images to Enhance the CSS Hover Effect
- Beyond Glitched: Using Distorted Images in Web Design
- 8 Fantastic Examples of Variable Fonts in Action
- Creating Liquid Effects on the Web
- The Use of Cursor Effects in Web Design
- 10 Fantastic Examples of Dynamic Centerpieces in Web Design
- The Top Web Design Trends of 2017 (And One for 2018)
- Concepts & Design Trends for Modern eCommerce Web Design