A List Apart

The A List Apart Blog Presents:

Outside the Box

Article Continues Below

Yes, the clipped logotype at the top of the page is intentional. The amount of clipping varies depending on viewport size and where you are on the site. We’ve gotten numerous bug reports and quizzical comments. Some people like it. Some people really don’t like it.

One reader really, really didn’t like it. We admire his ingenuity even if we don’t share his distress over logo truncation.

Logo amputation is not new, or particularly original, either, as a design affectation. The Brooklyn Academy of Music website clips its logo and headlines. Closer to home, at A Book Apart, the covers are printed with the titles clipped on the spines. Even zeldman.com trafficked in this sort of thing, once upon a time.

In the beginning

We started the project with the idea that we were building on the current design, while aiming for a bigger, more readable, content-first approach. As the design evolved we began to think more of the publication as a magazine, given its timely nature, rather than a news media or blog website. This led us directly to the oversized, bold masthead that we adopted. Franklin Gothic ended up being our choice for the typeface—at first glance, it appears to be a very modern and formal sans-serif, but when we inflated it to fill the page it revealed a number of eccentricities in the letter-forms which work well with the hand-made sensibility of Kevin Cornell’s excellent illustrations.

For responsive breakpoints, we began with the obvious: resizing the logo to fit the viewport. In practice, this seemed to take away everything that we liked about the oversized logotype—it became small and insubstantial. Clipping the logo at full size instead created interesting graphic shapes that we could position within the viewport.

A List Apart was created to challenge and inform designers, so a manifesto sounds about right. The logo adopts the design goal of putting content first by moving aside to make room. It’s a rare element that pushes the boundaries in an otherwise very structured design system. It complements the brand by embracing a willingness to try something different, even if it seems wrong to some people.

It seems possible that we are sometimes too influenced by the best practices sides of our work in UX design and coding. Design can be provocative, or playful, and not only about putting Everything in its Right Place. It’s fun to work with a logo and treat it not as a precious jewel, coddled in a pillowy 2-3 ems of white space. It also presents us with an opportunity—what exactly is up there, that we don’t yet see?

56 Reader Comments

Load Comments