January 2, 2013

Reflecting upon the Signal vs. Noise Redesign

Web-based app maker 37signals’ Signal vs. Noise (SvN) is one of a select few blogs that I frequently visit. SvN underwent a redesign last Fall by designer Mig Reyes, who joined 37signals near the start of the same year. Besides being an avid user of 37signals’ apps, I know Mig through his inspiring leadership of CreativeMornings in Chicago.

Now that there’s distance from the October 2012 launch of SvN’s redesign, I wanted to share some first impressions, evolved over time:


The large headline and body text sizes were immediately obvious, even more so displayed on my MacBook Pro (13 in.).

I was used to viewing more of the mass of a post in SvN’s previous design. The redesigned post is augmented by default, which means that the focus rests almost exclusively on the most recent post. I found this change jarring at first, but I learned to like it. If you incorporate the context of 37signals’ history and attitude, you wouldn’t be surprised by 37signals’ decision to elevate the text’s stature.

This change reminds me of Paul Rand’s last book From Lascaux to Brooklyn (1996). A distinctive characteristic was the prose, typeset at a larger size, easily compared to the design of his previously published works.

There are angles, of course, to interpret this design decision. The angle I’ve settled into was that it helps to clearly present, even provoke, a point of view, with the volume raised (but not to 11). Fast forward from 1996 to the present, Josh Brewer, principal designer at Twitter, tweeted: “I am pretty sure that making your text as legible/readable as possible is the most basic thing you can do to improve the experience 100x.”

Typographic Layout and Details

A blog is essentially a spine of information. The pattern of minimal blogs is its central axis of reading: one column, to view, to read, facilitated by generous margins. Reinforcing examples include Chicago-based Ideal Project Group’s blogging platform Brytter, web designer and publisher Mark Boulton’s journal The Personal Disquiet, and web culture series the pastry box project. From Allen Hurlburt’s classic book Layout: the design of the printed page (1977), “Symmetrical balance has produced page designs of rare beauty, and the aesthetic conditions that inspired classic page design continue to set the pattern for a fair proportion of contemporary design.”

Finding influence again in printed matter, Frank Chimero’s book The Shape of Design (2011) showcases a well-justified, albeit dignified, column.

Paul Rand’s design of author Thomas Mann’s The Tables of the Law (1945) also utilizes a single column with well-distributed kerning.

A detail, carried from the printed interface, is the indent, shown in both examples. Indents also play a role in SvN’s redesign. Block paragraphs were utilized in its previous layout, where a line space marked the start of a related group of thoughts within a post. For indented paragraphs(1), the line space is reduced to a notch of space. Sounds and looks like simplification.

Another detail is the series of signal-wave forms, which punctuate the prelude of each SvN post. They also add to the total vertical form of the blog. But by themselves, they’re delightful accents, like these ornaments from Our Deportment, a book about etiquette from 1881.

Speaking of etiquette, some of the criticism toward the redesigned SvN was unsurprisingly swift. Any effort—even redesigning a blog—consists of many, upon many, decisions, both seen and unseen. Sensing this underlying dynamic, and thereby giving something a definitive chance to be used, is not everyone’s M.O. In his blog post “Stop telling us how much everything sucks,” user experience designer Rian van der Merwe encourages proactive attention followed by articulation:
“It’s easy to write a few paragraphs about how much something sucks. You know what’s difficult? Recognizing and respecting complexity. Giving people the benefit of the doubt and trying to understand why they made the decisions they made—whether it’s related to business, design, development, or anything else.”
One of my favorite quotes is by industrial designer and professor Jan Michl: “Design is redesign.” The add-on: Redesign is reflection.

(1) Paragraphs after the headline are not indented. This follows Robert Bringhurst’s recommendation in The Elements of Typographic Style: “The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.” Adapting Bringhurst’s classic book to the screen, designer Richard Rutter made The Elements of Typographic Style Applied to the Web.

Photos by Nate Burgos