La web de CANADA by

Three brands, one website

CANADA is a production company with two sister companies under the one umbrella. Nevada handles production services while CANADA Editorial acts as the publishing department. Part of our job was to understand and then merge these three business models under one digital environment. Consistency and uniformity, as well as clear categorisation between different services, therefore became key features.

Flexibility is king

We started by focusing on one basic principle: flexibility. CANADA works with a variety of audiovisual formats, so the website needed to easily adapt to different types of content. We gave priority to the latest and most important individual projects (up to seven projects on a slider) with a full page layout on the homepage. A bold title overlays the main image or video which becomes filled when the user hovers over the text. A vertical menu adds an extra twist, giving a bit of personality as well as prioritising the visual content. 

A modular system

Working with different modules, each video or image can be minimised to a smaller scale and adapts smoothly to different devices, and we allowed CANADA to be able to move the different formats freely via the backend of the website depending on the requirements for each project. The design is also responsive, working on desktop, tablet and mobile. 

An adaptive typeface

As well as the visual content, we wanted the typeface to be adaptive. The font we chose for the titles (Benton Sans) is loud and bold, but it can also expand, shrink and stretch to remain consistent with the movement and scaling of the visual content. This feature gives the website a bold personality as well as an overall impression of contemporaneity. 

Every aspect of the website provides a feeling of flexibility, with seamless interaction between different elements – from the design to the navigation between different sections. We used a sans serif typeface (Plain) for the details and larger sections of text – always sticking to the same two sizes to create consistency throughout and differentiate from the headline titles.

Categorisation of content

All the content is categorised into featured, film, music video or commercial so it is easy to find a particular production as well as to access similar works. So that the global network of directors can be easily identified, we separated CANADA’s work in terms of specific directors as well as in terms of specific project and type. Each director is listed on a separate tab to the ‘works’ tab and alongside the biographical details about each director you can view his or her works displayed in either rectangular or square blocks on the right. Once you click on a project it is displayed in the same flexible manner as the works featured on the homepage.

Circular navigation

Within the structure of the website there is a shop feature where Canada’s physical products can be purchased. Consistent with the rest of the website, the design is clean and modular with sliders so users can browse the different product images as well as relating each product to a specific project – further evidence of the transversality of the design. Each project can be accessed via a number of different ‘portals’ – the featured homepage, the ‘works’ tab, the ‘directors’ tab, the shop – as well as linking to similar projects or works from the same director. The overall effect is an ultimately smooth, user-friendly and easily navigable experience.

Distinction through colour

Moving away from the simple black and white colour scheme with electric blue details that characterizes the original website, we opted for a bright, bold colour palette with much more variety. To maintain consistency but allow the content to speak for itself, we use an overall black and white scheme for the main elements, although much bolder and more contrasting than the original. A secondary and much more varied colour scheme indicates distinction and give energy to the overall look and feel. The colours are playful, contemporary, always in block and they clearly differentiate between the different directors and separate projects.

Respecting the format

We separated the works into categories depending on the different levels of content available for the project. For the basic projects (such as mobile commercials) we displayed the visual content on the right over a black background with text on the left. For projects with larger videos the text is fixed on a second layer which can be minimised or maximised as required. While the size of the video can be altered, the format is always respected. There is a circular, transversal navigation option where related projects can be easily accessed.

Exhibiting the artists

CANADA’s roster includes iconic and fundamental acts from the indie scene such as El Guincho,  Mujeres and Joe Crepúsuclo as well as trend-setting novelties like El Último Vecino, Svper, and Spain’s urban queen: Bad Gyal. For its record label and management agency, we needed to focus on the artists. Separated by music, events and the artists themselves, users can independently access albums, singles – even playlists curated by CANADA – at the same time as listening to the music of their choice. In addition to a biography and breakdown of works for each artist, users can also scroll through videos, photos and merchandise. 

Collaborative approach

Given the complex structure of CANADA, one of the biggest challenges was trying to sell the project to five different people, each with their own opinions and ideas, all equally passionate about showing their work in the best possible way. We met several times throughout the process to discuss ideas and make sure we were all aligned. Our journey towards the final product became a collaboration in every sense – from concept and design, to coding, development and final touches.