Music becomes its own universe on the 50 Years Swiss Music Charts website. The digital destination creates a cluster of constellations displaying the most popular songs from 1968 to 2017 through intuitive movement, minimal design and modern elements.
Upon arrival, users are greeting with a loading screen. First, boxy transparent numbers run in the middle of the screen from 0 to 50, signifying the 50 years of music soon to come. Immediately following, visitors are told to hold tight while the "magic" happens. This loading screen smartly removes any interstitial anxiety users may develop while the complex website design loads.
Once the full site appears, users see an unexpected constellation set against a stunning gradient background. However, this map isn't of the stars -- instead, it's of the star songs of 1968. This creative design is coupled with a popular song from 1968 playing automatically in the background.
Users can move their mouse around for a 360-degree view of this universe. But that's not all -- click on a new constellation to hear another popular song from that year. The song's name, artist and release date are displayed in a soft pink sans-serif font, and visitors can see other songs displayed in the "distance."
Instead of creating a structured navigation, 50 Years Swiss Music Charts' website design uses scrolling to both engage users and navigate them through the website design. By scrolling upwards users will travel through time and song. As they venture into new years -- all ascending chronologically -- the tunes will change based on the time period.
As visitors reach the heart of each year, the numbers will fade in and out of view, adding to the subtle animation. Meanwhile, standout songs that are currently playing as users make their way through the timeline -- signified in white -- will quickly jump in and out of view.
At any point, users can stop scrolling and explore other songs in the universe in a particular year, employed the 360-degree navigation once again.
When you reach the end of the timeline -- 2017, after traveling through 4,192 songs -- visitors are simply met with a final gradient slide. You can no longer scroll further into the website, only look around "horizontally" and explore the top songs of 2017.
Throughout the website, an elegant gradient background grounds the website design. This serves two purposes. Firstly, it creates the illusion of space, with a dark-to-light transition that resembles traditional star maps.
But more importantly, this gradient background adds an additional touch of modernity and personality to an already innovative experience. The pink and purple hues are unexpected and represent creativity, mystery, and magic. This fittingly ties into the messaging on the loading page and reinforces the brand.
Gradients are also gaining popularity in 2018. Therefore, using them smartly inside a design adds an additional contemporary splash.
But despite all the depth and intrigue the gradient background adds, it also provides a stable foundation. This website design has a lot going on -- 360-degree views, auto-playing music, whipping animations and scrolling effects -- but the gradation stays sticky, with the transition between hues mostly stagnant. The background complements the intricate website design while ultimately remaining steadfast, giving a root to the many elements at play.
Using WebGL and WebAudio platforms, 50 Years Swiss Music Charts created an interactive website design that showcases the collective power of music. Through the unexpected scrolling and audibly pleasing digital destination, they reinforce how music is a connecting universe that can bring people together across genres, countries and decades to generate a seamless and interwoven universe.