We’ve been sharing our process and company values on Signal vs. Noise since 1999. It’s where we’ve planted the seeds for Getting Real and REWORK. And for many readers, it’s their first taste of 37signals. Yet, we haven’t given the look and feel any serious attention since 2005.
So I decided to tackle a much-needed redesign. In planning the overhaul, I wanted to focus on creating a beautiful, clear, focused reading experience.
Designing Outward
“Blog” has such a temporary, read-and-forget tone to it. On SvN, we take our time writing and editing every article. So rather than treating this like a “blog,” I shifted the mindset to that of a tenured publication. So, the entire redesign process started with typesetting the post, and designing outward.
Instead of poring over other blogs, I spent a week studying books, magazines, and of course, Bringhurst. Capturing the right feel for body text was step one—it sets the tone from here on out.
Perhaps it’s me, but there’s something about 13px sans-serif faces on the web that feels like “my Rails app just spit this out of a database.” I want you to read articles, not text rendered on a screen. Kepler, set at a comfortable size, wound up being a beautiful serif that added the touch of humanity I was looking for. Setting the headlines in Acta added to the look I was going for, and Freight Sans wound up being a great sans-serif pairing.
I’d like you to actually read this
More often than not, company blogs are littered with pitches for their product. I don’t want to throw new job opportunities at you right away. I don’t want to ask you to subscribe to our RSS feed when you haven’t even read anything yet. These rules informed the layout: content first, everything else second.
I often hear that mobile experiences tend to feel more focused than the desktop counterpart. I agree, mostly. But there’s a stark similarity that mobile devices share with physical books that desktop browsers don’t: a consistent canvas size.
Designers, especially those transitioning from print to web, yearn for that controlled page size. We’re lucky to have it on phones, but the varying sizes of desktop browsers throw us in a loop. Despite that, I was bullish on keeping the width of the desktop text at a comfortable 65-70 characters per line no matter how long your browser becomes. I was steadfast in keeping the content on top—not hugged by filters, settings, search bars and ads. More space in your window doesn’t mean you have to fill it.
Responsive as I go
Signal vs. Noise is a Rails app. I got my hands dirty digging through every view, restructuring the markup as I went along. (And Noah fixed all the things I broke. Thanks Noah!) During the design of each page, I styled mobile views at the same time as the desktop. Writing custom Sass @mixins for responsive views sped this process up immensely.
section.comments {
border-top: 2px solid #CCC;
border-bottom: 2px solid #CCC;
margin: 1.5em auto 0;
padding: 1em 0;
width: 100%;
@include respond-to(768) {
width: 660px;
h2 { font-size: 1.35em; }
}
}
Like JZ mentioned, while the multiple @media query instances aren’t ideal, it’s a better trade off with clarity in code.
Designing in the open
There’s plenty more I’ll share, including the concepts behind the waveforms, the language, the new writers page, and our new post editor. This may be just a blog, but it’s our blog. Our ideas. They matter to us, and we want you to feel like they matter to you. We’ll continue to make this—and the rest of our public facing sites—better. And we’ll continue to design in the open.
ploogman
on 19 Oct 12I would like to hear more about this redesign process as I am finding the font size, whitespace, etc. to be overpowering and actually distracting to read thus far. I feel like U am reading a well designed wedding invitation with great typesetting. The problem is, reading an article is not the same as reading a brief wedding invitation. Anyways, maybe everyone else loves the redesign but I find it to require a lot of constant scrolling. I like removal of all the clutter, for sure, but I feel like the content is stretched out so much now it is not a nice reading experience for me. Now, I read primarily on my iMac (large screen) so perhaps this is more designed for mobile/iPad? Anyways, more posts on this will be interesting. Thanks
Laidlaw
on 19 Oct 12’...there’s something about 13px sans-serif faces on the web that feels like “my Rails app just spit this out of a database.”’
That’s the best line I’ve read all day!
charlie osmond
on 19 Oct 12Your design is very A/W 2012. I like it.
I’m sure we’ll see lots more like this. In the ‘Svbtle’ [sic] style. Or did someone else start the trend?
KeepCalm
on 19 Oct 12I am finding this re-design actually very calming. This blog somehow brings order into my life. Seriously. The first time I read this re-designed blog I was motivated to clean up my room and get my workstation in order. Less clutter —> More Work. Thanks for such beautifully designed, to the point, no-BS blogs.
ploogman
on 19 Oct 12is this the inspiration? it is the inspiration for “svbtle” for example http://drawar.com
I guess when I come to SVN, I want to read something and not necessarily looking for a zen experience unrelated to the content itself
MR
on 19 Oct 12Charlie, I’m not sure who started the “trend.” I try not to follow “trend” as it is, but I will say that I think Oliver and iA are totally doing it right.
Bryan Sebastian
on 19 Oct 12Mig, when you say you “decided to tackle” this, was this during the month where everyone at 37s was allowed to work on whatever they wanted? I’,m curious to see if this effort came out of that (great) idea that JF had. If so, that month of freedom to choose your own project has already paid dividends for 37s. Either way, I really like the re-design.
MR
on 19 Oct 12Bryan, this actually happened after the month we took to ourselves. I knew I wanted to pitch redesigning this to Jason soon after I was hired, but we were in the heat of the new Basecamp launch. During the month off, I worked on internal apps. Thanks for the kind words!
Dan
on 19 Oct 12Since SVN is a multi-author blog, I’d suggest keeping the author information at the top of each post. It looks like it’s there on the main blog page, but when coming in via a feed reader, I couldn’t tell who was talking.
ploogman
on 19 Oct 12Yes iA is cool, but spartan writing is not the same as reading other people’s articles that are interspersed with images. I will try to get used to this but I feel less motivated to read SVN each day because of this new design. That is the problem. It is totally different, and that is a feat, but I am not getting the feeling that I like it yet and it is more than just adjusting to a change. I guess test for me will be if I miss a few posts and then come back to review what I missed and then I can maybe get a better gauge. As for now, I had already read all other posts prior pretty much so I did not feel the need to scroll yet further.
Panr
on 19 Oct 12Unfortunately, SVN needs some fixes for iPad portrait view and… no Retina support? :-(
Justin Reese
on 19 Oct 12I love it. Great work, Mig.
I do agree with Dan. The detail page should show the author name and date under the headline, just like the index page. This is a comforting bit of metadata that I often seek out when reading an article. Who wrote this? How old is it? These questions grow more important over time. Five years from now someone will follow a link to a 37s article and author/date below the headline lets them orient (orientate?) immediately. And even for us regular readers, it’s a useful handle to grab the article by.
Nick
on 19 Oct 12Looks beautiful, but on my phone (Galaxy S2) I choose to read it through Google Reader: on the site margins are too large, font is too big, resulting in uncomfortable too few words per line and jagged right edge of text. If not for this post, I’d think that your design is desktop only.
Stephen
on 19 Oct 12I think this is really attractive on my laptop. On my iphone I’m seeing 4 or 5 words per line in portrait mode and it’s kind of tough to read. It also seems to have some extra space in the right margin, which means the page horizontally scrolls a little – this is kind of annoying.
Matt Henderson
on 19 Oct 12As I tweeted to Jason earlier today, I don’t think that first-line-indented paragraphs, as opposed to spaced paragraphs, work very well when so many of the paragraphs only contain one sentence — as is the commonly the case with SvN posts (like the one today about Jeff Bezos).
Apart from that, as another person commented, there’s something about the design, which I’ve not quite put my finger on, that detracts from its readability — at least for me. I’m having a hard time figuring out what that is, because the design approach you described seems, to me, spot on.
Alice Young
on 19 Oct 12I’m going to take a stab here and call B.S. on this “redesign.” It’s a joke, right? You’ve posted such fake opinion pieces here before. You’re just taking it one step beyond by actually implementing the bad design. By the way, I LOVE the unreadable headline font – and the hideous green “post this comment” hover is hysterical! I gotta go now, my eyes are starting to hurt.
Paul Lloyd
on 19 Oct 12Oh my, this is beautiful! I’m liking this trend towards single column content—trend in so much as I’m seeing it on a lot of the other blogs I read.
One minor criticism, and echoing Dan’s point: I’d also like to know who’s talking at the start of the article. This and other posts tend to have a very personal perspective, so it would be nice to know who’s perspective that actually is.
Dennis
on 19 Oct 12Great job as always. Looks awesome on a retina.
MR
on 19 Oct 12Nick and Stephen, thanks for your thoughts. I’d like to think of design as an ongoing process, not a final product. That said, I’m eager to keep tweaking and refining. Shipping—and getting something out there, no matter how raw—helps you realize the real priorities faster than laboring over something in the dark.
Hashmal
on 19 Oct 12I find the posts difficult to read. Text is big, yes, maybe too big, but it’s not that annoying. What is disturbing is that I am unable to “scan” the page as there is so few content on one screen. I find the size of comments way, way better.
Alex Dieulot
on 20 Oct 12What I especially like about this design is that you have to click to show the comments and that lets you evaluate the article’s length, on others blogs I must scroll before beginning each read.
Eric Hayes
on 20 Oct 12Absolutely stunning. I love the type choices and the sine waves are right on brand. Looks great on my iPad in portrait mode.
Bruno
on 20 Oct 12Oh wow, I’m in love with the troll styling for comments.
Sanat Gersappa
on 20 Oct 12Beautiful.
Rafael Madeira
on 20 Oct 12It’s actually pretty bad, I’ve been meaning to tell you guys this.
Jukka Lariola
on 20 Oct 12I really like it, the only question I have is why you – as minimalists – have Happy XXXday top left? Seems really useless to me, so what’s the thinking behind that?
endo
on 20 Oct 12You 37s waste so much time talking about yourselves, decorating and pleasing the fan boys, that you tend to forget what needs more of your attention: the services we actually pay for. I’m a customer from the early days and I don’t remember the last time you have innovated towards improving my user experience.
You need a department of self-criticism.
OCP
on 20 Oct 12I second Dan’s comment about having the autor name at the top; pretty early on in this post there was an ‘I’ and I assumed it was Jason until I got to the end.
How about having the author’s name in small type at the top of the post and then the picture/profile section fleshed out at the bottom?
Anonymous Coward
on 20 Oct 12Can you setup a favicon that works with the iPhone? When I save SVN to my home screen now I get screen shot of the website and it looks terrible.
GeeIWonder
on 20 Oct 12Congrats. Interesting, and a brave thing to do. I’d of been worried about design by committee (though I know this is minimized with trust and goodwill). Still, any compromises to date you’ve had to take on?
Also, do you expect the content to change much. There’s truth to the whole medium/message thing.. for example the new abstract/hook/elevator pitch .. do you think that’ll change the type of posts? Is this a deliberate intent, a considered side-effect or something you’re not anticipating at all?
Luis
on 20 Oct 12The new design, layout and typeface are awesome. I have to say it is very iA-like. Fresh, clean, very readable. Good work folks.
machbio
on 20 Oct 12people might talk about trends, inspiration.. I would say it is just the way 37signals is with all its designs.. the blog was the uglier product (also campfire and highrise still).. this speaks volumes of what 37signals would do ahead of pushing (shoving) things to users.. great user experience, please improve the rate of the content production… @MR .. please look into Highrise and Campfire please…
Emil
on 20 Oct 12It looks really beautiful. Time will tell if it’s easier or harder to read/scan articles.
Too bad its so slow. I’ve tried both Safari and Chrome on my 2010 MBP and it’s very laggy to scroll, which kills the reading experience.
Sean
on 20 Oct 12Loving the groovy signal graphic.
For me, at the moment, the sign of a good blog is whether I hit the reader button in Safari, to get rid of the clutter and read something beautiful.
I’m not hitting the reader button on your new design :)
One thing I would change this the comments not being displayed on the blog post page. It’s pretty customary to have the comments visible on the actual post page. I think you’re losing a lot of content here, for me the comments really add to the material of the post and encourage me to comment too. That part of the design almost makes it feel like you’re saying the comments aren’t important.
ML
on 20 Oct 12The text is hard to read is because the text is not black – it’s #333. Dark gray on a stark white background is not easy on the eyes. Combining this with a downloaded font that the browser may or may not kern properly (it looks like it doesn’t) does not make good body text. Stick with safe – Times or Georgia #000 if you must use a serif font. A complimentary header should be a heavy sans-serif. The one you chose has very thin horizontals that tend to disappear when scrolling. Just my 2c as a professional.
Rajeev
on 20 Oct 12More than my MacBook, this looks absolutely stunning on the iPad. Great job!
itstinks
on 20 Oct 12Fully agree with ML. Very hard to read. Requires effort which I’m not prepared to give. Adios.
Ploogman
on 20 Oct 12Well, now I’m on my iPhone and it took me forever to scroll all the way down to Post a comment. I still feel the same about my previous comments which I’m sure you would like to ignore because they are not flattering I guess? Anyways, this design is so much worse on my iPhone then your previous old dated design.. At least with that I could zoom in if I wanted to or keep distant with a lot of content on the screen but with this new design everything is so big to start with. Seriously, I don’t think I would be comfortable coming to the site on my iphone until this gets changed to something else. I feel like this experiment has not been a success thus far. Sorry.
Matt O
on 20 Oct 121. Not a fan of the new design either, although I can see where you’re coming from. I think it could be improved in a few areas – most of which have already been mentioned by others.
2. Your “You may also like” feature at the bottom is buggy. You might want to exclude the current post from showing in that list.
3. I lost a whole lot of respect for you guys after seeing how you treat legitimate comments that don’t please your ego. Marking critique as trolls is ridiculously transparent and doesn’t exactly portray you as the professional company you pretend to be.
Xavier
on 21 Oct 12What about Website links for comments? Is there a reason that feature was removed? When can we expect to see it back? Thanks!
Advertiser
on 21 Oct 12And advertisers on the Deck are saying… ‘bye bye’. We call that premium placement on the bottom of the page as an afterthought. You might as well remove yourself from the deck based on the design philosophy to be authentic.
Waiting to be trolled.
Alex Mingoia
on 21 Oct 12Fantastic job on the type-setting and font choices. Ultimately, I think the new design assumes too much about the person reading it, and fails to utilize screen space in an effective manner.
The absence of a sidebar makes navigation very frustrating. Assuming the user wants to read the first article at the expense of any other goal detracts from usability. You should have a side-bar with the actions in your footer for appropriate screen-sizes. As a laptop user, I’m quite frustrated by often having to scroll to the bottom of the page when I have plenty of white space on the screen for both an article and a side-bar.
The comments are where it’s clear you’re choosing to sacrifice usability to adhere to a particular aesthetic. The form to add comments lacks common and important visual cues like borders to visually delineate inputs. The input labels and help text lack so much contrast they are laborious to read. The comments have similar visual weight as other elements on the page. It is hard to quickly locate the comments link by scanning the page.
In summary, I think the aesthetic and type-setting are fantastic, but the UI isn’t though-out and as a result the design assumes too much.
Andre
on 21 Oct 12Another vote for Dan’s suggestion of putting the byline at the top. It’s distracting to read a post written in first-person on a multi-author blog, only have to get to the end of the post to learn who “I” is. Based on the design focus of the content, I suspected it was Jason rather than an employee.
I do like the emphasis on keeping the column width to a 70-character maximum, but I prefer the more balanced line height of Georgia over Kepler, which looks a little stretched.
The one change that I can’t stand, which I’ve seen other print-inspired blogs adopt recently, is paragraph indentation. I much prefer block paragraph style. Indented paragraphs without whitespace between them work well for books and magazines, which are typically held two feet away from the reader’s eyes. Monitors are typically farther away, and a wall of unseparated text looks cluttered. I think layout for monitors is better modeled on posters than books, at least when it comes to body text.
Kevin
on 21 Oct 12Thanks for sharing your design process. I like the font size, but I’m not a big fan of Kepler for the body. Also, I would probably decrease the line hight (currently 1.65em) and for desktops, slightly increase the number of characters per line.
Simon
on 21 Oct 12Great work Mig and 37s, love reading your posts. Sad some people don’t see innovation when they choose to read it for themselves ;)
Simon
on 22 Oct 12Can’t seem to see comments on my htc android…
ploogman
on 22 Oct 12Simon: “Sad some people don’t see innovation when they choose to read it for themselves ;)”. Wow, I guess nobody can have an opinion here safely without being called sad or a troll. The “trolled” comment actually sounded plausible to me. I could see this being a farce on the latest minimalist/print designed blog themes.
I guess I should add that the illustration for the the troll avatar does not work either. There is a difference between illustration and graphic design. Illustration can be part of a graphic design but not all graphic designers are successful as illustrators. The troll illustration and the JF illustration do not work for me. Sorry.
Also, there is a difference between print and internet. That is why we always talk about making things live as soon as possible to see how things work together and interactively. What I am seeing with this new blog design is something that feels like it was done statically. Sure, it might look good as a book design – reminds me of the grand whitespace on Rework for example – but that is the problem: that is a book. With airy brief insight bits, each spanning one or two pages with a big illustration. A blog does not work well, in my opinion, when deployed like a book. A blog is interactive, there is scrolling to consider, backlighting to consider, etc. Do you know how much I had to scroll to get down here to make a comment?
Sowell Man
on 22 Oct 12If this is “beautiful,” I don’t want to see what “ugly” looks like.
U. N. Owen
on 22 Oct 12I’m still in the phase to get used to this new design, one thing I felt missing was the author name at the beginning of the articles. I thought this article was by JF until the end.
To fix this issue I just wrote a small greasemonkey/Tampermonkey script, that diplays the author in a smaller grey font under the headline.
If some one wants to use or modify, it feel free to grab it from this gist https://gist.github.com/3933772
Any comments and enhancements are welcome!
indi
on 22 Oct 12I’ve been reading SvN since the beginning and I like the change. It is refreshing with lots of breathing room. It looks great on my iPad and iPhone as well. I can see why it would annoy some readers though. And I don’t think it’s just a case of some people not liking change. You have made some specific choices here, and that’s a good thing. I hope those who are annoyed will give it a chance. I imagine you will make adjustments as you evaluate thoughtful comments — even some of the unthoughtful ones.
Thanks Mig.
S
on 23 Oct 12This reminds me of Tumblr, which was expressly designed for short-form content and really strains under the weight of long posts. This is almost painful to look at on anything other than a mobile device now.
I hope this is just an experiment and 37s is evaluating whether this new format is usable. Surprised they didn’t do some A/B testing on it before deploying it wholesale. Forms without borders? What were you thinking? And that stuff at the bottom? All noise and very little signal, though honestly most people will stop scrolling once they reach the author bio and never even look at that stuff… including the ads which are now worthless.
It just comes off as a self-indulgent attempt to be avant-garde.
Ganesh
on 23 Oct 12Previous design was actually very simple (and very beautiful). That is lost – for my screen at least. Scrolling experience is bad generally on most devices. In current design, one needs to scroll after each one and half paragraph.
Jonas
on 23 Oct 12Could you please a a “wide” option so that I can get more than 33% content on my wide screen monitor? This narrow column works great for shorter entries, but I come here for your more in-depth articles and they’re now a chore to read.
ploogman
on 23 Oct 12I agree with “S” above and others who are finding this painful, and no, its not just a matter of getting used to it for me. I welcome change but this change seems to be in the wrong direction. I hope it is just an experiment. This seems dischordant with design values and patterns employed in the applications and on the home page itself for 37 (which has a lot of white space, but laid out very well)
Ilya Belikin
on 23 Oct 12It`s just woow. Yo did it agian. Great work!
Jamis Charles
on 23 Oct 12Love it. Easier on the eyes, and the brain.
Gerald Irish
on 23 Oct 12This redesign while pretty, is pretty dysfunctional. The text is so big and line spacing so wide that it forces users to do a lot of scrolling and makes it particularly difficult for people on mobile devices. The narrowness of the text makes articles even more difficult to read.
The redesign may be easy on the eyes but it’s hard on the task that the user is actually trying to accomplish, which is read the blog.
Steve
on 23 Oct 12This design is far from responsive, it may scale smaller quite fine, but when going to a desktop it scales up quite poorly. My browser window is less than 60% of my overall desktop and I just see so much wasted space on the margins. Also the large text and line spacing are painful on my eyes. I can feel eyestrain setting in as I type this. The large text and high line height scream, I WANT MORE ROOM TO PUT ADS ON THE SIDE, to me.
The border less form fields may be forward thinking, but there is something to be said for sticking with what people know. Finding where to enter comments was difficult for me. I have don’t have an easy time picking out subtle color differences like the light grey hints about where to click. Overall this makes me much less likely to read this blog. I’ll keep coming back, but I won’t be consuming the content again until I see another redesign.
Steve
on 23 Oct 12Reading through the comments showed me the text is #333. Unchecking that box in firebug made it much less painful for me to read. Reducing the contrast of text to the background will hardly ever do anything to increase readability.
Steve
on 23 Oct 12Using the stylebot plugin for chrome, I’ve created the following so I don’t miss out on the content due to the design, because the content is oh so good.
http://stylebot.me/styles/1801
The style sheet isn’t the most efficient, as I was just clicking around on elements to find the styles I wanted to change. I am pretty sure there is a top level color definition that I could have redefined.
Glenn
on 23 Oct 12I am a long-time lover of Signal vs. Noise content and I loved the old style, not so much the redesign. I feel that style is giving way to readability. The thing that REALLY bugs me is the indents. Sometimes there are indents, sometimes not. Not working for me. I hope you are not planning on bringing these changes through to your products because you will lose business if you do. Shouldn’t this blog reflect the simplicity of your products. Readability is king!
Glenn
on 23 Oct 12I meant to say that I feel that readability is giving way to style.
dms
on 24 Oct 12Having such little content on the screen is actually quite annoying. Only 4-5 sentences fit on a page on my laptop screen, and some of the images take up more than a page. If I wanted the internet to look like it does on my phone, I would use my phone all the time.
paul
on 26 Oct 12I usually have to increase zoom on sites but this is the first one in memory where I had to zoom out to read comfortably. I’m on a 24” 1080p OSX. Is my hardware not fancy enough to see things the way Designers are any more? Actually the letter-spacing, line-spacing and colour of this textarea is a lot more comfortable than the body text.
This discussion is closed.