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