My (hastily written) Tips About Designing for the Web (opens in new tab)

Thank you for introducing me to http://bjango.com/articles/

So much good stuff there!

What I'd really like to see is tips to make a webpage look "professional". I suspect you can take a great looking website, screw the colors up, mess around with the fonts, and even not design with a grid, and it will still look "professional". Am I not right about this?

I've seen Derek's design abilities grow over the last couple of years, and I think his post seems to sum up many of the steps he took to improve.

A few hastily written tips of my own:

- Respect the fold. Users do scroll more but they spend far more time above the fold than below.(http://www.useit.com/alertbox/scrolling-attention.html)

- Use a grid, then break it when you want to get people's attention.

- Don't be afraid of repetition, multiple CTAs on a page make it easier for users to take the next step.

- Typography is more than fonts, use scale and weight for contrast and heirachy (http://www.papress.com/thinkingwithtype/text/hierarchy.htm)

- Make the first click as easy as possible. The user should be able to see what's important on the page at a glance, and the required action should not be obstructed by unnecessary choices.

- Use Fireworks. It's got great workflow, asset management, vector tools and prototyping features. It plays nicely with Photoshop, Illustrator and Flash but is cheaper than any of them. (http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choo...)

I like to get inspiration from magazines, books, art, music, and photography. Basically trying to get any creative inspiration away from the computer.

Jessica Hische sums it quite appropriately in her latest blog post: http://jessicahische.com/spendstoomuchtimeinternetting/?p=75...

Thanks for tip 4 - I had completely underestimated the power of Compass. I started using it recently mainly because I wanted to use Blueprint and SASS. I missed all of the cool mixins that Compass adds.

If anyone from the Compass project is reading - improve your documentation!

Share your tips too, here in the comments, or on the article itself.