Web Roast: TechCrunch.com

To be fair Aurimus has actually said most of all that I wanted to say and I totally agree with his review and rather like his mock up too.

If ever there was a page where I don't know where to look first, this is it. Everything is fighting for attention.

The logo feels visually weak and lacking in punch. If the current logo is to work it needs more white space so it doesn't have to fight with every other element on the page so much.

The scroller at the top is terrible because it makes three things fight with each other on an already very busy page plus it gives every other element on the page two more things than necessary to fight against.

First the content needs to be given more visual weight and the only way to do that on a page where you have to include so much advertising is to give it space.

The only solution I can see for this page is more white space and lots more of it to separate the content out more.

Aesthetically there are many things wrong with the site and the best method for me to approach this is to make a really quick mockup with some white space fixes and typography adjustments.

1. The top image scroller is a waste. The images are of low qualty, it's sluggish, etc. I would replace it with something lightweight or perhaps even kill it altogether and just do a featured article which gets a ton of votes / tweets / etc.
2. I would use the active color on all titles that are links. The bold black titles in verdana are harsh on the eyes.
3. I would add white space all over the place
4. I would kill the "grid" around all elements and the gray lines. You're just polluting the space.
5. I would space out the content a bit better.

Other things are better shown than written, so I'll let the mockup do the talking.

Since this is a roast, I'm going to give you your money's worth and critique the brand itself aswell. While you may not be able to change the brand, I think some of these cold realities are worth while hearing.

While the design elements are white, and minimalist, it still feels old. I think this is partially because we are coming to the end of the extremely long "white minimal design" era.

With this amount of content, you need more space margin. This will partially be achieved by removing a lot of the borders. Borders are OUT anyways.

The overall feeling I get from the brand is very "microsofty". I don't think you guys are going for that feeling. This is partially to do with the word "Tech" being a VERY early 2000s word, the times of .net reigning supreme (sorry conceptfeedback, i know you run .net). I also HATE HATE HATE when the first word of a 2 word brand ends in the same sound as the beginning of the second word. In this case "teK Krunch", it feels very ackward to say, or even think. This is obviously a criticism that doesn't matter much, as I'm sure you won't be changing the name.

The headlines of the articles seem too long, or potentially it's just the spacing and lack of margins that gives that feel.

The color palette is very "meh". I don't mind the color green, but you really need something to compliment it. You also have a mixture of light grey, light grey-blue, and light blue ("the crunchboard". These colors do not create a cohesive palette. It's hard to notice because there are so many other spastic colors from the ads.

Scrolling through your jQuery slider is painful. Make the right and left arrows scroll 3 items at once. The grey surrounding the jQuery Slider is strange and unnecesary.

I like how you use square ads between articles. They are clearly defined as ads, and they are relevant.

The lightly embossed tab look on the top menu is horribly dated. The dotted lines are dated looking. You probably don't notice this if you are on a mac, but your content is Bold verdana 12px, which is EXTREMELY ugly on a PC. With a word like "tech" in your brand name, it is likely that a large percentage of your users are going to be PC users (obviously you know better than me), so don't just test the site for PC, design it to look AS GOOD on pc. Most of your PC users will likely be on windows 7 (tech website).... so using a font like Calibri for the first font in the font family, would make a huge difference. Also your headlines are in verdana bold, which looks seriously dated. Even reducing the kerning on the headlines would make a huge difference.

If this is a tech website, I would explore adding contrast to your color palette. High contrast sites such as http://arstechnica.com/ feel both elegant, and techy simultaneously. I know arstechnica's site is probably due for an update as well, but it's style PERFECTLY suits it's user base. Not quite gamers, not quite web designers, but somewhere in the middle.

The current style of the layout feels like a more dated, less cool version of Mashable, and I feel that it needs a COMPLETE overhaul from the ground up. Again I stress that high contrast is both a) in fashion b) caters to your exact audience.

Tech Crunch, wow this is really a massive site, and there is so much information on it!

However, right from the start, based on what this website is all about it really just bores me a little bit...

I like the use of white space and the logo is simple and clean, which works very well, however I think it would be nice to incorporate some of the colors of the logo into the site, to break up some of the content.

see notes...

There are a few inconsistencies, and IMHO just bad alignment issues...

Overall I think it would be fun to give it an overhaul so that the information isn't just hurled at you but rather gives you the chance to easily reading it without, all the other elements bombarding you.

1.Header- Icon/logo element near the techcrunch logo and near the top navigation near "tech". This will clearly let the user know that there are other sites for specific topics. 1. The top slideshow which show cases 3 posts can be changed to a single post with clean graphics and little text. Please see the attached file for clear explanation on this. I understand the reason behind having 3 instead of 1. But if you have a small navigation with numbers indicating the number of hot posts. the user will understand and will be more educated then having to click on the arrows to see more. 2. The target segment of techcrunch are the ones who hate popups and are annoyed by it. It will nice to see the snapshot popup removed. 3. For ads - use text ads instead of disturbing graphics on the page. I have read text ads have more conversion than graphics. See smashingmagazine.com and how they have their ads as text in between post. (0fftopic: buy this and that) 4. Removing the boxes on every post and item on the home page; There must be a better way to differentiate than this. play with white space to create a better design. 5. Show images of the author - If the person is known or famous, it 'll surely impact the users decision to click

I'm an avid reader of techcrunch but their design is not conducive to a good reading experience.

there is simple too much going on and the site feels like a bad mix of mashable and the new york times.

there needs to be more white space everywhere.

some uniformity of thumbnails would also be nice, and make it easier to tell where the content is.

icons can be used in the actively discussed posts area

see notes

good start, however:

• super busy layout, could go a bit cleaner. the kind of content you have, you could even do three column instead of two. also, the top header with previous and next navigation (Hugfeast, IPO watch... ) could span across it all- right now it is cut off from right, let it flow all the way and add more stuff there if needed.

• too many double lines where you can use just simple single lines in between news items/columns.

• i don't see a concept of 'home' here, looks like by default you have 'tech' as home.. still, i believe not having a 'home' could create some usability issues.

TechCrunch is one of the leading technology news platforms on the Internet. It’s a blog-styled website which keeps you up-to-date with the latest news about the internet, social media, web2.0, technology and electronic products and their companies. It’s also the flag ship in the Crunch-network running even more similar platforms.

Layout

The layout is very clean and based on two columns: The bigger one for content and some ads and the smaller one as a sidebar with ads and related content on TC. The header with the horizontal tag navigation sits on top of that. The layout would be very pleasant for both the code and the visitor if it had the popular 960grid applied. The content wrapper and the sidebar seem a little bit to close to each other. And it would fix the width problem between the 300px wide ad and the "Actively Discussed Posts" box, too. Giving the layout a consistent and balanced look and feel is key for a site, especially for those with that much content and focus on readability.

All in all:

• Use the 960.gs grid
• Adjust the width of the sidebar to 300px to fit the size of the ads (as well as the grid)
• Adjust the space between left column and right column

Content Structure

The content has a pretty simple structure. All articles are listed among each other with the headline, an image as well as a short description. People are used to that blog structure and it works perfectly. Exactly beneath the tag navigation, even before the articles are listed is a nice clean slider which slides through some popular or featured articles being read by the users. I like the idea and it gracefully replaces an actual leading article with bigger headline and bigger image. The sidebar’s content gives hints on other articles that may be interesting to read as well as jobs and services.

Design

Finally the design. As I said, the layout and the design are very plain. That’s a huge plus on a site this large. Nevertheless I can see the love to detail. E.g. on the very top where you can switch to other platforms of the TechCrunch-Network. You get a sense of three-dimensionality. The header is completely white and the layout is designed on fine grey pixel-lines. I like the simple logo featuring the major color green which is the only design color on the website (and it’s cross-compatible with other sites in the TC-network). That’s the only right choice in consideration of ads, big images and all the colored Social features which are important. The navigation has beautifully aligned font. The search bar on the upper right corner of the website could use some more adjustment to fit the look of the website. the separating lines between the items in the main navigations (which is actually a very interesting idea to make it the most popular tags) have on pixel to much at the bottom and I think the text size in the descriptions of all the articles is to big. Also I recommend to try a „nearly-black“ grey as the font color from time to time. The boxes around the articles are white like the background of the viewport while the whole website wrapper has a subtle grey holding the contents together. The sidebar needs some thoughts, I think: The boxes introduce blue as a new color while a very subtle grey or green would be more appropriate. In addition to that, I wouldn’t use tabs to structure the content there. Most of the time, there is just one tab and there’s to much bold text in there which shifts the focus a little bit away from the far more important article on the left side. Over here I have the Facebook module twice in Safari which looks like a bug. Coming back to the articles, it seems to be worth the try to expand the margins between the horizontal ads and the article boxes. As well as more margins on the top and bottom of every headline to give the text more breathing room. White space is a very important thing and TC can use some more of it. The floating text is Lucida Grande, so I think it may be a nice change to have Helvetica used for headlines which refers back to the logo.

All in all:

• Use only one design color (because of so many image/ad/social media colors)
• not blue in the sidebar
• The search bar could use some love to fit the look and feel of the website plus it could be bigger
• The vertical lines separating the tag navigation items have a pixel sticking on another (detail work)
• Some text (maybe headlines) could use a "lighter black" resp. a "nearly-black" grey
• Not tabs to structure the sidebar boxes because they don’t have real sense
• Reduce bold text in the sidebar so the focus gets not shifted from the left sidebar to much
• Facebook module appears twice over here
• More spacing beween the horizontal ads and the content in the left sidebar
• More spacing around the headlines
• In general: More white space
• Use Helvetica / Neue Helvetica for Headlines
• Maybe reduce font size of floating text a little bit
• Remove the SnapShots popover from links - I find that very distracting and annoying

Overall it‘s a very beautiful site for what it does. It’s very functional and easy to read but has its improvements to do.

Love this site for its purpose: covering newsworthy stories (and creating buzz on rumors) in the Web world.

However, the usability is poor due to the slow loading ads and widgets. For example, I just looked at the site and the facebook "like"widget and the top right ad spot took at least a minute to load. Very distracting to watch a wait gif wondering if content will load or just a ad.

Then I hit F5 to see the home page again. The row of 4 ads under the first story took 30 seconds to load which blocked the rest of the content on the page from loading.

It would be nice if TechCrunch offered an ad-free version for a fee or for taking an action (like working for credits like Concept Feedback).

BTW - I typically read the daily TechCrunch emails and they have the same slow ad loading problem.

1. Get rid of the grey line grids.
2. Highlight "What's Hot"...that list currently looks like a menu not a list of cool stuff. Actually it's a waste of space. We all know facebook and apple are hot, this is not News! Take better advantage of your scrolling highlights.
3. Despite what folks say, i think your name is pretty good, and the green black combo is pretty sweet. The font is boring! it's just a font, come on fellas. Add little notch somewhere or a get a hipper web 2.0 font.
4. The crap on the right all looks like Ads. It should be more apparent what is an ad, and what is part of the site, or i dismiss it: i.e. Actively Discussed and The Crunchboard. They look boring, sad, and from 2001 yahoo. Awful. Get rid of all that tabbing and ugly blue and be bold in your color choices (stick to black and green or choose a complementary color for your brand such as orange)
5. COLORS - Get rid of BLUE. It looks like crap with the green, and it looks like WINDOWS 98. Try: Orange, Magenta, etc.
6. I love white space but there has been some great use of light shadow and gradient to add dimensionality and organic quality to bold layouts. Look around consider for: your logo, site background, section backgrounds, etc.

ps i'm a nice person sorry about talking like a corporate prick but i figured it's a roast, it's free, so what the heck :)

I've been using TC almost from beginning.

I believe that content, as single layout of an article is really good but It lacs of space it should have with other elements on the page - this will make it easier to scan (visually) the content and separate site' sections.

Anyway, get a good designer and UX expert - with your position on the market it shouldn't be a problem to get the job done properly :-)

Busy design puts me off. Looks like you have good information, but my eyes continue to scan without settling on anything. You need some kind of focus, the squares aren't enough to organize it. No place for the eyes to rest.

Maybe you might put a color wall between the two columns as a visual divider, make your headlines bigger, or just have a simple, readable outline of articles at the top. You could use background gradient images that aren't square --- run from the SQUARE.

You need a space where the type isn't busy and there's some blank space -- this will accentuate the busy sections.

Most of the Things said by other Reviewers , i would like to add only that :

1. Give more space to content
2. Change slider to single image at a time
3. Remove lots of Borders around everything makes it like feel like suffocation.
4. Remove Long Long Scrolling , just extend it to two pages long and more Details can be read on other pages. Give Less Detail at home page.
5. Or you can do only by placing Headings and Images Detail links.

I hope it Help you to make it better.

Regards -Sadia-

Holy trees through the forest batman. A really nice, light header that gets lost and over powered by the content. There could be more spacing between the ads placed under the articles and the preceding article or maybe instead of having them on white the color is a tint I know this breaks up the white but. There seems to be lots of "blocks" stacked. Maybe it is just a spacing issue and too many lines everything is boxed.

The layout is very confusing, the arrangement of the layout as well.

Tech crunch looks like a site I would enjoy and although 2 straight forward columns may not be that trendy I find it easy on the head. I could use some guidance on whats important and whats not we have a perfect democracy here but in the "scan don't read"era a little selfish steering could help your ad revenue.

Again in the right column some of the inherent separation washes a little(colors) and I miss some plain hard separation to guide the beginning and the end of segments/features.

All in all I like this site and book marked it -I guess my roast is on hold.