Tendenza del design: foto che arrivano vive
Una foto dal vivo. Cinemagraph. Immagini in movimento. Ancora in movimento. Ci sono così tanti nomi per questa tendenza nel web design, identificati da un'immagine di eroe che sembra prendere vita in modo sottile.
Non è proprio una foto, ma nemmeno un video. Il movimento è spesso limitato a un'azione nell'immagine per attirare l'attenzione dell'utente e attirarli nell'immagine. Indipendentemente da come lo chiami, questa tendenza sta avendo un impatto e sta emergendo ovunque nel web design, come gif condivisibili e sui social media.
Evoluzione della tendenza
È difficile dire da dove sia nata l'idea delle foto "live", ma potresti sostenere che Apple ha contribuito a renderla più popolare. La società ha introdotto la fotografia che includeva tocchi di movimento con l'iPhone 6S. Quel piccolo momento di gioia in più è lo stesso concetto per vivere le foto sui siti Web. C'è qualcosa in più in un'immagine stellare che ti fa guardare ancora un po 'di più.
Lo stesso concetto di immagini in movimento ha iniziato ad apparire in più luoghi. Le pubblicità apparentemente inquadrate sui cartelloni digitali includono qualcuno che poi ti sbatte le palpebre o ti fa l'occhiolino. Anche le formazioni di Sunday Night Football includono colpi alla testa dei giocatori che lampeggiano dopo un secondo, dimostrando che si tratta in realtà di un'azione dal vivo.
Perché usare questa tecnica? Mantiene l'attenzione dell'utente più a lungo e fornisce un punto di riferimento visivo più interessante. Flixel, un'azienda che realizza immagini cinematografiche per i clienti, afferma che la foto in movimento media mantiene l'attenzione dell'utente 9 secondi, rispetto a 1 secondo per l'immagine fissa media.
Foto o illustrazioni
Immagini viventi o cinemagraph possono lavorare con fotografie o illustrazioni. Non esiste una regola che dice che devi usare un tipo di immagine o un altro. 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, getta luce sui prodotti nella homepage mentre carica. Questo è l'unico movimento e quindi la foto è proprio quella, una foto fissa. La cosa bella dell'effetto qui è che ti fa guardare direttamente alle sedie che l'azienda vende subito. La tecnica mostra agli utenti ciò che nella pagina conta 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 superiore 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 conosce immediatamente qualcosa sulla messaggistica di questo sito Web perché sono attratti 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 viene mostrata in un headshot sovradimensionato. Un prodotto potrebbe inclinarsi o ruotare o completare l'azione per cui è stato progettato.
La cosa più importante quando si pensa a questa tendenza è la semplicità. Se c'è troppo movimento, probabilmente dovresti 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 a un uso per sito Web.
- Deve apparire 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 un controllo utente sottile, 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 nel tuo sito Web.
Come si fa?
Ci sono molti modi per creare questo effetto nei tuoi progetti. Il metodo determina davvero il tuo livello di abilità, il modo in cui prevedi di utilizzare le immagini viventi e il budget.
Alcune delle opzioni per creare un movimento sottile includono:
- Crea una gif.
- Utilizzare uno strumento online (è disponibile un numero con costi variabili.
- Crea l'immagine come video con movimento limitato.
- Usa un'app o anche il tuo iPhone.
- Unisci immagini fisse in un formato video.
Prova questo tutorial di YouTube per aiutarti a pianificare e creare un'immagine vivente.
Un esempio perfetto
Il sito web di Monochrome Paris è un perfetto esempio di questa tendenza in azione. La homepage è un'immagine apparentemente semplice di un disco, ma l'elemento rigido sembra quasi sciolto e assume il movimento del tessuto che si muove nel vento. L'effetto è accattivante, accattivante e attira gli utenti nel design.
L'effetto aiuta a creare interesse in modo sottile. L'immagine visiva sembra un po 'più reale a causa del movimento. Scorri verso il basso la pagina e 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. Vai e fai clic per aiutarti a trarre ispirazione.
Conclusione
Indipendentemente da come lo chiami, le immagini viventi sono una di quelle tendenze che probabilmente rimarranno. È un altro modo per aggiungere animazione a un design senza necessariamente produrre un video reale. È efficace e può essere molto meno costoso della produzione video.
Il trucco di questa tendenza è assicurarsi che appaia intenzionale e reale. Incorporare un po 'sciocco di movimento non ti darà necessariamente l'effetto desiderato. Torna indietro e guarda davvero gli esempi sopra, vai ai siti Web e fai clic 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. Quell'uso intenzionale e diretto del movimento è la chiave per un'efficace progettazione cinematografica.
