Una foto dal vivo. Cinemagraph. Immagini in movimento. Ancora movimento. Ci sono così tanti nomi per questa tendenza nel web design, identificata da un'immagine di un eroe che sembra prendere vita in modo sottile.
Non è proprio una foto, ma neanche un video. Il movimento è spesso limitato a un'azione nell'immagine per aiutare a catturare l'attenzione dell'utente e ad attirarlo nell'immagine. Indipendentemente da come lo chiami, questa tendenza sta avendo un impatto e sta spuntando ovunque nel web design, come gif condivisibili e sui social media.
Evoluzione della tendenza
È difficile dire dove sia l'idea? le foto sono iniziate, ma potresti sostenere che Apple ha contribuito a renderlo più popolare. La società ha introdotto la fotografia che includeva tocchi di movimento con l'iPhone 6S. Quel piccolo momento in più di delizia è lo stesso concetto per le foto viventi sui siti web. C'è qualcosa in più in un'immagine stellare che ti tiene a guardarlo solo un po 'più a lungo.
Lo stesso concetto di immagini in movimento ha iniziato a comparire in più punti. Le pubblicità apparentemente fisse sui cartelloni digitali includono qualcuno che poi lampeggia o strizza l'occhio. Anche le formazioni per il Sunday Night Football includono colpi alla testa del giocatore che lampeggiano dopo un secondo, mostrandoti che si tratta di azioni dal vivo.
Perché usare questa tecnica? Mantiene l'attenzione dell'utente più a lungo e fornisce un punto di riferimento visivo più interessante. Flixel, una società che produce immagini Cinemagraph per i clienti, afferma che la foto in movimento medio mantiene l'attenzione degli utenti 9 secondi, rispetto a 1 secondo per l'immagine fissa media.
Foto o illustrazioni
Le immagini viventi oi cinemagraphs possono funzionare con fotografie o illustrazioni. Non c'è una regola che dice che devi usare un tipo di immagine o un'altra. Guardando le due immagini sopra, puoi vedere che entrambi gli stili possono essere abbastanza efficaci.
Un'altra considerazione è che il movimento non deve continuare ad accadere in un ciclo. Hillmann Living, sopra, illumina i prodotti sulla home page mentre carica. Questo è l'unico movimento e quindi la foto è solo quella, una foto ferma. Ciò che è bello dell'effetto qui è che ti fa guardare direttamente alle sedie che la compagnia sta vendendo subito. La tecnica mostra agli utenti ciò che è importante sulla pagina e su cosa dovrebbero concentrarsi in modo sottile e interessante.
Bar Z Wines ha un altro approccio. La homepage illustrata sembra piuttosto semplice all'inizio, ma un piccolo aereo vola attraverso il centro in alto dello schermo su un loop. Il movimento aiuta l'utente a guardare le parole importanti sullo schermo: "I nostri vini non sono filtrati". L'utente sa immediatamente qualcosa sulla messaggistica su questo sito Web perché è attratto dalla lingua più importante grazie al movimento sullo schermo.
Suggerimenti per il successo
Questa tecnica può funzionare in diversi modi e per una varietà di applicazioni di progettazione. Alcuni dei migliori esempi provengono da scene o paesaggi semplici in cui una bella fotografia è il punto di partenza.
L'erba potrebbe muoversi nel vento o in un paesaggio. Una persona potrebbe battere le palpebre quando è in mostra e un headshot di dimensioni eccessive. Un prodotto potrebbe inclinare o girare o completare l'azione per cui è stato progettato.
La cosa più importante quando si pensa a questa tendenza è la semplicità. Se c'è troppo movimento, dovresti probabilmente optare per un video. L'elemento sorpresa è ciò che lo fa funzionare; gli utenti si aspettano un'immagine fissa, ma poi prende vita.
- Attenersi a una cosa e un uso per sito web.
- Deve sembrare realistico.
- Il movimento deve seguire le leggi della fisica.
- Il movimento dovrebbe essere sottile ma evidente.
- Non esagerare aggiungendo suoni o molte azioni di clic.
- Prendi in considerazione il controllo da parte dell'utente, come il movimento che si verifica con i movimenti del mouse.
- Sviluppa un'immagine in movimento che può essere utilizzata in più campagne, non solo sul tuo sito web.
Come si fa?
Ci sono molti modi per creare questo effetto nei tuoi progetti. Il metodo determina in realtà il tuo livello di abilità, come pensi di utilizzare le immagini viventi e il budget.
Alcune delle opzioni per creare movimenti delicati includono:
- Crea una gif.
- Utilizzare uno strumento online (sono disponibili numeri con costi variabili.
- Crea l'immagine come video con movimento limitato.
- Usa un'app o persino il tuo iPhone.
- Stringa insieme le immagini fisse in un formato video.
Prova questo tutorial di YouTube per aiutarti a pianificare e creare un'immagine vivente.
Un perfetto esempio
Il sito Web di Monochrome Paris è un perfetto esempio di questa tendenza in azione. L'homepage è un'immagine apparentemente semplice di un disco, ma l'elemento rigido sembra quasi fuso e assume il movimento del tessuto che si muove nel vento. L'effetto è coinvolgente, accattivante e attira gli utenti nel design.
L'effetto aiuta a creare interesse in modo sottile. L'immagine immaginata sembra un po 'più reale a causa del movimento. Scorri la pagina verso il basso e gli altri elementi in movimento salutano l'utente, inclusa una normale visualizzazione della rotazione del record.
Questo sito Web è un ottimo caso di studio in modi efficaci per utilizzare questa tendenza. Andate su e fate clic intorno per aiutare a trarre ispirazione.
Conclusione
Indipendentemente da come lo chiami, le immagini viventi sono una di quelle tendenze che probabilmente resteranno. È un altro modo per aggiungere animazioni a un design senza dover necessariamente produrre un vero video. È efficace e può essere molto meno costoso della produzione di video.
Il trucco di questa tendenza è assicurarsi che appaia intenzionale e reale. Incorporare una sciocca mossa di movimento non ti darà necessariamente l'effetto desiderato. Torna indietro e guarda davvero gli esempi sopra, vai ai siti web e clicca in giro. Guarda a cosa ti porta l'animazione nel design. In ciascuno degli esempi, il movimento aiuta l'utente a raggiungere un elemento specifico o eseguire una determinata azione. Questo uso intenzionale e diretto del movimento è la chiave per un design cinemagraph efficace.