I debated writing about this, not because I didn’t think it was important to talk about, but because I’m very sure that the design did not look like this when Rachel presented it to him. Rachel does very fine work (I’ve spoken highly of her work on other occasions), her recent work is really hot, but this caught me off-guard because it doesn’t hit me with the cool-factor her designs normally hit me with. Then after digging a bit further, I noticed a few key quotes that indicated to me that the design she sent Mike originally looked a lot different than what’s up there. First, a quote from Mike’s CrunchNotes entry:
“Everything wonderful about the new design is because of the awesome Rachel Cunliffe, my designer. Everything wrong with it is my fault for overrulling some of her ideas.”
Okay, when the client falls on his sword via the launch entry you know it’s not a good sign.
Next, Rachel has this to say over at her blog:
“Thanks. Design is incredibly personal and I’m not taking the negative comments to heart because I know I’ve created what my client had in mind and wanted – layout, ads, exact colors and format.”
What this says to me is that Michael gave her specific instructions on what he wanted it to look like (“newspaper-ish” comes to mind as a common client request), and although Rachel had her thoughts and ideas about what a new TechCrunch should look like, they were pre-empted by what Mike gave her as an instruction set. This happens a lot in client work, which I’m sure Rachel knows very well, and that’s the idea that no matter what vision you have in your head for a client’s site, it doesn’t matter if it doesn’t match their vision for the site. In this case, I’m sure Rachel had a great design all dreamed up and then Mike’s requirements were the total opposite. That’s really tough.
Feedback Around The Blogosphere
You can always tell when people don’t really like the design but are being nice when they preface their comment with, “well the old one was good, but…” or “I like the design.” with no exclamation marks or emotion. Su, somebody who’s been commenting on this site a lot lately (and knows way more about Movable Type than anybody else on the planet) had this to say:
“I have to disagree on your new design Mike.
The sidebar’s too thick, the green is too strong, the links list is missing and the amount of ads clustered on the top makes techCrush looks like a sell out. Or a spam blog, which ever you fancy.
Just my 2 cents, and sorry if I sounded too strong.”
Ouriel has a critique entry up with a poll (if you don’t want to say the emperor has no clothes, then put up a poll so people can vote anonymously and the numbers can speak for themselves). Just before 7am west coast time, here are the results from the poll (hint, the bottom line was for “I liked the old one better”):
Some more assorted comments:
“Sorry, for using this news to comment about the site of TechCrunch, but i didn’t find the mail of Michael Arrington. What a crap site redesign, TechCrunch layout was better before this new junk, please turn back. I can only see advertise now, that’s really bad for a guy who knows about community.” -rodrigobarba
“This site redesign is a sell out to the man. Really bad, and NEVER display “your ad hereâ€, very tacky.” -oy
“It seems you are forgetting philosophy of web 2.0, your blog now shows all advertisement banners. Whats up ?” -nil
“May be, it is just that my eyes are so used to the lovely old layout that I just am not able to admire this new one. I however completely admire Rachel and most of her works but this just doesn’t seem to be better than the old one. The heavy green makes it kind of uncomfortable to read as well.” -Startups.in
“Ahhh the green. The old design was a showcase of how great a website can look, this just looks plain mediocer.” -Thierry Schellenbach
Design Critique
While others may just be saying that “the right side is too busy” or “it looks too plain”, I’d rather go into actual detail with my thoughts on the design rather than just throw out subjective euphemisms.
- It’s not “Web 2.0” — I know you’re all groaning right now, and I am too, however this is a very important point. The previous TechCrunch design (screenshot provided below) was a pivotal example of what “Web 2.0” design looked like, even though you can’t really describe it but clients love to ask for it. Subtle gradients, strong typography, lighter colors, rounded corners. The new design has not-so-subtle gradients, weak typographical choices (Tahoma regular weight vs. negatively-kerned Helvetica Bold on the previous design for entry titles), very dark colors, and a blockier design. The new TechCrunch doesn’t exhibit “Web 2.0” design traits even though it’s a “Web 2.0” weblog. The old TC had that look going for it, and for the new version I’d expect it to retain some of the nice details and design touches, but no dice. It’s now a “Web 2.0” blog with a semi-newspaperish look, two very contrasting styles.
- Wrong focal points — In the previous design, the darkest and most eye-attracting area on the page was the very first entry title atop the center column. Front and center. This worked out well because, hey, it’s a weblog focused on content, so what else should be highlighted? With the new design, there are two distinct focal points: the navigation bar and the dark green boxes on the bottom right, both have nothing to do with the content on the site. In fact, now, the content seems pretty secondary to the ad placement. I did my best on GigaOM.com to maintain the content-centric priorities that Om and his readers had while introducing ads into the layout, and the feedback on that design has been the most positive I’ve ever received because the focus remained on the content. With the new design, my eyes are attracted to the (almost unnecessary) top navigation bar and the search boxes which extend past the bounds of their dark green boxes.
- Entry titles? — On a blog, the most important text on the entire page is the entry title, hands down. A blog is focused on content, content = entries, every entry has as title, therefore the design of the entry title is the most important. You can tell that the new TC design isn’t focused on content anymore because the entry titles aren’t even in bold weight for emphasis.
- Knowing why gradients are used — I’m not sure if people know this or not, but there’s a very specific reason why some layouts “look off” while others look very rendered and nice, and that’s because gradients and drop shadows have to be done a certain way or else they’ll look like they belong somewhere else. In a computer interface, “light” comes from the top left. This means that to give your layout a rendered look, the gradient should be subtle and have a lighter color on the top (or top-left) than on the bottom (or bottom-right). The interface light is important, because it dictates where shadows should fall (down, or down to the right just like in real life, when the sun shines in front of you your shadow is behind you), it shows how to fake 3D and layering effects (mimic the real-life shading of a shelf, the area under the edge is darker because it’s hidden from the light), and it also dictates that you should be consistent with your lighting because faking multiple light sources confuses the user and is different from everything else they see. Take a look at Apple icon design guidelines to see good examples of how a top-left light source dictates the look and feel of the icon.
Anyway, so having said all that, the lighting in the TechCrunch interface is inconsistent and throws the eye off. The navigation bar is rendered correctly (light on top, dark on the bottom) so that automatically sets up the light source’s location as in the top-left. Then on the bottom right, you have the dark green boxes (layout is goofed in Safari) and they’re supposed to mimic the design of the navigation bar, but these boxes have an inverted gradient that suggests light coming from the bottom. Once you setup your light source as having a top-left location, if you switch it and flip the rendering on another area, a user’s eye is automatically drawn there because it looks out of place. Flipping the gradient to give it a “shelved” or beveled-in effect is fine, but you have to execute it correctly. Here are some examples of what I’m talking about. Original on the left, two versions of what it could have looked like on the right, if we were following normal interface light convention:
Tough Call
I’m not sure if Michael Arrington knows just how important the design of his site actually is. One of the main reasons that the design industry is so full of work right now is because of the booming tech industry, and TechCrunch is the megaphone that connects people looking for new work with people starting up companies, so TC is the major commonground between new companies and the consultants/designers they hire. The previous design of TC was very slick and was a good representation of what “good blog and app design” looks like, or if you want, what “Web 2.0 design” looks like, and it was easy for clients to communicate that to designers. “Hey designer, I really like how TC is rendered and slick, I’d like something like that.” Now, because the new TC doesn’t exhibit any of the previous rendered “Web 2.0” look, it’ll be tougher for designers to pitch a nice 3D-esque layout because they won’t be able to say, “Hey client, check out TechCrunch for an example of what I mean” and immediately be on commonground. That, apart from the rest of this critique, is the toughest part about this redesign. Because it has a totally new look and is a big departure from the previous version, it might actually throw off how Valley startups understand design now, and that could be huge. I hope that the karmic balance in the Web 2.0 world is somehow balanced or modified, because right now, things feel a little out of whack.
The old design:
