10 exemples dramatiques d’écrans de présentation dans la conception Web

Voulez-vous faire une entrée dramatique? Vous voulez réchauffer vos visiteurs avant de les impressionner avec vos animations étonnantes, vos expériences de bibliothèque sophistiquées ou tout simplement un design intelligent ? Vous devriez donc probablement mettre vos yeux sur un écran d’accueil.

Issu du monde des logiciels de bureau, il était ancré dans la conception de sites Web. C’est rapide, rapide, léger, relativement simple et puissant. Nous parlons toujours de la façon dont les premières secondes peuvent faire une grande différence. Tout doit être parfait dès le départ. Et les écrans d’accueil sont l’un de ces composants d’application Web qui sont directement liés au succès de cette mission.

Beaucoup pensent que la zone des héros soutient la création de cette précieuse première impression. Cependant, il existe des artistes de code diligents et scrupuleux qui aiment marquer le i et traverser le t, croyant que chaque seconde compte. Eh bien, c’est comme ça.

Plus tôt vous commencez à augmenter votre audience en ligne, meilleure sera votre première impression. C’est pourquoi nous assistons à plusieurs solutions uniques dans ce domaine. En fait et en fait, 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é, les écrans de démarrage ont certainement un certain potentiel.

Utiliser le plein écran

Avec une animation de bienvenue, tout l’écran est à votre disposition, pas seulement un petit élément. C’est comme ouvrir des génériques de films qui promettent au public quelque chose d’étonnant, piquent leur intérêt.

Tedd Arcuri FuméeT

Three.js n’est pas un bon compagnon pour créer des présentations rapides et légères, cependant, dans le cas de Tedd Arcuri, cela fonctionne certainement. Ici, l’effet de fumée très réaliste et habilement reproduit est utilisé pour améliorer l’apparence de la lettre « T ». Ce dernier est ici purement symbolique car il peut facilement être transformé en logo, mascotte ou titre.

.

Page de bienvenue de Timothy Giblin

La plupart des écrans de démarrage vont de pair avec l’identité de la marque. Par exemple, la page d’accueil 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 adhérer au médium doré. Son concept est original et en même temps modeste. Découvrez un seul logo, mais cette découverte attire l’attention.

Animation de l’écran de bienvenue Hitesh Sahu

Cet exemple est moins impressionnant que la solution de Timothy Giblin, mais il est plus pratique et peut être vu partout de nos jours. Essentiellement, c’est juste une charge paresseuse portée au niveau suivant. Révélez les éléments de la page d’accueil un par un de manière amusante et créative, rendant les choses beaucoup plus intéressantes.

Il existe des extraits de code plus intéressants. Explorons ensemble la collection et trouvons celle qui convient le mieux à votre prochain projet.

solutions classiques

Vous voulez adopter une approche plus éprouvée de l’écran d’accueil ? Les exemples suivants vous aideront à y arriver.

Écran de bienvenue d’Adam Blum

Un effet de glissière traditionnel sous-tend la beauté de la solution Adam Blum. Il comprend un arrière-plan net et soigné et plusieurs phrases clés qui apparaissent les unes après les autres. Exploitez le pouvoir de l’anticipation – le moyen primitif mais viable de susciter l’intérêt des utilisateurs.

Jouer sur Nirajan

Pour rendre la solution ci-dessus un peu plus intéressante, vous pouvez ajouter des manipulations avec un arrière-plan comme Niranjan l’a fait dans ce stylo. Votre projet Play On présente de belles transitions glissantes entre des écrans de superposition semi-transparents appliqués à l’arrière-plan de l’image. sympa et amusant

Williams ‘My Splash

My Splash de 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. Un écran noir apparaît alors. Il s’agit d’une solution élégante, élégante et professionnelle qui s’adapte à divers projets.

Écran de bienvenue animé par Dmytro Lvivsky

L’écran de démarrage animé de Dmytro Lvivsky est un point de départ idéal pour créer votre propre solution. L’animation JavaScript a plusieurs écrans et une transition traditionnelle entre chacun. Ce dernier est basé sur un effet dans lequel un cercle mène la pièce.

Découvrez l’écran d’accueil animé de plumes de Dmytro Lvivsky (@UnforbiddenYet) sur CodePen.

CSS3 Simple Fading par Giles Papworth

Voici une solution incroyablement simplifiée. La routine consiste à afficher des blocs de texte un à un, accompagnés d’un effet de fondu traditionnel. Cependant, il fait tout ce qu’il doit. Et, surtout, il le fait sans “consommer” vos précieuses ressources, car il n’utilise que CSS3. C’est simple, élégant, modeste et léger.

le comédien

Les exemples suivants montrent qu’un écran de démarrage peut également être utilisé pour donner le ton d’un site Web à partir de zéro.

Animation de chargement de la console par Andrew Tunnecliffe

Par exemple, si vous êtes un encodeur, l’animation de chargement de la console d’Andrew Tunnecliffe créera une atmosphère appropriée. C’est démodé, brutalement simple et s’intègre parfaitement à n’importe quel portefeuille de développeur personnel.

Chiffres en chute par Thibault Jan Beyer

Si vous avez un projet statistique ou axé sur les données en tête, les chiffres décroissants de Thibault Jan Beyer sont un bon début pour votre expérience de narration. L’animation s’ouvre avec des nombres décroissants 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 geek de Bruce Lee”. Pour nous, il est une icône derrière un univers où le bien triomphe du mal, et qui restera à jamais dans nos cœurs.

Écran d’accueil de Marvel Matt Feinstein

L’écran de projection Marvel 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. Votre animation de bienvenue a une merveilleuse atmosphère comique. C’est une réplique d’une séquence d’ouverture de films Marvel qui a l’air incroyable.

Comment faire sensation

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

Les écrans de bienvenue dans la conception de sites Web sont efficaces tant qu’ils sont rapides, courts, légers et précis. Bien sûr, ils proposent le plein écran pour montrer leur génie. Néanmoins, vous devez continuer votre mission initiale. Ce sont des éclaboussures qui devraient susciter l’intérêt et transformer immédiatement la chauve-souris en une solution plus excitante.