A website created for the hand-drawn horror game from Swiss-based illustrator Michel Ziegler.
Services
Built in collaboration with MWM & Hidden Fields.
The original website for Mundaun was designed by the developer of the game itself, Michel Ziegler; our challenge was to build off what Michel had maintained during the three years of game development — in which he meticulously shared his process of hand-drawing each element of the game.
The Mundaun team wanted to create a streamlined website in anticipation of the game’s release. Two main areas of focus during the redesign were creating an interactive notebook that mimicked elements within the game, allowing users to browse the hand-drawn artwork and game mechanics; and utilizing the fantastic new hand-drawn key art to design a simple but effective landing area of the homepage.
Building an Interactive Notebook
The team behind Mundaun wanted to recreate the artist notebook used within the game as a way of sharing still images and early artists drawings. We were excited to bring this idea to life because very rarely are we, as web developers, given a chance to emulate aspects of gameplay.
Our team set out by selecting which pages would be incorporated — there were hundreds of images to choose from thanks to careful archiving during the game development process.
Pencil to Paper
These sketches were especially impressive because they not only offered insight into early character design, but the actual inner-workings of level mechanics.
Selected artwork from these real-world sketch books were edited in Photoshop to more closely match the tone and texture of the virtual notebook found within the game, resulting in the individual covers/pages you see below.
Paper to HTML5
Each individual page was then stitched together using turn.js, a JavaScript library that allows beautiful image transitions similar to real pages in a book, with support for all modern browsers including touch devices.
It was important that the notebook be built in a way that was extremely flexible —
Pages within the interactive notebook can be quickly rearranged, hidden or expanded upon to hint that the book, like any good sketchbook, is still a work in progress.
There’s a lot of exciting elements of the notebook to come as the game release nears.
Putting the art front & center
The moment we saw the newly designed poster image for Mundaun, we knew it had to be featured front-and-center on the new website. It was so full of mystery and meaning — it really was an impressive piece of art on its own.
The idea was simple, take the top-half of the poster and ensure it loads above-the-fold when a user lands on the homepage, acting as a landing area. There were four elements we needed to have control over: title treatment, top-half and bottom-half of poster, and the game synopsis.
Landing Area
The top-half of the poster says so much about the world, a sense of mystery and exploration, the ghostly characters in the fog watching as you approach, of the long journey ahead.
Dark Reveal
As the user scrolls down, the bottom half of the poster seamlessly reveals the darker and more dangerous side of Mundaun, as reflected in the water.
By taking advantage of the vh (viewport height) calculation in CSS, we can ensure the poster image always allows for the user to experience the dark reveal of what waits ahead for our main character, while locking the logo and game synopsis in their appropriate positions.
We were fortunate to have access to an extensive collection of video elements that truly brought the hand-drawn world to life.
While the still images of Michel Ziegler's creation are undoubtedly stunning, it was essential to incorporate these video elements to fully showcase the depth and atmosphere of the game.
The dynamic interplay of sound design and the heavy fog permeating Mundaun's world elevated the website's overall experience. By integrating these video elements, we were able to capture the essence of the game's eerie and captivating environment. The immersive audio and visual elements combined to create an unforgettable journey for website visitors, allowing them to experience the true dread and beauty of Mundaun's hand-drawn world.
