3D Website and Interactive Installation

»Es lebe der König« Literature group

The Literature group gave us the task to create a unique website for their Festival “Im Namen der Republik” at the German-American Institute, Heidelberg.

The tasks were:
  • Plan a web-based app to aid users in ordering and building apps and websites.

  • A new type of website, and an interactive info touchscreen installation at their festival.

  • Accomplished via JavaScript (Impress.js), jQuery, HTML5, and CSS3.

Unique solution:

The Literature group »Es Lebe Der König« wanted a new type of website, and an interactive info touchscreen installation at their festival.

So we created a unique website experience for them. We worked with their people who made their posters, fliers, and stickers to match the design language of their material to create a web-based poster. Once a user clicks a link, they fly through the poster to the content in 3D.

To add to this experience we built a drawing app in JavaScript and embedded it onto the site. It can save and automatically upload new drawings to the gallery on the website.

Finally we created an interactive touch based installation doubling as a graffiti wall at the festival.
We put together a rear-projected screen, added a Microsoft Kinect, hacked out some drivers, and tracking software so that when a user moves their hands, it moves the cursor on the screen.
With that a user could open different parts of the 3D website with their hands on a very large rear projected screen.

We created a similar drawing app and embedded it on a special version of the site, only accessible to the installation, so that guests could draw on the graffiti wall of the site. This graffiti wall would automatically save itself on the canvas and export the contents to a special gallery on the publicly accessible site. This way in real time, visitors of the website could see what graffiti was happening at the festival.

Project skills breakdown

Design
Development

Users testimonials

Share