Bruce Cantarim's profile

Webdesign - Heavy Metal Machines Esports Championships

This was one of the first projects I've developed here at Hoplon, the European Championship landing page. They were in need of a website for the game's first championship ever, and so I was handed the task of planning, designing and building it from the ground.

The deadline was tight: I had two weeks to delivers it. So, I've opted for building a static site, using Pug, Sass and Javascript. It was a challenge to deliver the aesthetics of the game and fast load times at the same time, so I had to resort to draw most of the visual elements in the website, such as menus, separators and such, using only code.
The site presented the game to new players, had information about how to participate, prize pool values, an embed twitch section for players to watch the livestream, and also featured a countdown to let players know the deadline to enter with their teams.

It was a great experience that made me leave my confort zone and really think how to translate a game visual language to the web, but still it was long ways to go...

Then comes the South American Championship:
Two months later, a second championship was planned, and the design received a major overhaul this time. I've prototyped the changes in Figma, and used the same technologies from the last time. These changes took about one week to be design and developed, and now players had a much more pleasant experience when navigating the site. 
One of the major additions was a lateral navigation menu, that showed visitors exactly where they were at the site, and provided an improved experience overall. 
Since the website was built in a modular fashion, it was easy to remodel it and reuse the parts I've needed from the previous event. Some of the elements I've created for this project carried to other projects, like the lateral navigation.

The website was served in english, portuguese, spanish and russian, according to the language set in the users browser. Overall, it was a great experience that taught me a lot about webdesign for games and multi-language support.
You can check a live version of the website here: http://www.heavymetalmachines.com/esports/ 
Webdesign - Heavy Metal Machines Esports Championships
Published:

Webdesign - Heavy Metal Machines Esports Championships

Landing Pages designed & developed for the Heavy Metal Machines championships of 2017.

Published: