In 8 weeks, a site that carries 6 years of work.

We designed and built a Framer website for a Vancouver production company: five pages up front, 20+ pages and a full CMS behind them.

Visit website

Project Overview

For six years, Workshop Film Company has made commercials, brand films and branded docs for brands and agencies like G-Shock, Moderna and Western Union. Their website no longer kept up with the work or with their new brand. The Workshop team gave us one goal: a site where the work does the pitching.

For six years, Workshop Film Company has made commercials, brand films and branded docs for brands and agencies like G-Shock, Moderna and Western Union. Their website no longer kept up with the work or with their new brand. The Workshop team gave us one goal: a site where the work does the pitching.

"Working with Apta was fluid, collaborative and fun. They made me feel safe and understood."

Marcus Fung

Executive Producer

Client

Workshop Film Company,
production company in
Vancouver, Canada

Services

Website Design

Framer development

CMS setup

Timeline

8 weeks

Tools

Figma

Framer

01

Bringing the new brand to the web

Workshop's new brand draws on 90s television: CRT screens, MTV graphics and VHS grain. Our job was to make it work on a website, where it has to move and respond to the visitor while leaving room for the films.

We used the brand's computer-drawn graphics, blocky type and stickers sparingly, so they point at what matters and the work stays in front.

Workshop's new brand draws on 90s television: CRT screens, MTV graphics and VHS grain. Our job was to make it work on a website, where it has to move and respond to the visitor while leaving room for the films.

We used the brand's computer-drawn graphics, blocky type and stickers sparingly, so they point at what matters and the work stays in front.

02

Designing with the Brand System

Monochrome blue carries most of the site, cream gives long blue screens room to breathe, and lime green is saved for small highlights. Be Vietnam Pro Bold and Satoshi keep a serious frame around a loud reference.

Lime green also became the cursor: a small green dot replaces the default pointer, so the brand's accent follows every move the visitor makes.

Monochrome blue carries most of the site, cream gives long blue screens room to breathe, and lime green is saved for small highlights. Be Vietnam Pro Bold and Satoshi keep a serious frame around a loud reference.

Lime green also became the cursor: a small green dot replaces the default pointer, so the brand's accent follows every move the visitor makes.

03

Site architecture

Five pages in the menu, each answering a question a buyer asks, in order: what have you made, who directs it, who shoots it, how do you work, how do I reach you.

Blueprint, the page on how Workshop works, now presents four clear models: Agency, Direct to Brand, Production Services and Studio.

Five pages in the menu, each answering a question a buyer asks, in order: what have you made, who directs it, who shoots it, how do you work, how do I reach you.

Blueprint, the page on how Workshop works, now presents four clear models: Agency, Direct to Brand, Production Services and Studio.

04

From Figma to Framer, with a CMS the team runs

We designed the whole site in Figma with auto layout and settled the design before starting the build. The Workshop team commented right in the file, sharing references and asking for changes, and got an answer the same day.

Three to four rounds later, the design was ready to build.

With the file already structured on auto layout, the Framer build took 17 days.

We designed the whole site in Figma with auto layout and settled the design before starting the build. The Workshop team commented right in the file, sharing references and asking for changes, and got an answer the same day.

Three to four rounds later, the design was ready to build.

With the file already structured on auto layout, the Framer build took 17 days.

Behind the five menu pages sit three CMS collections and more than 20 pages: 14 films with full credits, six directors, two affiliates and four photographers with their own portfolios.

Workshop's team adds a new film the week it wraps, without calling anyone. Every breakpoint was designed, so the site works on a laptop during a pitch and on a phone between meetings.

Behind the five menu pages sit three CMS collections and more than 20 pages: 14 films with full credits, six directors, two affiliates and four photographers with their own portfolios.

Workshop's team adds a new film the week it wraps, without calling anyone. Every breakpoint was designed, so the site works on a laptop during a pitch and on a phone between meetings.

05

The Work page

The Work page gets the most visits, so it got the most design time. Visitors filter by commercial, stills or reel, see award badges right on the thumbnails and preview each project before they click. A green "see project" sticker follows the cursor across the grid.

Every project page also has a behind-the-scenes gallery. For a production company, a look at the set says a lot about how the team works.

The Work page gets the most visits, so it got the most design time. Visitors filter by commercial, stills or reel, see award badges right on the thumbnails and preview each project before they click. A green "see project" sticker follows the cursor across the grid.

Every project page also has a behind-the-scenes gallery. For a production company, a look at the set says a lot about how the team works.

06

Directors and Photographers

They have separate pages, each designed around how their work gets judged. Directors appear as full-width name plates, surname in italic serif, like the opening titles of a film. Hover a name and that director's reel plays in place, with a green "see profile" sticker next to the cursor.

On the photographers page, every still keeps its original aspect ratio, so each photo appears the way it was framed.

They have separate pages, each designed around how their work gets judged. Directors appear as full-width name plates, surname in italic serif, like the opening titles of a film. Hover a name and that director's reel plays in place, with a green "see profile" sticker next to the cursor.

On the photographers page, every still keeps its original aspect ratio, so each photo appears the way it was framed.

07

The Contact page

The contact page keeps the energy up to the last click. Team portraits are black and white loops with heavy grain, so everyone moves slightly on screen. Tcharles, our creative director, added one detail nobody had asked for: images that pop up as you scroll. It became one of the Workshop team's favorite parts of the site.

The contact page keeps the energy up to the last click. Team portraits are black and white loops with heavy grain, so everyone moves slightly on screen. Tcharles, our creative director, added one detail nobody had asked for: images that pop up as you scroll. It became one of the Workshop team's favorite parts of the site.