Hacker News Reader

Comment by Vindexus | Hacker News Reader

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.

View on HN

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/

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.

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.

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

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?

Have you tried using Adobe Kuler? kuler.adobe.com/ They have a great collection of color pallets that you could use. Start off with a common base and go from there and then test away and get feedback.

For copy, I'm getting a lot out of "Building Great Sentences: Exploring the Writer's Craft"http://goo.gl/9eH5q, which breaks down the craft quite well.

For choosing colors, I'd suggest starting with a palette from elsewhere. Just like Kuler as louhong mentioned. Starting with proven colors will be better than choosing from scratch. And that applies to everyone, not just you.

I think in your case, feedback and validation from peers will be essential. However you'll have a leg up on the rest of us. Designing for accessibility is a challenge you already understand better than I do.

As for writing copy, there are definitely people more qualified to advise you than me!

I'm in the same boat - a colorblind engineer. I always browse kuler, and google stuff like "web design awards" to find examples. Also, if you can pick up a copy of Illustrator it has a cool color picker feature that allows you to look at different color options based on color theory (complimentary, analogous, etc.)

John Hicks (of Firefox-icon-fame) is a colorblind designer. He gives some hints for coping on his blog sometimes -- http://hicksdesign.co.uk/tag/colourblindness/

Thanks so much for sharing this. Fantastic. I had no idea Hicks is colorblind.

Reply on news.ycombinator.com