UI design Startup

Sunburn - The best music website ever

Well, there is a saying in Domy. No matter what, if you want to celebrate - Go Goa! So when there is Sunburn, we have more the reasons to celebrate.

The project Sunburn is an exploration to the musical festival/party. It is Asia's largest music festival in India happening in every year. We all love Sunburn, and when we got a chance to create their official website, we were over the moon. We never had an opportunity to do a music website design before.

We had held hands with Frolle for numerous times before, designing UX and UI for their products. This one too was another collaboration with the renowned social analytics company.

Our Goal - Design the best EDM website

The goal was to create a super cool page for Sunburn, catch the eyeball of the EDM enthusiasts in the country. We had a lot of photos and tweets to show them. Our collaboration with Frrole helped us to visualize inspiring tweets and social insights.

Design challenges & process - site for musicians

The name itself was a WOW factor. The main hurdle we faced was the same. We must provide a page that is as good as Sunburn. Moreover, it was our opportunity to create the best music website ever!

To create the mood of an entertainment website, we used a dark and contrasting shades of colors. Luckily, the client gave us the creative freedom to use our choice of fonts and colors.

In the design phase, we devised the page without any separate header or footer. Instead of a flat background, we used an image that communicates the beauty of the event; The DJ was playing his music in front of a massive crowd.

Moving away from the traditional Twitter blue, we used a Reddish Orange color theme for tweets and related links, giving it that "attitude."

We had four primary data points to show
  • 1. Recent tweets
  • 2. Tweet count with Location
  • 3. Photos
  • 4. Write a Tweet

All these pieces of information were necessary with equal priority. So, We made a design with a three column structure, displaying the recent tweets on the LHS.

We redefined the UI of the tweets. Gave more prominence to the profile pictures, as the tweets were crowdsourced. Though the whole theme was dark, we picked white for the tweets' background, so that people could read without strain.

We added some interactivity to the location information in the center, where people could hover it to view how active the sunburn fans were at these places.

On the right-hand side, we showed the photos, in multi-sized masonry style. The whole page was dynamic. The images were selected randomly. The reasoning behind the different size of images was to keep the random pictures in control. When the photos were fetched automatically from various people, it was impracticable to monitor the quality of those pictures. So we built a tool to automatically optimise the dimensions and quality of the images and create a fresh face-pile.

 

Tools & Technology

Adobe Photoshop, Adobe Illustrator, HTML5, CSS3, jQuery, PHP, and MySQL.


Feel free to chat when you have a requirement!