Loading ...

Responses by Watson Design Group.

Background: Mank, filmmaker David Fincher’s latest masterpiece on the life of screenwriter Herman J. Mankiewicz, required a highly skilled cast and crew to make sure every element of the film was both beautiful and authentic to the Old Hollywood period. To highlight this work, we created an interactive site that celebrated the below-the-line craft of the film through beautiful photography, interviews and articles.

Additionally, the site was released alongside a physical book that was sent out to industry voters ahead of the awards season. Our site acted as the digital expansion of that book, broadening the availability of the content to a bigger audience while preserving the book’s style and contents.

Design core: To preserve the idea of a coffee table art book being brought to life, the site’s framing, navigation (built in WebGL) and overall visual layout is styled after the simple action of turning a book’s page. The experience has a nostalgic, classic feel while still being intuitive and forward-thinking in the ways we implement animations, transitions and all of the other elements that digital can offer. There is also a massive amount of video, audio and photography content available for the user to get lost in, while still maintaining a graceful and fluid user experience.

Favorite details: There were a lot of elements at play all at once, which had to exist in perfect balance. This site had to be a digital representation of a book, a beautiful celebration of a film and a resource for awards voters to learn more about the film. We were able to achieve all of these things within a tight deadline of less than three months for design and development.

Challenges: As any developer or designer can tell you, print layout and digital layout are completely different beasts. We needed to adapt the design of a book with a very specific layout into a digital space, while accounting for both desktop and mobile versions.

Additionally, the amount of heavy assets and the layer tree of the browser made this very challenging to manage, from a technical perspective.

Navigation structure: We wanted to replicate the experience of flipping through a book and reading left to right in a way that feels natural to the human eye. The imagery in the film and book is also presented in a beautiful wide-screen format, and we wanted to portray all of it without jeopardizing the images in any way.

Technology: The entire site was built from scratch. No framework or libraries were used. For navigation, we used a WebGL JavaScript API that enables the users to navigate smoothly and seamlessly from page to page.

manktheunmaking.com

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