Capturing the essence of a legendary game made in Québec

View Project
Company
Sabotage
Category
Websites and web apps
Expertise

Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UI
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UX
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
Web

Project
Overview

Sabotage, an indie studio from Québec City, was preparing to launch its first game, The Messenger, scheduled for 2018.

The Messenger was Julie’s first website contract as a freelancer. Of course, it was not the last site she would build, for herself and for the Collective. The site’s mission was to offer a platform mainly for publishing the game’s trailer, along with a few in-game images to make fans eager to buy the game at launch. Preserving the essence of the game on the site was essential.

From pixel art to UI

Since all of the game’s assets were in pixel art, it was essential to maintain and extend this style wherever possible.

The main navigation uses the same frame as the dialogue windows found in the game. The typeface used in the game was also used on the site.

<br /> <b>Warning</b>: Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br /> <b>Warning</b>: Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

View of the website that would support the game's launch in 2018

<br /> <b>Warning</b>: Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br /> <b>Warning</b>: Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Recreating the game's atmosphere with the real artifacts

For this website, we wanted to preserve the essence of the game by using its actual assets and key elements.

Before we even started creating items for the site, the images, scenery elements, characters, backgrounds, world themes and bosses were reviewed to select the most suitable elements to dress the new site. The goal was to recreate, across the site, the different worlds found in the game.

Collaborators

  • Web Developer

    Patrick
    Champoux

    Web developer with 15 years of experience and a passion for React.js and WordPress. Over the course of his career,...

    View Details

  • Founder of Diapason, UX and Customer Experience Designer

    Julie
    Simard

    Passionate about the possibilities of collaborative design, Julie had long dreamed of launching the Collective. Her first intention was to...

    View Details

Ready to create projects that resonate?

We've got the right tempo.

We've got the right tempo.

Let's create together
Drag
Play