10 dramatische Beispiele für Splash Screens im Webdesign

Möchten Sie einen dramatischen Auftritt haben? Möchten Sie Besucher aufwärmen, bevor Sie sie mit Ihren atemberaubenden Animationen, Experimenten mit High-End-Bibliotheken oder einfach nur genialem Design in Erstaunen versetzen? Dann sollten Sie wahrscheinlich einen Splash-Screen ins Auge fassen.

Aus der Welt der Desktop-Software kommend, hat es sich erfolgreich im Webdesign etabliert. Es ist lebhaft, schnell, leicht, relativ einfach und leistungsstark. Wir sprechen immer darüber, wie die ersten paar Sekunden einen großen Unterschied machen können. Alles soll von Anfang an perfekt sein. Und Splashscreens sind eine jener Komponenten der Webanwendung, die direkt mit dem Erfolg dieser Mission verbunden sind.

Die Mehrheit da draußen denkt, dass der Heldenbereich hinter diesem wertvollen ersten Eindruck steht. Es gibt jedoch diese gewissenhaften und fleißigen Code-Künstler, die es lieben, die i's zu punktieren und die t's zu überqueren, weil sie glauben, dass jede Sekunde zählt. Nun, so ist es.

Je früher Sie damit beginnen, Ihr Online-Publikum aufzupolieren, desto besser wird Ihr erster Eindruck. Deshalb erleben wir in diesem Bereich verschiedene originelle Lösungen. Tatsächlich und sachlich eröffnen sie das Gespräch zwischen Website und Publikum. Und wenn Sie der Meinung sind, dass ein Loader nicht in der Lage ist, Ihre Kreativität zu zeigen, dann haben Splash-Screens sicherlich ein gewisses Potenzial.

Den Vollbildmodus nutzen

Mit einer Splash-Animation steht Ihnen der gesamte Bildschirm zur Verfügung, nicht nur ein kleines Element. Sie sind wie Filmvorspannsequenzen, die dem Zuschauer Unglaubliches versprechen und damit Interesse wecken.

SmokeT von Tedd Arcuri

Three.js ist kein guter Begleiter, um schnelle und leichtgewichtige Intros zu erstellen, aber im Falle von Tedd Arcuri tut es sicherlich seinen Zweck. Hier wird der gekonnt reproduzierte, hochrealistische Raucheffekt verwendet, um das Erscheinungsbild des Buchstabens „T“ zu verbessern. Letzteres ist hier rein symbolisch, da es leicht in ein Logo, Maskottchen oder einen Titel umgewandelt werden kann.

.

Splash-Seite von Timothy Giblin

Die meisten Begrüßungsbildschirme gehen Hand in Hand mit der Markenidentität. Beispiel: Splash-Seite von Timothy Giblin. Es ist ein 100 % klassischer Begrüßungsbildschirm, der die Markenidentität zeigt, angereichert mit dem kreativen Denken eines Künstlers. Der Autor zeigt uns, wie man die goldene Mitte einhält. Sein Konzept ist originell und gleichzeitig bescheiden. Es enthüllt nur ein Logo, aber dieses Freilegen fällt ins Auge.

Splash-Screen-Animation von Hitesh Sahu

Dieses Beispiel ist weniger beeindruckend als die Lösung von Timothy Giblin, dafür aber praktischer und heute überall zu sehen. Im Wesentlichen ist es nur faules Laden, das auf die nächste Stufe gebracht wird. Es enthüllt die Elemente der Homepage spielerisch und kreativ nacheinander und macht die Dinge viel interessanter.

Es gibt einige weitere spannende Codeschnipsel. Lassen Sie uns gemeinsam die Kollektion erkunden und die beste Kombination für Ihr nächstes Projekt finden.

Klassische Lösungen

Möchten Sie einen bewährteren Ansatz für Ihren Begrüßungsbildschirm verwenden? Die folgenden Beispiele helfen Ihnen dabei.

Startbildschirm von Adam Blum

Hinter der Schönheit der Lösung von Adam Blum steht ein traditioneller Gleiteffekt. Es enthält einen sauberen, reinen Hintergrund und mehrere Schlüsselphrasen, die nacheinander erscheinen. Es nutzt die Kraft der Antizipation: Der primitive, aber praktikable Weg, das Interesse eines Benutzers zu wecken.

Play On von Nirajan

Um die vorherige Lösung etwas interessanter zu machen, können Sie Manipulationen mit einem Hintergrund hinzufügen, wie es Niranjan in diesem Stift getan hat. Sein Projekt Play On zeigt schöne gleitende Übergänge zwischen den halbtransparenten Overlay-Bildschirmen, die auf den Bildhintergrund aufgebracht werden. Nett und amüsant.

Mein Splash von Williams

My Splash von Williams ist ein weiteres repräsentatives Beispiel für einen klassischen Begrüßungsbildschirm. Das Konzept ist zweistufig. Zunächst offenbart die Animation in moderatem und gemütlichem Tempo die Handschrift des Autors. Danach erscheint ein schwarzer Bildschirm. Dies ist eine elegante, schlanke und geschäftsmäßige Lösung, die für zahlreiche Projekte geeignet ist.

Animierter Startbildschirm von Dmytro Lvivsky

Der animierte Startbildschirm von Dmytro Lvivsky ist ein perfekter Ausgangspunkt für die Erstellung Ihrer eigenen Lösung. Die JavaScript-basierte Animation hat mehrere Bildschirme und einen traditionellen Übergang zwischen jedem. Letzteres basiert auf einem Effekt, bei dem ein Kreis das Spiel führt.

Sehen Sie sich den stiftanimierten Startbildschirm von Dmytro Lvivsky (@UnforbiddenYet) auf CodePen an.

Einfaches CSS3-Fading von Giles Papworth

Hier ist eine unglaublich vereinfachte Lösung. Die Routine besteht darin, Textblöcke nacheinander anzuzeigen, begleitet von einem althergebrachten Fading-Effekt. Es tut jedoch alles was es soll. Und was am wichtigsten ist, es tut es, ohne Ihre wertvollen Ressourcen zu „fressen“, da es nur CSS3 verwendet. Es ist einfach, elegant, bescheiden und leicht.

Der Stimmungsmacher

Die folgenden Beispiele zeigen, dass man mit einem Splashscreen auch von Anfang an den Ton für eine Website angeben kann.

Animation zum Laden der Konsole von Andrew Tunnecliffe

Wenn Sie beispielsweise ein Programmierer sind, wird die Konsolenladeanimation von Andrew Tunnecliffe eine angemessene Atmosphäre schaffen. Es ist altmodisch, brutal einfach und passt perfekt zu jedem persönlichen Portfolio eines Entwicklers.

Fallende Zahlen von Thibault Jan Beyer

Wenn Sie ein statistikbasiertes oder datengesteuertes Projekt im Sinn haben, dann ist Falling Numbers von Thibault Jan Beyer ein guter Start für Ihre Storytelling-Erfahrung. Die Animation beginnt mit fallenden Zahlen, die schließlich den Boden berühren und den Hauptbildschirm öffnen. Es hat einen geometrischen Charme, der mit digitaler Würze angereichert ist.

Zu guter Letzt

Für viele Menschen wird Stan Lee immer „Bruce Lees nerdiger Bruder“ bleiben. Für uns ist er eine Ikone, die hinter einem Universum stand, in dem das Gute über das Böse triumphiert, und die für immer in unseren Herzen sein wird.

Marvel Startbildschirm von Matt Feinstein

Marvel Splash Screen von Matt Feinstein ist nicht gerade eine Hommage, aber alle Superhelden-Fans werden es genießen. Der Titel spricht für sich. Seine Splash-Animation hat eine wunderbare Comicbuch-Atmosphäre. Es ist eine Replik einer Eröffnungssequenz für Marvel-Filme, die unglaublich aussieht.

Wie man einen Spritzer macht

Als Alternative zu Ladern können Spritzschutzgitter verwendet werden – es sei denn, sie sind schwer. Leider gibt es immer noch Leute, die sie zu ernst nehmen und versuchen, sie in einen actiongeladenen Teil eines Theaterstücks zu verwandeln.

Begrüßungsbildschirme im Webdesign sind effektiv, solange sie schnell, kurz, leicht und direkt auf den Punkt kommen. Natürlich geben sie Ihnen den gesamten Bildschirm, um Ihr Genie zu zeigen. Dennoch sollten Sie an seiner ursprünglichen Mission festhalten. Es sind Spritzer, die das Interesse wecken und sofort den Staffelstab zu einer spannenderen Lösung weitergeben sollen.