Web-Banner Animationen

Die Agentur FELDERVOGEL kreierte für das Unternehmen Büro für Bauökonomie einen neuen Webauftritt. Als zusätzliches visuelles Element wurden Animationen erstellt, die im oberen Teil der Webseite abgespielt werden.

Das Konzept der Animationen bestand darin, die Werte, Mitarbeiter und beruflichen Positionen im Unternehmen in Textform auf die Fassaden ihrer Bauprojekte zu projizieren. Als Grundlage dienten Fotografien der Gebäude, auf denen die Textbanner platziert wurden. Es entstanden sechs Animationen, wobei jede individuelle Merkmale aufweist. Die Bewegungen der animierten Texte wurden unterschiedlich präsentiert, um so die spezifische Architektur der einzelnen Bauten zusätzlich hervorzuheben.

Auftraggeberin: Büro für Bauökonomie

Konzept & Design: FELDERVOGEL

Animationen: Spacebar

Jahr: 2020

Hinter den Kulissen

Die komplexeste Herausforderung bestand darin, die Perspektiven der einzelnen Gebäude aus den Fotografien in den virtuellen Raum des 3D-Programms zu transferieren. Dank des Werkzeugs fSpy war dies mit einer hohen Genauigkeit und Übereinstimmung möglich. So konnte zur jeweiligen Fotografie eine Fassade im digitalen 3D nachgebaut werden, auf die die Texte projiziert werden konnten.


Eine einfachere Möglichkeit hätte darin bestanden, die Gebäude auf den Fotografien in einem Bildbearbeitungsprogramm nachzuzeichnen und diese als 2D-Animation umzusetzen. Der Vorteil von einer Umsetzung als 3D-Animation jedoch ist zum einen, dass die Grössenverhältnisse der Objekte in Bezug auf die Tiefe im Raum korrekt dargestellt werden; zum anderen ist eine Kamerabewegung mit geringem Aufwand umsetzbar. Dadurch konnten auch die Kameraposition und der Bildausschnitt nachträglich angepasst werden. Dies ermöglichte uns, lange in die Projektphase hinein flexibel zu bleiben, ohne uns schon zu Beginn auf einen Blickpunkt einigen zu müssen.

Durch die Kombination aus der zweidimensionalen Typografie und der dreidimensionalen Perspektive entstanden plakative sowie räumliche 2D-Animationen.

In diesem Screenshot aus dem 3D-Programm ist der geometrische Aufbau zu erkennen. Auf den einzelnen Fassadenelementen, im Bild als Flächen dargestellt, wurden die Textelemente projiziert und nachträglich animiert.