4 ms·

My (hastily written) Tips About Designing for the Web

58 points by perezd 16y ago

perezd 16y ago
Share your tips too, here in the comments, or on the article itself.
KevinMS 16y ago
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?
- zray 16y ago
  People tend to find bad design jarring, and brand perception suffers as a result. I don't think any site design would survive a mauling like you've described with its credibility intact.
  - KevinMS 16y ago
    So I guess you've somehow missed all those huge sites out there that look like crap?
kevinelliott 16y ago
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.
jamesteow 16y ago
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=756 http://jessicahische.com/spendstoomuchtimeinternetting/?p=75...
stoney 16y ago
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!
fookyong 16y ago
Thank you for introducing me to http://bjango.com/articles/ http://bjango.com/articles/ So much good stuff there!
- keyle 16y ago
  I agree, there are a couple of articles on there that thought me things. Which is rare after 10 years on the job.
- ljegou 16y ago
  Yep, especially about noise and texture.
zray 16y ago
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 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 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-choose-fireworks-over-photoshop/ http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choo...)

58 points by perezd 16y ago

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

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?

zray 16y ago
People tend to find bad design jarring, and brand perception suffers as a result. I don't think any site design would survive a mauling like you've described with its credibility intact.
- KevinMS 16y ago
  So I guess you've somehow missed all those huge sites out there that look like crap?

kevinelliott 16y ago

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.

jamesteow 16y ago

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=756 http://jessicahische.com/spendstoomuchtimeinternetting/?p=75...

stoney 16y ago

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!

fookyong 16y ago

Thank you for introducing me to http://bjango.com/articles/ http://bjango.com/articles/ So much good stuff there!

keyle 16y ago
I agree, there are a couple of articles on there that thought me things. Which is rare after 10 years on the job.
ljegou 16y ago
Yep, especially about noise and texture.

zray 16y ago

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 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 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-choose-fireworks-over-photoshop/ http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choo...)