The agency FELDERVOGEL created a new website for the company Büro für Bauökonomie. As an additional visual element, animations were created that are played in the upper part of the website.
The concept of the animations consisted in projecting the values, employees and professional positions in the company in text form onto the facades of their construction projects. Photographs of the buildings on which the text banners were placed served as the basis. Six animations were created, each with its own characteristics. The movements of the animated texts were presented differently in order to additionally emphasize the specific architecture of the individual buildings.
Client: Büro für Bauökonomie
Concept & design: FELDERVOGEL
Behind the scenes
The most complex challenge was to transfer the perspectives of the individual buildings from the photographs into the virtual space of the 3D program. Thanks to the tool fSpy, this was possible with a high degree of accuracy and consistency. In this way, a facade could be recreated in digital 3D for the respective photograph, onto which the texts could be projected.
A simpler option would have been to trace the buildings on the photographs in an image processing program and implement them as 2D animation. However, the advantage of implementing a 3D animation is, on the one hand, that the proportions of the objects in relation to the depth in space are displayed correctly; on the other hand, a camera movement can be implemented with little effort. As a result, the camera position and the image section could also be adjusted later. This enabled us to remain flexible long into the project phase without having to agree on one point of view at the beginning.
The combination of two-dimensional typography and three-dimensional perspective resulted in striking and spatial 2D animations.
The geometric structure from the 3D program can be seen in the screenshots below. The text elements were projected and subsequently animated on the individual facade elements, shown as surfaces in the picture.