Il moderno Internet ad alta velocità ci ha davvero viziati. In questi giorni, se un sito web impiega più di 4 secondi per caricarsi, tendiamo a non preoccuparci nemmeno di aspettare; semplicemente chiudiamo la pagina e troviamo qualcos’altro. Questo è esattamente il motivo per cui i designer si prendono il tempo di inventare preloader creativi come questa divertente pallina che rimbalza.
Cos’è un preloader?
In sostanza, i preloader (noti anche come caricatori) sono ciò che si vede sullo schermo mentre il resto del contenuto della pagina sta ancora caricando. I precaricatori sono spesso animazioni semplici o complesse che vengono utilizzate per intrattenere i visitatori mentre le operazioni del server terminano l’elaborazione. Sfortunatamente, sono anche spesso trascurati nel processo di sviluppo della maggior parte dei progetti.
Perché è importante un preloader?
I preloader sono importanti elementi dell’interfaccia che fanno sapere ai visitatori che il sito web non è andato in crash, sta solo elaborando i dati. Di solito sono progettati come strisce in movimento o cerchi lampeggianti che rappresentano il tempo necessario per il caricamento, che, anche se funzionali, non sono affatto divertenti. Animazioni interessanti possono tenere impegnati i vostri utenti mentre aspettano che la pagina si carichi.
I designer lavorano molto duramente per rendere il tempo di attesa meno fastidioso per i visitatori del sito, ma questo può essere un compito molto difficile se non c’è la giusta ispirazione (e le ultime conoscenze).
Cosa dovrebbe essere un ottimo preloader?
Negli ultimi anni, la maggior parte dei progetti sono stati sviluppati con loader semplificati come best practice raccomandata. Le animazioni complesse del caricatore non sono state popolari per un po’ di tempo perché occupavano molte risorse per funzionare, rallentando ancora di più il processo di caricamento della pagina. Tuttavia, con l’aumento della potenza di elaborazione, l’era dei caricatori semplici sta giungendo al termine.
Oggi, un’animazione ben progettata e creativa offre l’opportunità di ravvivare la vostra interfaccia. Questo piccolo, ma importante dettaglio contribuisce all’individualità e al branding di qualsiasi prodotto.
Per questo motivo, abbiamo compilato e curato la seguente lista di esempi di preloader brillanti, divertenti e unici (compresi alcuni dei design di SteelKiwi) per aiutare te e il tuo team di design a trovare un po’ di ispirazione!
30 dei migliori design di preloader là fuori
Sliding Square LoaderView
Questo caricatore a quadratini scorrevoli rende l’attesa un po’ meno frustrante in quanto fa muovere l’occhio insieme ai quadratini. Un’ottima soluzione per le aziende che vendono elettronica o giochi online per mantenere i loro visitatori impegnati con il sito web.
DotsLoaderView
Le palline nere che rimbalzano e appaiono dal nulla per poi scomparire servono come elemento di intrattenimento e potrebbero essere usate per siti web che vogliono apparire presentabili ma con un pizzico di giocosità.
Simple Loader
Questo è un perfetto esempio di un preloader simile a un tamburo che assomiglia a una ruota della lotteria. Se un imprenditore vuole fare una connessione logica tra questo caricatore e l’applicazione che può implicare opportunità, fortuna o eccitazione, allora questa schermata di caricamento dovrebbe servire alle sue esigenze.
Bird Loader
Queste semplici forme geometriche ricordano un uccellino che gira la testa a sinistra o a destra come se stesse parlando con qualcuno. Questa animazione può essere un buon preloader per siti che presentano aziende nel settore della TV, della radio o dei social media.
LittlePin Spinner
Applicazioni che presentano servizi di viaggio o basati sulla posizione potrebbero rendere il caricamento molto più attraente usando il piccolo geopin colorato che gira avanti e indietro.
No Halftime Loaders Petrick
Un’emozionante animazione con diversi tipi di palline in movimento fa dimenticare ai visitatori che questo è solo un caricatore. Questo caricatore potrebbe completare qualsiasi sito web con eventi sportivi, attività o inventario sportivo.
Monkey Swinging Loader Hello Dribbble
Amore per gli animali? Ecco un caricatore sotto mentite spoglie: una scimmia oscillante. Essendo divertente, può attirare gli utenti mentre aspettano che la pagina si carichi. Le aziende che sono nell’industria dell’intrattenimento, come riviste, film, marketing, pubblicità, o quelle che vogliono semplicemente distinguersi tra la folla e disegnare un sorriso sui volti dei visitatori possono usarlo.
Cooper loader
Il preloader in rame a forma di eternity loop si muove dolcemente come un’onda ipnotizzante. Il caricatore con il suo design pulito e minimalista e l’animazione rilassante è applicabile a quasi tutti gli affari.
Carico…
Ecco la goccia che non scende mai. I colori bianco e blu sommesso contrastano bene insieme, e questo preloader non farà mai annoiare o frustrare il visitatore con il caricamento. Le aziende che vorrebbero fare appello alle generazioni più giovani potrebbero usare questa schermata di caricamento.
Ping-Pong Loader
Il ping-pong loader, con la sua animazione dal sapore di gomma con una racchetta e una palla, non può far distogliere lo sguardo. Si suppone che serva a riscaldare i visitatori prima che accedano effettivamente al contenuto di un sito web. Questo caricatore va bene per i siti sportivi o qualsiasi altro sito che offra qualsiasi cosa, dalle attività sportive all’inventario.
SurveyPlanet app Loader
Il pianeta turchese con un razzo bianco che gli orbita intorno mantiene l’attenzione dei visitatori sulla schermata di precarica. Questo caricatore di pianeta può essere usato per app di intrattenimento, o qualsiasi altra organizzazione che faccia ricerca o renda note al pubblico varie scoperte.
Caricatore di ingranaggi sfocati
Un caricatore di ingranaggi sfocati con le tre ruote dentate che girano incarna il movimento e la complessità e potrebbe essere appropriato per aziende che commercializzano macchinari o parti meccaniche.
CSS Stairs Loader
Il caricatore di scale discendenti e ascendenti con una palla bianca che salta in cima ha un design minimalista ma è molto diretto. Potrebbe avere senso per le aziende che vogliono presentarsi come serie e affidabili.
Penna di caricamento
Con un leggero tocco di semplicità, i cerchi colorati simili a bruchi che si muovono a sinistra o a destra e sono uno per lato rendono il caricamento meno noioso per i visitatori. Il caricatore è appropriato per quasi tutti i tipi di business con la sua animazione universale, e dovrebbe mantenere i visitatori divertiti mentre aspettano di atterrare sulla homepage.
CSS Loader
Un semplice caricatore “attira attenzione” come questo cubo rotolante che diventa più grande quando si va avanti e ritorna alla sua forma iniziale quando si torna indietro, è una soluzione riservata per il business che vuole apparire intelligente e sofisticato al visitatore.
Vivid Spinner CSS3
Il vivido spinner loader con l’arcobaleno rotante che rotola in una sorta di forma geometrica simile a un fiore può rallegrare i visitatori e aiutarli a prepararsi per qualcosa di divertente ed emozionante. Tale caricatore potrebbe essere usato per le aziende che commercializzano i loro prodotti o servizi ai bambini. Dovrebbe funzionare bene per i siti educativi per bambini.
Schermo di caricamento del prisma
Lo schermo di caricamento del prisma dovrebbe ricordare lo sfondo di LinkedIn per le foto. Il caricatore in remoto assomiglia a costellazioni che si muovono nello spazio con l’elemento principale al centro che potrebbe potenzialmente presentare un logo aziendale. Il caricatore potrebbe essere usato per le aziende che lavorano con clienti internazionali, per esempio nel settore B2B.
Loader
Come la varietà? Ecco il caricatore che intrattiene il visitatore, facendogli vedere un conto alla rovescia accompagnato da un’animazione mutevole di immagini diverse. Tenete a mente che questo caricatore può avere qualsiasi immagine in rotazione, quindi può adattarsi alle esigenze di qualsiasi business.
Redirecting Loader
Qui c’è una silhouette di un uomo con un jetpack sulla schiena che vola più veloce che può. Tale caricatore che reindirizza l’utente alla pagina successiva può essere utilizzato da quasi tutte le aziende, specialmente quelle che vorrebbero evidenziare l’elemento velocità del loro servizio.
Codepen Loading Dots
Avere un design minimalista e succinto, questo preloader di punti potrebbe essere usato da persone artistiche o designer per i loro portafogli online per esempio.
Preloader Animation
Questo preloader non dovrebbe ricordare il gioco del serpente? Questa animazione di icone energetiche con una spina può avere senso per gli internet provider o qualsiasi altra agenzia che aiuta le imprese e i clienti a collaborare.
Fare il pancake
Pancakes direttamente dai fornelli! Il caricatore con un pancake che gira sulla padella dovrebbe far venire l’acquolina in bocca al visitatore. Può essere un buon inizio per i siti web dedicati alla cucina o alla panificazione.
Simple Loader
Se un proprietario di un business non è schizzinoso riguardo al suo preloader e vorrebbe mantenerlo semplice, eccone uno semplice con un rettangolo che si divide.
Loader Animation
Ecco una collezione di loader animati personalizzati alimentati da SVG con diverse forme e forme geometriche di base. I proprietari di aziende che vogliono mantenere la serietà possono sfruttare l’ordine di questi caricatori in vari scopi di design.
Hand Animation Loading
Questa animazione della mano sembra non smettere mai di battere le dita come se stesse sempre aspettando qualcosa. In un certo senso trasmette la sensazione che le persone possono provare durante l’attesa e potrebbe essere usata dalle aziende che si sforzano di mantenere un grande senso dell’umorismo su se stesse.
Tree Preloader
Il preloader dell’albero alimentato da SVG e CSS è un’animazione ordinata che appare nelle applicazioni familiari o mediche. L’albero espande gradualmente i suoi rami che sembrano respirare, rendendo l’animazione piacevole da guardare.
Travel Preloader
Ecco un preloader applicabile alle imprese di noleggio di viaggi e trasporti. La schermata di caricamento cambia il tipo di veicolo accompagnato dal testo per migliorare l’impressione generale.
Car Drift Loader
Questo car drift loader alimentato da SVG è un’altra soluzione non convenzionale per siti web che commercializzano veicoli. Tuttavia, se preso in senso figurato, il preloader può essere usato per siti web o applicazioni relative a vari eventi sociali che portano le persone all’eccitazione e fanno un’impressione duratura.
Testa rotante
E una ciliegina sulla torta! Ecco un preloader con un pizzico di umorismo – non importa quanto duramente il personaggio della gomma da masticare stia correndo intorno alla sua testa, è troppo pesante e grande per muoversi, e lui sembra divertirsi.
I più grandi esempi di animazioni di precaricamento della pagina
Qui ci sono 5 siti web con eloquenti precaricatori per voi da gustare!
1. W. Brett Wilson
Un’altra schermata di caricamento creativa si trova sul sito di W. Brett Wilson. Una silhouette di un uomo che corre in una ruota per criceti e un testo che appare come uno slideshow mantengono il visitatore divertito e impegnato con il sito, mentre completano il suo design.
2. Сreative Сruise
Il sito di Creative Cruise è stato costruito per invitare le persone a celebrare le vibrazioni creative di Amsterdam. Per enfatizzare l’atmosfera prima ancora che un visitatore arrivi sulla homepage, un uomo dall’aspetto esilarante che balla la breakdance appare sulla schermata di caricamento. Il personaggio usato nel preloader ha perfettamente senso dato che la homepage è piena di personaggi simili che ballano e fanno festa.
3. Opencontinents
Ecco un sito costruito per l’esplorazione cinematografica nella narrazione globale. L’animazione di Open Continents è un preloader ben mascherato con stelle danzanti in un cerchio girevole. L’animazione è affascinante con il suo elemento interattivo dove un utente può dirigere il suo cursore sul cerchio e vedere come le stelle si diffondono. Questo preloader completa la Terra che appare sulla homepage. L’idea è quella di incarnare il movimento e il mistero, motivando i visitatori ad esplorare il sito, mantenendoli interessati nel frattempo.
4. Kokopako
Siti come Kokopako (creato in forma di portfolio) possono fare buon uso dei preloader, aggiungendo un tocco personale e un significato al contenuto di un sito. L’anno 1987 è un preloader di conto alla rovescia che approfondisce la narrazione del sito, pur essendo ben integrato nella homepage.
5. McWhopper.com
Il sito web di McWhopper è stato creato per commercializzare una proposta speciale di McDonald’s e Burger King. Il preloader del sito è molto attraente per i primi visitatori con il suo hamburger animato che salta come se fosse su un trampolino, dando la possibilità di vedere tutti gli ingredienti e rendendo l’esperienza di attesa più piacevole. Inoltre, il preloader fa uso del testo e si adatta bene al design generale del sito.
Altre risorse per i loader
Speriamo che questa lista ti ispiri a sviluppare un ottimo design di preloader per il tuo progetto!
Per avere ancora più esempi di caricatori creativi, puoi anche esplorare questa vetrina dei migliori preloader per siti web realizzati con Gif animate, CSS3, Canvas, o altre tecniche basate su Javascript, imparare da questo post sulla creazione di caricatori animati usando solo CSS, e leggere questo post sulla creazione di animazioni personalizzate per diminuire la frequenza di rimbalzo.
Non hai tempo per costruire il tuo? Ci sono molti preloader che possono essere utilizzati gratuitamente (o per un piccolo prezzo). Dai un’occhiata a preloaders.net o sfoglia questa lista di preloader e spinner gratuiti per web designer e sviluppatori.
Se hai altre domande sul design dei preloader, o hai bisogno di un design veramente unico e originale per un tuo preloader, contatta il nostro team e troveremo il loader perfetto che trasformerà il tuo progetto in qualcosa di veramente indimenticabile!
Applica i preloader nella tua homepage e nei design delle landing page.