Sep 1st 2016

Trespass Against Us

Client: A24 Films
Website: trespassagainstusmovie.com (auto-playing movie)
Design: A24 Films
My role: Complete build

The interesting challenge for this movie site was the presence of lines in the designs. The construction of this layout had to scale properly, yet keep the alignment of lines with the photography. You can see how that one line between the two actors is in a very specific place between their noses.

I could have kept the lines in the images, but then they wouldn't be as sharp as you resize the browser. Key to making this design work was a combination of background image scaling, flexbox usage, and media queries to determine if the viewport was more tall or more wide. The solution ended up working in a remarkably flexible way (it even looks nice on a horizontal phone screen).