Video im Webdesign

Video selbst gibt es schon lange; In Filmen, im Fernsehen und jetzt verfügbar für unsere Telefone, Tablets und anderen Geräten. Videos im Internet gibt es auch schon lange. Wir haben mit umfangreichen Flash-Dateien mit Videos und Animationen begonnen, während wir jetzt HTML5-Videos und viele weitere Optionen für die Aufnahme von Videos in unsere Webseiten haben. Heck, die Hälfte der Zeit ist es sogar so einfach wie das Einbetten von Einbettungscode in eine Website. Kurz gesagt, wir hatten es noch nie so einfach, wenn es um die Verwendung von Videos im Internet geht.


Die Evolution des Videos

Das Entwerfen mit Video war in der Vergangenheit viel schwieriger als jetzt. Für die Aufnahme von qualitativ hochwertigem Videomaterial war oft eine schwere und teure Ausrüstung und Software erforderlich. Jetzt können wir unsere normalen Digitalkameras (oder sogar unsere Telefone!) Verwenden, um erstklassiges Filmmaterial aufzunehmen. Und wenn Sie animierte Sequenzen auf Ihrer Website haben wollten, mussten Sie entweder sehr gut digital illustrieren, viel ActionScript kennenlernen oder sich in Flash auskennen oder eine andere Person damit beauftragen. Jetzt gibt es Tools und Software, mit deren Hilfe Sie Animationen ganz eigenständig erstellen können.

Denken Sie auch über die Erstellung von YouTube nach. YouTube wurde 2005 gegründet und ist der beliebteste Dienst, mit dem Nutzer ihre eigenen Videos hochladen und freigeben können. Selbst große Unternehmen und Unternehmen nutzen es, um beliebte Clips oder Nachrichten aus ihren TV-Shows zu teilen.

Meines Erachtens hat YouTube eine gewisse Entwicklung des Videos im Web hervorgebracht. Sie machten es viralen Kampagnen leicht, sich schnell zu verbreiten, und Videos wurden schnell explodiert. YouTube bot etwas, was wenige zuvor tun konnten: irgendjemand und jeder Sie können Videos erstellen und an alle weitergeben, unabhängig von ihren Erfahrungen oder technischen Fähigkeiten.


Video heute im Web

Heutzutage stehen uns so viele Technologien zur Verfügung, dass Flash größtenteils auf der Strecke geblieben ist. HTML5 macht es uns viel einfacher, Möglichkeiten zu entwickeln, um Videos und anderes animiertes visuelles Material auf unseren Websites anzuzeigen. Diese Technologie ist großartig, da wir viel bessere Möglichkeiten haben, Videos in unseren Designs zu verwenden und sie tatsächlich zu nutzen, um die Erfahrungen unserer Nutzer zu verbessern.

Aber ich bin nicht hier, um den ganzen Tag über YouTube und Vimeo zu sprechen oder um Ihnen alle technischen Fortschritte und Techniken zu erläutern, die Sie zum Einbinden von Videos in Ihre Websites verwenden können. Stattdessen werde ich Ihnen erklären, warum es gut ist, Videos in Ihr Design aufzunehmen und was Video großartig macht.


Wie können wir Videos verwenden?

Video kann auf vielfältige Weise verwendet werden, um unsere Designs zu verbessern und die Benutzerreise und -erfahrung zu verbessern. Genau wie Sie es mit verschiedenen Bildern (ob Fotografie, Icons oder Animationen) tun würden, sollten Sie Video in Ihren Entwürfen verwenden verbessern Ihre Designs. Denken Sie daran, dass Ihre Botschaft klar sein soll oder ohne die videos.

Bei jedem Video ist es wichtig, dass Sie klar über die Botschaft nachdenken, die Sie projizieren möchten. Auch wenn dies völlig von der Marke, dem Produkt oder dem Service abhängen kann, verwenden Sie Video genauso sorgfältig wie alle anderen Elemente in Ihrem Design.

Das heißt, wir können Videos verwenden…

… Vorstellen

Mit Videos können Sie Ihre Benutzer mit einem Produkt oder einer Dienstleistung vertraut machen, ohne sie mit einer Liste von Funktionen zu überwältigen, die eine Meile lang sind. Denken Sie an viele SaaS-Websites. Wie viele können Sie mit einem Intro-Video sehen, in dem das Produkt oder die Dienstleistung etwas mehr erklärt wird?

Der Schlüssel zu diesem Video besteht darin, es zum Fokus Ihres Designs zu machen. Während Sie die Funktionen in Text und Bildmaterial unten erwähnen möchten, ist ein Video, das die Hauptmerkmale auf kreative Art und Weise zeigt, eine sichere Methode, um Ihre Benutzer dazu zu bringen, das Produkt zu erkennen und es mehr auszuprobieren.

Ein paar großartige Beispiele hierfür sind die Websites der Clear-App und der Paper-App.

klar

Clear ist eine To-Do- und Listen-App. Die Website von Clear ist ein hervorragendes Beispiel für die Verwendung von Video als Fokus, stellt aber auch sicher, dass die Nachricht über die App ohne Video laut und klar wiedergegeben wird.

Das Video wird in der Kopfzeile der Website direkt neben den App-Download-Links platziert. Wenn Sie darauf klicken, wird das Video in einer kleinen Überlagerung geladen.

Dieses Video ist nur eine Einführung in das Produkt und die App selbst. Was jedoch gut funktioniert, ist die Konsistenz der Marke und der visuellen Elemente vom Website-Design bis zum Video. Wie Sie bereits in früheren Artikeln erfahren haben, ist Konsistenz der Schlüssel zu einer starken Markenbotschaft. Wenn Sie diese so gut aufeinander abstimmen, wird die Wahrscheinlichkeit bestehen, dass Nutzer der Marke vertrauen und daher die App kaufen.

Papier

Paper ist eine App, mit der Sie wunderbar auf Ihrem iPad skizzieren und zeichnen können.

Der Fokus auf dem Video auf der Paper-Website ist noch größer als auf der Clear-Website, wobei ein größeres, wirklich optisch auffälliges Kopfbild vorhanden ist und ein Videospiel-Symbol über dem Bild angezeigt wird. Beim Anklicken, um das Video abzuspielen, öffnete es sich jedoch in einer Überlagerung über dem Rest des Website-Designs.

Wie bei Clear werden die Markenbotschaft, der Stil und der Klang der Stimme dem Rest des Website-Designs sehr ähnlich gehalten. Wenn Sie eine solche Konsistenz erzielen, können Sie auf lange Sicht mehr Vertrauen gewinnen. Stellen Sie also sicher, dass Sie keine Stile in den Formaten erstellen, wenn Sie sich dazu entscheiden, ein Video in das Design Ihrer Website aufzunehmen.

… Zum Genießen

Eine großartige Sache an Video ist (wenn sie geschickt eingesetzt wird), dass Sie damit Ihre Benutzer begeistern können, indem Sie versteckte Funktionen einführen, an die sie möglicherweise nicht gedacht haben. Fast wie ein kleines Osterei, aber etwas mehr sichtbar und viel visueller!

Diese Verwendung von Videos in Designs ist rein subjektiv und würde wiederum davon abhängen, wie die Marke dargestellt werden muss. Dies eignet sich möglicherweise nicht für Website-Designs, die für professionelle Unternehmen gedacht sind, wäre jedoch perfekt für etwas mehr Casual-Style.

Einige Websites, die diesen Effekt mit großer Wirkung nutzen, sind Handheld Conf und Playground Inc.

Handheld-Konf

Handheld Conf ist eine Konferenz, die sich selbst als "große Ideen für kleine Geräte" bezeichnet. Auf der Homepage der Handheld Conf-Website gibt es eine Reihe fantastischer Referenten und deren Themen sowie ein Foto. Wenn Sie jetzt über die Lautsprecherfotos schweben, werden sie lebendig!

Dies ist ein erstaunlicher kleiner Leckerbissen für Benutzer. fast unheimlich wie Fotografien in der Welt von Harry Potter, diese Bewegung. Sobald sich der Mauszeiger von den Fotos entfernt hat, bleibt er an der Stelle stehen, an der er das Foto verlassen hat. Und wenn Sie zu ihnen zurückkehren, werden sie wieder aufgenommen.

Die Verwendung von Videos wie diesem ist eine großartige Möglichkeit, Ihren Websites ein wenig mehr Interaktivität zu verleihen, aber auch kleine Möglichkeiten für den Benutzer zu schaffen, um mehr über die Website zu surfen.

Spielplatz Inc

Playground Inc ist eine kreative Digitalagentur mit Sitz in Toronto. Auf ihrer Homepage verwenden sie brillante Animationen, um ihre Ideen und Überzeugungen zu veranschaulichen. Diese Animationen werden erst aktiviert, wenn Sie zu diesem Teil der Seite gescrollt haben und vorher wie statische Illustrationen aussehen.

Dies ist eine großartige Möglichkeit, Ihre Website interessanter zu gestalten, was die Benutzer begeistern wird, da dies völlig unerwartet ist, aber die Interaktion mit Ihrer Website verbessert.

… Um Zinsen hinzuzufügen

Hand in Hand mit der Verwendung von Video zur Begeisterung Ihrer Benutzer, können Sie Video auch verwenden, um Ihren Gestaltungselementen mehr visuelles Interesse und Gewicht zu verleihen. Dies ist eine großartige Möglichkeit, Videos zu verwenden, da dadurch sichergestellt ist, dass Sie das Interesse an Ihrer Website höher halten können, als wenn Sie viel weniger visuelle Elemente hätten, um den Blick des Benutzers auf sich zu ziehen.

Ein gutes Beispiel dafür ist auf der Symbolset-Website zu finden.

Symbolset

Symbolset erstellt Icon-Web-Fonts, die alle von uns lieben Web-Leuten verwenden können. Ich persönlich finde die Funktionsweise von Symbolset ziemlich einfallsreich und die Art, wie sie Videos auf ihrer Website verwenden, ist nicht anders.

Wenn Sie die Symbolset-Schriftarten auf dem Desktop verwenden (z. B. in Photoshop), können Sie das Schlüsselwort für das gewünschte Symbol eingeben und es wird für Sie angezeigt. Auf dieselbe Weise haben sie dies in ihrem Video verwendet.

Symbolset verwendet neben den Nachrichten, die sie Ihnen in Ihrem Video eingeben, auch sehr geschickt Farbe und sorgt so für ein visuelles Interesse. Diese Art von Video ist auch wirklich inklusiv, da es sich anfühlt, als würde die Website mit Ihnen sprechen und sich persönlich mit Ihnen verbinden. Dies wiederum hilft, das Vertrauen zwischen dem Benutzer und dem Unternehmen selbst aufzubauen.

… Um große Hintergrundbilder zu ersetzen

Ein Trend, der schon lange bekannt ist, ist das große Hintergrundbild, das häufig (wenn auch nicht auf dieses beschränkt ist). Einige Unternehmen nutzen dies jetzt als Gelegenheit, um ihre Videos in voller Bildschirmgröße zu platzieren.

Dies ist zwar nichts Neues, aber Sie müssen sorgfältig darüber nachdenken, wie Sie diesen Videostil in Ihren Entwürfen verwenden. Anstelle eines großen Hintergrundbilds, das relativ einfach mit Ihren Designelementen zu umgehen ist, ist ein Video immer etwas in Bewegung und kann Verwüstungen bei Ihren Designelementen verursachen (denken Sie an Typografie, Farbe, Schaltflächen und andere Elemente) dass) mit dem bewegten Video gemischt. Es ist eine neue Herausforderung, kann aber mit umsichtigem Nachdenken geschickt eingesetzt werden.

Einige großartige Beispiele für große Hintergrundvideos stammen von Spotify und Slow Mo.

Spotify

Spotify ist ein beliebter Musik-Streaming-Dienst. Ihre Website-Startseite nutzt das großformatige Hintergrundvideo mit großer Wirkung, wobei ein Endlosvideo mit einer minimalen Anzahl anderer Designelemente überlagert wird.

Spotify hat sich auch entschieden, Audio in dieses Video aufzunehmen (das Sie ganz einfach ausschalten können, wenn Sie Audio auf einer Website einfügen), was das Video noch weiter verbessert.

Die Video-, Audio- und Design-Eigenschaften der Homepage tragen insgesamt dazu bei, den Ton für den Dienst festzulegen, und helfen den Benutzern, den Dienst und den jeweiligen Begriff „Musik für jeden Moment“ besser zu verstehen, ohne direkt zu sagen, was Spotify tatsächlich tut.

Zeitlupe

Slow Mo ist ein Spezialist für Hochgeschwindigkeitskameras. Sie verwenden ein Video anstelle eines Bildes für den Heldenbereich oben auf der Startseite. Das Kluge an Slow Mo ist, dass es sich bei ihrer Essenz um ein Unternehmen handelt, das Hochgeschwindigkeitskameras verkauft, und es nutzt Video, um dies zu verkaufen.

Die Videos, die sie auf ihrer Homepage verwenden, werden automatisch in Zeitlupe abgespielt und passen perfekt zum Namen der Marke. Es erzeugt auch viel visuelles Interesse, während der Kontrast zwischen dem Video und dem darüber liegenden Text immer stark bleibt.

… Um dein Storytelling zu verbessern

Eine letzte Sache, die Sie durch die Verwendung von Video in Ihren Entwürfen tun können, ist die Verbesserung Ihrer Storytelling-Fähigkeiten. Storytelling ist nichts Neues, aber Sie können Videos noch weiter verbessern. Storytelling sollte das Herzstück Ihrer Designs sein. Video ist ein Schritt, der dazu beitragen kann, die Benutzererfahrung auf Ihrer Website zu verbessern.

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

Daneden.me

Dan ist ein Designer, der kürzlich von Dropbox als erster Dropbox Design Intern angestellt wurde. Im Portfolio-Bereich der Website von Dan finden Sie neben dem Projekttitel und den Beschreibungen auch (schön aussehende) Videos, die den Benutzer durch das Projekt führen.

Das ist brilliant. Anstatt einfache Screenshots oder Links zu der Website anzuzeigen, verbessert Dan die Erfahrung seiner Benutzer, indem er ihnen erlaubt, das Projekt in Aktion zu sehen, ohne irgendwo anders zu sein. Dies ist großartig, da es die Seite interessanter macht, aber es wird auch die Benutzer dazu anregen, eine Website zu besuchen, wenn ihnen das Aussehen gefällt.

Es kann manchmal sehr schwierig sein, eine Ahnung davon zu bekommen, wie eine Website funktioniert, ohne sie selbst zu durchsuchen. Dan hat es jedoch geschafft, die Brücke zu überqueren, ohne zusätzliche Schritte für seine Benutzer hinzuzufügen.


Zuordnungen

So ist Video im Webdesign großartig, solange Sie es gut verwenden. Ich möchte, dass Sie sich jetzt Videos im Internet ansehen. Finden Sie so viele Beispiele wie möglich und nehmen Sie sich die Zeit, um zu sehen, was Ihrer Meinung nach gut funktioniert und was nicht.

Überlegen Sie anschließend, wie Sie das Video möglicherweise in Ihre eigenen Designs integrieren und wie Sie es verwenden können verbessern und verbessern Ihre Designs in der Zukunft.