HN Explorer

11 comments

[ 3.0 ms ] story [ 43.5 ms ] thread
perezd
Share your tips too, here in the comments, or on the article itself.
KevinMS
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
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
So I guess you've somehow missed all those huge sites out there that look like crap?
kevinelliott
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.
stoney
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
Thank you for introducing me to http://bjango.com/articles/

So much good stuff there!

keyle
I agree, there are a couple of articles on there that thought me things. Which is rare after 10 years on the job.
ljegou
Yep, especially about noise and texture.
zray
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...)