I was puzzled why Gandi.net does not look anything like this now. Just realised the article is over 2.5 years old. Though, I suppose no less useful a tip.
I see what the guy wanted to do originally, drawing more attention of a particular box, but the result is only kinda cluttered and make people look AWAY from it.
I wonder, why usability is so hard to get, I have the impression that most people like to design looking at the final result, instead of first drawing black and white mockups with a clear layout, resulting into form stumping funcionality.
I think it's often the opposite, the product of over-designing something. The designer comes up with a design, but he feels it's not good enough, so he keeps iterating and adding more, eventually ending up with something more complex than it needed to be. I think most of us folks here building stuff can relate to this. What's hard is for the designer to settle, to think "alright, this will not wow people and is not mind blowing, but it will do the job well".
I think this is exactly it. Speaking as a designer, its hard to just let go and keep things simple because we always want to tinker. I come from a print and graphic design background where form vastly outweighs function, so learning simple web design was something I had to work at and learn in order to get a nice balance of function and form.
I think usability is so hard to get because there always seems to be a better way to do it. I could come up with an incredibly innovative and understandable method of communicating my ideas or allowing the user to interact with the interface, but there are simple things that may get in the way such as borders. It's hard to focus on every little rule we've learned over the years when developing an interface because we're approaching it from the lens of the idea, which clouds some seemingly common-sense solutions or alternatives.
Huh? Surely if you start with mockups that's more likely to result in form stomping functionality, not less - because your mockups only have form, and you can spend endless time moving the text 1 pixel left or right because it's only lorem ipsum and you don't actually read it. If the makers of this site had started with just the content (text), and added the boxes one at a time as they needed them, I don't think they'd've ended up with the extra borders.
Without the top navigation visible, removing the outer box is clearly a good idea. And splitting the bottom section instead of subsetting it looks better and is reasonable, but in my opinion is less usable.
Allow me to clarify. The original author took a widely-used technique from print media, that being the off-color box for parenthetical, tangential and optional content, and applied it to a web site. This affords the reader an impression as to the nature of the small box prior to reading it, which allows them to either specifically seek it out or ignore it when estimating information density and structure. The new design incorrectly presents the two last sections as related more concretely than the old design, diminishing the reader's capacity to characterize the information for absorption and rediscovery.
Too many people abusing borders. Great little article. Also, I see a lot of box-shadow abuse too. Use a box-shadow to create a sense of depth around your main content wrapper, but no more than that!
You should not design your website to have so many borders because a container inside a container inside another container just looks really odd. Although it may look good at first, from a fresh eye's perspective, it is very clunky.
Good job on updating your website to split the post into two columns!
