10 esempi drammatici di schermate iniziali nel web design

Vuoi fare un ingresso drammatico? Vuoi riscaldare i visitatori prima di stupirli con le tue sbalorditive animazioni, esperimenti con librerie di fascia alta o semplicemente design ingegnoso? Quindi dovresti probabilmente mettere gli occhi su una schermata iniziale.

Proveniente dal mondo dei software desktop, è riuscita a mettere radici con successo nel web design. È veloce, veloce, leggero, relativamente semplice e potente. Parliamo sempre di come i primi secondi possano fare la differenza. Tutto dovrebbe essere perfetto dall'inizio. E gli splash screen sono una di quelle componenti dell'applicazione web che sono direttamente legate al successo di questa missione.

La maggior parte là fuori pensa che l'area dell'eroe stia dietro la creazione di questa preziosa prima impressione. Tuttavia, ci sono quegli artisti del codice scrupolosi e diligenti che adorano punteggiare le i e incrociare le t, credendo che ogni secondo conti. Bene, è così.

Prima inizi a imburrare il tuo pubblico online, migliore sarà la prima impressione che farai. Ecco perché stiamo assistendo a varie soluzioni originali in quest'arena. In realtà e di fatto aprono la conversazione tra il sito Web e il pubblico. E se pensi che un caricatore non abbia la capacità di mostrare la tua creatività, le schermate iniziali hanno sicuramente del potenziale.

Utilizzo dello schermo intero

Con un'animazione splash, l'intero schermo è al tuo servizio, non solo un piccolo elemento. Sono come le sequenze dei titoli di testa di un film che promettono al pubblico qualcosa di incredibile, accendendo così l'interesse.

SmokeT di Tedd Arcuri

Three.js non è un buon compagno per creare introduzioni rapide e leggere, ma nel caso di Tedd Arcuri fa sicuramente il trucco. Qui l'effetto fumo altamente realistico riprodotto abilmente viene utilizzato per migliorare l'aspetto della lettera "T". Quest'ultimo è qui puramente simbolico poiché può essere facilmente trasformato in un logo, una mascotte o un titolo.

.

Splash page di Timothy Giblin

La maggior parte delle schermate iniziali va di pari passo con l'identità del marchio. Ad esempio, Splash page di Timothy Giblin. È una schermata iniziale classica al 100% che presenta l'identità del marchio arricchita dal pensiero creativo di un artista. L'autore ci mostra come aderire al mezzo aureo. Il suo concetto è originale e allo stesso tempo modesto. Scopre solo un logotipo, ma questa scoperta attira l'attenzione.

Animazione Splash Screen di Hitesh Sahu

Questo esempio è meno impressionante della soluzione di Timothy Giblin, ma è più pratico e può essere visto ovunque in questi giorni. In sostanza, è solo un caricamento pigro portato al livello successivo. Rivela gli elementi della homepage uno per uno in modo giocoso e creativo, rendendo le cose molto più interessanti.

Ci sono alcuni frammenti di codice più interessanti. Esploriamo insieme la collezione e troviamo la migliore corrispondenza per il tuo prossimo progetto.

Soluzioni classiche

Stai cercando di utilizzare un approccio più collaudato alla schermata iniziale? Gli esempi seguenti ti aiuteranno ad arrivarci.

Splash Screen di Adam Blum

Dietro la bellezza della soluzione di Adam Blum c'è un tradizionale effetto scorrevole. Include uno sfondo pulito e puro e diverse frasi chiave che appaiono una dopo l'altra. Sfrutta il potere dell'anticipazione: il modo primitivo, ma praticabile, per suscitare l'interesse di un utente.

Play On di Nirajan

Per rendere un po' più interessante la soluzione precedente, puoi aggiungere manipolazioni con uno sfondo come ha fatto Niranjan in questa penna. Il suo progetto Play On presenta incantevoli transizioni scorrevoli tra gli schermi sovrapposti semitrasparenti applicati allo sfondo dell'immagine. Bello e divertente.

Il mio Splash di Williams

My Splash di Williams è un altro esempio rappresentativo di uno splash screen classico. Il concetto ha due fasi. All'inizio, l'animazione rivela la firma dell'autore a un ritmo moderato e confortevole. Successivamente, viene visualizzata una schermata nera. Questa è una soluzione elegante, elegante e professionale che si adatta a numerosi progetti.

Splash Screen animato di Dmytro Lvivsky

La schermata iniziale animata di Dmytro Lvivsky è un punto di partenza perfetto per creare la tua soluzione. L'animazione basata su JavaScript ha diverse schermate e una transizione tradizionale tra ciascuna. Quest'ultimo si basa su un effetto in cui un cerchio guida il gioco.

Guarda la schermata iniziale animata con la penna di Dmytro Lvivsky (@UnforbiddenYet) su CodePen.

Semplice dissolvenza CSS3 di Giles Papworth

Ecco una soluzione incredibilmente semplificata. La routine consiste nel mostrare blocchi di testo uno per uno, accompagnati da un antico effetto di dissolvenza. Tuttavia, fa tutto ciò che dovrebbe. E, soprattutto, lo fa senza “mangiare” le tue preziose risorse perché utilizza solo CSS3. È semplice, elegante, modesto e leggero.

Il Mood Setter

Gli esempi seguenti mostrano che una schermata iniziale può essere utilizzata anche per impostare il tono di un sito Web fin dall'inizio.

Animazione di caricamento della console di Andrew Tunnecliffe

Ad esempio, se sei un programmatore, l'animazione di caricamento della console di Andrew Tunnecliffe creerà un'atmosfera adeguata. È vecchia scuola, è brutalmente semplice e si sposa perfettamente con qualsiasi portfolio personale per uno sviluppatore.

Numeri in calo di Thibault Jan Beyer

Se hai in mente un progetto basato su statistiche o basato sui dati, Falling Numbers di Thibault Jan Beyer è un buon inizio per la tua esperienza di narrazione. L'animazione si apre con numeri in caduta che alla fine colpiscono il suolo e aprono la schermata principale. Ha un fascino geometrico arricchito con qualche spezia digitale.

Ultimo, ma non per importanza

Per molte persone, Stan Lee sarà sempre "il fratello nerd di Bruce Lee". Per noi, è un'icona che stava dietro un universo in cui il bene trionfa sul male e che sarà per sempre nei nostri cuori.

Marvel Splash Screen di Matt Feinstein

Marvel Splash Screen di Matt Feinstein non è esattamente un tributo, ma tutti i fan dei supereroi lo apprezzeranno. Il titolo parla da solo. La sua animazione splash ha una meravigliosa atmosfera da fumetto. È una replica di una sequenza di apertura per i film Marvel che sembra incredibile.

Come fare un tuffo

Gli splash screen possono essere utilizzati come alternativa ai caricatori, a meno che, ovviamente, non siano pesanti. Sfortunatamente, ci sono ancora persone che li prendono troppo sul serio e cercano di trasformarli in una parte ricca di azione di un gioco.

Le schermate iniziali nel web design sono efficaci purché siano rapide, corte, leggere e dritte al punto. Naturalmente, ti danno l'intero schermo per mostrare il tuo genio. Tuttavia, dovresti attenerti alla sua missione originale. Sono schizzi che dovrebbero suscitare interesse e passare immediatamente il testimone a una soluzione più eccitante.