Pastie << self

Pastie Lightning Talk at RailsConf 2008

Here are the (slightly updated) slides from my RailsConf 2008 presentation. You may miss some of the humor from the live version but I've also annotated some of the slides so they make a little more sense without me talking to them.

Enjoy.

Download the presentation as a PDF

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.

Original Mighty Mouse making a come back?

Looks like potential trouble in Mighty Mouse land as Apple and CBS are sued for trademark infringement by Man and Machine who claims to have used the name since 2004 for their very own waterproof and chemically resistant Mighty Mouse.

Anyone ready for an Apple iMouse? Move over iMouse independent software (which actually looks kind of cool if you're still stuck in one button mouse land).

Man and Machine's Mighty Mouse

Personally I'm considering ordering the original... It would go great with a Black Macbook and I can't even count the number of times I've wanted to use my Apple Mighty Mouse under water and been unable! :-)

Those of us with an Apple Mighty Mouse also know what a pain in the ass they are to clean.

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 - Can it be copyrighted?- Design Piracy Series

In our last post we talked about sheet of paper design, what it is, what it looks like, and why people like it.

We left an unanswered question that I'd like to address now... Does 37signals have a copyright on sheet of paper design? Of course we know the answer is either a 2, 3, or 5 letter word... but that wouldn't make much a blog post, now would it? :-)

The Essence

When I want to start a new sheet of paper design here is what I usually start with:

It's pretty simple. Of course there is a certain proportion to it. Be it 66/33 or 60/40 or 70/30... I don't think it matters and I don't think there is a "golden" number. I have no idea the exact proportion 37signals uses. I tend to use what feels right over time. Pastie, for example, has a wider content area because the entire app is driven by one purpose: just pasting and viewing code.

So in review we have a white box in the middle of a grey background roughly proportioned to 2/3 the total width, that's it. A one or two element layout (depending how you count the background).

Can 37signals really copyright such a simple design? I find the very idea ridiculous - and I'm not alone. If 37signals can copyright that then we're screwed. So is every one of the sites I mention and actually most of the internet if such a simple design can be legally protected by one company exclusively.

But maybe they are trying to claim copyright on a bit more than sheet of paper design itself, so lets continue...

Adding a header

Let's pair any one of the tabbed headers from our previous discussion with this simple one element sheet of paper design... Let's remember we still haven't added any actual content or even any sidebar content that would differentiate our app from another other web app... nada... we just have a white box, a grey background, and a tabbed header design...

Hold up, lets not even pair it with one of those tab heavy headers. Lets pair it with a simple black header with links (think Pastie or Beast):

So what do we have below? We have something that surely bares a resemblance to a 37signals web app. We now have 2 or 3 design elements on the page. Can we copyright it yet?

Placing the content...

I'm not sure it really matters what you put in the white or grey areas at this point... maybe 37signals would be a little less upset if we put a picture of Mickey Mouse in the white and Miney Mouse in the grey... but if you continue to use a clean, simple design there are going to be similarities to 37signals... The sheet of paper layout itself (for better or worse) combined with well-known usability guidelines constrains your choices about the placement of content, help, utility links and buttons...

Sometimes you're forced to make the same design choices as 37signals. Yes, forced. Let me just give some examples to illustrate this.

Page title

It's important. Where do we place it? What about top center of the content area (old Basecamp), or top left (new Highrise).. what about top sidebar (Campfire)... Fuck, I can't even put the title on the page without "stealing" from a 37signals design.

Page subtitle, if we have one

It should probably go near the title... perhaps under it (Highrise)... or beside it.. (Basecamp header) Thwarted again.

Links or buttons to alter content (edit, delete)

Well, they should probably be near the title of the content... right beside it (old Backpack todo edit links), top right of content area (Highrise), above it, beneath it (old Basecamp I think), top sidebar, bottom of content (Basecamp Messages, expanded view)... top sidebar is a bit awkward to me, but I'm trying to think hard here.

I suppose I could hide the delete button unless someone is editing the content (old Basecamp)... or not (new Basecamp). Can't win.

Primary content and help/peripheral content

I think this is pretty obvious. Primary content on the left (the wide page area), peripheral content on the right... this is pretty standard with two column designs. Maybe we could put the sidebar on the left (old Basecamp projects list)... Nah, bad idea.

Links or buttons to add new content or perform other key tasks

We're talking about the key task on a page (if any)... Like "Add a new pet" on the page that lists pets... We could put the links under the title (old Basecamp project overview), to the right of the title (new Basecamp), maybe at the top of the sidebar (Highrise), maybe even above the title, though that's a bit weird. I could use a link (new Basecamp, project overview) or I could use a button (Highrise, new Basecamp, etc)...

And what if my button reads like a sentence "Add a new pet"... where have I seen that before... hint: Apple's own software and Human Interface Guidelines.

Starting to see a pattern yet?

Usability Guidelines, Basic Design Principals and Common Sense

When you start with a sheet of paper design 37signals seems to think everything that follows results from your ulterior motive to steal their design. They are flat out wrong. The sheet of paper layout itself, usability, basic design principals and common sense guide a good designer, just like they guided 37signals.

Take someone with some common sense, mix in a good knowledge of usability and some experience with design and the web in general... and you will find a person making a lot of the same decisions regarding placement, proportion, contrast, etc that 37signals has made.

Sure you can go the Lighthouse route (no offense intended)... add more color, more boxes, more curves, more "fun"... do extra things to try and look less like 37signals (build a thermos instead of a cup). But if you just love that clean, simple look, there isn't a lot you can do.

So, does 37signals have a copyright on sheet of paper design...

.. and do they have a copyright on the basic decisions, placements and proportions that follow from it... in other words, does 37signals have a copyright on usability guidelines, basic design principals and common sense?

God, I hope not.

Tune in next time and we'll talk about copyright law itself, patents, and more...

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

Safari 3.1.1 and flash stops working

Ok, I'm not the first person to have this problem... skip to bottom for my solution. I'm just getting this out there... it might be my unique problem of everyone on the Internet.

• Macfixit
• Apple Discussion Forums
• Apple Discussion Forums again

Some people reported that plugin support just got turned off... and using Preferences to re-enable it fixed it. My problem however turned out to be much more complex.

I finally stumbled across the fact that Help -> Installed Plugins on my MBP was entirely blank... not a single plugin was working... so I moved them all... and then just put Flash back... it worked. So then I started putting all my other plugins back and restarting Safari each time. When I copied JavaPluginCocoa.bundle back the plugins page went blank again.

Solution

Since I had just installed a Java update earlier I downloaded that same update from apple.com and re-installed.

Problem fixed. Ugly test flash graphic you've never looked so good.

Update: I just found out my sound (YouTube, etc) still didn't think. This fixed it.

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