FRAME!

I designed FRAME! in 2022 as an academic project, an experience identity and wayfinding system for the Museum of Fine Arts Boston. It started from something I noticed walking through the building. There's a frame everywhere you look, around the paintings, around the doorways, around rooms that open into other rooms.

The mark is three overlapping squares, stacked the way rooms and paintings sit behind one another as you walk. The colors, the type, twelve wayfinding pictograms and a map of the museum's three floors all come from it. I put the whole system into a five page design guide.

In 2026 I went back to the guide to make a short film from it. FRAME! is a set of parts, a mark built from three frames, nine colorways, twelve signs and three floors of map. In the guide each part sits still on its own page. You never see how they relate to each other, or what a sign looks like while it's being drawn.

I wanted to see the system move, using only what was already in the guide. I didn't storyboard the whole film up front. Each step showed me what to try next.

I set four rules before starting.

The film is code that can draw any frame on request. If I change a timing, a color or a word, I render it again and nothing else has to be redone.

All the artwork comes from the guide. The marks, lockups, signs and map were cut out of the original pages as vectors and never redrawn, and I compared each one to its page pixel for pixel.

Stills before motion. At every step I picked between two settled frames first and animated after.

No new words. Everything on screen is from the guide, apart from the names of the three wayfinding groups, which I added.

Before bringing in the brand I built a test scene with placeholder type and color. A column grid draws in, a frame traces its four edges, a wordmark rises, and a marker steps down a list of rooms. What I needed to know was whether the method held up. Any given frame had to come out identical whether the scene was played forward, backward, in random order, or jumped to cold.

It passed, with the wordmark still clipped to “FRAM”. The automated check had no way of noticing that. I only caught it by looking at the frames, and after that every step got both a check and a visual review.

The placeholder version was overwritten as the project went on. The film below is the same test after the FRAME! brand went in.

The first real version put the FRAME! identity into that engine. It opened on the mark, with the wordmark set in a dark navy band beside it.

I didn't want the band behind the title, so I took it out and set FRAME! large on white with a smaller subtitle under it. The leading was still too loose, because the type's line boxes add air above and below the letters. I ended up spacing the lines by the measured edges of the letters instead. The boards compare a 96 and a 128 pixel title at three different gaps, and I went with 128 and an 8 pixel gap.

Poppins stands in for the guide's Mont Heavy and Raleway. I also pulled the magenta back a little to stay inside my design system's saturation limit. The bright colors only show up in the mark.

The wayfinding signs were what I most wanted to see move. Because every mark in them is a stroke in the guide, each sign can be drawn with a pen in the order it was made. I exported all twelve as standalone vectors and checked them against the originals before animating anything.

I tried two pens. One draws at the same speed from start to finish. The other puts down most of the line in the first third and slows down for the detail. I used the even one for a while, then switched back to the eased pen, which is the one you see in every drawing in the film.

Then I sorted the signs into three groups, Amenities, Getting around, and Help and safety, and gave each sign a small action once it finishes drawing. The two restroom figures lean toward each other, the elevator arrows swap places, and the exit letters walk out of their box and back in. Each action only moves parts the sign already has, and it always ends exactly on the original drawing.

With three groups sharing one screen, the signs stayed small. Giving each group its own screen let them grow to twice the size.

Then the group name needed somewhere to go. I put it on the header line after the section title, with an arrow between the two. The arrow is the guide's own Right Direction sign with its box taken off. It draws on, then nudges forward whenever the group name changes.

I also added the FRAME! mark at the right end of the header. It's the only place the bright colors appear on these screens, and it ties each one back to the identity.

While the signs were drawing, lines from the shapes underneath showed through the shapes on top. They stayed visible until the upper shape closed, and then they vanished, which made it look like the drawing was fixing its own mistake.

The fix was to respect the stacking order from the first frame. Every filled shape is in place from the start as an invisible white fill, which hides whatever it's going to cover before the pen gets there. The outline draws on top of that and the color fills in after. Ink only ever gets added, and nothing disappears. The pen also skips any part of a line that ends up covered. It doesn't waste time on lines nobody will see.

Once the signs worked I applied the same rule to the rest of the film. I cut the marks, the nine colorways, the six lockups and the three map levels out of the guide pages as vectors, left them untouched, and checked each crop against its page.

With those I rebuilt the opening and added sections for the logo and the map, drawn the same way as the signs. The opening builds the mark, sets the wordmark, and lists the three sections as ruled rows. Those rows are the sections that follow, which makes the opening a contents page. The variants screen shows the outline, solid and color versions of the mark with both lockups. The map gets one level per screen, all at the same scale, so you can compare the floors directly.

Each section is its own page, and they're rendered in order into one film. Where two sections meet, the last frame of one matches the first frame of the next exactly. There's no cut anywhere. The header builds itself at the start of the logo section. From there, each new section title rises into the old one's place while the arrow lifts off and draws again. At the end the header clears and the film closes on the lockup, the tagline and my name.

With everything in place, some of the motion still slid across the screen in straight lines, and the three squares of each mark filled one after the other.

I reworked all of it around one idea. Parts that belong together start at slightly different times, move at different speeds, and land on the same frame. The squares of a mark fill that way. The walls of the map all draw that way and finish together, and then the rooms fill and the labels come up. When a screen leaves, its parts rise out at their own pace and are gone on the same frame. Text from the guide now rises in from behind a mask, the way the set type does.

For the colorways I went back to an early idea, one large mark that cycles through all nine. At each change the three squares move to their new colors at different speeds and land together, and a different square leads each time.

Watching the finished film, the drawing still felt clunky. Lines seemed to teleport in as each path finished. I went through it frame by frame and found three causes. The eased pen started so fast that a short line could appear between two frames. Where a line ran under a shape on top, the pen skipped the hidden part and its tip jumped to the far side. And a closed shape was missing the corner it started from until the moment it closed, when that corner snapped in.

I moved every curve, duration and stagger into one place and gave the film two families of curves that end on the same settle. Things that travel, like text and exits, leave at speed. Things being made, like lines, fills and color changes, start at a real speed and still put down two thirds of the work in the first third. No line takes less than about thirteen frames to draw now. The pen keeps moving under shapes, so its tip goes under and comes out the other side, and closed shapes have their start corner from the first frame.

The text on the logo variants still rose letter by letter, which didn't match anything else in the film. Now it rises a line at a time out of a mask the height of the line, the same move every other line of text makes.

The opening still felt off. Drawing with a pen works for the wayfinding signs, but two of the mark's three frames sit mostly behind the one in front. Traced, they show up as broken pieces of shapes nobody can read yet.

I stopped drawing the mark and mocked up other ways for it to arrive, each one ending on the same mark. Stack lifts each frame into place out of its own footprint, back to front, with its color already on. Grow opens each frame from its top left corner. Rise lifts the whole mark like a line of type. I liked parts of stack and grow, so I tried four ways of combining them.

I went with rise and open. Each frame rises into place while it opens from its corner, back frame first, and the wordmark rises as the front frame lands. The close uses the same move. The colorways screen keeps the pen, because there the mark is the thing being made.