net - UK (2020-02)

(Antfer) #1
Above The beauty of the site is how it convinces you that you’re flicking through a magazine
from the era of the film, from interviews with the characters to the shiny cover effect

SHOWCASE
How we built


and backstory, it made it easy to get
into the minds of these characters and
expand on their relationship and world.

How extensive or limited were the
assets from the movie you were allowed
to use?
MG: We were given an exciting amount
of photos to fill out the magazine
with, which really took the idea to
the next level. Beyond just being an
in-world magazine, this could now also
function as a first-look photo gallery
for fans. Additionally, the film includes
such a wide variety of sets, costumes
and locations, it allowed us to vastly
differentiate the kinds of articles we
could write. It’s really amazing how many
different stories can be made out of this
one film.

What technologies did you use to build
the site and what were the biggest
technical challenges you encountered
implementing them?
HM: 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 pre-render
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 always appears 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.

You also created a physical print run of
the site: how challenging was that?
MG: The idea of actually producing a
print magazine was something that
was floating around since we started

the concept. We had to redesign the site
for print, splitting the web build into
individual pages and testing out multiple
paper and size combinations before we
found something we liked. It was really
exciting to see fans and celebrities
holding the magazine in press photos and
social posts, proving that even a physical
product can make it onto social media if
you give fans a good reason to share it.

As you’re based in Los Angeles, how
did it feel personally, working on the
website of a film that’s essentially
Tarantino’s love letter to the city?
MG: We were lucky to have a lot of LA
locals and Tarantino fans in the office
who could really dig into all of the details
and locations from the film. One of our
advertisements in the magazine guided

fans through a Sunset Strip takeover that
Sony set up with billboards surrounding
major historic landmarks from the
film. Watching the movie became like a
game of ‘I spy’, with famous landmarks,
restaurants and theatres around town. It
was really exciting.

What did you learn from this project
that you’re likely to use on your future
site builds?
MG: We’re constantly work ing towards
blending the digital and social experience
together in innovative and exciting
ways. This site allowed us to take a
more editorial approach with our film
marketing, giving us insight into how
a text-based experience with large
amounts of copy can still feel dynamic
and engaging on a digital device.
Free download pdf