Designtrend: Fotos, die lebendig werden
Ein Live-Foto. Cinemagraph. Bewegende Bilder. Noch Bewegung. Es gibt so viele Namen für diesen Trend im Webdesign, die durch ein Heldenbild gekennzeichnet sind, das auf subtile Weise lebendig zu werden scheint.
Es ist kein Foto, aber auch kein Video. Die Bewegung ist häufig auf eine Aktion im Bild beschränkt, um die Aufmerksamkeit des Benutzers zu erregen und sie in das Bild zu ziehen. Unabhängig davon, wie Sie es nennen, macht sich dieser Trend bemerkbar und taucht überall im Webdesign, als gemeinsam nutzbare Gifs und in sozialen Medien auf.
Entwicklung des Trends
Es ist schwer zu sagen, wo die Idee für "Live" -Fotos begann, aber Sie könnten argumentieren, dass Apple dazu beigetragen hat, sie populärer zu machen. Das Unternehmen führte mit dem iPhone 6S Fotografie ein, die einen Hauch von Bewegung beinhaltete. Dieser kleine zusätzliche Moment der Freude ist das gleiche Konzept für lebende Fotos auf Websites. In einem Sternbild steckt etwas Besonderes, das Sie ein wenig länger betrachten lässt.
Das gleiche Konzept von bewegten Bildern taucht an mehr Stellen auf. Scheinbar Stand-Frame-Werbung auf digitalen Werbetafeln enthält jemanden, der Sie dann blinzelt oder zwinkert. Sogar die Aufstellungen für Sunday Night Football enthalten Kopfschüsse von Spielern, die nach einer Sekunde blinken und Ihnen zeigen, dass es sich tatsächlich um Live-Action handelt.
Warum diese Technik anwenden? Es hält die Aufmerksamkeit des Benutzers länger auf sich und bietet einen interessanteren visuellen Bezugspunkt. Flixel, ein Unternehmen, das Cinemagraph-Bilder für Kunden erstellt, sagt, dass das durchschnittliche bewegte Foto die Aufmerksamkeit eines Benutzers 9 Sekunden lang auf sich zieht, verglichen mit 1 Sekunde für das durchschnittliche Standbild.
Fotos oder Illustrationen
Lebende Bilder oder Filmabschnitte können mit Fotos oder Illustrationen arbeiten. Es gibt keine Regel, die besagt, dass Sie die eine oder andere Art von Bildmaterial verwenden müssen. Wenn Sie sich die beiden obigen Bilder ansehen, können Sie sehen, dass beide Stile sehr effektiv sein können.
Eine weitere Überlegung ist, dass Bewegung nicht in einer Schleife stattfinden muss. Hillmann Living oben beleuchtet die Produkte auf der Homepage beim Laden. 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 den Benutzern auf subtile und interessante Weise, worauf es auf der Seite ankommt und worauf sie sich konzentrieren sollen.
Bar Z Wines verfolgt einen anderen Ansatz. Die abgebildete Homepage wirkt zunächst eher schlicht, aber ein kleines Flugzeug fliegt in einer Schleife durch die obere Mitte des Bildschirms. 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 er dank der Bewegung auf dem Bildschirm von der wichtigsten Sprache angezogen wird.
Tipps für den Erfolg
Diese Technik kann auf verschiedene Arten und für eine Vielzahl von Designanwendungen eingesetzt werden. Einige der besten Beispiele stammen aus einfachen Szenen oder Landschaften, in denen ein schönes Foto der Ausgangspunkt ist.
Das Gras kann sich im Wind oder in einer Landschaft bewegen. Eine Person kann blinken, wenn sie in einem übergroßen Kopfschuss präsentiert wird. Ein Produkt kann die Aktion, für die es entwickelt wurde, kippen, drehen oder abschließen.
Das Wichtigste beim Nachdenken über diesen Trend ist die Einfachheit. Wenn es zu viel Bewegung gibt, sollten Sie sich wahrscheinlich für ein Video entscheiden. Das Element der Überraschung ist, was es funktioniert; Benutzer erwarten ein Standbild, aber dann wird es lebendig.
- Halten Sie sich an eine Sache und eine Verwendung pro Website.
- Es muss realistisch aussehen.
- Bewegung muss den Gesetzen der Physik folgen.
- Die Bewegung sollte subtil, aber spürbar sein.
- Übertreiben Sie es nicht, indem Sie Sound oder viele Klickaktionen hinzufügen.
- Berücksichtigen Sie eine subtile Benutzersteuerung, z. B. Bewegungen, die bei Mausbewegungen auftreten.
- Entwickeln Sie ein bewegtes Bild, 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 erzielen. Die Methode bestimmt wirklich Ihr Können, wie Sie die lebenden Bilder und Ihr Budget verwenden möchten.
Einige der Optionen zum Erstellen subtiler Bewegungen umfassen:
- Erstellen Sie ein GIF.
- Verwenden Sie ein Online-Tool (es gibt eine Reihe mit unterschiedlichen Kosten.
- Erstellen Sie das Bild als Video mit eingeschränkter Bewegung.
- Verwenden Sie eine App oder sogar Ihr iPhone.
- Zeichne Standbilder in einem Videoformat an.
Probieren Sie dieses YouTube-Tutorial aus, um ein lebendiges Bild zu planen und zu erstellen.
Ein perfektes Beispiel
Die Website für Monochrome Paris ist ein perfektes Beispiel für diesen Trend in Aktion. Die Homepage ist ein scheinbar einfaches Bild einer Schallplatte, aber das starre Element sieht fast geschmolzen aus und nimmt die Bewegung von Stoff auf, der sich im Wind bewegt. Der Effekt ist ansprechend, auffällig und zieht Benutzer in das Design ein.
Der Effekt hilft auf subtile Weise, Interesse zu wecken. Das imaginäre Bild sieht aufgrund der Bewegung etwas realer aus. Scrollen Sie auf der Seite nach unten, und andere sich bewegende Elemente begrüßen den Benutzer, einschließlich einer normalen Ansicht des sich drehenden Datensatzes.
Diese Website ist eine großartige Fallstudie, um diesen Trend effektiv zu nutzen. Gehen Sie rüber und klicken Sie sich um, um sich inspirieren zu lassen.
Fazit
Unabhängig davon, wie Sie es nennen, ist lebendige Bildsprache einer dieser Trends, die wahrscheinlich anhalten werden. Dies ist eine weitere Möglichkeit, einem Design Animationen hinzuzufügen, ohne unbedingt ein tatsächliches Video erstellen zu müssen. Es ist effektiv und kann viel kostengünstiger sein als die Videoproduktion.
Der Trick bei diesem Trend besteht darin, sicherzustellen, dass er absichtlich und real aussieht. Wenn Sie ein dummes Stück Bewegung einbauen, erhalten Sie nicht unbedingt den gewünschten Effekt. Gehen Sie zurück und schauen Sie sich die obigen Beispiele wirklich an, gehen Sie zu den Websites und klicken Sie sich um. Sehen Sie, wohin diese Animation Sie im Design führt. In jedem der Beispiele hilft die Bewegung dem Benutzer, zu einem bestimmten Element zu gelangen oder eine bestimmte Aktion auszuführen. Diese absichtliche und gezielte Verwendung von Bewegung ist der Schlüssel zu einer effektiven Gestaltung von Filmabschnitten.
