NGHTMRE
Website is a part of the experience for his latest project DRMVRSE, providing an interactive space for fans to find exclusive merch, tour information and his latest videos and music.
NGHTMR is a Billboard Top Dance music producer and DJ. He's a global force in modern dance music, with captivating talents reaching far beyond the EDM landscape.
Project Outline
Create a web experience for his latest project DRMVRSE, providing an interactive space for fans to find exclusive merch, tour information and his latest videos and music.
Aethyr Co designed and provided the flat mock up and assets. Seeing the flat design's intricate design gave me the idea to give it depth and bring it to life with animations. By separating each different parts of the design into separate images, I was able to place them on staggered layers which are either animated (like the clouds that float) or move on scroll (rest of the elements).
Creative development #
For the Music section in the landing home page, because he has a large collection of releases and there is a bit of a 2000’s vibe to the general design, had the idea of the nostalgic iTunes cover scroll as a great way to display his releases.
When navigating to the Music page, the releases are displayed in a grid. Tilt animations on hover were added to give more of a physical record feel to the page.
The navigation to the separate pages is pinned to each corner of the screen to make them always accessible without having to rely on a separatee drawer and keep the user immersed in the experience, incorporating into the layered concept of the design.
Development process #
Built on Shopify Online Store 2.0 (Shopify Liquid custom theme) with Shopify CLI 3 to be able to include product collection grid directly on landing page and give client access to editable sections using Shopify’s CMS.
- Music, Video and Tour sections and separate pages can be customized and updated by client as needed to add new content
- Homepage scroll and parallax animations made with javascript using GSAP with ScrollTrigger
- Music page tilt animations made with javascript using VanillaTilt.js
- Theme files version control maintained and linked via GitHub
- Customizable section for tour dates widget made with Bands in Town API with added support for switching to Seated or Songkick