Video in Web Design

Video zelf bestaat al heel lang; in films, op de televisie en nu direct beschikbaar om te spelen op onze telefoons, tablets en andere apparaten. Video op internet bestaat ook al heel lang. We begonnen met zware flash-bestanden van video's en animaties, terwijl we nu HTML5-video en zoveel meer opties hebben voor het opnemen van video op onze webpagina's. Heck, de helft van de tijd is het zelfs net zo eenvoudig als het laten vallen van een embed code in een website. Kortom, we hebben het nog nooit zo gemakkelijk gehad als het gaat om het gebruik van video op internet.


De evolutie van video

Ontwerpen met video was in het verleden veel moeilijker dan het nu is. Het opnemen van videobeelden van goede kwaliteit ging vaak gepaard met zware en dure apparatuur en software, terwijl we nu onze normale digitale camera's (of zelfs onze telefoons!) Kunnen gebruiken om beelden van topkwaliteit te maken. En als je geanimeerde sequenties op je website wilde hebben, moest je heel goed zijn in het digitaal illustreren, een heleboel Actionscript kennen, of je weg in Flash kennen, of iemand anders inhuren om het te doen. Nu zijn er tools en stukjes software die je helpen om zelf animaties te maken.

Denk ook aan de creatie van YouTube. YouTube, opgericht in 2005, is de populairste service die mensen gebruiken om hun eigen video's te uploaden en te delen. Zelfs grote bedrijven en bedrijven gebruiken het om populaire clips of nieuws uit hun tv-programma's te delen.

Naar mijn mening bracht YouTube een beetje een evolutie van video op het web met zich mee. Ze maakten het gemakkelijk voor virale campagnes om zich snel te verspreiden en video explodeerde snel op het toneel. YouTube bood iets dat maar weinigen eerder hadden kunnen doen: iemand en iedereen kon video's maken en delen met iedereen die ze leuk vonden, ongeacht hun ervaring of technische vaardigheden.


Video op het web vandaag

Tegenwoordig hebben we zoveel technologieën tot onze beschikking dat Flash grotendeels uit de boot is gevallen. HTML5 maakt het voor ons veel gemakkelijker manieren te ontwikkelen om onze video's en andere geanimeerde, visuele beelden op onze websites weer te geven. Het is geweldig om deze technologie te hebben, want dit betekent dat we veel betere mogelijkheden hebben om video in onze ontwerpen te gebruiken en deze zelfs gebruiken om de ervaringen van onze gebruikers beter te maken.

Maar ik ben niet hier om de hele dag over YouTube en Vimeo te praten, of zelfs om u te vertellen over alle technische ontwikkelingen en technieken die u kunt gebruiken om video op uw websites op te nemen. In plaats daarvan zal ik je uitleggen waarom het goed is om video's in je ontwerp op te nemen en wat video geweldig maakt.


Hoe we video kunnen gebruiken

Video kan op zoveel manieren worden gebruikt om onze ontwerpen te verbeteren en de gebruikerservaring en -ervaring beter te maken. Net zoals je met verschillende afbeeldingen (of het nu fotografie, pictogrammen of animaties) zou zijn, zou je moeten streven naar video in je ontwerpen om verbeteren jouw ontwerpen. Houd in gedachten dat je wilt dat je boodschap duidelijk is of zonder de video's.

Bij elke video is het belangrijk dat u helder nadenkt over het bericht dat u wilt projecteren. Hoewel dit volledig kan afhangen van het merk, product of service, moet u video net zo zorgvuldig gebruiken als andere elementen in uw ontwerp.

Dat gezegd hebbende, kunnen we video's gebruiken ...

… Introduceren

Video's zijn geweldig om uw gebruikers kennis te laten maken met een product of service zonder ze te overstelpen met een lijst met functies die een mijl lang zijn. Denk aan veel SaaS-websites; Hoeveel kun je zien met een introductievideo waarin het product of de service iets meer wordt uitgelegd?

De sleutel bij deze video is om het de focus van je ontwerp te maken. Hoewel u de functies in de onderstaande tekst en afbeeldingen wilt vermelden, is een video die de belangrijkste functies op een creatieve manier laat zien, een onfeilbare manier om uw gebruikers het product te laten opmerken en het nog een keer proberen..

Een paar goede voorbeelden hiervan zijn op de websites van Clear app en Paper app.

Duidelijk

Clear is een to-do en list-tackling app. De website van Clear is een geweldig voorbeeld van het gebruik van video als focus, maar zorgt er ook voor dat de boodschap over de app luid en duidelijk overkomt zonder de video.

De video wordt geplaatst in de header van de website, direct naast de download-links van de app, en wanneer erop wordt geklikt, wordt de video in een kleine overlay geladen.

Deze video is slechts een inleiding tot het product en de app zelf, maar wat goed werkt, is de consistentie in het merk en de visuals van het websiteontwerp tot de video. Zoals je in eerdere artikelen hebt geleerd, is consistentie de sleutel tot het creëren van een sterke merkboodschap en omdat deze zo goed bij elkaar passen, zullen gebruikers meer geneigd zijn om het merk te vertrouwen en daarom de app kopen.

Papier

Papier is een app waarmee je prachtig kunt schetsen en tekenen op je iPad.

De focus op de video op de Paper-website is nog groter dan op de Clear-website, met een groter, echt visueel opvallend header-image op zijn plaats, met een video-afspeelpictogram over de bovenkant van de afbeelding. Door te klikken om de video af te spelen, werd deze echter ook geopend in een overlay bovenop de rest van het websiteontwerp.

Nogmaals, net als bij Clear, blijven de merkboodschap, stijl en tone of voice erg vergelijkbaar met de rest van het website-ontwerp. Het creëren van consistentie als deze kan u alleen helpen om meer vertrouwen te krijgen in de lange termijn - dus zorg ervoor dat u geen wanverhouding in stijlen creëert als u beslist om een ​​video op te nemen in uw websiteontwerpen.

... te verrukken

Een groot voordeel van video (indien slim gebruikt) is dat je het kunt gebruiken om je gebruikers te verrassen door verborgen functies te introduceren waar ze misschien niet aan gedacht hebben. Bijna als een klein paasei, maar een beetje meer zichtbaar en veel visueler!

Dit gebruik van video in ontwerpen is puur subjectief en zou opnieuw afhangen van hoe het merk moet worden weergegeven. Dit is misschien niet geschikt voor websiteontwerpen die voor professionele bedrijven zijn, maar zou perfect zijn in iets wat iets stijlvoller in stijl.

Een aantal websites die dit met groot effect gebruiken zijn Handheld Conf and Playground Inc.

Handheld Conf

Handheld Conf is een conferentie die zichzelf omschrijft als "grote ideeën voor kleine apparaten". Op de startpagina van de Handheld Conf-website staat een reeks geweldige luidsprekers en hun onderwerpen, samen met een foto. Als je nu over de sprekerfoto's beweegt, komen ze tot leven!

Dit is een geweldige kleine traktatie voor gebruikers; bijna griezelig als foto's in de wereld van Harry Potter, die beweging. Zodra je cursor van de foto's weg zweeft, pauzeren ze op het punt waar je cursor de foto heeft verlaten. En als je teruggaat naar hen, gaan ze verder.

Zo'n video gebruiken is een geweldige manier om wat meer interactiviteit toe te voegen aan je websites, maar ook om kleine manieren te creëren waarop je gebruiker meer van de website kan genieten..

Speeltuin Inc

Playground Inc is een creatief digitaal bureau gevestigd in Toronto. Op hun startpagina gebruiken ze schitterende animaties om hun ideeën en overtuigingen te illustreren. Deze animaties worden alleen geactiveerd als je naar dat deel van de pagina bent gescrolld en daarvoor lijken ze op statische illustraties.

Dit is een geweldige manier om interesse aan uw website te geven die gebruikers zal verrassen, want het is iets dat totaal onverwacht is, maar dat de manier waarop zij met uw site kunnen communiceren verbetert..

... om interesse toe te voegen

Hand in hand met het gebruik van video om uw gebruikers te verrassen, kunt u video ook gebruiken om extra visuele interesse en gewicht toe te voegen aan uw ontwerpelementen. Dit is een geweldige manier om video te gebruiken, omdat het ervoor zorgt dat je het interessegraad op je website hoger kunt houden dan wanneer je veel minder visuele elementen had om het oog van de gebruiker te vangen.

Een goed voorbeeld hiervan is te zien op de Symbolset-website.

Symbolset

Symbolset maakt web-lettertypen voor ons allemaal mooie webmensen om te gebruiken. Persoonlijk denk ik dat de manier waarop Symbolset werkt behoorlijk creatief is en dat de manier waarop ze video op hun website gebruiken niet anders is.

Als u de Symbolset-lettertypen op het bureaublad gebruikt (bijvoorbeeld in Photoshop), typt u het trefwoord voor het gewenste pictogram en verschijnt het voor u. Op dezelfde manier hebben ze dit in hun video gebruikt.

Symbolset maakt ook heel slim gebruik van kleur naast elk van de berichten die ze in hun video typen, waardoor de visuele interesse op een enorme hoogte blijft. Dit soort video is ook echt inclusief, omdat het lijkt alsof de website tegen je praat en persoonlijk contact met je maakt; wat wederom zal helpen om het vertrouwen tussen de gebruiker en het bedrijf zelf op te bouwen.

... om grote achtergrondafbeeldingen te vervangen

Een trend die al lang bestaat, is de grote, vaak (maar niet beperkt tot) achtergrondafbeelding op volledig schermformaat. Sommige bedrijven gebruiken dit nu in plaats daarvan als een mogelijkheid om hun video op het volledige scherm te plaatsen.

Hoewel dit niets nieuws is, moet je goed nadenken over hoe je deze stijl van video gebruikt in je ontwerpen. In plaats van alleen een grote achtergrondafbeelding op ware grootte - die relatief eenvoudig is om mee te werken met uw ontwerpelementen - is een video altijd iets dat zich kan verplaatsen en uw ontwerpelementen (typografie, kleur, knoppen, andere elementen zoals dat) wanneer gemengd met de bewegende video. Het is een nieuwe uitdaging, maar kan slim worden gebruikt met zorgvuldige gedachten.

Een paar geweldige voorbeelden van grote achtergrondvideo's zijn van Spotify en Slow Mo.

Spotify

Spotify is een populaire muziekstreamingservice. De startpagina van hun website maakt gebruik van de grootschalige achtergrondvideo met een geweldig effect, met een looping-video met een minimale hoeveelheid andere ontwerpelementen die over de bovenkant zijn gelegd.

Spotify heeft ook besloten om audio op te nemen in deze video (die je heel gemakkelijk kunt uitschakelen, een must-have wanneer je audio op een website opneemt), waardoor de video nog beter wordt.

De video, audio en het ontwerp van de startpagina helpen om de toon voor de service te bepalen en helpen de gebruikers om iets meer te weten over de service en hun slogan van "muziek voor elk moment", allemaal zonder direct te zeggen wat Spotify eigenlijk doet.

Vertraagd

Slow Mo zijn camerapecialisten met hoge snelheid. Ze gebruiken video in plaats van een afbeelding voor het heldengebied bovenaan de startpagina. Het mooie van Slow Mo is dat ze in essentie een bedrijf zijn dat hogesnelheidscamera's verkoopt en video gebruiken om dat te verkopen.

De video's die ze op hun startpagina gebruiken, worden allemaal automatisch in slow-motion afgespeeld en sluiten perfect aan op de naam van het merk. Het creëert ook veel visuele interesse, terwijl het contrast tussen de video en de tekst die erop wordt gelegd altijd sterk wordt gehouden.

... om uw verhalen te verbeteren

Een laatste ding dat je kunt doen door video in je ontwerpen te gebruiken, is om het te gebruiken om je verhalenvaardigheden te verbeteren. Storytelling is niets nieuws, maar je kunt video gebruiken om het nog meer te verbeteren. Storytelling moet de kern vormen van uw ontwerpen en video is een stap om te nemen die kan helpen de ervaring te verbeteren die uw gebruikers op uw website zullen hebben.

Een goed voorbeeld hiervan is in actie op de persoonlijke website van Dan Eden.

Daneden.me

Dan is een ontwerper, die onlangs door Dropbox is ingehuurd als de eerste Dropbox Design Intern. In het portfolio-gedeelte van de website van Dan, naast de titel en beschrijvingen van het project, heeft hij ook (mooi ogende) video's die de gebruiker door het project leiden.

Dit is briljant. In plaats van eenvoudige screenshots of links naar de website te tonen, verbetert Dan de ervaring van zijn gebruikers door hen in staat te stellen het project in actie te zien zonder ergens anders heen te gaan. Dit is geweldig omdat het de pagina interesseert, maar het zal gebruikers ook aanmoedigen om een ​​website te bezoeken als ze er zin in hebben.

Het kan soms heel moeilijk zijn om een ​​idee te krijgen van hoe een website werkt zonder hem zelf te bekijken, maar Dan is erin geslaagd die brug over te steken zonder extra stappen voor zijn gebruikers toe te voegen.


opdrachten

Dus video is geweldig in webdesign, zolang je het maar goed gebruikt. Ik wil dat je nu video's op internet bekijkt. Zoek zoveel voorbeelden als je kunt en neem de tijd om te kijken wat goed werkt en wat niet, naar jouw mening.

Denk vervolgens na over hoe je video zou kunnen integreren in je eigen ontwerpen en hoe je het kunt gebruiken verbeteren en verbeteren uw ontwerpen in de toekomst.