Business Logs

You’ve got your web 2.0 interface design checklist, 10 things that aren’t web 2.0, current styles in good web design (thanks for 9rules link Ben!), and now I bring you ways to identify *bad* web 2.0 design. We’ve all seen it, and now here are some quick ways to figure out if a web 2.0 product is well-designed, or just trying too hard to fit in.

Bad Drop Shadows

The hallmark of 3D-looking user interface design is subtlety. If your widgets look like there’s a slight light shining down from the upper left corner of the screen, then you accomplished your goal. If they look as though they’re 5 feet off the screen because their drop shadow was left on Photoshop’s default, then it looks like garbage.

Bad Gradients

Gradients should be used sparingly and for effect, not because they’re easy to do in Photoshop. When light is shed on an object, the area of the object that’s closer to the light source is lighter than the area of the object that’s farther away from the source, thus producing a gradient (and a drop shadow.) Real-life gradients are subtle and smooth, but poorly reproduced web design gradients go from dark to light too quickly, or are choppy and/or too industrial-looking. The best gradients are the ones you can’t point out from across the room, and the worst gradients are the ones that look cartoonish.

Bad Size-to-Spacing Ratio

The “big” web 2.0 look is easy to accomplish, but without using the correct padding and spacing around elements it looks amateurish and ugly. Monster-sized fonts are easy to use, but it’s tough to make them play nicely with other elements on the page. Some good examples of big typography: Coudal’s “The Show Live” and Coudal.com, Emily Chang, infosion™, Rollyo. Some bad examples? Flock Developer (padding/margins on the yellow download area, lack of whitespace within main copy on their homepage), Megite (completely lack of whitespace surrounding larger type, large links butt right up against other large links),