10 exemple dramatice de ecrane de splash în design web

Vrei să faci o intrare dramatică? Vrei să încălziți vizitatorii înainte de a-i uimi cu animațiile uimitoare, experimentele cu biblioteci de ultimă generație sau pur și simplu design ingenios? Atunci probabil că ar trebui să vă puneți ochii pe un ecran de splash.

Venind din lumea software-ului desktop, a reușit să se înrădăcineze cu succes în designul web. Este vioi, rapid, ușor, relativ simplu și puternic. Întotdeauna vorbim despre modul în care primele secunde pot face o lume de diferență. Totul ar trebui să fie perfect de la început. Și splash screen-urile sunt una dintre acele componente ale aplicației web care sunt direct legate de succesul acestei misiuni.

Majoritatea de acolo cred că zona eroilor stă în spatele creării acestei prime impresii prețioase. Cu toate acestea, există acei artiști de cod scrupuloși și sârguincioși care adoră să pună i-urile și să încrucișeze t-urile, crezând că fiecare secundă contează. Ei bine, așa stau lucrurile.

Cu cât începi mai devreme să-ți ungi publicul online, cu atât vei face prima impresie mai bună. De aceea asistăm la diverse soluții originale în acest domeniu. De fapt, ei deschid conversația dintre site și public. Și dacă credeți că un încărcător nu are capacitatea de a vă etala creativitatea, atunci ecranele de splash au cu siguranță un anumit potențial.

Utilizarea ecranului complet

Cu o animație splash, întregul ecran vă stă la dispoziție, nu doar un mic element. Sunt ca secvențele de credit de deschidere a filmului care promit publicului ceva incredibil, stârnind astfel interesul.

SmokeT de Tedd Arcuri

Three.js nu este un însoțitor bun pentru crearea de intrări rapide și ușoare, dar în cazul lui Tedd Arcuri, cu siguranță face treaba. Aici, efectul de fum extrem de realist reprodus cu pricepere este folosit pentru a îmbunătăți aspectul literei „T”. Acesta din urmă este pur simbolic aici, deoarece poate fi ușor schimbat într-un logotip, mascota sau un titlu.

.

Splash page de Timothy Giblin

Majoritatea ecranelor de splash merg mână în mână cu identitatea mărcii. De exemplu, Splash page de Timothy Giblin. Este un ecran de splash 100% clasic, care prezintă identitate de marcă îmbogățită cu gândirea creativă a unui artist. Autorul ne arată cum să aderăm la mijlocul de aur. Conceptul său este original și în același timp modest. Descoperă doar un logotip, dar această descoperire atrage atenția.

Animație Splash Screen de Hitesh Sahu

Acest exemplu este mai puțin impresionant decât soluția lui Timothy Giblin, dar este mai practic și poate fi văzut peste tot în zilele noastre. În esență, este doar o încărcare leneșă dusă la următorul nivel. Dezvăluie elementele paginii de pornire unul câte unul în mod jucăuș și creativ, făcând lucrurile mult mai interesante.

Există câteva fragmente de cod mai interesante. Să explorăm împreună colecția și să găsim cea mai bună potrivire pentru următorul tău proiect.

Soluții clasice

Doriți să utilizați o abordare mai încercată și adevărată a ecranului dvs. de deschidere? Exemplele de mai jos vă vor ajuta să ajungeți acolo.

Splash Screen de Adam Blum

Un efect tradițional de alunecare stă în spatele frumuseții soluției lui Adam Blum. Include un fundal curat, pur și câteva fraze cheie care apar una după alta. Profită de puterea anticipării: modalitatea primitivă, dar viabilă, de a stimula interesul unui utilizator.

Play On de Nirajan

Pentru a face soluția anterioară un pic mai interesantă, puteți adăuga manipulări cu un fundal așa cum a făcut Niranjan în acest stilou. Proiectul său Play On prezintă tranziții de alunecare minunate între ecranele suprapuse semi-transparente aplicate pe fundalul imaginii. Frumos și amuzant.

My Splash de Williams

My Splash by Williams este un alt exemplu reprezentativ de ecran de splash clasic. Conceptul are două etape. La început, animația dezvăluie semnătura autorului într-un ritm moderat și confortabil. După aceea, apare un ecran negru. Aceasta este o soluție elegantă, netedă și de afaceri, care se potrivește numeroaselor proiecte.

Splash Screen animat de Dmytro Lvivsky

Ecranul de splash animat de Dmytro Lvivsky este un punct de plecare perfect pentru crearea propriei soluții. Animația bazată pe JavaScript are mai multe ecrane și o tranziție tradițională între fiecare. Acesta din urmă se bazează pe un efect în care un cerc conduce piesa.

Vedeți ecranul animat cu creion de la Dmytro Lvivsky (@UnforbiddenYet) pe CodePen.

Fading CSS3 simplu de Giles Papworth

Iată o soluție incredibil de simplificată. Rutina constă în afișarea blocurilor de texte unul câte unul, însoțite de un efect de estompare onorat de timp. Cu toate acestea, face tot ce trebuie. Și, cel mai important, o face fără a vă „mânca” resursele prețioase, deoarece folosește doar CSS3. Este simplu, elegant, modest și ușor.

Stabilitorul de dispoziție

Următoarele exemple arată că un ecran de introducere poate fi folosit și pentru a seta tonul pentru un site web de la început.

Animație de încărcare consolă de Andrew Tunnecliffe

De exemplu, dacă sunteți un programator, atunci animația de încărcare a consolei de Andrew Tunnecliffe va crea o atmosferă adecvată. Este old-school, este brutal de simplu și se potrivește perfect cu orice portofoliu personal pentru un dezvoltator.

Numere în scădere de Thibault Jan Beyer

Dacă aveți în vedere un proiect bazat pe statistici sau bazat pe date, atunci Falling Numbers de Thibault Jan Beyer este un început bun pentru experiența dvs. de povestire. Animația se deschide cu numere în scădere care în cele din urmă lovesc pământul și deschid ecranul principal. Are un farmec geometric îmbogățit cu niște condimente digitale.

Ultimul, dar nu cel din urmă

Pentru mulți oameni, Stan Lee va fi întotdeauna „fratele tocilar al lui Bruce Lee”. Pentru noi, el este o icoană care stătea în spatele unui univers în care binele triumfă asupra răului și care va rămâne în inimile noastre pentru totdeauna.

Marvel Splash Screen de Matt Feinstein

Marvel Splash Screen de Matt Feinstein nu este tocmai un tribut, dar toți fanii super-eroilor se vor bucura de el. Titlul vorbește de la sine. Animația lui stropitoare are o atmosferă minunată de benzi desenate. Este o replică a unei secvențe de deschidere a filmelor Marvel care arată incredibil.

Cum să faci o stropire

Ecranele de stropire pot fi folosite ca alternativă la încărcătoare – cu excepția cazului în care, desigur, sunt grele. Din păcate, există încă oameni care le iau prea în serios și încearcă să le transforme într-o parte plină de acțiune a unei piese.

Ecranele de splash în design web sunt eficiente atâta timp cât sunt rapide, scurte, ușoare și directe la obiect. Desigur, îți oferă întregul ecran pentru a-ți arăta geniul. Totuși, ar trebui să te ții de misiunea inițială. Sunt stropi care ar trebui să stârnească interesul și să treacă imediat ștafeta unei soluții mai incitante.