Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Video im Web-Design

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
CSS3, Web Fonts and Icons
Responsive Web Design

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Video selbst gibt es schon seit langem; in Filmen, im Fernsehen und jetzt verfügbar auf unseren Handys, Tablets und andere Geräte zu spielen. Video im Internet gibt es auch schon lange.  Wir begannen mit schwere Flash-Dateien von Videos und Animationen, jetzt haben wir HTML5-Video und noch so viele Möglichkeiten für die Aufnahme von Video in unseren Web-Seiten. Verdammt, die Hälfte der Zeit ist sogar so einfach wie das Einbetten von Code in einer Website. Kurz gesagt, es war noch nie so einfach für uns, wenn es um die Verwendung von Video im Internet ging. 

Die Entwicklung von Video

Gestaltung mit Video war in der Vergangenheit viel schwieriger, als es jetzt ist. Bei der Auswahl von hochwertigem Videomaterial werden oft schwere und teure Geräte und Software benötigt, während wir jetzt unsere üblichen Digitalkameras (oder sogar unsere Handys!) Verwenden können, um qualitativ hochwertige Aufnahmen zu machen.  Und wenn Sie animierte Frames auf Ihrer Website benötigen, müssen Sie sehr gut in digitaler Illustration sein, eine Menge ActionScript beherrschen, entweder das Wissen von Flash nutzen oder jemand anderen für diesen Job einstellen.   Jetzt gibt es Tools und Teile der Software, mit denen Sie die Animation selbst erstellen können. 

Denken Sie auch über die Entstehung von YouTube.  YouTube wurde 2005 gegründet und ist der beliebteste Dienst, mit dem Nutzer ihre eigenen Videos herunterladen und veröffentlichen.  Selbst Massenunternehmen und Unternehmen nutzen es, um beliebte Clips oder Nachrichten aus ihren TV-Sendungen auszutauschen. 

Meiner Meinung nach hat YouTube zur Entwicklung von Video im Internet geführt.  Sie vereinfachten die Verbreitung der Virus-Kampagnen und das Video verbreitete sich schnell in der Szene.  YouTube bietet etwas, dass nur wenige in der Lage zu tun, bevor gewesen: irgendwelche und jeder konnte Video erstellen und teilen sie mit wem sie gefallen hat, unabhängig von ihrer Erfahrung und technisches können.


Video im Web Heute 

In unserer Zeit haben wir so viele Technologien, dass Flash grundsätzlich in den Hintergrund geriet.  HTML5 erleichtert es uns, Möglichkeiten zu entwickeln, um unsere Videos und andere animierte Vollbilder auf unseren Websiten anzuzeigen.  Es ist großartig, dass wir diese Technologie haben, es bedeutet, dass wir viel bessere Möglichkeiten haben, Video in unseren Projekten zu verwenden und es tatsächlich zu verwenden, um die Erfahrung unserer Benutzer zu verbessern. 

Aber ich bin nicht hier, um den ganzen Tag über YouTube und Vimeo zu sprechen, oder ich erzähle Ihnen über allen technischen Fortschritten und Techniken, mit denen Sie Videos in Ihre Website integrieren können.  Stattdessen werde ich Ihnen sagen, warum es gut ist, Videos in Ihr Design aufzunehmen und was das Video anders macht. 


Wie können wir das Video verwenden?  

Video kann auf viele Weisen verwendet werden, um unsere Projekte zu verbessern und die Reise und das Benutzererlebnis zu verbessern.  Genau wie mit verschiedenen Bildern (egal ob Fotografie, Icons oder Animation) sollen Sie versuchen, das Video in ihren Projekten zu verwenden, um sie zu verbessern. Denken Sie daran, dass Ihre Nachricht mit oder ohne Video klar sein muss.

Bei jedem Video ist es wichtig, dass Sie die Meldung, die Sie vermitteln möchten, klar durchdenken.  Auch wenn dies vollständig von der Marke, dem Produkt oder der Dienstleistung abhängt, sollen Sie das Video genauso sorgfältig verwenden, wie alle anderen Elemente Ihres Designs. 

Also, wie man sagt, können wir Video verwenden ... 

...Bekanntschaft

Das Video eignet sich hervorragend, um Benutzer mit einem Produkt oder einer Dienstleistung vertraut zu machen, ohne sie mit einer langen Liste von Meilen zu überschütten.  Denken Sie an vielen SaaS-Siten; wie viel koennen Sie sehen, wenn Sie ein Einführungsvideo verwenden, das das Produkt oder die Dienstleistung ein wenig mehr beschreben? 

Der Schlüssel zu diesem Video besteht darin, dass es zum Mittelpunkt ihres Designs zu machen.  Trotz der Tatsache, dass Sie die Möglichkeiten in den folgenden Texten und Bildern erwähnen möchten, die Verfügbarkeit eines Videos, das die wichtigsten Möglichkeiten auf kreative Weise zeigt, eine sichere Möglichkeit, die Aufmerksamkeit Ihrer Nutzer auf das Produkt zu lenken, so dass sie es härter ausprobieren möchten. 

Einige hervorragende Beispiele finden Sie auf den Clear-App- und Paper-Websiten.

Clear

Clear ist die Anwendung für Dinge und die Liste. Die Clear-Website ist ein hervorragendes Beispiel für die Verwendung von Video als Fokus und Bereitstellung davon, dass die Nachricht über die Anwendung ohne Video laut und deutlich wird. 

clear-1

Das Video wird neben den Links zum Herunterladen der Anwendung im Titel der Website platziert. Wenn Sie darauf klicken, wird das Video in einem kleinen Overlay geladen.

Dieses Video ist nur eine Einführung in das Produkt und die Anwendung selbst. Was jedoch funktioniert, sind Markenkonsistenz und visuelle Effekte vom Website-Design bis zum Video.  Wie Sie in früheren Artikeln erfahren haben, ist Konsistenz der Schlüssel, um eine klare Botschaft über die Marke zu schaffen und sie so gut zu kombinieren, dass sie den Benutzern hilft, der Marke mehr zu vertrauen und folglich die Anwendung weiterhin kaufen. 

clear-2

Paper

Papier ist eine Anwendung, mit der Sie auf Ihrem iPad schön skizzieren und malen können.

Die Konzentration auf das Video auf der Paper Websitesogar ist noch mehr als auf der Clear-Website, mit einem großen, wirklich visuell hellen Headerbild, mit einem Videospielsymbol über dem Bild.   Wenn Sie auf die Videowiedergabe klicken, wird sie auch im Overlay auf den anderen Websiten geöffnet.

paper-1

Wie bei Clear sind die Markenbotschaft, der Stil und der Ton der Stimme dem Rest des Website-Designs sehr ähnlich.  Wenn Sie solche Sequenz erstellen, können Sie auf lange Sicht mehr Vertrauen gewinnen. Machen Sie also keine Missverständnisse in Stilen, wenn Sie ein Video in das Design Ihrer Website aufnehmen.

paper-2

.. Zum Vergnügen 

Eine großartige Sache über Video (wenn es intelligent verwendet wird) ist, dass Sie es benutzen können, um Ihren Benutzern zu erfreuen, versteckte Funktionen einzugeben, an die sie vielleicht nicht gedacht haben. Fast wie ein kleines Osterei, aber ein bisschen auffälliger und viel mehr visuell!

Diese Verwendung von Video in Gestaltungen ist rein subjektiv und wird erneut davon abhängen, wie die Marke präsentiert werden soll. Vielleicht ist es nicht für Website geeignet, die für professionelle Kompanien entworfen wurden, aber es wäre ideal in einem etwas ungezwungenen Stil.

Einige Website, die dies für große Wirkung verwenden, sind Handheld Conf und Playground Inc.

Handheld Conf 

Handheld Conf ist eine Konferenz, die als "großartige Ideen für kleine Geräte" beschrieben wird. Auf der Homepage von Handheld Conf finden Sie eine Reihe von fantastischen Rednern und deren Themen sowie Fotos. Jetzt, wenn Sie über den Bildern den Mauszeiger bewegen, erwachen sie zum Leben!

handheldconf

Es ist eine erstaunliche kleine Unterhaltung für Benutzer; fast so überraschend wie die Bilder in der Welt von Harry Potter. Sobald der Mauszeiger von den Fotos springt, bleiben sie an der Stelle stehen, an der ihr Mauszeiger das Foto verlässt. Und wenn Sie zu ihnen zurückkehren, werden sie fortfahren. 

Die Verwendung solches Videos ist eine gute Möglichkeit, Ihre Website ein wenig Interaktivität zu verleihen, aber auch, um Ihr Benutzer mehr Vergnügen zu bekommen, die Website besser zu betrachten.

Playground Inc 

Playground Inc. ist eine kreative digitale Agentur mit Sitz in Toronto.  Auf ihrer Homepage verwenden sie hervorragende Animationen, um ihre Ideen und Überzeugungen zu veranschaulichen.  Diese Animation wird erst aktiviert, nachdem Sie zu diesem Teil der Seite geblättert haben, und davor sehen sie wie statische Abbildungen aus. 

playgroundinc

Es ist ein großartiger Weg, um Ihre Website zu interessieren, was die Benutzer erstaunen wird, da es etwas völlig unerwartetes ist, aber die Art und Weise verbessert, wie Sie mit Ihrer Site interagieren ...

Um Interesse hinzuzufügen

Darüber hinaus können Sie das Video verwenden, um Nutzer auf das Video aufmerksam zu machen, damit Ihren Designelementen zusätzliches visuelles Interesse und Gewicht verleihen.  Das ist eine großartige Möglichkeit, Videos zu verwenden, da es sicherstellt, dass Sie das Interesse an Ihrer Website erhöhen können, als wenn Sie viel weniger visuelle Elemente hätten, um die Aufmerksamkeit des Nutzers zu erregen.

Ein großartiges Beispiel dafür finden Sie auf der Symbolset-Website.

Symbolset 

Symbolset erstellt Web-Schrift-Symbole für uns alle, großartige Web-Benutzer.  Persönlich denke ich, dass die Arbeit von Symbolset ziemlich erfinderisch ist, und die Art, wie sie das Video auf ihrer Website verwenden, ist nicht anders.

symbolset

Wenn Sie Symbolset-Schriftarten auf dem Desktop verwenden (z. B. in Photoshop), können Sie ein Schlüsselwort für das gewünschte Symbol eingeben, das dann für Sie angezeigt wird.  In gleicher Weise haben sie das in ihrem Video benutzt. 

Wirklich geschickt verwendet Symbolset auch die Farbe neben jeder Nachricht, die er in seinem Video an Sie ausdruckt, um das visuelle Interesse groß zu halten.  Diese Art von Video ist ebenfalls enthalten, da Sie das Gefühl haben, dass die Website Sie kontaktiert und sich mit Ihnen persönlich verbindet. Es wird wiederum dazu beitragen, Vertrauen zwischen dem Benutzer und dem Unternehmen selbst zu schaffen.

.. Ersetzen Sie große Hintergrundbilder

Die Tendenz, die schon lange existiert, ist ein großes, oft (aber nicht beschränktes) Vollbild-Hintergrundbild. Einige Kompanien nutzen es stattdessen als Möglichkeit, ihr Vollbild-Video zu posten.

Obwohl es nichts Neues ist, müssen Sie sorgfältig darüber nachdenken, wie Sie diesen Stil von Video in Ihren Projekten verwenden. Anstelle eines einfachen, vollständigen Hintergrundbildes, das ist relativ einfach, um Ihre Designelemente zu umgehen, Video ist etwas, das sich immer bewegt und die Ursache für das Chaos Ihrer Designelemente sein kann (denken Sie an Text, Farbe, Knöpfe, andere Elemente wie diese), wenn Sie es mit einem bewegten Video kombinieren. Das ist ein neues Problem, aber es kann mit Vorsicht und Aufmerksamkeit verwendet werden.

Einige ausgezeichnete Beispiele für große Hintergrundvideos - Spotify und Slow Mo.

Spotify 

Spotify ist ein beliebter Musikdienst. Ihre Website-Homepage verwendet ein großflächiges Hintergrundvideo für eine hervorragende Wirkung, mit einem wiederspielbaren Video, mit einer minimalen Anzahl anderer Gestaltungselemente, die darüber angeordnet sind.

spotify

Spotify entschied auch, Audio in dieses Video einzubinden (was Sie sehr leicht abschalten können, sollte es sein, wenn Sie den Sound auf einer beliebigen Site einschalten), was das Video weiter verbessert.

Das Video, Audio und Design der Hauptseite helfen dabei, den Stil des Services anzupassen und den Benutzern ein wenig mehr über den Service und ihren Slogan "Musik für jede Veranstaltung" zu vermitteln, ohne direkten Hinweis darauf, was Spotify wirklich macht

Slow Mo 

Slow Mo ist ein Kamera-Spezialist für High-Speed-Aufnahmen. Sie verwenden das Video anstelle des Bildes für den speziellen Bereich oben auf der Startseite. Was in Slow Mo vernünftig ist, ist, dass es sich in Wirklichkeit um eine Firma handelt, die Kameras für Hochgeschwindigkeitsaufnahmen verkauft, und sie verwenden Video, um sie zu verkaufen.

slowmo

Die Videos, die sie auf ihrer Startseite verwenden, werden automatisch in Zeitlupe wiedergegeben und passen perfekt zum Markennamen. Das erzeugt auch ein großes visuelles Interesse, während der Kontrast zwischen dem Video und dem Text, der sich überlagert, immer stark bleibt.

.. Um Ihre Geschichten zu verbessern

Das letzte, was Sie tun können, wenn Sie Videos in Ihren Projekten verwenden, ist, es zu benutzen, um Ihre Fähigkeiten zum Geschichtenerzählen zu verbessern. Storytelling ist nichts Neues, aber Sie können das Video verwenden, um es noch mehr zu verstärken. Die Geschichten, die im Mittelpunkt Ihrer Projekte und des Videos stehen sollten, sind ein Schritt, der dazu beitragen kann, die Nutzererfahrung auf Ihrer Website zu verbessern.

Ein hervorragendes Beispiel dafür ist die persönliche Website von Dan Eden.

Daneden.me 

Dan ist der Designer, der kürzlich Dropbox als ersten Dropbox Design-Praktikanten eingestellt hat. Im Portfolio-Bereich der Dan-Website hat er neben dem Titel und den Beschreibungen des Projekts auch (schöne) Videos, die den Nutzer zum Projekt führen.

daneden

Es ist brillant.  Anstatt einfache Screenshots oder Links zu einer Website zu zeigen, verbessert Dan die Erfahrung seiner Benutzer, indem er ihnen erlaubt, das Projekt in Aktion zu sehen, sodass sie nicht woanders gesucht werden müssen. Das ist wunderbar, da es Interesse für die Seite gibt, aber auch Benutzer dazu ermutigen wird, die Website zu besuchen, wenn sie ihr Aussehen mögen.

Manchmal ist es sehr schwer zu verstehen, wie die Seite funktioniert, ohne sie selbst zu sehen, aber Dan hat es geschafft, diese Brücke zu überqueren, ohne seinen Benutzern zusätzliche Schritte zu geben.


Zuordnungen

Auf diese Weise eignet sich das Video hervorragend für Webdesign, wenn Sie es gut verwenden. Jetzt möchte ich, dass Sie das Video im Internet anschauen.  Finden Sie so viele Beispiele wie möglich und nehmen Sie sich die Zeit zu sehen, was gut funktioniert und was Ihrer Meinung nach nicht funktioniert.

Dann überlegen Sie, wie Sie das Video in Ihre eigenen Projekte integrieren können und wie Sie damit die Qualität Ihrer Projekte in Zukunft verbessern können.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.