"Sheet of Paper" Design - What is it? - Design Piracy Series

So we've covered tabs, and headers, and the fictional 37signals teacup. We've been dancing around the edge of the pool all day long and now it's time to dive in.

Let's talk about the now famous "sheet of paper" design that 37signals claims as their own.

First, some examples

This blog is a great example of "sheet of paper" design in action.

What I'm referring to is a white content area (the sheet of paper) set in a sea of grey (or any color - soft grey is popular because it's a nice neutral tone). Naturally, the "paper" can be fluid or fixed width and as tall as necessary to fit the content; that's a given.

Lighthouse	Beast
Slate	Boxcloud
Highrise	AutoRaptor

These are silhouettes of some of the same apps we've been talking about so far in this series. You'll notice the headers are all pretty uneventful... I probably should have cropped them from the snaps.

You'll see some of the designs are more "frilly" than others... The apps I've designed from scratch or been involved with (Beast and AutoRaptor) tend to keep it simple where as apps like Lighthouse and Boxcloud mix things up a little more by adding multiple bars of color, additional boxes of content, etc. At the core all these examples are still "sheet of paper" designs.

Here it is again, this time the bare minimum:

Did 37signals invent "sheet of paper" design?

I'm sure 37signals would like to claim that honor... but I don't know. Obviously fluid two tone/two column designs have been around before Basecamp was introduced... but did someone else float the content area before 37signals thought to? If you have the answer, please share it in the comments.

Why do people seem to like it so much?

It's clean, it's uncluttered, it provides natural design constraints, and I think it helps encourage minimalism and creativity within the space available. I've worked with apps that try and "box in" the entire layout and I just feel trapped... I've worked with apps that use 99% of the width beneath a tab bar for one giant column... and I just feel lost... I can't think with that much space.

Example of being boxed in (albiet from a website):

I think most designers (websites and web apps alike) recognize that one large column can be a bit daunting. That is why we see so many two column app designs.

Does 37signals have a copyright on sheet of paper design?

Update: I've updated this section to remove any direct quotes of Jason from e-mail correspondence as some have suggested that might have been bad form. I've tweaked the content a bit as well to support my new quotes. I do still mention the discussion, just not quote Jason.

In their design piracy post Jason states:

We’re often victims of design piracy. Roughly once a week someone emails us with an anonymous tip that someone has ripped off our “UI look and feel” and is using it for their own site or their own app. It’s amazing what people and businesses think they can get away with.

From the Highrise Terms of Service:

The look and feel of the Service is copyright©1999-2007 37signals, LLC. All rights reserved. You may not duplicate, copy, or reuse any portion of the HTML/CSS, Javascript, or visual design elements or concepts without express written permission from 37signals.

In an e-mail discussion I had with Jason regarding Pastie and Beast he expressed frustration with the similarities to 37signals products and again mentioned that their designs are copyrighted. Of all the apps we've been discussing though I actually think Beast and Pastie happen to be the least similar to 37signals overall "look and feel".

It helps that they both have a much simpler header and that neither are very complex apps. Less on screen means less similarities. The most obvious thing that Pastie, Beast, and 37signals apps have in common is we're all using sheet of paper design. Judging from my e-mail exchange with Jason I think that 37signals does seem to interpret their copyright as also referring to sheet of paper designs in general.

Does 37signals have a copyright on sheet of paper design? They certainly seem to think they do.

Seriously, I'm not just evading the question. I'll be discussing the legal and moral angles of this in the next post or two. Stay tuned.

Comments

[PeterB]

I like this serie, but I have to say that AutoRaptor does indeed looks alot like highrise. I can understand the objections made by 37signals / Jason.

[John]

A wise CEO once told me... "when you care enough, you steal from the best"

Jason should be flattered :)

[Josh Goebel]

I don't condone theft. I just don't think any stealing has taken place. I don't think the web apps we've been discussing have stolen from 37signals, despite similarities in design. Inspired perhaps, stolen, no.

I do agree with you that Jason should be flattered if 37signals is inspiring an entire community of develops to return to simpler, cleaner designs. That isn't a bad thing.

[Lars Fischer]

The paper sheet is not "theirs". Look at this rather old template: http://www.intensivstation.ch/files/templates/temp01.html

As far as I remember, this was before 37signals. And the text right says that this layout was originally taken from alistapart.com.

[Kevin Milden]

The paper sheet design doesn't scale. It's silly and ancient. When you borrow, try to borrow the best stuff. The sheet of paper is not it. Personally, I have stayed away from this design convention not only because it is limiting but because it was overly popularized and beating to death by 37Signals.

Ask around. People like sites and apps that have scalable widths.

The other is the product matrix. I hate them. They are complex and stupid. Just offer the biggest plan at the cheapest price possible. Anything else is just an attempt to get people to buy things they don't need. It is deceptive and far from simple. Ask some one to sign-up for basecamp that isn't savvy and watch them freeze up when they reach the cockpit of plans to choose from.

http://newleaders.com/discussions/112-easy-to-buy

[Josh Goebel]

Beast is fluid. Pastie is fluid. Not every sheet of paper app I've worked with is, but a lot are. I think 37signals limits Backpack to a fixed width on purpose... Highrise and Basecamp stretch to how ever much screen real estate you choose to give them.

I'm not saying _everyone_ loves (or should use) sheet of paper design. I just personally happen to think it works very well for web applications in general. Your experience may be different of course. :-)

You have an interesting point on product plans... I find them helpful and pick the right plan usually... but then perhaps I'm better at gauging what I need and don't mind upgraded later... although I think I've had to upgrade my Typepad account twice... each time to get a new feature I needed - so I feel a little bit of your frustration. Although I think it's because the Typepad matrix is much more complex than the average product matrix.

I'll check out the link and see what I think.

[Charles Melbye]

Wow, AutoRaptor *did* blatantly steal CSS designs from Highrise/Basecamp, but 37signals trying to make the sheet of paper design only theirs is rediculous.

[Josh Goebel]

If you have found where CSS was lifted directly from Highrise/Basecamp, please let me know where and I will have a look. That should be pretty much _impossible_ though as all the HTML and CSS was written by hand, not stolen or copied from other sites.

All the products we've been discussing that I've personally been involved with (AutoRaptor, Beast, Pastie, etc) have their own original HTML and CSS created with my blood, sweat, and tears (due to IE).

Nothing has been stolen, but I'll be talking about theft as it applied to this topic soon in an upcoming article.

[Charles Melbye]

@Josh: Sorry if I wasn't clear, I meant more that AutoRaptor stole the _look_ of Basecamp (almost exactly, by the looks of it), but I didn't mean to be offensive and say that you basically copy and pasted their HTML/CSS :-)

[Josh Goebel]

Please see my latest post on copyright. I wish people would stop using words like "piracy", "theft", or "stolen" in this discussion. It's a serious accusation. To say that someone stole something is to call that person (or company) a thief.

No one can steal 37signal's design or their "look and feel" unless 37signals owns it or has rights to it in the first place. As far as I can tell, they do not.

I don't enjoy being called a criminal and I bet most others don't enjoy it either. So lets stop the name calling.

[Charlie Melbye]

Well excuse me then, forgive me for pointing out the obvious in that AutoRaptor's layout is a photocopy of basecamp. You can say all you want about this "serious accusation", but what it all comes down to at the end of the day is that the previous mentioned (obvious) fact is true.

[Josh Goebel]

Charlie: The issue isn't how similar or dissimilar an application is to a 37signals' app... but whether the new app actually violates 37signals copyright. If you continue to read this series you'll find that "look and feel" isn't something someone can copyright... even if all web apps had a 37signals "look and feel" nothing would have been "stolen" from 37signals.

I don't have any issue with 37signals saying "look, people are using our look and feel everywhere and we don't like that".

What I have an issue with is: "hey look, people are STEALING our look and feel and infringing on our copyright". This statement is simply not true.

[Charles Melbye]

Okay, it may not be against their copyrights, but don't you find it strange to emulate another site's design almost pixel for pixel to use in your own application?..