Last month we launched the redesign of our blog. During the process, we wanted to make it feel distinctly ours with a visual nod to its very name—signals and noise.

I wanted our blog to feel special, aesthetically unique, but not gaudy. I took a quick survey of our blog structure and found a great area for opportunity to explore style: our post categories. From design, programming, business, support, writing, to sysadmin, anyone from our team can categorize a post they write.

To give each post an identity, I riffed on these category themes. From there, the obvious presented itself: try illustrating waveforms to harken back to “signals and noise.” Although I had a focus on illustrating, I still started with words, and more specifically, questions to myself.

What does “writing” look like?

So, with Illustrator fired up, I started generating waveforms that would wear the identity of “design,” “programming” and so on. It quickly became an exercise in shape, color, and line densities. The process was fun, and the results were full of surprises.

Design: balance, rhythm
Programming: elegance, as described by Jeff
Business: an exchange
Writing: clarity
Sysadmin: structure and ease
Support: understanding, as described by Michael


Illustrating noise

What about noise? (Or in our case, an un-categorized post?) What does noise look like? I had a slew of variations that all seemed, well, noisy.

But noise isn’t necessarily a bad thing. A “noise” post could be part design, part programming—or none at all. Instead, I stole a strand from each existing waveform and fused them into one, far more beautiful, noise form.

Noise: everything, nothing


Keeping it light

The first versions of these waveforms were actually opaque. I loved the look, but as graphic elements, they were too heavy. They over powered the articles themselves, so I opted for the single-stranded look instead.

Revelation: tightly-boxed content feels temporary

Beyond illustrating waveforms, I tried out a few other art direction concepts. I was married to the idea of putting our posts within a white “sheet,” much like we do for Basecamp. It took me a while to realize, though, that wrapping content inside of a box also feels like putting an expiration date on it. Having content in a box makes it feel temporary, short-lived, even. It’s in the same vein that posts on the Tumblr dashboard feel like one-off posts with no future in sight.

An unused, stacked-page direction

Allowing articles to own the entire page in the browser, free of contained boxes, gives them a sense of worth. Nothing revolutionary, of course. Frank and the nice folks at Medium are aware of it.

Inspiration board and cutting room floor

You can start to see a lot of inspiration that sparked my waveforms came from SETI diagrams, and visualizations of radio waves, signals, and various frequency noises. I happen to find the thin, plotted, and intricate lines from data quite beautiful.

As a background element, I explored mapping every hire at 37signals on a ring within space. It starts with JF and DHH in the center, and each year of growth represents all the signals hired that year. It was a fun idea to explore, but in the end, a bit too distracting.

For most of the process, I was exploring a modular logotype. Each page request would show a different level of “noise” applied to the logo. Much like the 37signals rings, it was more of a visual distraction from our posts themselves.

People often ask, “how do you know when to settle on a design?” It’s through these rounds of explorations—seeing the good, the bad, and the ugly—that the right directions start to surface.