Share
Videoen selv har eksistert i lang tid; i filmer, på fjernsynet og nå lett tilgjengelig for å spille på våre telefoner, tabletter og andre enheter. Video på nettet har også eksistert i lang tid. Vi startet med tyngre flashfiler av videoer og animasjoner, mens nå har vi HTML5-video og så mange flere muligheter for å inkludere video på våre nettsider. Heck, halvparten av tiden er det like like enkelt som å slippe noen embed kode inn i et nettsted. Kort sagt, vi har aldri hatt det så lett når det gjelder å bruke video på nettet.
Design med video var mye vanskeligere i det siste enn det er nå. Å ta god videoopptak av høy kvalitet involvert ofte tungt og dyrt utstyr og programvare, mens nå kan vi bruke våre vanlige digitale kameraer (eller til og med våre telefoner!) For å ta god kvalitet. Og hvis du ønsket animerte sekvenser på nettstedet ditt, måtte du enten være veldig god til å illustrere digitalt, kjenne mye Actionscript, eller din vei rundt Flash, eller ansett noen andre å gjøre det. Nå er det verktøy og biter av programvare der ute som hjelper deg med å lage animasjoner alt av seg selv.
Tenk også på opprettelsen av YouTube. YouTube ble grunnlagt i 2005, og er den mest populære tjenesten folk bruker til å laste opp og dele egne videoer. Selv massive bedrifter og bedrifter bruker den til å dele populære klipp eller nyheter fra sine TV-programmer.
Etter min mening har YouTube brakt litt av en evolusjon av video på nettet. De gjorde det enkelt for viruskampanjer å spre seg raskt og video eksploderte raskt på scenen. YouTube tilbød noe som få hadde vært i stand til å gjøre før: enhver og alle kan skape video og dele den til hvem de likte, uavhengig av erfaring eller teknisk evne.
I dag har vi så mange teknologier til disposisjon at Flash for det meste har falt av veikanten. HTML5 gjør det mye enklere for oss å utvikle måter å vise våre videoer og andre animerte, visuelle opptak på våre nettsteder. Å ha denne teknologien er flott, da det betyr at vi har mye bedre muligheter til å bruke video i våre design og faktisk bruke den til å gjøre brukerne våre opplevelser bedre.
Men jeg er ikke her for å snakke om YouTube og Vimeo hele dagen, eller til og med å fortelle deg om alle tekniske fremskritt og teknikker du kan bruke til å inkludere video på websidene dine. I stedet vil jeg gå gjennom deg, hvorfor det er bra å ta med videoer i designet ditt og hva som gjør videoen stor.
Video kan brukes på så mange måter å forbedre våre design og gjøre brukeren reise og oppleve bedre. Akkurat som du ville med ulike bilder (enten det er fotografering, ikoner eller animasjoner), bør du sikte på å bruke video i designene dine til forbedre dine design. Husk at du vil at meldingen skal være klar med eller uten videoene.
Med hvilken som helst video er det viktig at du tenker klart om meldingen du vil prosjektet. Selv om dette kan avhenge helt av merkevaren, produktet eller tjenesten, bruker du videoen så forsiktig som du ville ha andre elementer i designet.
Når det er sagt, kan vi bruke videoer ...
Videoer er gode for å introdusere brukerne dine til et produkt eller en tjeneste uten å overvelde dem med en liste over funksjoner en kilometer lang. Tenk på mange SaaS nettsteder; hvor mange kan du se med en introvideo som forklarer produktet eller tjenesten litt mer?
Nøkkelen med denne videoen er å gjøre det fokus for designen din. Mens du vil nevne funksjonene i tekst og bilder nedenfor, har du en video som viser hovedfunksjonene på en kreativ måte, en sikker måte å få brukerne til å legge merke til produktet og vil prøve det mer.
Et par gode eksempler på dette er på Applikasjoner for Applikasjon og Papirapp.
Klar er en gjøremålsliste og listehåndteringsapp. Clear's nettsted er et godt eksempel på å bruke video som et fokus, men sørger også for at meldingen om appen kommer gjennom høyt og tydelig uten videoen.
Videoen er plassert i overskriften til nettstedet, rett ved siden av appnedlastingslenkene, og når du klikker den lastes videoen i et lite overlegg.
Denne videoen er bare en introduksjon til selve produktet og appen, men det som fungerer bra er konsistensen i merkevaren og visuals fra webdesign til videoen. Som du har lært i tidligere artikler, er konsistens nøkkelen til å skape en sterk merkemeddelelse, og i samsvar med de sammen så bra, vil det gjøre brukerne mer sannsynlig å stole på merkevaren og derfor fortsette å kjøpe appen.
Papir er en app som lar deg skisse og tegne vakkert på iPad.
Fokuset på videoen på papirwebsiden er enda større enn på Clear-nettstedet, med et større, virkelig visuelt slående topptekst på plass, med et videoavspillingsikon over toppen av bildet. Ved å klikke for å spille av videoen, åpnet den også i et overlegg på toppen av resten av webdesign.
Igjen, som med Clear, er merkevaremeldingen, stilen og tonen i stemmen svært lik resten av webdesign. Å skape konsistens som dette kan bare hjelpe deg med å få flere brukere til å stole på det lange løp - så vær sikker på at du ikke lager en feil i stiler hvis du bestemmer deg for å inkludere en video i webdesignene dine.
En god ting om video (hvis den brukes smart) er at du kan bruke den til å glede brukerne, ved å introdusere skjulte funksjoner som de kanskje ikke har tenkt på. Nesten som et lite påskeegg, men litt mer synlig, og mye mer visuelt!
Denne bruken av video i design er rent subjektiv og vil igjen avhenge av hvordan merkevaren må være representert. Dette kan ikke være egnet i nettside design som er for profesjonelle selskaper, men ville være perfekt i noe litt mer tilfeldig i stil.
Et par nettsteder som bruker dette til stor effekt er Handheld Conf og Playground Inc.
Håndholdt Conf er en konferanse som beskriver seg som "store ideer for små enheter". På hjemmesiden til Handheld Conf-nettstedet er det en rekke opptatt av høyttalere og deres emner, sammen med et bilde. Nå, når du svinger over høyttalervideoene, kommer de til liv!
Dette er en utrolig liten godbit for brukere; nesten uhyggelig som fotografier i Harry Potters verden, det trekket. Så snart markøren svinger bort fra bildene, pause de på det punktet der markøren forlot bildet. Og hvis du går tilbake til dem, gjenopptar de.
Bruk av video som dette er en fin måte å legge til litt mer interaktivitet i nettstedene dine, men også lage små måter for brukeren å nyte å bla gjennom nettstedet mer.
Playground Inc er et kreativt digitalt byrå basert i Toronto. På deres hjemmeside bruker de animasjon briljant for å illustrere deres ideer og tro. Disse animasjonene aktiveres bare når du har rullet til den delen av siden, og før de ser ut som statiske illustrasjoner.
Dette er en fin måte å legge til interesse for nettstedet ditt, som vil glede brukere, da det er noe som er helt uventet, men det forbedrer måten de kan kommunisere med nettstedet ditt.
Hånd i hånd med å bruke video for å glede brukerne, du kan også bruke video for å legge til ekstra visuell interesse og vekt på designelementene dine. Dette er en fin måte å bruke video på, fordi det sikrer at du kan holde interessenivået på nettstedet ditt høyere enn hvis du hadde mye færre visuelle elementer for å fange brukerens øye.
Et godt eksempel på dette er sett på Symbolset-nettsiden.
Symbolset oppretter ikonets webfonter for alle våre flotte nettfolk å bruke. Personlig tror jeg hvordan Symbolset fungerer, er ganske oppfinnsomt, og måten de bruker video på deres nettside, er ikke annerledes.
Hvis du bruker Symbolset-skrifter på skrivebordet (for eksempel i Photoshop), kan du skrive ut søkeordet for ikonet du trenger, og det vil vises for deg. På samme måte har de brukt dette i sin video.
Symbolset bruker også virkelig farge ved siden av hver av de meldingene de skriver ut til deg i videoen, og holder visuell interesse på en enorm høyde. Denne typen video er også veldig inkluderende, da det får det til å føle at nettsiden snakker med deg og koble personlig med deg; som igjen vil bidra til å bygge tilliten mellom brukeren og selskapet selv.
En trend som lenge har eksistert er den store, ofte (men ikke begrenset til) bakgrunnsbilde med fullskjermstørrelse. Noen selskaper bruker i stedet dette som en mulighet som plass til å plassere sin fullskjermstørrelse video.
Mens dette ikke er noe nytt, må du tenke nøye på hvordan du bruker denne stilen av video i designene dine. I stedet for bare et stort fullverdig bakgrunnsbilde - som er relativt enkelt å arbeide med designelementene dine, er en video noe som alltid beveger seg og kan forårsake ødeleggelse med designelementene dine (tenk typografi, farge, knapper, andre elementer som det) når de blandes med den bevegelige videoen. Det er en ny utfordring, men kan brukes smart med forsiktig tanke.
Et par gode eksempler på store bakgrunnsvideoer er Spotify og Slow Mo.
Spotify er en populær musikk-streaming-tjeneste. Deres hjemmeside hjemmeside bruker den store bakgrunnsvideoen til stor effekt, med en loopingvideo med en minimal mengde andre designelementer lagt over toppen.
Spotify har også besluttet å inkludere lyd på denne videoen (som du kan slå av veldig enkelt, en må ha når du inkluderer lyd på et hvilket som helst nettsted), noe som forbedrer videoen enda lenger.
Videoen, lyden og utformingen av hjemmesiden bidrar generelt til å angi tonen for tjenesten og hjelper brukerne å forstå litt mer om tjenesten og deres tagline av "musikk for hvert øyeblikk", alt uten å direkte si hva Spotify egentlig gjør.
Slow Mo er høyhastighets kameraspesialister. De bruker video i stedet for et bilde for heltens område øverst på hjemmesiden. Det som er smart om Slow Mo er at de i essensen er et selskap som selger høyhastighets kameraer, og de bruker video for å hjelpe til med å selge det.
Videoene de bruker på hjemmesiden deres, spilles alle automatisk i en slowmotiv-stil og knyttes perfekt til merkets navn. Det skaper også mye visuell interesse, mens kontrasten mellom videoen og teksten som overlegger den, holdes alltid sterk.
En siste ting du kan gjøre ved å bruke video i designene dine, er å bruke den til å forbedre dine fortellingsferdigheter. Historiefortelling er ikke noe nytt, men du kan bruke video for å forbedre det enda mer. Storytelling bør være hjertet av designene dine, og video er et skritt å ta som kan bidra til å forbedre opplevelsen som brukerne vil ha på nettstedet ditt.
Et godt eksempel på dette i aksjon er på Dan Edens personlige nettside.
Dan er en designer, som nylig ble ansatt av Dropbox som den første Dropbox Design Intern. I porteføljeseksjonen på Dan nettside, sammen med prosjektets tittel og beskrivelser, har han også (flotte utseende) videoer som går brukeren gjennom prosjektet.
Dette er strålende. I stedet for å vise enkle skjermbilder eller linker til nettstedet, forbedrer Dan erfaringen fra brukerne ved å la dem se prosjektet i aksjon uten å gå noe annet sted. Dette er bra da det legger til interesse for siden, men det vil også oppfordre brukere til å besøke et nettsted hvis de liker det.
Det kan noen ganger være veldig vanskelig å få et inntrykk av hvordan et nettsted fungerer uten å bla det selv, men Dan har klart å krysse broen uten å legge til noen ekstra skritt for sine brukere.
Så videoen er flott i webdesign, så lenge du bruker det bra. Det jeg vil at du skal gjøre nå, er å se på videoer på nettet. Finn så mange eksempler som du kan, og ta deg tid til å se hva som fungerer bra og hva som ikke, etter din mening.
Så tenk på hvordan du muligens kan gå om å integrere video i dine egne motiver og hvordan du kan bruke den til forbedre og forbedre dine design i fremtiden.
Accentsconagua