Una previsione un po 'audace: il 2014 scenderà come l'anno della parallasse. Prima di minimizzare questa tendenza riemergente, pensaci. Con gli sviluppi in HTML, CSS e jQuery, e più persone che utilizzano connessioni Internet ad alta velocità, non è un problema pensare che questa tecnica ingegnosa esploderà davvero quest'anno.
Gli effetti di scorrimento parallasse sono divertenti, facili da usare e consentono nuovi tipi di pensiero creativo nel processo di progettazione del sito web. Il risultato finale è una tecnica che può essere divertente da creare e può creare un'esperienza visiva e interattiva per gli utenti.
Cos'è la parallasse?
La parallasse è una tecnica in cui gli strati di contenuto sono progettati per funzionare e muoversi insieme. Il modo in cui funziona è che le immagini di sfondo, medio e in primo piano sono create e progettate per spostarsi a velocità diverse in modo che gli elementi sullo schermo si muovano.
La parallasse può funzionare con una funzione click o scroll (chiamata scrolling parallasse) e gli elementi possono muoversi su e giù o lateralmente. In alcuni disegni parallasse tutti gli elementi si muovono all'unisono, quindi sembra che tu stia passando da una schermata all'altra. Altri disegni di parallasse consentono più parti mobili in modo tale da creare quasi animazioni attive.
Gli effetti di parallasse non sono nuovi. Sono stati in giro da anni. (Pensa ai videogiochi e alle gif animate.) Ma fino a poco tempo fa questi effetti erano al minimo approssimativi e spesso ridicoli. La tecnica era difficile da creare e andare a lavorare bene e i progettisti e gli sviluppatori non ne facevano più parte.
Ma Apple ha di nuovo aiutato a guidare la carica per rendere questa tecnologia più diffusa, usando gli effetti di parallasse nel lancio di iOS 7 lo scorso autunno. E un sacco di designer hanno seguito l'esempio, con effetti a scorrimento di parallasse che spuntano su tutto il web e in una varietà di app. Ma questa volta la tecnica era molto più raffinata e fornisce un'esperienza utente memorabile.
Questo sarà un anno rivoluzionario
Un'enfasi sull'esperienza utente è il motivo per cui gli effetti di parallasse decolleranno davvero quest'anno. La tecnica può essere utilizzata per creare un sito web abbastanza memorabile senza un sacco di clic. Gli effetti di scorrimento parallasse possono creare un senso di mistero per l'utente come una? Storia? si svolge. Con ogni nuovo movimento, qualcosa di nuovo si sviluppa per l'utente. Questo effetto può creare intrighi e il desiderio di continuare a interagire con un sito web. (Sempre un bonus per quelli di voi che registrano il tempo sul sito.)
Parallax offre un approccio diverso alla presentazione di contenuti e design. I progettisti stanno sperimentando la parallasse perché:
- È divertente
- Crea un'esperienza utente nuova e distinta
- Incoraggia i visitatori a rimanere più a lungo
- Fa appello al nostro senso di curiosità
- È un nuovo modo di creare una storia visiva
Grandi effetti su 'One Page'
Gli effetti di parallasse funzionano in armonia con un'altra tendenza del web design: design a pagina singola. È possibile creare diverse schermate di contenuti che sembrano e si comportano quasi come pagine diverse ma in realtà sono tutte su un'unica pagina.
Alcune delle mie pagine a scorrimento di parallasse preferite? includere effetti che rendono esperienze visive distinte. Spesso il colore cambia quando si arriva a nuovi contenuti o si verifica uno scambio di immagini. Cyclemon fa un ottimo lavoro con questo effetto in un modo molto semplice. Con ogni schermata a scorrimento l'utente ottiene un nuovo sfondo (in un colore distinto) e un nuovo stile di bicicletta in primo piano. Il sito è robusto ma non si impantana mai. È possibile scorrere ciascuna delle 19 schermate? rapidamente o utilizzare la navigazione della luce sul lato destro della pagina per saltare sezioni. (Che graziosamente, mostra tutto ciò che hai saltato in un lampo.)
Il New York Times è stato anche uno dei leader nel design della parallasse con caratteristiche degne di nota come? Tomato Can Blues? e il pluripremiato? Snow Fall.? Il sito web del giornale fa un ottimo lavoro usando la parallasse per raccontare una storia con movimento, testo, video e immagini. In? Tomato Can Blues ,? le immagini in stile fumetto prendono vita con un semplice movimento grazie alla parallasse. In? Neve caduta ,? la storia di lunga durata è raccontata con un mix di effetti che ti tengono in movimento attraverso il contenuto.
Plances parallasse
Mentre ci sono diversi vantaggi per una varietà di stili di design differenti, la parallasse ha qualcosa di proprio. Semplice, gli effetti possono essere molto divertenti. Questo da solo probabilmente coinvolgerà gli utenti.
Effetti interessanti faranno prendere nota agli utenti. Ma le tecniche di parallasse possono avere anche altri vantaggi:
- Stile narrativo distinto: Con tutta l'enfasi sui contenuti, questo stile di creazione di contenuti che racconta una storia è un'opzione praticabile.
- Invita all'azione: Gli effetti di parallasse possono essere usati per dire agli utenti cosa vuoi che facciano. Facendo clic su un collegamento per compilare un modulo o acquistare un oggetto, gli effetti di parallasse possono portare gli utenti a un'azione diretta.
- Fidanzamento: Non c'è dubbio che i siti con effetti di parallasse efficaci e ben progettati hanno tempi di coinvolgimento più lunghi con gli utenti.
- Caratterizza un prodotto: Puoi usare gli effetti di parallasse per mostrare un prodotto. Pensa alle visualizzazioni a 360 gradi degli articoli su alcuni siti di vendita al dettaglio. Lascia che gli utenti vedano davvero un oggetto prima di acquistare.
Punte di parallasse
Gli effetti di parallasse non sono per ogni tipo di sito. Devi sapere cosa vuoi ottenere da questa tecnica prima di usarla solo perché è alla moda.
E mentre gli effetti di parallasse possono complicarsi in fretta, il consiglio migliore è quello di mantenere le cose semplici. Decidi quali effetti vuoi utilizzare e segui tutto il sito. Fornisci puntatori per gli utenti in caso di domande su come funziona il sito. (Ad esempio, se una scroll fa muovere qualcosa da sinistra a destra piuttosto che su e giù, informa gli utenti.)
Usa la parallasse per raccontare una storia. È a mani libere il miglior uso della tecnica. Assicurati che i tuoi effetti riflettano le azioni che gli utenti farebbero mentre interagiscono con i tuoi contenuti.
Essere consapevoli del peso sul sito.Con tutto ciò che accade in background e il codice, tutto su questo tipo di progettazione del sito dovrebbe essere adeguatamente ottimizzato. Scala le immagini correttamente, mantieni il tuo codice pulito e assicurati che il tuo sito venga caricato rapidamente.
Indirizzare gli utenti nella giusta direzione. Le chiamate all'azione dovrebbero essere chiaramente etichettate sullo schermo con istruzioni facili da usare.
Le insidie della parallasse
I siti Web parallasse possono diventare pesanti rapidamente, porre alcuni problemi SEO, sono spesso incompatibili con i framework di progettazione reattivi, non consentono il collegamento interno alle pagine e non funzionano molto bene per contenuti pesanti.Mentre si discute sul fatto che a tutti gli utenti piaccia o meno gli effetti di parallasse - la risposta ovvia è no, non si può piacere a tutti in continuazione - ci sono alcuni aspetti negativi a cui pensare. I siti Web parallasse possono diventare pesanti rapidamente, porre alcuni problemi SEO, sono spesso incompatibili con i framework di progettazione reattivi, non consentono il collegamento interno alle pagine e non funzionano molto bene per contenuti pesanti.
Un sito Web di parallasse pesante dovrebbe essere evitato. Se il sito non viene caricato rapidamente, gli utenti non aspetteranno di vedere i tuoi contenuti. Crea il sito il più mite possibile, facendo particolare attenzione alle immagini e agli effetti.
L'ottimizzazione dei motori di ricerca ha un grande successo con siti web di una sola pagina di qualsiasi tipo. Poiché la natura del sito è semplice, non c'è molto che possa essere fatto per rafforzare le parole chiave, creare collegamenti e contribuire alla ricerca. Dove puoi vedere una spinta SEO è attraverso i social media, perché i siti che sono unici e diversi tendono ad essere condivisi.
Quando si tratta di design reattivo e mobile, la parallasse non è ancora abbastanza. Spesso hai bisogno di un grande schermo per vedere veramente gli effetti. La parallasse è anche una tecnica che funziona meglio per un progetto con un ambito ristretto. Con troppi contenuti, può diventare travolgente rapidamente.
5 fantastici siti parallasse
Atlantis World's Fair
Express Solicitors
Mario Kart
Minhacidade.me
Soleil Noir
Conclusione
Grazie alla sua natura divertente e semplice, le tecniche di progettazione parallasse sono qualcosa che continueremo a vedere più come l'anno avanza. Il numero di siti che già utilizzano una qualche forma di azioni di parallasse cresce ogni giorno con più designer che cercano le loro mani con effetti mobili.
È una tendenza che mi sta piacendo. Adoro visitare un sito per la prima volta e voglio davvero giocare con il contenuto per vedere cosa succede dopo. Parallax parla della mia natura generalmente curiosa e l'elemento aggiunto della narrazione rende più divertente questo tipo di progettazione di siti web.
Fonti di immagini: Ben the Bodyguard, Honda CRV, Black Eye Project, Pericoli di Fracking, Arnold Clark e Tinke. (Ti consiglio di fare clic sulle immagini menzionate per capire veramente come funziona la parallasse di ogni sito. Le schermate non trasmettono pienamente la bellezza di come funzionano questi siti).