Share
Videon själv har funnits länge. i filmer, på tv och nu lättillgänglig att spela på våra telefoner, tabletter och andra enheter. Video på webben har också funnits länge. Vi började med tunga flashfiler av videor och animationer, medan vi nu har HTML5-video och så många fler alternativ för att inkludera video på våra webbsidor. Heck, halva tiden är det lika lätt som att släppa in någon inbäddad kod till en webbplats. Kort sagt, vi har aldrig haft det så enkelt när det gäller att använda video på webben.
Att designa med video var mycket svårare i det förflutna än det är nu. Att ta bra videoklipp av hög kvalitet involverade ofta tung och dyr utrustning och programvara, medan vi nu kan använda våra vanliga digitalkameror (eller till och med våra telefoner!) För att ta bra kvalitetsmaterial. Och om du ville ha animerade sekvenser på din webbplats, måste du antingen vara väldigt bra på att illustrera digitalt, känna till många ActionScript, eller din väg runt Flash, eller anlita någon annan att göra det. Nu finns det verktyg och mjukvaror där ute som hjälper dig att skapa animationer i sig själv.
Tänk också på skapandet av YouTube. YouTube grundades 2005 och är den mest populära tjänsten som folk använder för att ladda upp och dela egna videor. Även massiva företag och företag använder den för att dela med sig av populära klipp eller nyheter från sina TV-program.
Enligt min mening tog YouTube lite av en utveckling av video på webben. De gjorde det enkelt för viruskampanjer att sprida sig snabbt och video snabbt exploderade på scenen. YouTube erbjöd något som få hade kunnat göra innan: vem som helst och alla kan skapa video och dela den till vem de gillade, oavsett deras erfarenhet eller tekniska förmåga.
Nuförtiden har vi så många teknologier till vårt förfogande att Flash för det mesta har fallit av vägen. HTML5 gör det mycket lättare för oss att utveckla sätt att visa våra videoklipp och andra animerade visuella bilder på våra webbplatser. Att ha denna teknik är bra, eftersom det innebär att vi har mycket bättre möjligheter att använda video i våra mönster och faktiskt använda den för att göra våra användares upplevelser bättre.
Men jag är inte här för att prata om YouTube och Vimeo hela dagen, eller till och med att berätta om alla tekniska framsteg och tekniker du kan använda för att inkludera video på dina webbplatser. Istället ska jag gå igenom dig varför det är bra att inkludera videor i din design och vad som gör videon bra.
Video kan användas på så många sätt att förbättra våra mönster och göra användarens resa och uppleva bättre. Precis som du skulle med olika bilder (oavsett om det är fotografering, ikoner eller animeringar) ska du sikta på att använda video i dina mönster för att förbättra dina mönster. Tänk på att du vill att ditt meddelande ska vara klart med eller utan videon.
Med någon video är det viktigt att du tänker tydligt på meddelandet du vill projekta. Även om detta kan bero helt på varumärket, produkten eller tjänsten, använd video så noga som du skulle ha några andra element i din design.
Med det sagt kan vi använda videor ...
Videor är bra för att introducera dina användare till en produkt eller tjänst utan att övervinna dem med en lista över funktioner en mil lång. Tänk på många SaaS webbplatser; hur många kan du se med en introvideo som förklarar produkten eller tjänsten lite mer?
Nyckeln med den här videon är att fokusera på din design. Medan du kommer att vilja nämna funktionerna i text och bildmaterial nedan, har en video som visar huvudfunktionerna på ett kreativt sätt ett säkert sätt att få dina användare att märka produkten och vill prova den mer.
Ett par bra exempel på detta finns på webbplatsen Clear app och Paper app.
Rensa är en gör-och-lista-hantera app. Clear hemsida är ett utmärkt exempel på att använda video som ett fokus, men också att meddelandet om appen kommer igenom högljudd utan videon.
Videon placeras i sidhuvudet på webbplatsen, bredvid apphämtningslänkarna och när den klickas laddar den videon i ett litet överlag.
Den här videon är bara en introduktion till produkten och appen, men det som fungerar bra är konsistensen i varumärket och visuella bilder från webbdesignen till videon. Som du har lärt dig i tidigare artiklar är konsistens nyckeln till att skapa ett starkt varumärkesmeddelande och att matcha de tillsammans så bra kommer det att göra användarna mer benägna att lita på varumärket och fortsätt därför att köpa appen.
Papper är en app som gör att du kan skissera och rita vackert på din iPad.
Fokus på videon på papperswebbplatsen är ännu större än på webbplatsen Rensa, med en större, riktigt visuellt slående headerbild på plats med en videospelikon över bildens topp. När du klickade på för att spela upp videon öppnades den också i ett överlag ovanpå resten av webbdesignen.
Återigen, liksom med Clear, håller märkesmeddelandet, stilen och tonen i röst mycket lik resten av webbdesignen. Att skapa konsistens som detta kan bara hjälpa dig att få fler användare att lita på det långa loppet - så var noga med att inte skapa en matchning i format om du väljer att inkludera en video i dina webbdesigner.
En bra sak om video (om den används smart) är att du kan använda den för att glädja dina användare genom att införa gömda funktioner som de kanske inte har tänkt på. Nästan som en liten påskägg, men lite mer synlig, och mycket mer visuell!
Denna användning av video i mönster är rent subjektiv och skulle återigen bero på hur varumärket behöver representeras. Det här kanske inte är lämpligt i webbdesigner för professionella företag, men skulle vara perfekt i något lite mer avslappet i stil.
Ett par webbplatser som använder detta till stor effekt är Handheld Conf and Playground Inc.
Handheld Conf är en konferens som beskriver sig som "stora idéer för små enheter". På hemsidan för Handheld Conf-webbplatsen finns en rad olika fantastiska högtalare och deras ämnen, tillsammans med ett foto. Nu när du svävar över högtalarnas bilder kommer de till liv!
Detta är en fantastisk liten behandling för användare. nästan ojämförligt som fotografier i Harry Potters värld, den rörelsen. Så snart din markör hänger sig bort från bilderna, pausar de vid den punkt där markören lämnade fotot. Och om du går tillbaka till dem, fortsätter de.
Att använda video som detta är ett bra sätt att lägga till lite mer interaktivitet i dina webbplatser, men också skapa små sätt för din användare att njuta av att surfa på webbplatsen mer.
Playground Inc är en kreativ digital agentur med säte i Toronto. På deras hemsida använder de animering briljant för att hjälpa till att illustrera sina idéer och övertygelser. Dessa animeringar aktiveras bara när du har bläddrat till den delen av sidan och före det ser de ut som statiska illustrationer.
Detta är ett bra sätt att lägga till intresse för din webbplats som kommer att glädja användare, eftersom det är något som är helt oväntat men det förbättrar sättet att de kan interagera med din webbplats.
Hand i hand med att använda video för att förtjäna dina användare, du kan också använda video för att lägga till extra visuellt intresse och vikt för dina designelement. Det här är ett bra sätt att använda video eftersom det säkerställer att du kan hålla räntenivån på din webbplats högre än om du hade mycket färre visuella element för att fånga användarens öga.
Ett bra exempel på detta ses på Symbolset-webbplatsen.
Symbolset skapa ikonens webbfonter för alla vi härliga webben att använda. Personligen tror jag hur Symbolset fungerar är ganska uppfinningsrik och hur de använder video på deras hemsida är inte annorlunda.
Om du använder Symbolset-tecknen på skrivbordet (t.ex. i Photoshop) kan du skriva ut sökordet för ikonen du behöver och det kommer att visas för dig. På samma sätt har de använt detta i sin video.
Symbolset använder också riktigt smart färg tillsammans med varje av de meddelanden som de skriver ut till dig i sin video och håller visuellt intresse på en enorm hög nivå. Denna typ av video är också väldigt inkluderande eftersom det känns som att webbplatsen pratar med dig och ansluter dig personligen till dig. som återigen kommer att bidra till att bygga förtroendet mellan användaren och företaget själv.
En trend som länge har funnits är den stora, ofta (men inte begränsad till) bakgrundsbilden med fullskärmsstorlek. Vissa företag använder istället istället detta som ett utrymme för att placera sin fullskärms-video.
Även om detta inte är nytt, måste du noga tänka på hur du använder denna stil av video i dina mönster. I stället för bara en stor fullskalig bakgrundsbild - som är relativt lätt att arbeta med dina designelement - är en video något som alltid rör sig och kan orsaka kaos med dina designelement (tänk typografi, färg, knappar, andra element som det) när den blandas med den rörliga videon. Det är en ny utmaning, men kan användas smart med noggrann tanke.
Ett par bra exempel på stora bakgrundsvideor är Spotify och Slow Mo.
Spotify är en populär musikströmmande tjänst. Deras hemsida använder storskalig bakgrunds video till stor effekt, med en looping-video med en minimal mängd andra designelement som läggs över toppen.
Spotify har också bestämt sig för att inkludera ljud på den här videon (som du kan stänga av mycket enkelt, måste ett måste när du inkluderar ljud på vilken webbplats som helst) vilket förbättrar videon ytterligare.
Videon, ljudet och utformningen av hemsidan bidrar till att ställa in tonen för tjänsten och hjälper användarna att förstå lite mer om tjänsten och deras tagline av "musik för varje ögonblick", allt utan att direkt säga vad Spotify faktiskt gör.
Slow Mo är höghastighets kamera specialister. De använder video istället för en bild för hjälteområdet högst upp på hemsidan. Vad är smart om Slow Mo är att de är ett företag som säljer höghastighetskameror, och de använder video för att hjälpa till att sälja det.
Videona som de använder på sin hemsida spelas alla automatiskt i en slow motion-stil och matchar helt med varumärkets namn. Det skapar också mycket visuellt intresse, medan kontrasten mellan videon och texten som överlagrar den hålls alltid stark.
En sista sak som du kan göra genom att använda video i dina mönster är att använda den för att förbättra dina berättande färdigheter. Storytelling är inte något nytt, men du kan använda video för att förbättra det ännu mer. Storytelling bör vara hjärtat av dina mönster och video är ett steg att ta som kan hjälpa till att förbättra den erfarenhet som dina användare kommer att ha på din webbplats.
Ett bra exempel på detta i åtgärd är på Dan Edens personliga hemsida.
Dan är en designer, som nyligen har anställts av Dropbox som den första Dropbox Design Intern. I portföljavsnittet på Dan hemsida, tillsammans med projektets titel och beskrivningar, har han också (snygga) videor som går igenom användaren genom projektet.
Detta är briljant. I stället för att visa enkla skärmdumpar eller länka till webbplatsen, förbättrar Dan sina användares erfarenheter genom att låta dem se projektet i aktion utan att gå någon annanstans. Det här är bra eftersom det ger intresse för sidan, men det kommer också att uppmuntra användare att besöka en webbplats om de gillar utseendet på det.
Det kan ibland vara väldigt svårt att få en blick för hur en webbplats fungerar utan att bläddra på det själv, men Dan har lyckats korsa den broen utan att lägga till några extra steg för sina användare.
Så video är bra i webbdesign, så länge du använder det bra. Vad jag vill att du ska göra nu är att titta på videor på webben. Hitta så många exempel som möjligt och ta dig tid att se vad som fungerar bra och vad som inte, enligt din åsikt.
Tänk sedan på hur du kan gå om att integrera video i dina egna mönster och hur du kan använda den till förbättra och förbättra dina mönster i framtiden.
Accentsconagua