Ein Live-Foto. Cinemagraph. Bewegende Bilder. Noch Bewegung. Es gibt so viele Namen für diesen Trend im Webdesign, die durch ein Heldenbild identifiziert werden, das auf subtile Weise lebendig erscheint.
Es ist kein ganz Foto, aber auch kein Video. Die Bewegung ist oft auf eine Aktion im Bild beschränkt, um die Aufmerksamkeit des Benutzers zu wecken und in das Bild zu ziehen. Unabhängig davon, wie Sie es nennen, wirkt sich dieser Trend aus und ist überall im Webdesign, als gemeinsam nutzbare Gifs und in den sozialen Medien zu finden.
Entwicklung des Trends
Es ist schwer zu sagen, woher die Idee kommt? Fotos begannen, aber Sie könnten argumentieren, dass Apple dazu beigetragen hat, es beliebter zu machen. Das Unternehmen führte eine Fotografie ein, die mit dem iPhone 6S einen Hauch von Bewegung beinhaltete. Dieser kleine zusätzliche Moment der Freude ist das gleiche Konzept, um Fotos auf Websites zu leben. Es gibt etwas Besonderes in einem Sternbild, das Sie nur ein wenig länger betrachtet.
Das gleiche Konzept der bewegten Bilder hat an mehr Stellen aufgetaucht. Zu den scheinbar stillstehenden Werbeanzeigen auf digitalen Werbetafeln gehört, dass jemand Sie blinzelt oder zwinkert. Sogar die Aufstellungen für Sunday Night Football umfassen Kopfschüsse von Spielern, die nach einer Sekunde blinken und Ihnen zeigen, dass es sich um Live-Action handelt.
Warum diese Technik anwenden? Es hält die Aufmerksamkeit des Benutzers länger und bietet einen interessanteren visuellen Bezugspunkt. Flixel, ein Unternehmen, das Cinemagraph-Bilder für Kunden herstellt, sagt, dass das durchschnittliche bewegte Foto die Aufmerksamkeit des Benutzers auf 9 Sekunden hält, verglichen mit 1 Sekunde für das durchschnittliche Standbild.
Fotos oder Abbildungen
Lebende Bilder oder Kinofilme können mit Fotos oder Illustrationen arbeiten. Es gibt keine Regel, die besagt, dass Sie die eine oder andere Bildart verwenden müssen. Wenn Sie die beiden Bilder oben betrachten, können Sie sehen, dass beide Stile recht effektiv sein können.
Eine weitere Überlegung ist, dass Bewegung nicht immer in einer Schleife stattfinden muss. Hillmann Living (oben) wirft ein Licht auf die Produkte auf der Startseite, wenn diese geladen wird. Das ist die einzige Bewegung und dann ist das Foto genau das, ein Standbild. Das Schöne an diesem Effekt ist, dass Sie direkt auf die Stühle schauen, die das Unternehmen sofort verkauft. Die Technik zeigt Benutzern, was auf der Seite wichtig ist und worauf sie sich auf subtile und interessante Weise konzentrieren sollen.
Bar Z Wines geht einen anderen Weg. Die abgebildete Homepage erscheint zunächst recht schlicht, aber ein kleines Flugzeug fliegt in einer Schleife durch die obere Bildschirmmitte. Die Bewegung hilft dem Benutzer, wichtige Wörter auf dem Bildschirm zu betrachten: "Unsere Weine sind ungefiltert." Der Benutzer weiß sofort etwas über die Nachrichten auf dieser Website, da sie dank der Bewegung auf dem Bildschirm in die wichtigste Sprache gezogen werden.
Tipps zum Erfolg
Diese Technik kann auf verschiedene Arten und für verschiedene Designanwendungen arbeiten. Einige der besten Beispiele stammen von einfachen Szenen oder Landschaften, in denen ein schönes Foto den Ausgangspunkt bildet.
Das Gras kann sich im Wind oder in einer Landschaft bewegen. Eine Person kann blinken, wenn sie in einem übergroßen Headshot präsentiert wird. Ein Produkt kann die für das Produkt vorgesehene Aktion kippen, drehen oder abschließen.
Das Wichtigste beim Nachdenken über diesen Trend ist Einfachheit. Wenn es zu viel Bewegung gibt, sollten Sie sich wahrscheinlich für ein Video entscheiden. Das Überraschungsmoment macht es möglich; Benutzer erwarten ein Standbild, aber dann wird es lebendig.
- Halten Sie sich an eine Sache und eine Nutzung pro Website.
- Es muss realistisch aussehen.
- Bewegung muss den Gesetzen der Physik folgen.
- Bewegung sollte subtil sein, aber spürbar.
- Übertreiben Sie es nicht, indem Sie Sounds oder viele Klickaktionen hinzufügen.
- Berücksichtigen Sie eine subtile Benutzersteuerung, z. B. Bewegung, die bei Mausbewegungen auftritt.
- Entwickeln Sie ein Bewegtbild, das in mehreren Kampagnen verwendet werden kann, nicht nur auf Ihrer Website.
Wie machst du das?
Es gibt viele Möglichkeiten, diesen Effekt in Ihren Designs zu erzeugen. Die Methode bestimmt wirklich auf Ihrer Fähigkeitsstufe, wie Sie die lebenden Bilder und das Budget verwenden möchten.
Zu den Optionen zum Erstellen subtiler Bewegungen gehören:
- Erstellen Sie ein GIF.
- Verwenden Sie ein Online-Tool (es gibt eine Anzahl mit unterschiedlichen Kosten).
- Erstellen Sie das Bild als Video mit eingeschränkter Bewegung.
- Verwenden Sie eine App oder sogar Ihr iPhone.
- Fassen Sie Standbilder in einem Videoformat zusammen.
Probieren Sie dieses YouTube-Tutorial aus, um Sie bei der Planung und Erstellung eines lebendigen Bildes zu unterstützen.
Ein perfektes Beispiel
Die Website von Monochrome Paris ist ein perfektes Beispiel für diesen Trend in Aktion. Die Homepage ist ein scheinbar einfaches Abbild einer Schallplatte, aber das starre Element wirkt fast geschmolzen und nimmt die Bewegung des Stoffes an, der sich im Wind bewegt. Der Effekt ist fesselnd, auffällig und zieht Benutzer in das Design ein.
Der Effekt hilft auf subtile Weise, Interesse zu wecken. Das vorgestellte Bild wirkt durch die Bewegung etwas realistischer. Scrollen Sie die Seite nach unten und andere bewegliche Elemente begrüßen den Benutzer, einschließlich einer normalen Ansicht des sich drehenden Datensatzes.
Diese Website ist eine großartige Fallstudie zur effektiven Nutzung dieses Trends. Gehen Sie rüber und klicken Sie herum, um Ihre Inspiration zu bewegen.
Fazit
Unabhängig von dem, was Sie es nennen, sind lebende Bilder einer der Trends, die sich wahrscheinlich fortsetzen werden. Dies ist eine weitere Möglichkeit, einem Design eine Animation hinzuzufügen, ohne notwendigerweise ein Video erstellen zu müssen. Es ist effektiv und kann viel weniger kosten als die Videoproduktion.
Der Trick für diesen Trend besteht darin, sicherzustellen, dass er beabsichtigt und real aussieht. Wenn Sie eine alberne Bewegung einbauen, erhalten Sie nicht unbedingt den gewünschten Effekt. Gehen Sie zurück und sehen Sie sich die Beispiele oben an, gehen Sie zu den Websites und klicken Sie auf. Sehen Sie, wohin diese Animation Sie im Design führt. In jedem der Beispiele hilft Bewegung dem Benutzer, zu einem bestimmten Element zu gelangen oder eine bestimmte Aktion auszuführen. Dieser vorsätzliche und zielgerichtete Einsatz von Bewegung ist der Schlüssel für ein effektives Cinemagraph-Design.