My (hastily written) Tips About Designing for the Web | Hacker News Reader

My (hastily written) Tips About Designing for the Web

blog.derekperez.com

58 pointsperezd11 comments

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

So much good stuff there!

I agree, there are a couple of articles on there that thought me things. Which is rare after 10 years on the job.

Yep, especially about noise and texture.

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!

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?

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.

So I guess you've somehow missed all those huge sites out there that look like crap?

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

Reply on news.ycombinator.com