IO Festival

Developing the website for the largest student-organised festival in Holland.

June 2013

IO Festival is the largest Dutch annual student festival, organized for and by students. The 2013 edition—Illumination—featured over 20 bands, DJ and other acts that turned the night in an awesome experience the attendees will never forget. For the Study Association, I turned the poster style into a fully functional website that is powered by some pretty advanced techniques for which I got help from @alexanderweiss.

Traditionally, the IO Festival website is a showoff for modern web technology and experiments. Up until the 2013 edition of IO Festival, the website had always used Adobe Flash. We decided to drop support for Flash and built the website in HTML, CSS and Javascript.

The 3D effect

The first thing you may notice on the website is the amazing 3D scrolling effect, which was inspired by Apple’s Time Machine. Every panel in space represents a ‘page’ and is shown in the navigation of the site. The effect was established using a 3D translation and a bit of Javascript to map the scroll to the change of that translation.

The map and house rules

The map and house rules had to be easy to access, but shouldn’t interfere the user experience. Using CSS transitions only, we managed to hide them and let the user horizontally navigate to the map and house rules. This also works on mobile devices.

The lineup

The lineup of the evening was a simple table, with artists mapped to a stage, sorted by time. Every artist is a card that can flip, which reveals more information and links to a song and the website of the artist. The rotation effect was established with CSS transforms and a bit of Javascript to make sure the cards opened and closed properly.

In conclusion

Building the IO Festival website with @alexanderweiss was a rewarding task. Besides the functionality described above, we also had a great ticketing system and an awesome IO Festival movie. Experimenting with CSS took a lot of my spare time, but the result was completely worth it. You can still visit the site today by clicking here. The day after the festival, we removed some items to indicate that the festival had come to an end.