Hacker News Reader

Comment by studiofellow | Hacker News Reader

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.

View on HN

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.

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.

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.

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.

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!

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?

Where are they moving to?

The idea is to design directly in html & css. Sketch, then build prototypes. Skip photoshop/wireframe mockups altogether.

Some basic skeleton elements would definitely be useful - even better if the chapter showing how to use basic tools within photoshop made use of these bundled elements e.g. it showed how to take the button and then apply different effects e.g. change its colour or give it a gradient

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.)

Reply on news.ycombinator.com