10 exemples dramatiques d'écrans de démarrage dans la conception Web

Vous voulez faire une entrée spectaculaire ? Vous voulez réchauffer les visiteurs avant de les étonner avec vos animations époustouflantes, vos expérimentations avec des bibliothèques haut de gamme ou tout simplement un design ingénieux ? Ensuite, vous devriez probablement fixer vos yeux sur un écran de démarrage.

Issu du monde des logiciels de bureau, il a réussi à s'implanter avec succès dans la conception Web. Il est vif, rapide, léger, relativement simple et puissant. Nous parlons toujours de la façon dont les premières secondes peuvent faire toute la différence. Tout doit être parfait dès le début. Et les écrans de démarrage font partie de ces composants de l'application Web qui sont directement liés au succès de cette mission.

La majorité pense que la zone des héros est derrière la création de cette précieuse première impression. Cependant, il y a ces artistes du code scrupuleux et diligents qui adorent mettre les points sur les i et les barres sur les t, croyant que chaque seconde compte. Eh bien, c'est comme ça.

Plus tôt vous commencerez à augmenter votre audience en ligne, meilleure sera la première impression que vous ferez. C'est pourquoi on assiste à diverses solutions originales dans ce domaine. En fait et factuellement, ils ouvrent la conversation entre le site Web et le public. Et si vous pensez qu'un chargeur n'a pas la capacité de montrer votre créativité, alors les écrans de démarrage ont certainement du potentiel.

Utilisation du plein écran

Avec une animation splash, tout l'écran est à votre service, pas seulement un petit élément. Ils sont comme des séquences de générique d'ouverture de film qui promettent au public quelque chose d'incroyable, suscitant ainsi l'intérêt.

SmokeT par Tedd Arcuri

Three.js n'est pas un bon compagnon pour créer des intros rapides et légères, mais dans le cas de Tedd Arcuri, cela fait certainement l'affaire. Ici, l'effet de fumée hautement réaliste habilement reproduit est utilisé pour améliorer l'apparence de la lettre "T". Ce dernier est ici purement symbolique puisqu'il peut être facilement transformé en logotype, en mascotte ou en titre.

.

Page d'accueil par Timothy Giblin

La majorité des écrans de démarrage vont de pair avec l'identité de la marque. Par exemple, la page Splash de Timothy Giblin. Il s'agit d'un écran de démarrage 100% classique qui présente une identité de marque enrichie de la pensée créative d'un artiste. L'auteur nous montre comment respecter le juste milieu. Son concept est original et en même temps modeste. Il ne découvre qu'un logotype, mais ce dévoilement attire l'attention.

Animation d'écran de démarrage par Hitesh Sahu

Cet exemple est moins impressionnant que la solution de Timothy Giblin, mais il est plus pratique et se voit partout de nos jours. Essentiellement, il s'agit simplement d'un chargement paresseux porté au niveau suivant. Il révèle les éléments de la page d'accueil un par un de manière ludique et créative, rendant les choses beaucoup plus intéressantes.

Il y a quelques extraits de code plus excitants. Explorons ensemble la collection et trouvons la meilleure combinaison pour votre prochain projet.

Solutions classiques

Vous cherchez à utiliser une approche plus éprouvée pour votre écran de démarrage ? Les exemples ci-dessous vous aideront à y arriver.

Splash Screen par Adam Blum

Un effet de glissement traditionnel se cache derrière la beauté de la solution d'Adam Blum. Il comprend un arrière-plan propre et pur et plusieurs phrases clés qui apparaissent les unes après les autres. Il tire parti du pouvoir de l'anticipation : le moyen primitif mais viable de susciter l'intérêt d'un utilisateur.

Play On par Nirajan

Pour rendre la solution précédente un peu plus intéressante, vous pouvez ajouter des manipulations avec un arrière-plan comme Niranjan l'a fait dans ce stylo. Son projet Play On propose de belles transitions glissantes entre les écrans de superposition semi-transparents appliqués à l'arrière-plan de l'image. Agréable et amusant.

Mon Splash de Williams

My Splash by Williams est un autre exemple représentatif d'un écran de démarrage classique. Le concept comporte deux étapes. Dans un premier temps, l'animation révèle la signature de l'auteur à un rythme modéré et confortable. Ensuite, un écran noir apparaît. Il s'agit d'une solution élégante, épurée et professionnelle qui s'adapte à de nombreux projets.

Écran de démarrage animé par Dmytro Lvivsky

Animated Splash Screen de Dmytro Lvivsky est un point de départ idéal pour créer votre propre solution. L'animation alimentée par JavaScript comporte plusieurs écrans et une transition traditionnelle entre chacun d'eux. Ce dernier est basé sur un effet où un cercle mène le jeu.

Voir l'écran de démarrage animé du stylo par Dmytro Lvivsky (@UnforbiddenYet) sur CodePen.

Fading CSS3 simple par Giles Papworth

Voici une solution incroyablement simplifiée. La routine consiste à montrer des blocs de textes un par un, accompagnés d'un effet de fondu séculaire. Cependant, il fait tout ce qu'il faut. Et, plus important encore, il le fait sans "manger" vos précieuses ressources car il n'utilise que CSS3. Il est simple, élégant, modeste et léger.

Le créateur d'humeur

Les exemples suivants montrent qu'un écran de démarrage peut également être utilisé pour donner le ton à un site Web dès le départ.

Animation de chargement de la console par Andrew Tunnecliffe

Par exemple, si vous êtes un codeur, l'animation de chargement de la console par Andrew Tunnecliffe créera une atmosphère appropriée. C'est de la vieille école, c'est brutalement simple et ça va parfaitement avec n'importe quel portefeuille personnel pour un développeur.

Falling Numbers de Thibault Jan Beyer

Si vous avez en tête un projet basé sur des statistiques ou des données, alors Falling Numbers de Thibault Jan Beyer est un bon début pour votre expérience de narration. L'animation s'ouvre avec des nombres qui tombent qui finissent par toucher le sol et ouvrir l'écran principal. Il a un charme géométrique enrichi de quelques épices numériques.

Enfin et surtout

Pour beaucoup de gens, Stan Lee sera toujours « le frère ringard de Bruce Lee ». Pour nous, c'est une icône qui se tenait derrière un univers où le bien triomphe du mal, et qui restera à jamais dans nos cœurs.

Écran de démarrage Marvel par Matt Feinstein

Marvel Splash Screen de Matt Feinstein n'est pas exactement un hommage, mais tous les fans de super-héros l'apprécieront. Le titre parle de lui-même. Son animation splash a une merveilleuse ambiance de bande dessinée. C'est une réplique d'une séquence d'ouverture de films Marvel qui a l'air incroyable.

Comment faire sensation

Les écrans anti-éclaboussures peuvent être utilisés comme alternative aux chargeurs - à moins bien sûr qu'ils ne soient lourds. Malheureusement, il y a encore des gens qui les prennent trop au sérieux et essaient de les transformer en une partie pleine d'action d'une pièce.

Les écrans de démarrage dans la conception Web sont efficaces tant qu'ils sont rapides, courts, légers et directs. Bien sûr, ils vous donnent tout l'écran pour montrer votre génie. Néanmoins, vous devez vous en tenir à sa mission initiale. Ce sont des éclaboussures qui devraient susciter l'intérêt et passer immédiatement le relais à une solution plus excitante.