Hello Monday have won the last Site of the Month of 2016 with Residente, coming up they explain in detail the making of and the technologies used. If you voted and tweeted, thanks for your input- check the end of the article for your twitter handle.
At the end of the day, we’re all human. This idea inspired musician Residente to take a DNA test and explore his roots from China to Siberia.
We wanted to document his global journey and elevate the story in a way that made sense digitally. Users should feel like they were traveling with Rene (Residente) and immerse themselves in his journey.
Our own creative journey with Residente started with the creation of a digital brand. The core identity revolves around the idea of unity and connectedness. Making the digital brand and the experience gave us total creative control, and it helped us ensure that the brand and digital universe speak the same visual and conceptual language.
We had this idea that you're a visitor on the site just like you are on Planet Earth. In a way, we're paying tribute to the old visitor counter. Like drops of water, visitors create rings on the map, where they can also leave a short message for the future site "residents".
The experience is a culmination of art, music, and film in a space without borders. A space where everyone is welcome and embraced as members of the same world.
We are using Media Temple for the PHP hosting. And then, since we have global audience, we are using Firebase as a CDN.
On the backend we are using PHP to store and retrieve info about each visitor. Furthermore, the site is hooked up to a CMS. We chose to use Contentful - a cloud hosted CMS. Residente’s team can use the CMS to add news posts, tour dates and so forth.
Frontend-wise most of what’s been made has been custom made. But we did use a few 3rd party libraries:
- PixiJS For the main map experience
- PolyK For calculating line/polygon collisions
- GSAP TweenMax Anything animation related
- Epistemex 2D Transformation Matrix Used to manipulate the polygons (scale, rotation etc.)
- Chris Veness Latitude/longitude spherical geodesy tools
Other tools we used included: Gulp - Task runner, Mamp - Local server, Webstorm / PHPStorm - Development and Kraken.io - Image optimization.
The following tweeters have won a WLOKS package, PM us for your code!
@Kaa55, @nyratas, @bymaikel, @elodiearnouk, @DanGhimpu