Pastie << self

John Gruber agrees with me about "look and feel" protection

I have a warm fuzzy feeling inside. In comments recently regarding Apple's lawsuit against HTC John Gruber closes with:

I can’t speak to the hardware and “architecture” issues, but I despise the idea of “user interface” patents.

I've often lamented how sad it is to see everyone trying to copyright their "look and feel". I've clearly pointed out that you'd really have to patent such things to have any type of legal protection. Not that I'm suggesting these companies start patenting their app's "look and feel". I agree with Gruber that you should not be able to protect such things. It stifles innovation.

And, yes, I intend to keep harping on this periodically until said companies (they know who they are) get their heads out of their asses about copyright. They're welcome to read my lengthy article on the subject in their quest for understanding. :-)

Want to learn more?

If you're interested in learning more on the subject you can read my entire Design Piracy Series (start at the bottom) where I tear this silly "my web app look and feel is copyright me" argument to pieces.

Theft and how I feel - Design Piracy Series

In this whole series I'm not sure I've ever stopped to actually articulate my views on theft. I'd like to do that now to make my position clear.

Note: This is not an attempt to define theft in any absolute sense. I have included examples, but no definition. This is just me sharing my views regarding theft and stealing as it relates to issues we've been discussing and according to my own internal moral compass.

I think stealing is wrong. Taking a physical object that is the property of someone else and calling it your own is "bad" and usually illegal. I think this holds true even when that property is digital; like a piece of software, or a digital copy of a song. It's still stealing in my mind. If I'm going to listen to a song I'll pay Amazon or iTunes the $.99 to own a legal copy of that song.

I don't steal music or pirate software.

And I don't just think these things are wrong solely because it's the "law". I have no problem breaking the speed limit every day. I guess it comes down to money. If I illegally download an MP3 I am denying one of the companies that sells musically legally that $0.99. In my head it's like I just bought the song from them and then stole the $0.99 back. Not to mention I deny the artists their royalties. I know not everyone sees it that way, but that is how I view it.

When I speed I don't steal (directly or indirectly) from anyone... in fact several time's I've actually contributed to the local economy by paying not only speeding tickets but also lawyers fees so that those speeding tickets don't infringe on my ability to continue to drive fast in the future. :-)

Now lets look at four scenarios quickly and I'll tell you how I feel about each...

I feel cloning an app shows bad taste

I think cloning an app tit for tat, pixel for pixel, word for word, feature for feature, design for design, tab for tab, button for button is just bad taste. It shows no originality, no vision, no insight. I can't think of any reason not to use the original if it was reasonably priced... but wait, a reason cometh...

Basecamp has evidentially had some exact clones; just localized to other languages... I can understand how 37s not localizing leads to that happening. Unless the clones were using Basecamp's HTML, CSS, or JS though I'm still not sure you'd have a case of copyright infringement... it would come down to the copyright-ability of the body content ("word for word") I think.

Copyright violation or not I still think this shows bad taste. It's not a project I would start or get behind.

I feel cloning and then expanding an app is definitely "less bad"

So... no gantt charts in Basecamp? What if a company makes an exact Basecamp clone and then starts to add complex features 37signals has said "no" to? If no code is stolen... isn't this just good business? Like building a bigger or faster hard drive than the competition? Or the first hard drive with a built in memory cache... This still feels a bit shady to me though. Mostly I think it's the implied "intent to clone completely" that rubs me the wrong way.

I feel writing a similar app from scratch is FINE

So lets say I need a simple address book app and I just don't care for Highrise or it doesn't have all the features I need... I use sheet of paper design... I use design concepts and methodologies that 37signals and Apple have popularized. In the end it does a lot of the same stuff as Highrise and Address Book... adding a contact feels similar in all 3 of our programs...

But it isn't a clone... I didn't set out to clone 37signals or Apple... just to build a simple and clean address book using popular design concepts and methodologies. The screens are all a little different (or a lot)... there may even be features that 37signals and Apple never dreamed of or simply chose not to add.

I don't see how this is wrong.

I feel writing an app for an entirely different market is FINE

So lets say I need an app to manage my zoo... keep track of feeding animals, arrival and departure of animals, baby animal births, visitor tracking, habitat environments, etc... I use sheet of paper design... I use design concepts and methodologies that 37signals (and others) have popularized. My app has zero potential to take any customers or business from any 37signals product. In no way does it break the law, infringe their copyrights, or hurt their business.

Why should they be pissed off about it?

Ethics

The above are simply my personal beliefs on right and wrong in the context of this discussion. Now, what about ethics as a topic?

So I try and have a dialog with some friends about ethics and get hung up on stuff like this:

i mean there are still tribes of cannibals... is it ethical for them to eat people? are our ethics superior? because we are in the "majority"?

If that stumps you too then you see why I'm not ready to discuss ethics yet. And if you think that makes no sense... or you think "wtf does that have to do with ethics" then you also see why I'm not ready to discuss ethics yet. :-)

I know some of you are patiently waiting. You haven't been forgotten. It's still on the agenda to wrap this whole discussion up.

Github "look and feel" copyright also?

In our design piracy series we recently examined the following text found in the terms of service for various 37signals products:

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.

We've discussed this and the fact that you can not copyright look and feel. Unfortunately today my attention was drawn to one of my favorite new apps, GitHub.

I've used GitHub, and it's great... but today someone pointed me to the following excerpt from the GitHub Terms of Service (emphasis mine):

The look and feel of the Service is copyright©2008 Logical Awesome 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 Logical Awesome.

Seriously, guys? Almost everyone I've spoken with is decidedly against the spin 37signals is trying to put on copyright law... and here we have a well-known [or well on it's way] service with strong OSS ties following in their lead... Is this intentional? Someone please tell me it isn't.

I then decided to Google "look and feel of the service is copyright" and found an alarming 376 results.

Is this a case of simple borrowing from the 37signals Terms of Service word for word, or is there a more generic legal template that ALL these sites are using for their ToS? I spot checked maybe 10 of the search results at random and the "look and feel" clause was exactly the same, word for word.

In fact, the entire terms of service in several cases appear to be mostly the same with the only noticeable difference being the name of the service in question. (probably a lot more than "several", but who wants to read 376 ToS documents...? Not I.)

Anyone have any light to shed on this? I think it's a disturbing trend to find the "look and feel copyright" myth propagated (knowingly or unknowingly) by so many web apps.

Update: I actually just noticed one small difference... the the Highrise ToS actually specifically mentions "design elements or concepts"... the "or concepts" not being found in a lot of our original results (also not found in the Backpack or Campfire ToS)... so lets Google the latter part of the phrase: "visual design elements or concepts without express written permission"... 66 total results.

Update #2: I received confirmation that the GitHub ToS was indeed inspired by 37signals (one down, 375 to go). It was also suggested that I e-mail a member of the GitHub team with concerns regarding the ToS. Those concerns could then be raised when their terms of service are reviewed by a lawyer in the near future. E-mail sent. I hope it makes a difference.

From the close of my e-mail (and this goes out to those other 375 sites as well):

I hope GitHub isn't the kind of place that would mindlessly absorb another companies point of view on a much disputed issue without thinking it through for themselves. A few small changes could remove this bias completely from your Terms of Service. I think it's in everyone's best interest that an application's terms of service stick to defining terms of service and do not attempt to add to, modify, or misrepresent copyright law.

Idle thought of the day: I wonder if any of those remaining 375 companies are actually using a 37signals inspired ToS (including: "look and feel of the service is copyright") to protect a 37signals inspired "look and feel"? :-)

Is "look and feel" copyrightable? - Design Piracy Series

When we discussed patents last time we went straight to the source. We'll do that again for copyright law. Stay with me though, this is going to be a bit long to cover everything.

From the U.S. Copyright Office FAQ:

What is copyright?

Copyright is a form of protection grounded in the U.S. Constitution and granted by law for original works of authorship fixed in a tangible medium of expression. Copyright covers both published and unpublished works.

What does copyright protect?

Copyright, a form of intellectual property law, protects original works of authorship including literary, dramatic, musical, and artistic works, such as poetry, novels, movies, songs, computer software, and architecture. Copyright does not protect facts, ideas, systems, or methods of operation, although it may protect the way these things are expressed.

If we delve a little deeper into Copyright Basics we find a disclaimer of sorts and another list of protected items:

These categories should be viewed broadly. For example, computer programs and most "œcompilations"€ may be registered as "literary works"...

• literary works
• musical works, including any accompanying words
• dramatic works, including any accompanying music
• pantomimes and choreographic works
• pictorial, graphic, and sculptural works
• motion pictures and other audiovisual works
• sound recordings
• architectural works

The 37signals position

Before we delve any deeper lets have a quick refresher on what Jason has said on the matter (from the 37s blog):

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.

Update: Yes, I had originally quoted Jason here from an e-mail exchange with myself. A few people pointed out that could be consider bad form. So I am replacing that quote with the above content from the Highrise Terms of Service. I only quoted his e-mail to help clarify the 37s position on copyright but I think the Highrise ToS makes it abundantly clear.

It seems the assertion is literally that their overall layout, design, "look and feel", etc. is copyright 37signals. But are designs really afforded the same protection as words?

On what type of work is Jason claiming copyright protection?

Since he doesn't really say we'll skim the lists we looked at earlier to see if we can find any copyrightable items that might support Jason's claims.

I see "pictorial, graphic, and sculptural works", "literary works" (the disclaimer says this can be applied to computer programs and "computer programs" are also explicitly listed in the FAQ). A little more digging provides us with a longer list of literary works including such things as "online works" and "automated databases".

Perhaps a 37signals design could be considered a "pictoral or graphic" work so lets check out the Visual Art Works page as well:

Make sure your work is a visual arts work. Visual arts are pictorial, graphic, or sculptural works, including 2-dimensional and 3-dimensional works of fine, graphic, and applied art.

I don't see a lot of room there for web app "look and feel" but thankfully another detailed list of visual arts examples has been provided for us.

You can read thru it yourself, but the only related thing I see is "computer artwork" which is listed under "Holograms, computer and laser artwork". So that leaves us with the following to investigate further:

• computer artwork
• online works
• computer programs

We'll examine all three of the above one at a time.

Computer Artwork

The definition of artwork (as provided by answers.com):

1. Work in the graphic or plastic arts, especially small handmade decorative or artistic objects.
2. An illustrative and decorative element, such as a line drawing or photograph, used in a printed work, such as a book.

To me it seems that "computer artwork" as a term would be definition #2 plus "created using a computer". I don't think a login screen can be construed to be artwork; or a milestones screen, or a file upload form.

Even if I'm mistaken this wouldn't be a copyright on "design" or "look and feel"... but rather a copyright on the overview page, a copyright on the milestones page, a copyright on the file upload form, etc... sounds a bit ridiculous and doesn't sound like what Jason is asserting.

We'll drop this now as we'll find something later that will make it clear "artwork" isn't meant to be understood in this context.

Online Works

The U.S. Copyright Office regarding Online Works:

For all online works other than computer programs and databases, the registration extends only to the copyrightable content of the work as received in the Copyright Office and identified as the subject of the claim.

This seems specifically to exclude web apps since a web app is an online work that is both a computer program and a database.

Computer Programs

We're also given a specific definition of a computer program:

A “computer program” is a set of statements or instructions to be used directly or indirectly in a computer in order to bring about a certain result.

Copyright protection extends to all the copyrightable expression embodied in the computer program. Copyright protection is not available for ideas, program logic, algorithms, systems, methods, concepts, or layouts.

Interesting... layouts can't be copyrighted? Like sheet of paper layouts?

But it's about to get more complicated when we find the term Screen Displays...

The Copyright Office has consistently believed that a single registration is sufficient to protect the copyright in a computer program and related screen displays, including videogames, without a separate registration for the screen displays or a specific reference to them on the application for the computer program.

Notice it's "copyright in... screen displays", not copyright of screen displays. Let's keep reading.

This description will cover any copyrightable authorship contained in the computer program and screen displays, regardless of whether identifying material for the screen is deposited.

Now notice that it's not the screen displays themselves that are copyright but rather any copyrightable material contained there-in. In 37signals case this might include body copy of sufficient length, their tour videos, etc... In the case of a video game obviously it might include movies, computer artwork, etc. Obviously as stated above 37signals "layout" is not copyrightable.

The registration will extend to any related copyrightable screens, regardless of whether identifying material for the screens is deposited.

Here we learn that there exist copyrightable as well as non-copyrightable screens. What might a non-copyrightable screen be? Easy, a screen without any copyrightable content:

Where the screens are essentially not copyrightable (e.g., de minimis menu screens, blank forms, or the like), the application should not refer to screens.

For example the following Highrise "Add a new person" screen contains no copyrightable content that I can see (other than potentially the two longer phrases). It's the perfect example case of the above... it contains only navigation (de minimis menus) and a blank form.

It's also possible to separately register screens displays (in addition to registering the software itself) but note the examples given:

In such a case, the application should describe the nature of authorship appropriately, for example, “text of screen displays” or “audiovisual material.” Identifying material for the screens containing copyrightable authorship must be deposited.

Again we have the concept of a screen having copyrightable content (such as "text of screen displays" and "audiovisual material") but yet not being copyrightable content in its own right.

Why you can't copyright "look and feel"

I think it should be clear at this point that copyright explicitly does not cover layout... and it definitely doesn't cover "feel"... you can patent how something works and functions but not copyright it. I think the above material regarding screen displays makes it clear that "look" is out as well. Screens can be copyrighted but only in so far as they contain actual elements that are themselves copyrightable. Not the screen itself.

If you start to think of "look and feel" as a design methodology or a collection of design concepts you'll also start to see why it is not copyrightable (you can't copyright methods, concepts, or ideas).

The following I found interesting as well (although it makes perfect sense):

Registration of a computer program used in an online work does not automatically cover any visible or audible copyrightable elements that are generated by the code. To register those portions of an online work, the entire copyrightable content must be deposited.

I'm pretty sure this just means that MS Word's copyright doesn't extend to my .DOC biography, Garage Band's copyright doesn't include my new hit single and Backpack's copyright doesn't include the random thoughts and musings I keep there. The content created with software is it's own entity and would have to be protected as such.

Copyright and 37signals

Copyrights, like patents, also seem to be publicly searchable. Of course it doesn't appear strictly necessary to register your copyright to enjoy the protection of copyright law. However, you will need to register if you plan to bring a lawsuit against someone for infringement. But it does bring us to an interesting question: Has 37signals copyrighted any of their products?

Other than their book it appears they have no copyright registrations filed. If that link doesn't work (it may require a session) then you can either take my word for it or perform the search yourself if so inclined. I found the book under "37 signals" (with a space).

This of course leaves me really curious exactly what the "1% of the time it requires legal intervention" they mention in their blog post refers to exactly. Maybe just a scary letter from their legal team?

In Closing

Let's have one last quick glance at that Highrise ToS quote:

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.

I can't find anything that even hints that "look and feel" is protected under U.S. Copyright Law. The law is also very clear that you can't copyright "concepts".

I think good UI design should be something we all freely share. I don't want to use a poorly designed UI anymore than the next guy. Yes, I have asked people in the past not to copy my HTML or CSS. At the same time though I suggested they feel free to come up with similar designs.

Why is it that uniformity of the UI is embraced on other platforms (think Gnome HIG, Apple HIG, Microsoft User Experience Guidelines, etc) but there is this vibe that every application on the web should look and feel noticeably different than every other application? It all seems a bit ridiculous to me.

Next up we'll touch on morality, ethics, and my thoughts on stealing. Stay tuned...

Intellectual Property - Design Piracy Series

A commenter recently responded to one of my previous posts with the following (edited to remove the focus from any specific app and put it back on the whole community, which has always been the focus of this series):

I perceive the whole "Design Piracy" series to exist for the purpose of building the case that [the apps you've been discussing] didn't lift 37 Signals' Intellectual Property. But if it can be shown that 37 Signals pioneered the look of their apps, how can we build apps that look exactly the same and claim them as our own?

I also take argument with the phrase "exactly the same" as I think that is not the case for any of the apps we've been discussing. But lets talk IP.

What is Intellectual Property?

First we need to learn what Intellectual Property actually is. From Wikipedia on Intellectual Property:

Intellectual property (IP) is a legal field that refers to creations of the mind such as musical, literary, and artistic works; inventions; and symbols, names, images, and designs used in commerce, including copyrights, trademarks, patents, and related rights. Under intellectual property law, the holder of one of these abstract "properties" has certain exclusive rights to the creative work, commercial symbol, or invention by which it is covered.

But what is IP itself?

The term "intellectual property" denotes the specific legal rights described above, and not the intellectual work itself.

From answers.com on the matter:

Intellectual property can consist of patents, trade secrets, copyrights and trademarks, or simply ideas.

In the various sources and definitions I read there seems to be disagreement on whether IP includes the actual idea, invention, or design itself (what I've always thought) or is only the specific legal rights to protect that idea, invention or design.

Let's think about both. I think they're inseparable.

IP as an intellectual work itself (apart from any laws or legal rights)

I have a great invention. It's really truly amazing. It will blow you mind and it's my "intellectual property", dude. But what does that really mean? Is my idea protected by "God" himself? If I talk about my idea what prevents it from becoming your idea or "intellectual property" as well? The problem is the word "property" can really take on no deeper meaning than "idea" until we have laws and rights in place to legally define and protect "property".

IP as specific legal rights

I have a great invention. I also have 10 design patents and 3 utility patents documenting that invention in great detail. I can now discuss my idea with you and I have a specific legal right to exclude you from making, using, offering for sale, selling or importing my invention. After we talk you may think it's your idea too, but it is solely my IP and I can defend it legally as such. Hurray for me!

Can IP be just an idea standing alone from it's legal protection?

I don't see how... To say "that is my IP, hands off" and then be unable to point to any legal protections to show in what way it is truly "yours"... Who is to say it really belongs to you at all and doesn't belong to all of us? Thankfully it isn't yours just because you say or think it is. This is why we have laws and specific legal rights in the first place.

It wouldn't matter if 37signals pioneered the "look and feel" in question or not. That would not automatically make it their own intellectual property (unless there is some law to this effect). To accuse anyone of "stealing 37signals intellectual property" and not at the same time point to the specific legal rights 37signals has to even claim it as their own IP is a very hollow argument. As we've seen above Intellectual Property can not really exist in any meaningful sense apart from the laws and legal rights to define and protect it.

Thankfully 37signals is not making this same hollow argument. They have said very clearly that they believe their "look and feel" is protected under U.S. Copyright law... that's the claim we'll be examining next.

In Summation

Just having an idea does not legally make that idea your own "property". Your idea could already be someone else's "property" (think existing patents) and you just don't know it yet. It could also be that your idea simply isn't protectable as "property" under current law and therefore you could in no legal capacity "own" that idea as "property".

It could be there are steps you are first required to take before you can claim the idea as your own "property". Perhaps it's not your property yet, but it could be in the future if you were to file a patent before someone else, etc.

Patents - Design Piracy Series

Who better to tell us exactly what a patent is than the U.S. Patent and Trademark Office (USPTO). The following is from General Information Concerning Patents (emphasis mine):

A patent for an invention is the grant of a property right to the inventor, issued by the United States Patent and Trademark Office... What is granted is not the right to make, use, offer for sale, sell or import, but the right to exclude others from making, using, offering for sale, selling or importing the invention. Once a patent is issued, the patentee must enforce the patent without aid of the USPTO.

It turns out there are three specific types of patents.

• Utility patents - for useful processes, machines, articles of manufacture, etc
• Design patents - for new, original, and ornamental designs
• Plant patents - for the invention or discovery and asexual reproduction of any distinct and new varity of plant

I'm pretty sure plant patents aren't relevant to our discussion so that leaves us with utility and design patents.

The difference between design and a utility patents?

The USPTO addresses this in their guide to design patent applications:

In general terms, a “utility patent” protects the way an article is used and works (35 U.S.C. 101), while a "design patent" protects the way an article looks (35 U.S.C. 171). Both design and utility patents may be obtained on an article if invention resides both in its utility and ornamental appearance. While utility and design patents afford legally separate protection, the utility and ornamentality of an article are not easily separable. Articles of manufacture may possess both functional and ornamental characteristics.

I would think that any web application interface would have both design and utility components ("look and feel", anyone?). A dropdown for example has a certain look/design, but also very specific way it is used/feels.

A patent search for "look and feel" returns 3,799 results and a search for "user interface" returns 80,439 results. It must be searching the entire body of the patents as I don't see those terms in the titles returned. Warning, the links are SLOW if you choose to follow them.

From ipwatchdog.com on design patents:

Although weak, design patents do give you the ability to use the coveted terms “patent pending” and “patent issued,” as is appropriate. I have encountered many individuals who are only interested in a design patent for this very marketing purpose.

I have also heard several others say this same thing: that design patents themselves are the weakest kind of patent. The ipwatchdog.com article does go on to say that design patents can become formidable if acquired in bulk or mixed with utility patents:

If you have 10 or so design patents on similar variations you harness the power of a portfolio rather than relying on any single patent. If a competitor were to want to step in they would have to get around 10 weak patents, a task that is not very easy to do in many cases. Similarly, if you have a utility patent, one or more design patents (preferably several) can make a nice, economical way to expand exclusivity through the leverage of a patent portfolio.

Evidentially with patents less is not better. :-)

Additional Reading

If you're wanting to read more on the subject wisegeek.com has also written on the difference between design and utility patents and provides some examples of each type:

For example, designer eyeglass frames, the original Coca-Cola bottles, and "Pet Rocks" would have all been protected with design patents.

For example, going from LED technology to OLED would call for a new utility patent. ... Other examples would be a better carburetor, a new type of self-fastening diaper or a new recipe.

The USPTO itself defines design pretty specifically.

If you're curious here are some real life patents:

Design Patents

• D472,245 - We claim the ornamental design for a media player, substantially as shown and described.
• D523,441 - The ornamental design for an icon for a portion of a display screen, as shown and described.

Utility Patents

• 7,372,473 - Zooming controller
• 7,370,216 - Conserving power by reducing voltage supplied to an instruction-processing portion of a processor

37signals and Patents

As far as I know 37signals has never claimed to hold any patents. An online search of U.S. patents seems to also support that 37signals holds no U.S. patents. If anyone knows of any patents (or if any of the 37signalers have their own patents) please let me know and I'll update this section. There is also the small chance I'm using the USPTO search mechanism improperly.

It seems that if 37signals were to acquire multiple design and utility patents on their "look and feel" they might begin to find themselves in a position to "exclude others from making, using, offering for sale, selling or importing" similar designs or a similar look and feel.

I'm not suggesting they start acquiring patents. Just saying.

I had a suspicion patents would be relevant to our discussion and I think they have been; but now it's time to move on. Copyrights, up next.

37signals borrows design elements from Beast

This isn't a news flash or anything... just back when this happened I didn't have a blog to point it out. And I do think it's somewhat related to our overall discussion of similarity, inspiration, etc.

Not that I mind one bit... I think it's great that 37signals is using a similar design for new post notifications in Basecamp. Yes, Beast had this first. I'm more than happy to lend them a few UI goodies from time to time - or even an entire forum. :-) Referring of course to 37signals switching to Beast (written by myself and Rick Olson) for their customer support forums.

Beast

Basecamp

"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.

Headers - Part 2 - Design Piracy Series

Last time we talked about why I think all headers pretty much look the same. Perhaps you found yourself thinking "Ok... I agree they are all really similar and that's ok, but man... some of them are like almost identical. Surely this must be the design piracy 37signals keeps talking about?"

Basecamp, Lighthouse, AutoRaptor, Boxcloud, Slate

So let's have another look - this time without colors distracting us. 37signals products provide multiple color schemes (or even the ability to set your own colors) so a "you stole our colors" argument would be silly. I've chosen to just remove colors from the equation entirely.

Lets see exactly what these apps did to pirate 37signals header design.

• they started with nothing, nada
• they add links in the top right (including a help link)
• they add uber-common plain-jane CSS tabs
• they add a title or context in a semi-large font above tabs
• they added a logo if they had one (1.5 out of 5)

Now, we could remove the titles/context from all the headers if we want... but then 37signals could just say we borrowed from Backpack as it happens to forsake a title and go with just tabs and links.

The middle three things I mention above are the basic building blocks for almost any header in almost any web app. I mentioned in my last article that these are common web app design conventions and well-accepted best practices.

Lets review. Remember: Less is less is less. So we've done the least possible work just to have a useful header. 37signals has also done the least possible work.

Notice that we still haven't done a single thing to consciously "pirate" the 37signals look or feel.

The 37signals cup

Let's say 37signals designs a simple, usable cup... they start with an open cylinder... they add a bottom (so our fluid of choice stays in the cup)... they add an interface (the handle)... and then it's done.

Announcing: teacupHQ.com: pretty, shiny, and only $5 a month with a free 30 day trial. :-)

The other guys cup

Now lets say we also like simple cups... so we set out to make one also. We add a bottom, and then a handle... and guess what. It looks a lot like the 37signals cup. And now they are telling us we pirated their cup design? They want us to change our simple cup...

So perhaps we add a fancier handle... or change the shape... or add a lid... or a straw... anything at all to disguise the fact that really it's just a plain simple cup - just like the 37signals cup. Why oh why...

We both set out to build a simple, usable cup. We both succeeded. We both got incredibly similar results. Neither one of us did anything wrong.

Of course it's not a perfect analogy. We're not both building cups... 37signals is building chat, intranet, and project management software... The rest of us are building paste sites, forums, automotive sales force tools, invoice generators, bug tracking sites, file sharing sites... we're not trying to take business from 37signals. In fact most of us send business to 37signals all the time (I do multiple times every month).

Back to our headers

So, we didn't set out to copy 37signals, but now it's suggested that to avoid looking similar we need to add more crap to our already perfectly minimal design.

We could add a logo... we could add curved tabs... we could make the tabs really funky looking... we could add more space between the tabs... we could add a whole other row of color (like Harvest)... but what we can't do is give 37signals back what we stole, because we didn't steal anything.

Conclusion

Simple no-nonsense, no additional fluff headers look like 37signals headers because 37signals has a preference for simple no-nonsense, no fluff headers. If 37signals wanted to build funky looking, graphic laden headers... or add a logo... or add a background pattern... they might suddenly find their design more distinctive and less prone to unintentional resemblances.

I don't blame them for wanting to keep it simple, but they shouldn't blame others for wanting to keep it simple too.

Next up: sheet of paper design. The big picture.

Headers - Part 1 - Design Piracy Series

Previously I discussed tabs, now it's time to look at where tabs live.

The header is arguably an important part of any application. I'm going to stop and be honest here. I have designed some headers that look a lot like Google. Yeah, that's right, Google... bet you were expecting me to say 37signals, right? But let's have a look...

Updated: Someone just linked me to slate blog so I added it as yet another example.

Blogger

Basecamp

Lighthouse

Slate Blog

AutoRaptor

Boxcloud

Harvest

Beast

Blinksale

Looks like most of the headers (including Basecamp and Blogger) have a lot in common...

First, Similarities

These are easy to spot:

* Log-out link in top right (all)
* Name of who is logged in at the top right (50/50)
* Help link top right (all except Beast which doesn't have help)
* Help link on orange or other bold color (50/50)
* Tabs for navigation (all but Beast)
* Large title above tabs for name of app or project or context (all)
* Logo to the left above tabs (every app with a logo that's where they put it)
* Solid color background (all but Harvest - I count Blogger because the graphic is subtle)
* My Account / My Info / My Profile link top right (all, in Beast you click your login name)

Now, Differences

You have to get picky, but they can be found. Harvest is pretty radical with it's two tone colors. Some apps offer Help as a normal link, others highlight it prominently. Blogger includes a link next to it's tabs and Lighthouse adds a image inside the Dashboard tab. Each app has it's own colors.

Conventions

Re-read the list of similarities... I think you'll recognize most as common web application design conventions or well-accepted best practices. It's no surprise these apps embrace those and therefore no surprise to find their headers all look quite similar. I think it would actually be bad for the state of web applications if we started finding massive differences from one app to the next.

Yes, I'm aware that I chose the samples... but many are well-known sites, and they weren't hard to find. It's not like I had to scour the Internet for hours to find matching headers. Blogger's actually caught me by surprise as I tried to start this blog there before failing because of their miserable WYSIWYG editor.

Conclusions

All and all, way more similarities than differences. If 37signals is upset about other apps headers resembling their suite of products... then they have a lot to be upset about indeed.

Next, we'll take a deep breath and imagine a world in which we all design everyday drinking cups instead of web apps.

Tabs - Design Piracy Series

Ok, lets take a look around the web and see how people are doing tabs in apps these days.

You are going to see a lot of similarity. You'll see that even the CSS Tab tutorial (2nd search result via Google) bears a resemblance to 37signals own tabs - just change the colors a bit. Beast's links may look a bit out of place... but since that's one of my apps that's been mentioned in "rip off" circles I thought I would include it in this comparison.

Basecamp

Blogger

CSS Tab Tutorial

The 2nd result in a google search for "tabs css": Updated Simple CSS Tabs | silverorange labs

TypePad

Harvest

Beast

Boxcloud

Viget.com

Example found here as they have changed their site design.

AutoRaptor

Working With Rails

Conclusion

Tabs are all about the same everywhere.

CSS tabs on a solid color background... Design Piracy? NO. Wait, there is a difference though...

Square vs Rounded tabs

I think it's a less is more thing. I personally find the square look cleaner. And of course it's just good usability that the tab's background color flows into the content. This makes it as more like a real life tab and not just disconnected navigation.

37signals gets that right and we all do likewise (most of the examples do). Beast doesn't bother because really those are navigation links, not tabs.

Jason speaking at SEED

So it looks like 37signals doesn't have a corner on the CSS tabs industry... but maybe Jason doesn't mind the tabs...

A friend reminded me that Jason actually addressed the issue of tabs in an open discussion panel at SEED this year in Chicago. Evidentally similar tabs didn't bug him too much.

My friend: he [Jason Fried] laughed and said 'no' and like 'how could you really do them differently?'

I'm glad we agree.

Next: headers.

Design Piracy - How many ways to build a GOOD watch?

I'm starting out a series of posts in response to:

But there's only so many ways to do something, right?

37signals leads with:

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.

You need only read the comments on that post itself for a plethora of good arguments against 37signals' position. (You won't find a lot of sympathy). I agree there are any number of ways to build a watch but...

Let's Play a Game

Which watch do you want to wear? Pick any two...

I think we can all agree that while there may be 100s of ways to build a watch the goal should not be endless variation for variation's sake. Even a quick glance at Jason's own sample of 100 watches leaves something to be desired design wise in many cases.

I believe this holds true for web apps. While there are no doubt 100s of ways to build a web app I think there are a few good ways and a lot of bad ways.

So what do we do?

We set out to build a simple, clean, usable watch... and then we find out it looks a lot like 37signals watch... Sure it would be possible to make our watch different just because... but then it would start to suck because the simple and clean decisions we've already made weren't the wrong decisions. The fact that most watchs look the same overall isn't design piracy, it's design practicality.

That is neither illegal or immoral IMHO.

What we'll cover...

I'll expand this list and link things up as I post on each topic in the next few days.

• Tabs, headers, and the fictional 37signals teacup
• What is Sheet of Paper design?
• Can you copyright Sheet of Paper design?
• Copyrights and Patents
• My thoughts on morality and theft
• "Save or Cancel" and other UI goodies

Why have I chosen these things? Well AFAIK Jason has never come out directly and said:

Stop stealing xyz and abc

Wait... actually in a brief exchange of e-mail with Jason back in May 2007 I have the following response regarding if Jason considered Beast or Pastie a "blatant taking" of 37signals works:

Jason: I'm saying that the overall structure of the page, the style of the page, and the composition of the page is roughly the same as ours. Lots of people have commented on it and sent us emails about it so there's definitely confusion in the marketplace.

It sounds like it's a "little bit of everything" mixed with the "sheet of paper" layout that gets him upset. I think it's the combination of the header, tabs, and sheet of paper layout that he's come to so closely associate as belonging exclusively to 37signals. We'll delve into each of the above areas and also touch on a bit of miscelaneous UI goodness.

Full DisclosureThe Beginning

I've removed this section at the request of my client. I should also take the time to state that this blog reflects my thoughts and opinions alone and not necessarily those of any of my clients or employers past, present, or future.

I will say that I've been wanting to blog about this matter for a very long time but only recently found the motivation to make it happen. I hope now that I'm here you all enjoy the ride...