

Design Tips for Programmers - daleharvey
http://arandomurl.com/2010/07/07/design-tips-for-programmers.html

======
wheels
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...](http://img.skitch.com/20100706-bn6hbwa1qsb2q8isdjnn254p9y.png)

~~~
jasonkester
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?

~~~
wheels
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-dcay3gni71sbq8da6meas97898.png)

[http://img.skitch.com/20100706-q3hw63fswsfapwx71pdkm4x4sc.pn...](http://img.skitch.com/20100706-q3hw63fswsfapwx71pdkm4x4sc.png)

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. ;-)

------
apike
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?

~~~
jaimzob
"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.

~~~
brianwillis
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.

------
mgrouchy
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.

~~~
daleharvey
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.

------
zalew
@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.

~~~
daleharvey
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.

------
kadavy
Also see "Design for the Coder's Mind"
[http://www.kadavy.net/blog/posts/design-for-the-coders-
mind-...](http://www.kadavy.net/blog/posts/design-for-the-coders-mind-reverse-
engineering-visual-design/)

------
VengefulCynic
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.

------
bpyne
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.

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

~~~
daleharvey
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.

