Fuzzco.com

A studio site has a hard job. It has to show a lot of very different work, change every few weeks, and still look like the studio rather than like its clients. Case study pages usually go wrong in one of two ways: each one is designed and built by hand, so new work takes forever to go up, or they all come out of one rigid template and look generic.

The answer was a small system. A strict identity holds everything together, and a single layout module lets anyone in the studio compose a page from rows. That same module ran the homepage and every case study.

Jump to: Identity, Layout system, The endless homepage, Office

Three colors, one typeface

The identity is almost nothing, on purpose. Everything (text, links, rules, borders) is one red on white. Yellow appears only when you touch something: a hover, a text selection. There’s no black and no gray anywhere on the site. Every line is the same 3px red stroke. And there’s one typeface, GT Haptik, in one weight, for everything from headlines to the footer.

A layout system anyone could use

Every page is a stack of rows on a 12-column grid, and each row is split into columns: one full-width, two halves, three thirds, four quarters. Each cell holds one of three things. An image, which reserves its exact proportions before it loads so the page never jumps, and can show its title in a small white square on hover. A text box, with a fill (empty, a red stroke, or solid red), an alignment, and a size. Or a blank, which is how you push an image off center. That’s the whole vocabulary.

The one clever bit is that text sizes itself to its column. A sentence in a full-width row comes out at 54px, in a half at 30px, in a third or a quarter at 18px, so editors almost never had to pick a size. The pages look composed rather than templated because the ingredients vary (image proportions, blanks, the three text treatments, a different split on every row), not because anyone placed things by hand.

The endless homepage

We wanted the homepage to grab attention and do something a bit crazy, while still presenting the work plainly. So it scrolls itself. The homepage is a curated section built from the same rows as the case studies.

And if you scroll yourself, it stops to let you, and when you let go it carries on in the direction you were going. Scroll up and the whole studio starts drifting upward.

Office

The Office page had one box per studio, in Charleston and Portland, each with a line drawing of the building, the local time, the weather, the temperature and how many people work there. The weather icon sits in the sky and moves across it through the day. Hover a box and the lights come on in the windows.

It’s one of my favorite things I’ve ever made. It barely makes a difference to anyone, and that’s exactly why I like it.