Typography, colour and techniques for visual priority (i.e. how to guide a user's attention to different sections within a page) are all things I struggle with.
I also wish a photoshop or illustrator "cook book for coders" existed which contained just enough recipes to learn the essential techniques needed to quickly mockup and experiment with how a page might look.
Typography, colour and techniques for visual priority (i.e. how to guide a user's attention to different sections within a page) are all things I struggle with.
I point people towards Robin Williams' "The non-designers design book" for all of these. It's not about the web - it's about some graphic design basics like contrast, balance, etc. - but they apply.
I also wish a photoshop or illustrator "cook book for coders" existed which contained just enough recipes to learn the essential techniques needed to quickly mockup and experiment with how a page might look.
If you want to do quick mock ups and experiments then Photoshop is not the tool you want. What you want is pen, paper and post it notes. Learn to do paper prototyping. Todd Zaki-Warfel's book "Prototyping" has a good section on it (http://rosenfeldmedia.com/books/prototyping/) and Paper Prototyping by Carolyn Snyder is the definitive book on the topic (http://www.paperprototyping.com/).
I use Balsamiq a lot and am comfortable in it (and I usually play with pen and paper before touching Balsamiq) but sometimes I'd like to produce a mock up that looks a lot closer to reality and I just wish I had enough command of the basics to be able to do this in photoshop or illustrator rather than cobbling together some html and css (which is what I do now).
Edit: to expand on the cook book idea, I'm thinking of recipes along the lines of:
- This is how you can quickly draw a button (and here's how to give it a gradient or a shadow)
- This is how you setup your canvas as a grid
- This is how you do layering (so you can try different headers, footers etc.)
- This is how you embed an image and clip it (and here are some tips on choosing images that are easy to work with and fit in to a design)
- This is how you make a repeating background
- This is how you blend one colour in to another
- This is how you do transparency
- These are some common gotchas to look out for
- These are some good practices you should follow (e.g. do it this way so that if you want to change all the buttons to a different colour you can do so with one click)
- This is a run down of some common layouts and what sort of content they're suited to
- Here are some solid online resources for fonts, background patterns, stock photography, icons, showcases of good design, forums/sites where real designers hang out
Basically, enough information and resources in a single reference book so a non designer can fire up photoshop or illustrator and be able to end up with a PNG file that's somewhere between a wire frame and the finished version you'll get when a real designer has worked their magic on it.
Fireworks is a good option, with pages and hotspots with browser export. Easy to create mid-high fi mockups, much faster than in photoshop for prototyping and user testing.
Faster to learn also.
I also wish a photoshop or illustrator "cook book for coders" existed which contained just enough recipes to learn the essential techniques needed to quickly mockup and experiment with how a page might look.