6 ms·

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 fin

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.

studiofellow 15y ago
Thanks so much for the list. I'll make sure it's covered.
- thaumaturgy 15y 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?
  - louhong 15y ago
    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.
  - ulisesroche 15y ago
    For copy, I'm getting a lot out of "Building Great Sentences: Exploring the Writer's Craft"http://goo.gl/9eH5q http://goo.gl/9eH5q, which breaks down the craft quite well.
  - studiofellow 15y ago
    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!
  - javek 15y ago
    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.)
  - 286c8cb04bda 15y ago
    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/ http://hicksdesign.co.uk/tag/colourblindness/
    - studiofellow 15y ago
      Thanks so much for sharing this. Fantastic. I had no idea Hicks is colorblind.
ulisesroche 15y 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.
julian37 15y 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://colorschemedesigner.com/ http://www.colourlovers.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 http://en.wikipedia.org/wiki/Color_theory and this old comment of mine: http://news.ycombinator.com/item?id=2130084 http://news.ycombinator.com/item?id=2130084 EDIT: this page, linked from the Wikipedia article, is also quite informative: http://www.worqx.com/color/ http://www.worqx.com/color/
askmeaboutloom 15y 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.

studiofellow 15y ago

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

thaumaturgy 15y 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?
- louhong 15y ago
  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.
- ulisesroche 15y ago
  For copy, I'm getting a lot out of "Building Great Sentences: Exploring the Writer's Craft"http://goo.gl/9eH5q http://goo.gl/9eH5q, which breaks down the craft quite well.
- studiofellow 15y ago
  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!
- javek 15y ago
  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.)
- 286c8cb04bda 15y ago
  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/ http://hicksdesign.co.uk/tag/colourblindness/
  - studiofellow 15y ago
    Thanks so much for sharing this. Fantastic. I had no idea Hicks is colorblind.

ulisesroche 15y 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.

julian37 15y 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://colorschemedesigner.com/ http://www.colourlovers.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 http://en.wikipedia.org/wiki/Color_theory and this old comment of mine: http://news.ycombinator.com/item?id=2130084 http://news.ycombinator.com/item?id=2130084 EDIT: this page, linked from the Wikipedia article, is also quite informative: http://www.worqx.com/color/ http://www.worqx.com/color/

askmeaboutloom 15y 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.