No Replica

Challenge

Skin & Bones’ prior branding featured a distinct aesthetic that clashed with the individual styles of their roster of directors. For the new brand and website, our goal was to establish a cohesive system that would center and support the agency’s filmic output without overpowering it. On the other hand, this system would need to serve as a sort of glue, uniting all the directors under one clear umbrella and helping the agency stand out amongst its peers.

Solution

After an exploratory process, our final approach was to take direct inspiration from physical film. This transpired in two ways: first, through the creation of a grid-based site resembling film cells; second, by implementing a wholly unique scrolling experience in which content moved abruptly down the page, instead of the typical behavior of scrolling smoothly. This scrolling experience mirrors the frame-by-frame progression of a film projector, transforming the user experience into a direct embodiment of filmmaking.

The entire site utilizes the same core components of a multi-column grid structure and monospace typeface set in a singular size and weight. These consistent design elements anchor the user experience, enabling us to explore more adventurous design choices in other places.

Beyond the user experience, No Replica developed a custom CMS solution for Skin & Bones’ in-house team. To optimize for speed, we hosted all site videos on the external platform Simian. We then built a connection between Simian and the site’s CMS that dynamically fetched this content to populate the site’s homepage and portfolio.

The site begins with text and videos scattered across a gridded layout inspired by physical film reels. Each time the page loads, three videos are randomly selected from the company’s roster of directors. When the user scrolls, the text moves in discrete steps up and down the page, mimicking the frame-by-frame progression of a film projector.

The site features a similar experience for the portfolio of directors and films. Video thumbnails are arranged in the same grid as the homepage. When the user scrolls, the thumbnails jump to a new location in the grid.

Hovering over a director’s name reveals their projects in the grid. Likewise, hovering over a video thumbnail reveals the associated director.

Each director has a unique page featuring their information and projects. This design employs an altered grid with similar ratcheted scrolling. Clicking on a project provides a fullscreen reading experience with a custom-built video player.

The “About” page maintains the ratcheted scrolling experience, this time in the context of a single column of text.

Instead of a dedicated “Contact” page, we implemented a pop-up that layers on top of the current page’s content and fits into the site’s overall grid structure.