Building the website for the KIKK Festival is always an exciting but stress-generating time of the year for us. Not only there is this great opportunity to create something entirely new based on the current year's festival theme, but there are also expectations about delivering an experience worthy of the escalating fame of the festival.
We created the KIKK Festival 6 years ago now and its increasing popularity (8000 people from 40+ countries last year) can be an overwhelming pressure as well…living up to our own standards can be pretty difficult at times and no agency will tell you differently: being your own client is a constant hell. If that wasn’t enough, you can even add this extra layer of cohesiveness expectations: the website must be part of a larger branding experience, including print design, posters, videos, and whatnot.
With this year’s theme being interferences, we went in all directions, only to end up being seduced by the case of the soap bubble, a visually appealing yet really simple and visible representation of light interferences. Based on that, we quickly created this year’s key visual which was then used as a basis for all thinking about all the outputs we needed to produce.
Having this bubble as the first thing you would see seemed logical and making it slightly interactive through the use of WebGL sounded like the right thing to do. To ensure consistency throughout the project and to convey this sense of interferences, we decided to add an extra layer of glitches, both randomly appearing over images ( WebGL, here we go again ) or through those gif-powered transitions.
In the end, and thanks to our team’s involvement throughout the whole project, the KIKK website was once again a fast-paced / high expectations / low satisfaction project from our team; but then again, considering this is Site Of The Month, it seems like we might have achieved something decent.
For the KIKK Festival website, we use a dedicated server in partnership with our hosting partner cBlue who provide a great SLA for our servers. With this infrastructure we can ensure high scalability during the "Buzz" time of the website. For the server architecture we use a LEMP stack (Linux NginX MariaDB and PHP) completed by a varnish server that brings a speedy caching system.
The back-end is a self-made CMS solution called Emulsion that provides all the basic CMS behaviors: content pages, navigation, emailing, media contents, but also an easy way to develop new modules for specific use.
In the case of the KIKK website, we have developed modules for: events (conferences, workshops, market), speakers, partners etc.
The front-end is based on our own boilerplate. For the stylesheets we use Sass with our homemade mixins and functions library. The Javascript is written in ES6 and transpiled with Babel. We use webpack as module bundler. The most fun part of the front-end development was the creation of the bubble on the homepage and the glitches on the pictures. For that, we used Three.js and wrote some shaders. To refine the rendering of the bubble, we used this small prototype to play with some parameters until we are happy with the result. Optimization has also been a great challenge for this project.
For the development, we use Docker containers that bring the same stack we use in production. We store the source versions on a Gitlab server that also provides the deploy mechanism with GitlabCI. With that structure we can put the small adjustments or fixes in staging then in production very quickly.
Thanks if you voted and tweeted, please PM us with your name and email address if your twitter handle features below: