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.

Comments

[Ryan]

I actually prefer "consistency" across applications, as long as it's not blatent plagiarism. I'll go to a new site and go "hey, that looks like blogger", so I'll know where to look.

[Creative Graphics Communications]

You seems to believe that 37signals should be upset for people using commonly accepted theories developed in the expense of major companies such as IBM, Google, Yahoo, Amazon, Microsoft, RedHat and many others who spent their money and time doing the research and usability testing.

I guess when you take a look my site you'd say its same as Wordpress.org but I had my current theme there before Wordpress.org re-branded itself with the release of WordPress 2.5.

Now should I be upset? No.

It just shows that everyone is trying to give then end user a familiar interface so that its easier for them to navigate across different sites like Ryan said.

[Josh Goebel]

"You seem to believe that 37signals should be upset..."

Not at all. I believe exactly the opposite. 37signals should not be upset. Common design conventions and usability concerns lead to most headers looking the way that they do. This is often time tested stuff as you mention.

37signals' big innovation in design if you ask me has been to return to a simpler, cleaner look... and leading a revolution of other app designers returning to simpler, cleaning looking apps as well.

[Kevin Milden]

Horizontal tabs don't scale. I use them when my clients want them but they will never wind up in a New Leaders product. Sidebars are perfectly scalable and provide you more room above the fold. They should be on the right because most people are right handed and you notice how natural it feels when items are placed there.

Here is the deal. With design no body is right or wrong. It is simply different strokes for different folks. What I think is amazing is that Jason is such an amazing storyteller he has actually convinced people to believe they are the best web designers ever by doing less. I mean very little in some cases.

I swear when Steve Jobs retires he should give the helm to Jason. Both are captivating people who can actually make you think you require their approval for your work to worth anything. Equal to or better than them is completely off the table. Validation denied.

I just want to finally state that not only an I a huge advocate for both Apple and 37Signals I am also their toughest critic. I am a culprit or bowering ideas from them as well as Google. Why? Because the love for brands is complicated. The same reasons you love a Macbook Air or an iPhone you hate them for trying to dictate what you need and what you don't.

So you, the innovator thinks he knows what would be cool if you were in control. That is why you find yourself borrowing from them to develop your brand of applications. But you have to remember wether by pure genius or dumb luck both Apple and 37Signals were the first of a kind. They took something that was geeky and made it more fashionable. To the devoted we try to manifest it into more than that but it isn't. They were just the ones that got it right first. So they will always have that halo around them.

I think it is important to remember. They are just a bunch of guys mostly separated making stuff at home. They are sticking with the lean and mean philosophy and while I am down with that I hope they someday cash in on their contributions. We should all give them a hand for doing something that inspired so many to make better stuff.