Dale and I were yacking on IRC about this a bit and I'd started to Firebug perl.org as an example of where grid alignment can make a big difference in perceived quality of design:

Before:

http://img.skitch.com/20100706-5hspebiyxsf8cdk4dk1itfdb9.png

After:

http://img.skitch.com/20100706-bn6hbwa1qsb2q8isdjnn254p9y.pn...

Care to explain why one is better than the other? I opened both in new tabs, and it took me a while to figure out which was your before and which was the after.

Moving the camel up makes the top line up better, but the rest of the changes seem pretty arbitrary (to my zero-design-sense eye). What are the improvements, and why are they better?

Here's a subset of the vertical alignment points in the first, and the ones they're replaced with in the second:

http://img.skitch.com/20100706-dcay3gni71sbq8da6meas97898.pn...

http://img.skitch.com/20100706-q3hw63fswsfapwx71pdkm4x4sc.pn...

It's still far from ideal, but is working in the general direction of laying things out in a grid. The other in-the-direction-of-gridiness shift is in making the margins between elements more consistent.

I don't know enough about the psychology of design to know why grid-like layouts are more appealing to some people. To me, when looking at a design, the use or mishandling of implied geometry in a design jumps out at me immediately, but I'm also the sort of guy that measures distance on walls before hanging pictures to make sure that they're at symetrical places on the wall. ;-)

I guess I'm alone in this, but I find page and window layouts built around a strict grid really strange looking. They look blocky and mechanical; full of rivers of space not unlike like poorly typeset text.

I find that space can help move the eye and accent parts of a layout. The grid and blocking are important, but at the same time they're also something to deviate from.

As a developer with design sense who is now both designing and writing iPhone apps, I'm having a hard time finding what to read beyond these kinds of articles. There are lots of Photoshop tutorials out there, but I need some why with my how. Any suggestions?

"The Non-Designer's Design Book" by Robin Williams is the best introductory book I've read. As the title suggests, it covers the fundamentals - proximity, alignment, repetition and contrast - in a really approachable way.

It probably won't teach you to make a great design, but it will prevent you from making a bad one.

Actually, they're presented in the book as Contrast, Repetition, Alignment, and Proximity.

Williams jokes in the early chapters that she wanted to find an easy-to-remember acronym for the four central concepts of the book - and boy did she pick a good one.

At least it's memorable.

Hey! My wife has that on our bookshelf. Hrm... will have to take a look.

I could be wrong, but much of this kind of feels like a recap of this talk http://blip.tv/file/3685673/ that was given at djangocon by Idan Gazit.

If I am wrong, its a good talk and its definitely worth watching.

I havent seen this talk before, but I will check it out and probably link to it in the post.

(added a link in the post)

the book mentioned in that talk looks really good as well, amazed I havent come across it before, thanks.

@960gs: I was also excited about it some time ago, now I use http://www.1kbgrid.com/ It's nice and lightweight, does the same with a more simple approach. I usually put it together with mayerweb's css reset, having a ready basic reset+grid in a 1.7kb file before minifying.

Yeh I am generally more interested in the gallery on 960.gs, I think I use the css framework once but wasnt all that keen, the examples and http://960.gs/demo.html I do find very useful though.

Also see "Design for the Coder's Mind" http://www.kadavy.net/blog/posts/design-for-the-coders-mind-...

The post takes for granted a huge piece of good design philosophy in eating your own dog food. Obviously it's a good sign that the author felt the need to point out that the programmer is (almost) never the typical user, but first being a user of your own product is the critical step that precedes this.

Hi, my name is Bill and I do crappy designs. But, I think with help from this post I'm ready to move onto Step 2.

In all seriousness, the post comes at a great time. I'm starting to do front end again for the first time since early 2K. I've always been appalled at how functionally ugly my UI's are.

As a developer starting to wrestle with some design concepts myself, I think you've laid out some good things to keep in mind.

Thanks that is exactly what I was looking for, just some things to keep in mind while designing, I think I will do a follow up with more practical and actionable advice.