Video în Web Design

Însuși videoclipul a fost în jur de mult timp; în filme, la televizor și acum disponibilă pentru a juca pe telefoanele, tabletele și alte dispozitive. Videoclipul de pe web a fost, de asemenea, în jur de mult timp. Am pornit cu fișierele flash de video și animații grele, în timp ce acum avem video HTML5 și multe alte opțiuni pentru includerea videoclipurilor în paginile noastre web. Heck, jumătate din timp este chiar la fel de ușor ca scăderea unui cod încorporat într-un site web. Pe scurt, nu am avut niciodată atât de ușor atunci când este vorba de utilizarea video pe web.


Evoluția video

Proiectarea cu video a fost mult mai dificilă în trecut decât este acum. Folosirea imaginilor video de bună calitate implică adesea echipamente și software grele și costisitoare, în timp ce acum putem folosi camerele digitale obișnuite (sau chiar telefoanele noastre) pentru a realiza imagini de înaltă calitate. Și dacă ați vrut secvențe animate pe site-ul dvs., a trebuit fie să fiți foarte buni în a ilustra digital, să știți o mulțime de Actionscript, sau să vă deplasați prin Flash sau să angajați pe altcineva să o facă. Acum, există instrumente și piese de software acolo care vă ajută să creați animații toate de la sine.

De asemenea, gândiți-vă la crearea YouTube. Înființată în 2005, YouTube este cel mai popular serviciu pe care utilizatorii îl folosesc pentru a încărca și a partaja propriile videoclipuri. Chiar corporații și întreprinderi masive le folosesc pentru a distribui clipuri sau știri populare din emisiunile lor TV.

După părerea mea, YouTube a adus un pic de evoluție a videoclipului pe web. Acestea au facilitat răspândirea rapidă a campaniilor virale, iar videoclipul a explodat rapid pe scenă. YouTube a oferit ceva pe care puțini îl puteau face înainte: cineva și toata lumea ar putea crea video și ar putea să le împărtășească oricui le-ar plăcea, indiferent de experiența lor sau de capacitatea tehnică.


Video pe Web Astăzi

În zilele noastre, avem la dispoziție atât de multe tehnologii încât Flash a căzut cel mai mult pe marginea drumului. HTML5 ne face mult mai ușor să dezvoltăm modalități de afișare a videoclipurilor noastre și a altor imagini animate, vizuale pe site-urile noastre. Având această tehnologie este minunată, aceasta înseamnă că avem oportunități mult mai bune de a folosi video în desenele noastre și de a le utiliza, de fapt, pentru a îmbunătăți experiențele utilizatorilor noștri.

Dar nu sunt aici să vorbesc despre YouTube și Vimeo toată ziua, sau chiar să vă spun despre toate progresele tehnice și tehnicile pe care le puteți utiliza pentru a include video pe site-urile dvs. web. În schimb, vă voi explica de ce este bine să includeți videoclipuri în designul dvs. și ceea ce face ca videoclipul să fie grozav.


Cum putem folosi video

Video-ul poate fi folosit în multe feluri pentru a îmbunătăți desenele noastre și pentru a face călătoria și experiența utilizatorului mai bună. La fel ca și în cazul imaginilor diferite (fie că este vorba de fotografie, de icoane sau animații), ar trebui să urmăriți utilizarea video în desenele dvs. îmbunătăţi desenele tale. Rețineți că doriți ca mesajul dvs. să fie clar sau fără videoclipuri.

Cu orice videoclip este important să vă gândiți clar la mesajul pe care doriți să îl proiectați. În timp ce acest lucru poate depinde în totalitate de brand, produs sau serviciu, utilizați videoclipul la fel de atent ca și alte elemente din design.

Acestea fiind spuse, putem folosi videoclipuri ...

… A introduce

Videoclipurile sunt minunate pentru a vă introduce utilizatorii într-un produs sau serviciu fără a le forța pe ei cu o listă de caracteristici cu o lungime de mile. Gândiți-vă la multe site-uri SaaS; câte puteți vedea cu un videoclip intro care explică ceva mai mult produsul sau serviciul?

Cheia cu acest videoclip este aceea de a vă pune accentul pe designul dvs. În timp ce veți dori să menționați caracteristicile textului și imaginilor de mai jos, prezentarea unui videoclip care să arate principalele caracteristici într-un mod creativ este un mod sigur de a atrage utilizatorii dvs. să observe produsul și să încerce mai mult.

Câteva exemple minunate de acest lucru se găsesc pe site-urile aplicației Clear app și Paper app.

clar

Clear este o aplicație de rezolvat și de rezolvare a listelor. Site-ul Clear este un exemplu excelent de utilizare a videoclipului ca focalizare, dar, de asemenea, asigurarea faptului că mesajul despre aplicație este transmis prin intermediul unui mesaj clar și clar fără videoclip.

Videoclipul este plasat în antetul site-ului, chiar lângă link-urile de descărcare a aplicației, iar când se face clic pe acesta, videoclipul se încarcă într-o mică suprapunere.

Acest videoclip este doar o introducere a produsului și a aplicației în sine, dar ceea ce funcționează bine este consecvența mărcii și a imaginilor din designul site-ului cu videoclipul. Așa cum ați învățat în articolele anterioare, consecvența este cheia pentru a crea un mesaj de brand puternic și pentru a le potrivi atât de bine, va crește probabilitatea ca utilizatorii să aibă încredere în marcă și, prin urmare, să cumpere aplicația.

Hârtie

Hârtia este o aplicație care vă permite să schițați și să desenați frumos pe iPad.

Concentrarea pe videoclipul de pe site-ul Web al Hârtiei este chiar mai mare decât pe site-ul Clear, cu o imagine antet mai mare, cu adevărat vizibilă, cu o pictogramă de redare video în partea de sus a imaginii. Dacă faceți clic pentru a reda videoclipul, acesta a fost deschis și într-o suprapunere pe partea de sus a restului site-ului web.

Din nou, ca și în cazul Clear, mesajul de brand, stilul și tonul vocii sunt păstrate foarte asemănător cu restul designului site-ului web. Crearea unei coerențe ca aceasta vă poate ajuta numai să câștigați încrederea mai multor utilizatori pe termen lung - așa că asigurați-vă că nu creați o nepotrivire în stiluri dacă decideți să includeți un videoclip în desenele dvs. de site.

… A incanta

Un lucru minunat despre videoclip (dacă este utilizat în mod inteligent) este că îl puteți folosi pentru a vă încânta utilizatorii, introducând caracteristici ascunse pe care nu le-ar fi gândit. Aproape ca un mic ou de Paște, dar puțin mai vizibil și mult mai vizibil!

Această utilizare a videoclipurilor în desene sau modele este pur subiectivă și ar depinde din nou de modul în care trebuie să fie reprezentată marca. Acest lucru s-ar putea să nu fie potrivit în desenele web care sunt pentru companiile profesionale, dar ar fi perfect în ceva puțin mai casual în stil.

Câteva site-uri Web care utilizează acest lucru cu mare efect sunt Handheld Conf și Playground Inc.

Conf. Conf. Conf

Handheld Conf este o conferință care se descrie ca fiind "idei mari pentru dispozitive mici". Pe pagina de pornire a site-ului Handheld Conf, există o serie de vorbitori uimitori și subiectele lor, împreună cu o fotografie. Acum, când treceți peste fotografiile vorbitorilor, ei revin la viață!

Acesta este un tratament uimitor pentru utilizatori; aproape în mod neașteptat ca fotografiile din lumea lui Harry Potter, care se mișcă. De îndată ce cursorul dvs. se îndepărtează de fotografii, acestea se opresc în punctul în care cursorul dvs. a părăsit fotografia. Și dacă vă întoarceți la ei, reluați.

Folosirea unui videoclip ca acesta este o modalitate foarte bună de a adăuga o mai mare interactivitate în site-urile dvs., dar și de a crea modalități mici pentru ca utilizatorul dvs. să se bucure de navigarea pe site.

Playground Inc

Playground Inc este o agenție digitală creatoare din Toronto. Pe pagina lor de pornire, ei folosesc animație strălucit pentru a-și ilustra ideile și credințele. Aceste animații se activează numai după ce ați derulat în partea respectivă a paginii și înainte de aceasta, ele arată ca niște ilustrații statice.

Aceasta este o modalitate excelentă de a adăuga interes pentru site-ul dvs., care va încânta utilizatorii, deoarece este ceva care este total neașteptat, dar care îmbunătățește modul în care pot interacționa cu site-ul dvs..

... Pentru a adăuga un interes

Mână în mână cu utilizarea video pentru a încânta utilizatorii dvs., puteți utiliza, de asemenea, video pentru a adăuga interesul și greutatea în plus față de elementele de design. Aceasta este o modalitate foarte bună de a utiliza video, deoarece vă asigură că puteți menține nivelul de interes în site-ul dvs. mai mare decât dacă ați avea mai puține elemente vizuale pentru a prinde ochiul utilizatorului.

Un exemplu extraordinar al acestui lucru este prezentat pe site-ul Symbolset.

Symbolset

Symbolset creează fonturi web pentru pictograme pentru toți utilizatorii noștri de web minunat de folosit. Personal, cred că modul în care funcționează Symbolset este destul de inventiv și modul în care utilizează videoclipul pe site-ul lor nu este diferit.

Dacă utilizați fonturile Symbolset de pe desktop (de exemplu, în Photoshop), puteți să tastați cuvântul cheie pentru pictograma de care aveți nevoie și acesta va apărea pentru dvs. În același mod, au folosit acest lucru în videoclipul lor.

Symbolset utilizează, de asemenea, foarte inteligent culoarea alături de fiecare dintre mesajele pe care le tipăresc în videoclip, păstrând interesul vizual la o înălțime masivă. Acest tip de videoclip este, de asemenea, foarte incluziv, deoarece face să se simtă că site-ul vorbește cu tine și te conectează personal cu tine; care din nou va contribui la construirea încrederii între utilizator și compania în sine.

... Pentru a înlocui imaginile de fundal mari

O tendință care a stat mult timp în urmă este imaginea de fundal mare, adesea (deși nu limitată la) ecran complet. Unele companii folosesc acum acest lucru ca o oportunitate ca spațiu pentru plasarea videoclipului lor de dimensiune totală.

În timp ce acest lucru nu este nimic nou, trebuie să vă gândiți cu atenție la modul în care folosiți acest stil de video în desenele dvs. În locul unei imagini de fundal pe scară largă - care este relativ ușor de rezolvat cu elementele de design - un videoclip este ceva care se mișcă întotdeauna și poate provoca dezastre cu elementele de design (gândiți tipografia, culoarea, butoanele, alte elemente cum ar fi că) atunci când este amestecat cu video în mișcare. Este o nouă provocare, dar poate fi folosită inteligent cu gândire atentă.

Câteva exemple minunate de videoclipuri de fundal mari sunt realizate de Spotify și Slow Mo.

Spotify

Spotify este un serviciu popular de redare de muzică. Pagina de pornire a site-ului web utilizează video de fundal la scară largă pentru un efect grozav, cu un videoclip cu buclă cu o cantitate minimă de alte elemente de design,.

Spotify au decis, de asemenea, să includă audio pe acest videoclip (pe care îl puteți dezactiva foarte ușor, trebuie să aveți atunci când includeți audio pe orice site web), ceea ce sporește și mai mult videoclipul.

Video-ul, sunetul și design-ul paginii de ansamblu vă ajută să setați tonul pentru acest serviciu și îi ajută pe utilizatori să înțeleagă mai mult despre serviciu și cu sloganul "muzică pentru fiecare moment", toate fără a spune direct ce face Spotify.

Cu incetinitorul

Slow Mo sunt specialiști de cameră de mare viteză. Ei folosesc video în locul unei imagini pentru zona eroului din partea de sus a paginii de pornire. Ce este deștept despre Slow Mo este că, în esență, ei sunt o companie care vinde camere de mare viteză și folosesc video pentru a vinde.

Videoclipurile pe care le utilizează pe pagina de pornire sunt toate redate automat într-un stil lent și se leagă perfect de numele mărcii. De asemenea, creează o mulțime de interes vizual, în timp ce contrastul dintre videoclip și textul care îl suprapune este întotdeauna menținut puternic.

... Pentru a vă îmbunătăți povestirea

Un ultim lucru pe care îl puteți face prin folosirea videoclipului în desenele dvs. este să îl utilizați pentru a vă îmbunătăți abilitățile de povestire. Storytelling-ul nu este ceva nou, dar puteți folosi video pentru ao mări și mai mult. Storytelling-ul ar trebui să se afle în centrul proiectelor dvs., iar videoclipul este un pas pentru a vă ajuta să îmbunătățiți experiența pe care o vor avea utilizatorii dvs. pe site-ul dvs. web.

Un exemplu extraordinar al acestei acțiuni este pe site-ul personal al lui Dan Eden.

Daneden.me

Dan este un designer, care a fost recent angajat de Dropbox drept primul Dropbox Design Intern. În secțiunea de portofoliu a site-ului Dan, alături de titlul și descrierile proiectului, el are, de asemenea, videoclipuri (frumoase) care parcurg utilizatorul prin proiect.

Acest lucru este strălucitor. În loc să afișeze imagini simple sau să le facă legătura cu site-ul, Dan îmbunătățește experiența utilizatorilor săi, permițându-i să vadă proiectul în acțiune fără să meargă în altă parte. Acest lucru este grozav deoarece adaugă interes pentru pagină, dar va încuraja și utilizatorii să viziteze un site web dacă îi place aspectul.

Poate fi uneori foarte greu să obțineți o sugestie pentru modul în care un site funcționează fără să îl navigați singur, dar Dan a reușit să treacă acel pod fără a adăuga pași suplimentari pentru utilizatorii săi.


Alocări

Deci, video este excelent în designul web, atâta timp cât o folosiți bine. Ceea ce vreau să faceți acum este să priviți videoclipuri pe web. Găsiți cât mai multe exemple și puteți acorda timp pentru a vedea ce funcționează bine și ce nu, după părerea dvs..

Apoi, gandeste-te la modul in care ar putea merge despre integrarea video in design-ul tau si cum poti sa-l folosesti spori și îmbunătăţi planurile dvs. în viitor.