Loading ...

Responses by Stellan Johansson, design director and cofounder, Ritual; Jonathan Alpmyr, designer, creative developer and cofounder, Ritual; and Oskar Wolontis, studio manager, Hazelight.

Background: “Hazelight is a Swedish game development studio founded in 2014 by film director–turned–game director Josef Fares, who is behind the critically acclaimed titles A Way Out and Brothers: A Tale of Two Sons,” says Stellan Johansson. “As many years have now passed since Hazelight’s founding, the studio has now defined and developed its company culture, both in regards to how it operates but also in what types of games it makes. Hazelight reached out to us to update its digital presence and better reflect for what it stands for today, as well as releasing its new site to coordinate with the first glimpse at its upcoming adventure platformer It Takes Two. Another important aspect of the new site was that it should provide a deeper insight and more transparent look into daily life at the studio and the people who work there, with the intention to excite and attract new talent—as well as better connecting with its fanbase.”

The bigger picture: “With no annual E3 conference this June, EA (the publisher of It Takes Two) opted to host a major games-reveal event online during a streamed experience called EA Play Live 2020,” says Johansson. “During the stream, Hazelight (and Fares) did a public reveal of It Takes Two, and the new website was launched just as the promotional video ended in a successful synchronized effort.”

Design core: “Hazelight is definitely not your typical game developer, and as the project landed on our table, we instantly knew that this had to be fundamentally mirrored onto its digital space as well to truly make them stand out from other studios,” says Johansson. “By blending big and bold typography with playful animations and page transitions, including a fluid smooth scroll experience, and incorporating a background that responds to your mouse input—among others—we hope this is well communicated and achieved. A shorter answer to the question is: the entire package and how all elements of the site work together in harmony are what create the style!”

“The relationship with Ritual while working on our new site felt open, collaborative and agile,” says Oskar Wolontis. “We felt they struck a good balance between classic features combined with new, fresh ideas into a cohesive whole that makes our online presence stick out compared to other game development studios. It was important for us that the site felt like it belonged to a game developer while simultaneously highlighting our creative spirit. We now have a modern platform to reach out and show the world what we are about. You could say Ritual helped us capture and visually package the essence of Hazelight and—in collaboration with us—mold it into this new site.”

Favorite details: “The hazy background with procedurally generated clouds that plays with the studio name, combined with the parallax effects, conveys a great sense of immersion,” says Jonathan Alpmyr. “The grungy, ripped borders framing the images were created with SVG masks, which was quite a challenge to get right. We are happy with how they turned out in the end.

“We provided Hazelight with a brand update, including new typography and colors. For the photography part, eighteen portraits were taken in total with additional studio lifestyle shots, and we also delivered editing and grading work for the hero area video clips which was achieved with the help of our very talented collaborator and go-to photographer Felix Sjödahl.”

Technology: “The front end is built with the standard HTML/CSS/JavaScript, and the back end is built with PHP,” says Alpmyr. “We also produced an easy-to-use component library to give Hazelight the ability to create new subpages and add or remove sections as the site grows over time.

“For most of the animations, we use GSAP, which makes animations so much easier than working in CSS—especially when it comes to timing and chaining animations. This was particularly helpful in the loading screen and page transitions. Speaking of page transitions, for them we used Highway, a lightweight and flexible library for creating AJAX navigations with animations.”

Anything else? “The real-time cloud formation background is written using the JavaScript 3-D library three.js,” says Alpmyr. “We got a little help from designer and developer Anton Andersson to get the interactivity in place, and then we further developed it. The code randomly generates unique cloud formations every time you enter the page.”

hazelight.se

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In