A tiny redesign of Basecamp’s homepage from 37signals with Bootstrap Design

Have you ever read something you wish you hadn’t because it changes the way you see the world? And now things look just a little bit…“off”?

I’ve been designing and helping design websites for years, but I’m not very strong at it. So I’d thought I’d take a crack at learning more things about alignment, positive/negative space, the difference between fonts and typefaces, etc.

I picked up a book called Bootstrapping Design by Jarrod Drysdale. I’ve found it to be very enlightening in a concise package. My kind of book.

Now it has me looking at things with a different eye. Which can be a bit of a curse.

I’m a big fan of 37signals and how they design things. For me, what they do is usually the gold standard. After reading some of Bootstrapping Design, I’d thought I’d take a peek at the new Basecamp homepage to see it with some new eyes.

Huh. That’s interesting.

So here’s the current website.

As you can see, if you’re looking for things like alignment, the left side is a bit jagged. One graphic is aligned with the horizontal rules, but the header and footer text are not. There’s a button, at the top, right aligned with the horizontal rules.

The footer text appears slightly off center and to the left.

If negative space is defined as “the background”, or in this case “the whitespace”, you’ll see there is more whitespace between the top horizontal rule and right block of text than there is between the top rule and the graphic. Overall the whitespace isn’t allocated very evenly around the elements.

Some lines I added to show you how things are lined up.

If I were to follow some practices from the book, I might redesign Basecamp’s homepage to look like this:

All I’ve done is try to allocate the white space more evenly around the elements. I’ve also left aligned the header logo with the post it note graphic and with the bottom footer and some of its text. Also by separating the footer text a bit, I created some right alignment there with some of the text.

With lines to show my changes.

This post isn’t meant as criticism. I wasn’t trying to make it “better” per se. I was just experimenting for 15 minutes with some principles to see what I thought of the result, not create mankind’s greatest design achievement.

But it turns out I like my version a little bit better.

However, a friend, Abi Noda, mentioned he liked the original better. He felt it was visually more interesting.

These are just opinions.

For all I know, 37signals tested a design that looked more like mine, but their current version wasn’t just more beautiful to them, it also outperformed everything else in capturing new users.

Also to Jarrod’s credit, his book doesn’t preach the one true way. Just has some good guidelines, especially for design novices.

After all, many “rules” are meant to be broken. For example, haven’t you been told you should always put a subject in an email? But many marketing experiments have shown that emails without subjects often get much higher open rates.

But I’d love to know what you think about the changes. Do they make the original design better or worse? Have you spent time on changes like these to your site and seen some sort of payoff? Maybe higher conversions on a marketing site?

Please feel free to email or tweet to let me know.

P.S. And if you liked this, you’d probably dig following me on Twitter for more: here.