top | item 3188200

(no title)

Vindexus | 14 years ago

As a developer I often struggle with the following things:

Picking a color scheme. What colors work well together? Why do they work well together? How do I find good color schemes? Is there a formula or something?

White space. How much should I have? I normally just operate in increments of 5px until I think something looks good. "Looks good" ends up being smaller than other sites when I actually compare though.

Font choices and colors. I always just use arial for body text and I'm fine with that. My headers always look very bland though. What fonts compliment what? Should my headers be darker or lighter than my body text?

Gradients and box shadows. I know they can look nice and I know some people do it well, but whenever I add this kind of stuff to my graphics I think it looks corny.

Those are some things I find frustrating when designing.

discuss

order

julian37|14 years ago

Regarding your question, "how do I find good color schemes?", here are two web sites I found useful in the past:

http://colorschemedesigner.com/

http://www.colourlovers.com/

Poking around Color Scheme Designer should also answer your question "is there a formula?" -- the answer is yes, there is (bad taste notwithstanding).

See also http://en.wikipedia.org/wiki/Color_theory and this old comment of mine: http://news.ycombinator.com/item?id=2130084

EDIT: this page, linked from the Wikipedia article, is also quite informative: http://www.worqx.com/color/

askmeaboutloom|14 years ago

I'd like to second this. Especially the "why". I do recognize a good design when I see it, and there's an overwhelming wealth of tutorials on the web. But, for me, the link is missing - _why_ does this look good?

Why is Helvetica better than Comic Sans? There must be a reason other than "obviously, it looks better". Don't hesitate to show me the math, and the formulas. I got a machine with me. It can calculate pretty good.

ulisesroche|14 years ago

You can use a color wheel to come up with color schemes, and I'd try using ems instead of pxs to handle whitespace. Whitespace is negative space, used for contrast to draw attention to positive space, which could be your copy, let's say. Use a grid to make sure you keep everything aligned and to help you figure out where to put stuff in.

I really like Futura or Baskerville for headers, and I think you should pick a bright, contrasting color against the body copy.

Gradients and Box shadows do look really cheesy with just CSS. The trick is that you should always add a little noise, somewhere between 1 or 2 percent, to your gradients or shadows so you can make them look more textured instead of just flat colors. There's a filter called "Film Grain" which I think is much better than "noise", but it's usually an external plugin. You're gonna have to hit photoshop for that, because I don't know if there is a noise/grain css effect.

studiofellow|14 years ago

Thanks so much for the list. I'll make sure it's covered.

thaumaturgy|14 years ago

Also: I am a colorblind engineer. How can I pick color schemes that don't make infants cry and write copy that isn't a legendary cure for insomnia?