Les Numériques : Watcheur
Interactive game
Context
Creation of an interactive game for high-tech magazine Les Numériques.
Client
Les Numériques
Fields of expertise
#Conseil #Strategy #UXdesign #Design Thinking
Divisions
A first for the magazine
When it came to designing the magazine’s very first communications campaign 148 decided to put the Les Numériques community to the test by testing its observational skills with a series of images taken from geek and high-tech culture past and present. Watcheur reintroduces that well-known game ‘Spot the Difference’, but with a 148 twist!
Strategic and technical skills required
In order to introduce the game in a simple and accessible manner it is important to identify a concept with which everyone is familiar (Spot the Difference) and that can be adapted to the client’s world. The most intense part of the project is designing the whole gameplay aspect, the game interfaces and the general ergonomics and considering its compatibility with mobile devices.
A word from the Strategic Planner
“The real issue with this project was coming up with a game that was both fun and addictive whilst still being quite simple in terms of its design and execution. With this in mind, we came up with a number of concepts designed to reflect the Les Numériques DNA, reflecting its geeky, high-tech, retrogaming feel.
The Spot the Difference idea was quite simple but effective, and since the very concept of the game was a little retro it gave us the opportunity to bring it right up to date. We particularly wanted to take advantage of this to showcase a whole culture that is specific to the Les Numériques community and to present it with a worthy challenge ;)”
—Alexia
A word from the Developer
“With this project, we decided to use the latest web technologies and to create a 0 architecture to deliver a single-page web game that ran entirely in JavaScript. With regards to the architecture, we used the ECMAScript6 class system (and BabelJS or compatibility) to create a template for the game written entirely in Vanilla JS. When it came to animation we used CSS3, structured in BEM, with SASS.
The game uses an in-house PHP API to receive information (matches, scores, players, etc.).
We used GulpJS our work flow and keep our code clean and legible,
as a result of which the game appears to run smoothly and loads very quickly!”
—Rémi
Learn More
They’re all talking about it!
They all took part in the project!
Thanks to:
