Design for the Coder’s Mind(Reverse-Engineering Visual Design)

{DaViD} KaDaVydavid@kadavy.nethttp://kadavy.net

Why learnabout Design?

if you’re a back-end developer, working on your own app, wouldn’t it be nice to not have to find a designer?

if you work with a visual designer, you may understand better next time they obsess over something that is 2px off.

Who am i? Why listen to me?

i come from a design background. i worked at an architecture firm, and my work was published in Communication Arts.

i taught a class on design, and my lesson plans are published in the book, Type Rules!

Most recently, i’ve worked as a designer and front-end developer for Silicon Valley startups.

What do designers do?Designers “put things in boxes.” We fulfill humans’ natural desire to make sense of ambiguous things.

Proportion

= ×3

One way designers “put things in boxes” is through proportion. We size and place elements in ways that make sense when you look at them – even if you don’t know why. The iPod is beautiful because of it’s proportions.

Proportion Grids allow designers to create areas of information that are in proportion with one-another.

Even the spaces around elements need to be in proportion.

Proportion

7 9 12 16 21 28 37 50 67 89 118

These days, you can make type any size you want. But it’s good to pick some sizes (that are in proportion with one-another) and stick with them.

Here’s the scale i use. i built it by taking my smallest type size (7), and dividing it by .75 over and over again (a 3/4 ratio).

Proportion Facebook does a good job of managing proportion. Type sizes are 9, 11, 13, and 16. The space around elements are well-managed, too.

ColorSome people think you need inherent talent to choose colors. That’s not true.

Designers have learned how to choose colors based upon their relationships with one another on the color wheel.

Color

analogous

Digg.com uses an analogous color scheme. That’s any three colors that are adjacent on the color wheel.

Color

Split Complimentary

Threadless.com uses a split complimentary color scheme.

Color

Complimentary Tetradic(double complimentary)

TriadicThere are other popular color schemes as well. When choosing colors, you can change the lightness and saturation of the hues you pick, too.

Reading DirectionDesigners use reading direction to dictate what you look at first.

The picture in the main article is to the right of the headline because pictures are dominant, and we read left-to-right.

if that headline is to have any chance of being read, it better be to the left of the picture.

WTF?Questions, comments, or feedback? Please e-mail

david@kadavy.net