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.

Begin

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

An example of the wireframing that was done while planning the layouts for the Grammy's website. This process was done in collaboration with the clients during the discovery phase.

Article

An example of the tablet wireframes that were created during the discovery phase of the Grammy's website

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.

Some mockups of the various devices the Grammy's website was built to support. This experience needed to look beautiful—regardless of where it was being discovered.

Desktop layout of the article page featured on the Grammy's website.

Tablet layout for the article page featured on the Grammy's website experience. Big header image with beautiful serif typography.

Mobile layout of the article page featured on the Grammy's website.

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.

The wordpress logo to communicate what CMS the website was built on.

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

Showing off some of the user interface and design elements found on the Grammy's homepage. This specific example calls out the 'Fashion & Beauty' interactive flyout.

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.

Showing the variety of image, typography and layout that you'll find featured on the homepage of the grammy's website. We needed to feature creative musicians in an interesting way.

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.

In order to create a timeless experience, the content should be the website.