4 ms·

Thanks for submitting this. I'm the author. I'm still in the process of writing and would love to make this a collaborative project. If you have topics or idea

Thanks for submitting this. I'm the author. I'm still in the process of writing and would love to make this a collaborative project. If you have topics or ideas you'd like to see covered, please leave a comment or shoot me an email. hello@BootstrappingDesign.com I'll also be sharing excerpts with the mailing list and on my blog.

Vindexus 15y 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.
- 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/
- 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.)
    - 15y ago
- 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.
- 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.
dconway 15y ago
One aspect of design that's been on our mind has been naming our product. Any general guidelines about naming websites would also be appreciated. (I've read GoDaddy's suggestions, but useful as they are, they're so sparse.)
corford 15y ago
Something that would be hugely useful to me (a code monkey who knows good design when he sees it but is incapable of producing anything that looks nice himself) is a chapter that covers a few essential skills in Photoshop or Fireworks. Basic nuts and bolts stuff like: - how to use a few simple effects and filters to blend images in to backgrounds or do a cutout or colorize an image to match the sites colour palette - useful tips or tricks for designing the chrome of the site (e.g. how to make a menu bar with rounded edges and a gradient effect, how to make nice looking buttons, how to make a textured background, how to blend edges etc. - how to use transparency and/or layers effectively Why would this be useful? Like lots of coders (I assume!), my approach to design is to surf around the web for hours and bookmark sites that I think look good or have ideas I can use. I then spend ages kack-handedly trying to bash bits of screen shots together and introduce new elements (buttons, stock photography etc.) until I have ended up with a design that looks vaguely appealing. If I had a quick cheat-sheet for Photoshop or Fireworks that aided this process it would be a god send!
- studiofellow 15y ago
  Great suggestion. Learning design software, at least basics, can be productive. Some designers will disagree on this point—many are moving away from Photoshop altogether. However it's more difficult to try color variations for a gradient by typing in hex colors, for example. Including up some basic techniques would make sense. (Every professional designer has a few go-to tricks.) I'm thinking about providing some free design files with the book. Just basic elements, like buttons, styles, etc than can be adaptable. (And easy to translate into CSS.) Would that be helpful for you?
  - znq 15y ago
    Where are they moving to?
    - studiofellow 15y ago
      The idea is to design directly in html & css. Sketch, then build prototypes. Skip photoshop/wireframe mockups altogether.

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

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/
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.)
  - 15y ago
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.
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.

dconway 15y ago

One aspect of design that's been on our mind has been naming our product. Any general guidelines about naming websites would also be appreciated. (I've read GoDaddy's suggestions, but useful as they are, they're so sparse.)

corford 15y ago

Something that would be hugely useful to me (a code monkey who knows good design when he sees it but is incapable of producing anything that looks nice himself) is a chapter that covers a few essential skills in Photoshop or Fireworks. Basic nuts and bolts stuff like: - how to use a few simple effects and filters to blend images in to backgrounds or do a cutout or colorize an image to match the sites colour palette - useful tips or tricks for designing the chrome of the site (e.g. how to make a menu bar with rounded edges and a gradient effect, how to make nice looking buttons, how to make a textured background, how to blend edges etc. - how to use transparency and/or layers effectively Why would this be useful? Like lots of coders (I assume!), my approach to design is to surf around the web for hours and bookmark sites that I think look good or have ideas I can use. I then spend ages kack-handedly trying to bash bits of screen shots together and introduce new elements (buttons, stock photography etc.) until I have ended up with a design that looks vaguely appealing. If I had a quick cheat-sheet for Photoshop or Fireworks that aided this process it would be a god send!

studiofellow 15y ago
Great suggestion. Learning design software, at least basics, can be productive. Some designers will disagree on this point—many are moving away from Photoshop altogether. However it's more difficult to try color variations for a gradient by typing in hex colors, for example. Including up some basic techniques would make sense. (Every professional designer has a few go-to tricks.) I'm thinking about providing some free design files with the book. Just basic elements, like buttons, styles, etc than can be adaptable. (And easy to translate into CSS.) Would that be helpful for you?
- znq 15y ago
  Where are they moving to?
  - studiofellow 15y ago
    The idea is to design directly in html & css. Sketch, then build prototypes. Skip photoshop/wireframe mockups altogether.