Arbeiten · Studie B · Produktanimation

Produkt­inszenierung

Ein Produkt, Licht und drei Informationen.

Freie Konzeptstudie für diesen Webauftritt · kein Kundenauftrag

Laufzeit
10 Sekunden, nahtlose Schleife
Technik
SVG, Verläufe, CSS-Keyframes
Produkt
Fiktiv, für diese Studie entworfen
Informationsebene
Drei Hinweise, nacheinander

Aufgabe

Eine Produktanimation soll Form und Material zeigen und gleichzeitig drei Eigenschaften vermitteln, ohne dass der Text das Produkt verdrängt. Als neutrales Beispiel dient eine fiktive Thermoflasche, »Modell 07«.

Konzept

Zuerst kommt das Produkt: Es setzt im Licht auf, dreht sich ein Stück und zeigt seine Oberfläche. Erst wenn es steht, erscheinen die Informationen – nacheinander und jeweils an der Stelle, die sie beschreiben. So liest das Auge in derselben Reihenfolge, in der die Animation erzählt.

Umsetzung

Die Flasche ist vollständig als Vektorgrafik gezeichnet. Verläufe erzeugen die Wölbung des Körpers und den gebürsteten Deckel. Die mitlaufende Beschriftung erzeugt die Drehung, ein Lichtstreifen wandert über den Boden. Kontaktschatten und Schlagschatten folgen der Höhe des Produkts.

Ausschnitte

Schlüsselbilder aus der Zeitleiste

Die Standbilder stammen direkt aus der Animation oben: Jedes zeigt die Zeitleiste an der angegebenen Stelle.

  1. 00:00,9 sDas Produkt setzt auf, der Schatten wächst mit.
  2. 00:02,6 sDie Drehung zeigt Beschriftung und Material.
  3. 00:05,4 sDie erste und zweite Information erscheinen.
  4. 00:08,0 sEndstand mit allen drei Informationen.

Wo so etwas eingesetzt wird

Produktseiten, Onlineshops, Messebildschirme, Kampagnenmotive.