MediaMonks

Netflix
DARK

Best User Experience / Webby Winner
MediaMonks

Best User Experience

We have not only created a website that is both helpful and visually appealing, but we also translated a complex narrative into an uncomplicated, accessible website for all audiences. - The MediaMonks Team

Q: Can you describe your project and the concept behind it? A: Netflix’s DARK is a sci-fi mystery series that spans several timelines, generations, and interconnected events. With a complex time-travel narrative and intricate family relationships, viewers have to pay close attention, or feel left in the dark. With that in mind, we built an official interactive guide. It helps to understand the fundamentals of the story, and is the go-to place for invested fans to build up their knowledge.

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process? A: It did not change much from the initial designs. The imagery and visual style is largely dictated by the series. The design concept was strong and thought out. It slightly evolved during development and with the addition of animation, image transitions, and sound, we managed to make it more immersive.

Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: Graphic elements played a key role in the development. We paid tribute to the show’s look, feel, and storyline, with animated timelines that take the user through the narrative. The overall mood, typography, and kaleidoscopic transitions are inspired by the show’s aesthetics, as well as the eerie music that seals the atmosphere. Once 750 key events were summarized, the show runners double-checked the plethora of content to avoid spoilers.

When did you experience a breakthrough or an "a-ha" moment during this project?

It was an immense task to visualize each character’s time travel journey, especially across worlds and making sure that all events displayed correctly. We tried multiple concepts and eventually found a way that worked across all characters. It was a great joint-effort between Henrik & Sofia and the MediaMonks development team.

Watch


Q: What web technologies, tools, and resources did you use to develop this? A: The range of tools and technologies used were the following: HTML5, WebGL, Vue.JS, GSAP, and Adobe After Effects.

Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand? A: DARK being a TV series allowed us to use visual effects that are present in the show. The challenge was finding a balance between these effects and the users' interactions to trigger them. Oh, and hiding all the easter eggs so only die-hards could find them!

Q: How did the final product meet or exceed your expectations? A: The interactive guide for Netflix’s series has received immense positive feedback from all over the DARK community. We have not only created a website that is both helpful and visually appealing, but we also translated a complex narrative into an uncomplicated, accessible website for all audiences.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: With the evolution of HTML5, GSAP, and WebGL shader development, we are constantly finding new ways to enrich our experiences. Our teams are driven to deliver the best and that pushes us to greater heights.