Responses by Matt Grippi, strategist, and Rob Smittenaar, developer, Watson Design Group.

Background: To illustrate the characters of Quentin Tarantino’s film Once Upon a Time In... Hollywood and their struggles in a way that feels true to the director’s affinity for the past, we turned the film into a digital magazine that feels ripped from the newsstands of 1969. Scrolling through each page feels authentic to the days where the printed word was king, mixing the style, color and content of a retro magazine with smooth, modern digital animations and interactions that never take you out of the experience.

The magazine’s content is entirely in-world and original, borrowing elements from the film’s screenplay and the real-life history of the era to create original articles, interviews with the characters and ads for the fake products found within the world of the film, expanding its story. We also included Easter eggs and exclusive, unseen full-color photography from the film. In accompaniment with the digital site, Sony ran a limited edition print of the magazine—our first time delving into print design. A total of 100,000 print magazines were distributed in movie theaters in the United States, Canada and Australia.

This project was part of the larger marketing campaign for Tarantino’s ninth film. The driving concept behind the marketing was to celebrate the release of Once Upon a Time In... Hollywood as an occasion. Our magazine is a gift to Tarantino super fans and cinephiles who know Tarantino’s films, as well as general audiences.

Design core: The inspiration behind the site was to be an ode to the ’60s magazine in the digital space. We followed the retro format by incorporating design elements such as copy overlays, big titles, big images, little bylines and photo captions.

Favorite details: We’re extremely proud of the original copy, articles and in-world ads we created for the magazine. This project offered us a unique opportunity to work directly with filmmakers and build something that served as an expansion of the storyline, giving fans more insight into the characters on screen and the world of the film.

A design detail we’re happy with is the WebGL, which replicates an unopened cellophane cover over the magazine. We are also proud of our attention to detail as far as layout for both the mobile-site and desktop-site composition and the printed zine.

Process: One of the challenges we faced was the performance and browser compatibility of the site. We performed structured quality-assurance tests with the client to make sure the website was compatible with a wide range of browsers and devices.

Another challenge we faced was the number of fonts used in the design. Because of the magazine’s style, a lot of different fonts were used in the ads and articles. We ended up replacing some fonts with images or SVGs to reduce the number we used on the site itself.

Navigation structure: The navigation represents a table of contents, just like a printed magazine. Using a WebGL metaball image mask shader, we give the user a preview of the content upon hovering over it with the mouse. Users can either scroll on desktop or swipe on devices through the complete magazine without a single click.

Technology: The front end is a single-page app built with Vue CLI, using HTML5, SCSS, Webpack and JavaScript ES6. Animations were created with the GreenSock Animation Platform. There is no back-end technology since it’s purely a promotional site with limited need for updates; instead, we used a prerender method that loads all app routes and saves the results to static HTML files.

We used viewport units to create fluid page layouts. Using viewport units ensures that the design is always as intended, which was definitely helpful in retaining the magazine design layout on different devices.

To complete the experience, we added some WebGL effects using custom shaders rendered with three.js. Moving the cursor on the cover affects the light direction, causing a realistic, plastic reflection of light. Throughout the site, we added subtle metaball effects and liquid page transitions.