Wednesday, 9 April 2008

What are your tips for great web design?

Colourful panels

Rather than add to the already filled-to-the-brim Digg bin of top 10 tips for web design, I thought it would be interesting to look at what YOU think are your top tips for web design.

Johnathon Longnecker in Top 10 tips for creating kick awesome websites says:

“Your web typography will set your design apart from other studios. Study optimum line heights, widths and look for inventive ways to guide the viewer through your layout only using CSS rules. Flash replacement (sIFR) is alright, but don’t overuse it.”

Smashing Magazine say in Ten principles of effective web design:

“Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work.”

Danielle Mai in Web design tips says:

“Your home page (including HTML, graphics, etc.) should be less than 80KB in file size and should take less than 20 seconds to download at 56K. Remember less is more.”

David Airey in Five important design aspects of any website or blog says:

“Don’t clutter your website with every widget or third party advertisement you can. Less is most definitely more where design is concerned, and two or three well-placed ads will attract much more attention than a host of flashing icons.”

Benajmin Doolittle in Tips for effective web design says:

“Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions.”

Joshua Clanton in Five web design tips from Michelangelo says:

“Vary your techniques. I think that recognizing your own tendency to use certain techniques instead of others can be a great springboard into figuring out how to approach your work in new and interesting ways.”

What are your tips?

If there is only one top tip that you’d offer to others for designing fantastic web sites, what is it? Do you particularly agree or disagree with any of the tips above?

18 fantastic comments

Those are some awesome quotes. It’s pretty cool to be up there with Smashing Magazine and David Airey. Thanks for the link!

No problem Joshua. In fact I love the two articles you have written re Michelangelo and Da Vinci – I look forward to more.

Benajmin Doolittle’s observation about users still being at 640 x 480 is a little dated, but the principle is not.

I think designers also need to understand what design means: it’s not about style, it is about functionality. I’m not saying it shouldn’t be pretty, but remember that the reason the website exists is generally not to push the bleeding edge of the technology, but to present information. If the user can’t find the information for all the pretty images and widgets, the design is a failure.

Lauren – I agree, 640 x 480 is a little old-skool. This site’s design introduces horizontal scroll bars at about 1000px so I certainly don’t meet that tip. But yes, the principle is valid.

Agree completely with your tip on the ‘meaning’ of design. I think ‘design’ is often confused with ’style’, and certainly with web design I see problems get solved that don’t exist. Good tip.

I think that all new computers are shipping with monitor settings at least 1024 x 768, but maybe about 960px wide is a good guide for “above the fold” area because of browser inclusion. I know there are still older monitors at 800×600, but that is becoming more and more rare. Now we have to start worrying about mobile devices!!

Thanks very much for the mention, Aaron.

Joshua reckons it’s pretty cool to have his quote mentioned alongside mine. I think it’s pretty cool that he finds that pretty cool!

Cheers Josh. ;)

David – That’s because you’re some kind of blogging superstar. You’re like the, erm, Telly Savalas of the blogging world.

@David: Cheers!

@Aaron: Who? I’m thinking David’s more like the Morpheus of the design blogosphere. He takes us and shows us what’s possible. ;-)

those are all great tips, but I think that there is one thing that doesn’t get much attention – it’s making the site’s design appropriate and adjusted to the client’s needs. Of course, in certain cases we should educate the client, but more often we should listen and understand what client’s needs are and transfer them into the design and functionality of the site.
Even when we design a site for ourselves we need to treat ourselves as clients, clearly define the goal and purpose of the site, its target audience and the message that the site/business must convey to its visitors.

Vivien – A good addition. In fact the client and their needs haven’t been given much attention at all. Your point kind of tallies with Lauren’s point about understanding the ‘purpose’ of the design, and more often than not it is the client who will dictate the purpose. You’ve sparked a little lightbulb in my head (always a dangerous thing) for a topic for an article…

Joshua,

Telly Savalas (formerly the heroic Kojak) can be seen here: http://en.wikipedia.org/wiki/Image:Kojaktelly.jpg

I think we share a lot of similarities in the looks department.

Hey thanks for the Props. I m deff gonna subscribe : )

benjamin ~ fazeonestudio dot com

Very interesting quotes, thank you.

Benjamin – No problem. Glad to have you subscribe.

Tisk – Thanks for stopping by and commenting.

Ah. That explains it. :-)

Great article, Aaron. I enjoyed to little gems from some respectable designers who actually know what they’re talking about.
Stumbled!

Thank’s again for the stumble, Armen. As always, much appreciated. Also thanks for the email you sent. I look forward to talking to you more about that ;)

My top tip has less to do with what people see and more to do with the code you write:
Define a coding style and stick to it. This is a benefit when you need to come back to a web site after a period of time, its makes it easier to find those parts that you need to change/update. Its also a benefit to others who may need to update your code. For example, with my code all nested tags are indented so that I can easily scan through the code and find the various sections. List items in a ul or ol are indented 1tab/4spaces from the opening and closing ul / ol. I can easily scan through and see where a list begins and ends. This frees up time spent searching, leaving more time for other things.

What are your thoughts?