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.

Comments

[Jeff Mackey]

Hi there..

Interesting series of articles! You might find this interesting, if you haven't seen it already:

http://www.gooeytemplates.com/

Best,
jeff

[meekish]

You could lend your argument some credence by including screenshots of web apps that were launched before 37 Signals' product line.

[Josh Goebel]

"You could lend your argument some credence..."

Not really... perhaps I could lend _some other argument_ credence... but not the argument I'm making here. I'm not saying that these apps don't appear similar... I'm not saying they weren't perhaps inspired by 37signals... I'm not even saying 37signals wasn't the first to use sheet of paper design (though I think this is hard to prove completely)...

I'm just saying what these apps are doing isn't theft, isn't piracy, and certainly isn't a violation of copyright.

37signals has inspired a return to less. Less features, less team, less design complexity, less overhead... they should be flattered other people are picking up and carrying the same banner. Less is good IMHO.

[meekish]

If the 37 Signals look is so terribly obvious and unavoidable, one would expect to find many examples predating their products. Is this not the argument you are making?

[Josh Goebel]

I'm not saying that sheet of paper design is obvious or unavoidable... It's obviously a personal preference. Whether 37signals invented sheet of paper design or not... they have certainly made it popular.

I'm simply making the case that when you start with sheet of paper design constraints you are going to have a hard time doing placement differently than 37signals has done.

Particularly when they vary how they do placement from app to app and from page to page inside certain apps.

[meekish]

I perceive the whole "Design Piracy" series to exist for the purpose of building the case that Auto Raptor didn't lift 37 Signals' IP. 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?

[Josh Goebel]

Perhaps we need to discuss intellectual property too before we're done. :-)

This series isn't about any particular app. I am building the case that _any_ and _all_ of the apps we've used for examples have broken no laws and committed no crime simply in their use of a similar "look and feel" as 37signals... next up we're going to look at copyright law... as that seems to be the crux of the matter and the method by which 37signals is claiming legal protection of their "look and feel"

[Kevin Milden]

They all totally copied them. So. It's not design piracy. Think of design as more of an evolution. They were inspired to create. It is human nature. Would the 60's have such amazing rock music and band without the Beatles? No. Same logic applies. 37signals brought that new sound we were looking for to the table.