Grammys.ca
The Grammys is one of the most anticipated nights in entertainment. Its broadcast brings people from around the world together to celebrate the year’s most amazing contributions to music. This year marks the 56th anniversary of the Grammy’s and Rogers Communications and CityTV wanted to present it in red carpet style.
The evening is about the artists, their songs and their stories. People come together to express their opinions, admiration and experiences. The website for the Grammys had to do the same. Grammys.ca brings together the best of the event – the artists, the style, and the experience – into a site that is fresh all year round.
LET’S MAKE AN AWARDS SITE
THAT’S USEFUL 365 DAYS A YEAR,
RATHER THAN JUST 1.
A WEB SITE OR A WEB APP?
The goal was to create an immersive canvas regardless of platform. To accomplish this, we thought of the website as less of a set of pages, and designed it to be closer to an app. Apps have become a part of our daily lives, and we utilized several familiar app conventions to make the experience an engaging destination for users.
Navigation was designed to be simple on every platform. Knowing the limitations of mobile, we started there and scaled a navigation solution that worked best for mobile into something that was striking for desktops.
- Home
- News
- Awards
- Fashion & Beauty
- Videos
- Radio Stations
- Live from the Red Carpet
Content is King.
Working with rich assets made designing an experience around them a real pleasure. Bold imagery, video & article content allows the user to quickly navigate the nights musical acts and nominees in a simple, engaging way. The featured story imagery is large & inviting — bringing a feeling of polish and value to the sites important information. The unique “live from the red carpet” section serves as a live chat & stream of information related to the star studded evening.
Sitemap
Desktop Home
Article
Designing for 20-Somethings
Screen sizes and resolutions are something designers should think about, not the end user. Each and every time a visitor comes to the site they should be presented with a considered and thoughtful experience, no matter where they are. When we thought about how people will visit Grammys.ca, we knew viewing it from a smartphone on the couch during the show was just as important as landing there on your desktop through social media.
It was paramount that the experience felt native to every device.
The site uses rich and large photography to create a scalable visual experience. A conscious decision to pair gorgeous typography and sparse iconography with the imagery helped create a timeless experience that feels fresh with every content update.
WE WANTED TO MAKE USE OF
ROGER’S EXTENSIVE MULTIMEDIA LIBRARY
TO CREATE A RICH, ENGAGING EXPERIENCE.
Great ideas are fueled by great technology.
Great things are built when great people work together. The site was designed and created in deep collaboration with Rogers and X-Team, terrific partners who encouraged open and honest communication to create something truly special.
Responsive Design
Using modern responsive techniques, the site was designed to work at any resolution. Front-end development made use of advanced JS frameworks to create an elegant no-compromise solution across all devices.
Wordpress
Grammys.ca is a content driven experience. Wordpress has been an invaluable tool and industry standard in the content management ecosystem, and using X-Team’s deep knowledge of Wordpress’ plugin architecture, we were able to depart from it’s traditional blog structure and create something wholly unique.
Interactivity
Menu Flyouts
In order to create a navigation experience that felt native on both traditional desktops and mobile we used an icon-driven sidebar. To inspire more delight for desktop users we created menu flyouts on mouse over to bring the best of mobile and mouse-based navigation together into one familiar experience.
Cell Rollovers
Grammys.ca makes use of Rogers’ access to incredible photography assets. These photographs are already striking, but how can we add even more delight? As a visitor scrolls around the site, images get highlighted, putting the focus on new content as it appears on screen.