Skin & Bones

Translating the tactile movement of physical film into a rigid digital interface

  • Web

Skin & Bones is a Toronto-based production company representing a premier roster of award-winning directors. No Replica collaborated with designer Rebecca Wilkinson to develop the company’s website.

We took inspiration from the tactile mechanics of physical film reels to create a rigid, grid-based interface. The site employs an intermittent scrolling experience where content moves in discrete, ratcheted steps rather than a continuous flow, mirroring the frame-by-frame progression of a film projector.

Collaborator: Rebecca Wilkinson

The site’s homepage uses a strict grid-based structure. When the user scrolls, text moves in a ratcheted motion.

The “Directors” page features a similar user experience as the homepage. When users scroll, content moves in discrete intervals as opposed to smoothly scrolling.

Hovering over a director’s name reveals their projects in the grid.

The page for each director features a short bio and their work. We built a custom video player to match the site’s overall design.

The “About” page, which uses the same type of scrolling as the rest of the site.

Clicking “Contact” reveals a pop-up that nests perfectly into the grid.

Clicking the “+” icon reveals a pop-up containing news and announcements.

More projects

More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects More projects
Get in touch ↗