Connecting a world-class music artist with his fans through an unforgettable website
From research to style direction to design and development; the whole nine yards. We created a brand new official artist website for dj and music producer Martin Garrix.
Introduction
With popular songs reaching close to a billion streams in total, DJ, and music Dutch producer Martin Garrix' name and brand ring a bell to most people.
Although the official Martin Garrix website met the basic needs of its audience, the team over at STMPD RCRDS, Martin Garrix' very own record label, was aware of the opportunities they were missing out on.
They approached us to create a new website and bring it to the next level.
Challenge
After taking over the world with his music, it was time for his website to catch up with his success; To create an environment for music video releases, a glimps of the person behind the artist, all wrapped in an unforgettable website experience while staying true to his brand.
Deliverables
We delivered an awesome website where fans can get to know 3 sides to Martin Garrix, together with an environment to discover new releases and upcoming shows. Our codebase was setup flexible, combined with a CMS to give the Martin Garrix team freedom to create their own content. This allowed the website to stay up to date with Martijn's dynamic lifestyle in a consistent manner.
Behind the scenes
Unpacking our UX tool belt
Brand Concept
With Martin Garrix already being an established and matured brand, the client's style briefing and preferences were pretty straightforward. Our main focus revolved around breaking the Martin Garrix brand out of the electronic dance music genre confinements and create a totally unique feel. We created a style board based on their wishes, and added additional imagery to this collage to propose an extension to the current style.
The three layers concept; from world class performer to Martijn
If you know anything about us as a digital agency, it's that for every project we aim for stunning visuals to be the absolute minimum. So was the case with the Martin Garrix website and we saw an opportunity to go beyond the obvious. After a few creative team session we landed on a concept for the website that would incorporate the existing Martin Garrix brand while meeting the audience's needs and desires. The concept was: 'Layers' — The three layers to Martin Garrix.
All content would trickle down to either layer 1: 'On stage', layer 2: 'Off stage', or layer 3: 'Martijn'. On the website this would feel as if you would peel of layers and get closer to the person behind the boards or the wheels of steel as you would scroll down. Each layer would get its own designated style alteration, typeface and color hues. On top of that we incorporated the concept of layering through masks. The three layers also touched on the brand value we were given by the client.
Transforming wireframes into design; immersive navigation
One of the many creative ways to turn the website into an immersive experience was to go all out on the navigation. Rather than having an ever present set of menu items we chose to go with a full screen navigation. Of course with just the right amount of animations.
Analytics insights of the old website showed us how significant the amount of mobile visitors was. Because of this we knew we had to pay close attention to making sure our proposed desktop layouts would also work on a smaller viewports.
The UX team always thinks everything through in a lower fidelity in order for the visual design team to be able to focus completely on making that pretty. Here you can see how this transformation takes place.
Turning complex design into real code
In order to bring across the designed experience as accurate as possbile with a working website in code, we needed a solid foundation. Supporting the complex animations, multi-directional scrolling and plenty of parallax presentations aimed to enhance the 3-layered concept, we suggested a state of the art tech stack including Next.js, Preact, GSAP, Scrolltrigger, Prismic. This allowed us to turn the incredibly complex design ideas into reality.
The impact of our project
With the new website, the Martin Garrix brand transcends out of the confinements of a music genre and, just like in his music productions, created a league of its own. It offers a great extension of the Garrix experience fans know and love from the shows and music.
Easily build unique content for each tour or event
With a CMS that was set up just right, the team at STMPD is able to create custom content with a few clicks for each new show or event. Sharing the excitement before a show is now even stronger. Our responsively build pages translate amazing to any device and give you an immersive experience anywhere.
