Share
Il video stesso è in circolazione da molto tempo; nei film, in televisione e ora prontamente disponibili per giocare sui nostri telefoni, tablet e altri dispositivi. Anche i video sul web sono in circolazione da molto tempo. Abbiamo iniziato con file flash pesanti di video e animazioni, mentre ora abbiamo video HTML5 e molte altre opzioni per includere video nelle nostre pagine web. Diamine, metà del tempo è anche semplice come far cadere un po 'di codice in un sito web. In breve, non è mai stato così facile quando si tratta di utilizzare video sul web.
Progettare con i video era molto più difficile in passato di quanto lo sia ora. Scattare filmati di buona qualità spesso comportava attrezzature e software pesanti e costosi, mentre ora possiamo usare le nostre normali macchine fotografiche digitali (o anche i nostri telefoni!) Per fare riprese di grande qualità. E se volevi sequenze animate sul tuo sito web, dovevi essere molto bravo a illustrare digitalmente, conoscere un sacco di Actionscript, o il tuo modo di aggirare Flash, o assumere qualcun altro per farlo. Ora, ci sono strumenti e pezzi di software là fuori che ti aiutano a creare animazioni da soli.
Inoltre, pensa alla creazione di YouTube. Fondato nel 2005, YouTube è il servizio più popolare che le persone utilizzano per caricare e condividere i propri video. Anche grandi società e aziende lo usano per condividere clip o notizie popolari dai loro programmi TV.
A mio parere, YouTube ha portato un po 'di un'evoluzione dei video sul web. Hanno reso facile la diffusione rapida delle campagne virali e il video è rapidamente esploso sulla scena. YouTube ha offerto qualcosa che pochi erano stati in grado di fare prima: nessuno e tutti potrebbe creare video e condividerlo con chiunque essi volessero, indipendentemente dalla loro esperienza o capacità tecnica.
Al giorno d'oggi, abbiamo così tante tecnologie a nostra disposizione che Flash è per lo più caduto nel dimenticatoio. HTML5 ci rende molto più facile sviluppare metodi per visualizzare i nostri video e altri filmati animati e visivi nei nostri siti web. Avere questa tecnologia è ottima, perché significa che abbiamo molte più opportunità di usare il video nei nostri progetti e di usarlo effettivamente per migliorare le esperienze dei nostri utenti.
Ma non sono qui per parlare di YouTube e Vimeo tutto il giorno, o anche per raccontarti di tutti i progressi tecnici e le tecniche che puoi utilizzare per includere video nei tuoi siti web. Invece, ti spiegherò perché è bello includere video nel tuo design e ciò che rende i video grandiosi.
Il video può essere utilizzato in molti modi per migliorare i nostri progetti e rendere il viaggio dell'utente e un'esperienza migliore. Proprio come faresti con varie immagini (sia che si tratti di fotografia, icone o animazioni) dovresti mirare a utilizzare il video nei tuoi progetti per Migliorare i tuoi disegni Tieni presente che vuoi che il tuo messaggio sia chiaro o senza i video.
Con qualsiasi video è importante che tu pensi chiaramente al messaggio che vuoi proiettare. Anche se questo può dipendere totalmente dalla marca, dal prodotto o dal servizio, usa il video con la stessa cura con cui faresti qualsiasi altro elemento del tuo design.
Detto questo, possiamo usare video ...
I video sono ottimi per introdurre gli utenti a un prodotto o servizio senza sopraffarli con un elenco di funzionalità lungo un miglio. Pensa a molti siti Web SaaS; quanti riesci a vedere con un video introduttivo che spiega un po 'di più il prodotto o il servizio?
La chiave di questo video è renderla il fulcro del tuo design. Mentre vorrai citare le caratteristiche del testo e delle immagini qui sotto, avere un video che mostra le caratteristiche principali in modo creativo è un modo infallibile per far sì che gli utenti notino il prodotto e voglia di provarlo di più.
Un paio di grandi esempi di questo sono nei siti Web app e app di app Clear.
Clear è un'app da fare e da affrontare. Il sito web di Clear è un ottimo esempio di utilizzo del video come punto focale, ma garantisce anche che il messaggio relativo all'app provenga chiaramente e senza il video.
Il video è posizionato nell'intestazione del sito web, proprio accanto ai link per scaricare l'app, e quando viene cliccato carica il video in un piccolo overlay.
Questo video è solo un'introduzione al prodotto e all'app stessa, ma ciò che funziona bene è la coerenza del marchio e delle immagini dal design del sito web al video. Come avrete appreso negli articoli precedenti, la coerenza è la chiave per creare un messaggio di marca forte e abbinarlo così bene, che renderà gli utenti più propensi a fidarsi del marchio e quindi ad acquistare l'app.
Paper è un'app che ti consente di disegnare e disegnare magnificamente sul tuo iPad.
L'attenzione sul video sul sito Web di Paper è ancora più grande rispetto al sito Web di Clear, con un'immagine di intestazione più ampia e visivamente sorprendente, con un'icona di riproduzione video nella parte superiore dell'immagine. Facendo clic per riprodurre il video, tuttavia, è stato aperto anche in una sovrapposizione sul resto del design del sito web.
Anche in questo caso, come nel caso di Clear, il messaggio del brand, lo stile e il tono della voce sono molto simili al resto del design del sito web. La creazione di consistenza come questa può aiutarti solo a fidarti di più utenti a lungo termine, quindi assicurati di non creare una mancata corrispondenza tra gli stili se decidi di includere un video nei progetti del tuo sito web.
Una cosa grandiosa del video (se usato con intelligenza) è che puoi usarlo per deliziare i tuoi utenti, introducendo funzionalità nascoste a cui non avrebbero mai pensato. Quasi come un piccolo uovo di Pasqua, ma un po 'più visibile e molto più visivo!
Questo uso del video nei disegni è puramente soggettivo e dipenderebbe ancora da come la marca deve essere rappresentata. Questo potrebbe non essere adatto a progetti di siti web che sono per aziende professionali, ma sarebbe perfetto in qualcosa di un po 'più casual nello stile.
Un paio di siti Web che usano questo per ottenere grandi risultati sono Handheld Conf e Playground Inc.
Handheld Conf è una conferenza che si descrive come "grandi idee per piccoli dispositivi". Nella home page del sito Web di Handheld Conf, è disponibile una linea di altoparlanti straordinari e i loro argomenti, insieme a una foto. Ora, quando si passa sopra le foto dell'altoparlante, prendono vita!
Questa è una piccola sorpresa per gli utenti; quasi stranamente come le fotografie nel mondo di Harry Potter, quella mossa. Non appena il cursore si allontana dalle foto, si fermano nel punto in cui il cursore ha lasciato la foto. E se torni da loro, riprendono.
L'utilizzo di video come questo è un ottimo modo per aggiungere un po 'più di interattività ai tuoi siti web, ma anche per creare piccoli modi per consentire agli utenti di navigare sul sito web in più.
Playground Inc è un'agenzia digitale creativa con sede a Toronto. Sulla loro homepage, usano l'animazione brillantemente per aiutare a illustrare le loro idee e credenze. Queste animazioni si attivano solo dopo averlo spostato verso quella parte della pagina e prima di quello, sembrano illustrazioni statiche.
Questo è un ottimo modo per aggiungere interesse al tuo sito web che delizierà gli utenti, in quanto è qualcosa di totalmente inaspettato ma che migliora il modo in cui possono interagire con il tuo sito.
Di pari passo con l'utilizzo del video per deliziare i tuoi utenti, puoi anche utilizzare il video per aggiungere ulteriore interesse visivo e peso ai tuoi elementi di design. Questo è un ottimo modo per utilizzare il video in quanto garantisce che è possibile mantenere il livello di interesse nel tuo sito Web più alto rispetto a se tu avessi molti meno elementi visivi per catturare l'attenzione dell'utente.
Un grande esempio di questo è visto sul sito Web Symbolset.
Symbolset crea font web icon per tutti noi adorabili web people. Personalmente penso che il modo in cui funziona Symbolset sia piuttosto inventivo e il modo in cui usano i video sul loro sito web non è diverso.
Se stai utilizzando i caratteri Symbolset sul desktop (in Photoshop, ad esempio), puoi digitare la parola chiave per l'icona richiesta e verrà visualizzata automaticamente. Allo stesso modo, hanno usato questo nel loro video.
Symbolset sfrutta anche abilmente il colore accanto a ciascuno dei messaggi che ti scrivono nel loro video, mantenendo l'interesse visivo a un livello molto alto. Anche questo tipo di video è davvero inclusivo, in quanto dà l'impressione che il sito web stia parlando con te e ti colleghi personalmente; che di nuovo aiuterà a costruire la fiducia tra l'utente e l'azienda stessa.
Una tendenza che è stata a lungo in giro è l'immagine di sfondo grande, spesso (sebbene non limitata a) a schermo intero. Alcune aziende stanno invece utilizzando questa opportunità come spazio per posizionare il proprio video a schermo intero.
Mentre questo non è niente di nuovo, devi pensare attentamente a come usi questo stile di video nei tuoi progetti. Invece di una semplice immagine di sfondo su larga scala - relativamente facile da aggirare con i tuoi elementi di design - un video è sempre in movimento e può causare il caos con i tuoi elementi di design (pensa a tipografia, colore, pulsanti, altri elementi come che) in combinazione con il video in movimento. È una nuova sfida, ma può essere usata intelligentemente con un'attenta riflessione.
Un paio di ottimi esempi di grandi video di sfondo sono di Spotify e Slow Mo.
Spotify è un popolare servizio di streaming musicale. La loro home page del sito web utilizza il video di sfondo su larga scala con grande effetto, con un video in loop con una quantità minima di altri elementi di design disposti sopra le righe.
Spotify ha anche deciso di includere l'audio su questo video (che è possibile disattivare molto facilmente, un must quando si include l'audio su qualsiasi sito Web), che migliora ulteriormente il video.
Il video, l'audio e il design della home page in generale aiutano a impostare il tono per il servizio e aiutano gli utenti a capire un po 'di più sul servizio e il loro slogan di "musica per ogni momento", senza dire direttamente ciò che fa Spotify in realtà.
Slow Mo sono specialisti di telecamere ad alta velocità. Usano il video al posto di un'immagine per l'area dell'eroe nella parte superiore della home page. La cosa intelligente di Slow Mo è che nella loro essenza sono un'azienda che vende telecamere ad alta velocità e usano il video per aiutare a venderlo.
I video che usano sulla loro homepage sono tutti riprodotti automaticamente in uno stile al rallentatore e si accordano perfettamente con il nome del marchio. Inoltre crea un sacco di interesse visivo, mentre il contrasto tra il video e il testo che lo sovrasta è sempre mantenuto forte.
Un'ultima cosa che puoi fare usando il video nei tuoi progetti è usarla per migliorare le tue capacità di narrazione. La narrazione non è nulla di nuovo, ma puoi usare il video per migliorarlo ancora di più. Lo storytelling dovrebbe essere al centro dei tuoi progetti e il video è un passo da compiere che può aiutare a migliorare l'esperienza che i tuoi utenti avranno sul tuo sito web.
Un grande esempio di questo in azione è sul sito personale di Dan Eden.
Dan è un designer, recentemente assunto da Dropbox come primo Dropbox Design Intern. Nella sezione portfolio del sito web di Dan, accanto al titolo del progetto e alle descrizioni, ha anche dei video (belli) che accompagnano l'utente attraverso il progetto.
È brillante. Invece di mostrare semplici screenshot o link al sito web, Dan sta migliorando l'esperienza dei suoi utenti permettendo loro di vedere il progetto in azione senza andare da nessun'altra parte. Questo è ottimo in quanto aggiunge interesse alla pagina, ma incoraggerà anche gli utenti a visitare un sito Web se gradiscono l'aspetto di esso.
A volte può essere molto difficile avere un'idea di come funziona un sito Web senza sfogliarlo da solo, ma Dan è riuscito a superare quel ponte senza aggiungere ulteriori passaggi per i suoi utenti.
Quindi il video è fantastico nel web design, a patto che tu lo usi bene. Quello che voglio che tu faccia ora è guardare i video sul web. Trova quanti più esempi possibili e prenditi il tempo per vedere cosa funziona bene e cosa no, secondo te.
Quindi, pensa a come potresti procedere all'integrazione del video nei tuoi progetti e come utilizzarli accrescere e Migliorare i tuoi progetti in futuro.
Accentsconagua