Rammstein.com

For more than 15 years the German rock band Rammstein has been creating one of the most recognizable sounds in rock history. If you like them you probably own all their records. If you've never listened to them you probably know them from movies like xXx, Mortal Kombat or TV shows like Entourage, CSI and... the Gilmore Girls. After having sold 15 million records worldwide since 1994, the band wanted to create something for their biggest fans. Together with Universal Music Group and Your Neighbours from Berlin, the Monsters created the redesign for Rammstein.com.

For the history and tickets part of Rammstein.com something unique had to be created in the form of two interactive timelines. From a design perspective both timelines can be considered rather experimental. As a result you are able to wander around through the rich history of the band, learn and see new things you didn't know before.

Gallery: Tickets timeline

The tickets timeline shows a custom styled map of the world. You can wander around through time and see future and past concerts of the band. Or filter straight to any towns and countries near you and see if there are any concerts available. The tickets timeline is linked to all available ticket boxes thus making it possible for you to order your tickets right away.

Open image gallery

The ticket timeline shows all the upcoming concerts by the band on a specially styled map. You can navigate concerts via the added timeline above or by just navigating the map itself.

Because the map is fully functional you can zoom out to continent level, drag it around or even zoom in to street level.

The concerts are shown on the map as small crosses. The color of the cross tells you if there are still tickets available for the concert.

The concert detail tells more information about the specific concert. It also has links to the venue and the support acts of that specific concert. And if tickets are still available you can instantly buy them from the website.

If you would like to know if there are any concerts coming up near you, you can use the filter system to find your tickets fast.

The map and timeline automatically navigate to the available concerts when you change the filters.

Gallery: History timeline

The history timeline, or Rammstein timeline, is the place to get your Rammstein information. From the formation back in 1994 to the latest events that might have happened yesterday, all exciting information will be available in the Rammstein timeline. The timeline gives access to rich media of the band in the following categories: Tours, Press, Videos, Events and Releases.

Open image gallery

The Rammstein timeline shows you historic events of the band from the last 15 years in several categories.

By scrolling in the timeline you can zoom to view more content. You can see three months of events at the same time if you zoom out.

You can drag and throw the timeline to navigate to a certain time.

Besides dragging to navigate, the timeline gives you buttons to jump to the next and previous items within every category.

As with any band Rammstein sometimes has a lot of different important events following each other in a short timeframe which can cause overlap, overlapping events in the timeline are still easy to see.

Every item in the timeline has detailed content to go with it, this content consists of unique video's, photographs and background stories.

All of the bands' video clips are integrated in the timeline. We worked closely with the video's hosting provider Minoto to make a smooth transition between the Rammstein website and their video player which we helped to develop.

With the next and previous buttons you can easily keep on reading about events that occurred closely to the event you are reading about now.

Many articles use unique photographs from the archives that can be grouped into galleries.

Gallery: Tickets Interaction Design

Open image gallery

The tickets timeline is very similar to the history timeline, just as the history timeline it has two timelines that are connected. But there is also a map that shows the same data as the bottom timeline.

The center part of the top timeline is again shown in detail in the bottom timeline.

In the tickets timeline the content consists of concerts, while time is important with concerts, the location is even more important. As Rammstein performs all over the world, we added a map as a visualization.

The map only shows those tickets that are within the selected timeframe. Clicking on the concert icons in the timeline will move the map to that location.

The final application also has a filtering system to give users the option to quickly navigate to the next available concert within a certain region.

Gallery: History Interaction Design

Open image gallery

The history timeline consists of two timelines that are connected. They both have a different scope though, the center part of the top timeline is shown in detail in the bottom timeline.

Within the Interaction design this was tried and tested extensively, both on paper and in digital prototypes.

By zooming the selection in the top timeline, the bottom timeline would also zoom. Notice the day lines within the week. They are needed to have an effective zoom.

A problem with zooming a timeline is that you have to keep a reference point. At various moments within the zoom certain lines and dates are shown to show the date that you are currently viewing. Also zooming means that overlap can occur. Finding these challenges within the Interaction Design phase meant we had less problems during development.

As tours can stretch over long periods of time, they are very likely to overlap with other events. To minimize the interface problems for these situations, the tour items have a very different visualization.

The final timeline closely follows the original Interaction Design.

Visual Design: Homepage

Berlin based design studio Your Neighbours created the visual design and did art direction during the redesign of Rammstein.com. One of the pages they created is the homepage.

1. Case: Vacation Stress Test 3. Case: Kuvva

Return to projects Gallery: Tickets timeline Gallery: History timeline Gallery: Tickets Interaction Design Gallery: History Interaction Design Visual Design: Homepage

Rammstein.com

Client:	Pilgrim Management
Project:	Two interactive timelines for ticket sales and the history of the band.
Work:	Interaction Design, Adobe Flash, PHP, HTML, JavaScript
Partners:	Universal Music Group, Germany Your Neighbours (Visual Design, HTML)

Website

Talk to us

Do you want to know what it’s like to have Monsters on your side, join forces and create cool useful projects?

Talk to us at info@deMonsters.com