20 Do’s and Don’ts of Effective Web Design

By / Oct 25, 2009 / Tips
shares

When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldn’t cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing – sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.

Below are twenty do’s and don’ts of effective web design. Study, read, (re)read and print this page. It will help either make or break your website. And don’t hesitate to let us know of anything we might have left out, in the comments below. We love getting your opinions on things and discussing the articles with you – after all, you’re quite possibly the coolest people in the world.

DO: Keep your page structured

In the recent months we’ve seen an explosion of great grid layouts and css files. The most famous (in my opinion) being 960.gs and one of the cooler, more light weight grid systems being the 1kb grid. Following after the structure and balance of a great magazine/newspaper, these grid systems help lay out information in a structured and easy to follow format.

Example

DONT: Just place boxes everywhere

We’ve all seen these types of websites before – 20+ boxes, all different sizes, nothing lining up properly and not on piece that actually grabs your attention because you’ve just ran into a whirlwind of craziness. if you’re a web designer and you cannot properly place items in a structured environment, well, I would’t really call yourself a web designer.

DO: Focus on what’s important

Are you building a website for a business that sells one specific product? If so, make sure that’s the focus of the home page. Allow yourself space on the inner pages to place calls to action for that specific item. If you’re building a blog that gives out freebies or writes tutorials, make sure they’re getting the proper amount of focus and attention. Websites like WOO Themes do a great job and putting forward what their main focus is – wordpress themes.

Example

DONT: Place irrelevant ads across your page

If you’re going to try and make money from your website/blog, do yourself a favor and lay off the excessive advertisements. If your page loads and has 70% ads and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content.

DO: Choose the right color scheme

Knowing what your readers emotions are will help you in choosing the proper color scheme. You won’t want a bright and ‘loud’ color scheme if your website is in the meditation niche. You’ll notice that most punk rock bands have CMYK color schemes (pink, yellow, black and blue), while a doctor/medical website will generally stick with a lighter, more ‘open’ color scheme

Example

DONT: Overdo it with 20 different colors

Having every color that is inside the 64 set of crayons on your screen will not only look bad, but it will annoy your readers and drive them away. Your colors should blend well together, not clash. If you’re not good at picking color schemes, I’d suggest a site like Colour Lovers which has user generated color schemes posted. Find the right color scheme (at most, 5 colors) and see how much better your designs turn out.

DO: Make it easy to scan your pages

People will not spend 5 minutes trying to figure out what your website is about and what it has to offer. The best way to ensure you’re getting the right information out to your reader is to make the page easy to scan. Use proper H tags (similar to how this post is using h3 tags) to focus on the important items. You can also use pull quotes, block quotes and images.

Example

DONT: Write one paragraph per page that is 1,000+ words long

If there’s one thing that stops me from subscribing to a blog is that the posts are literally 1,000+ words and have no paragraph breaks. This, and they normally don’t even have blog words or any indication that there’s anything important inside their content. Break your content up and make it easier to read – please, and thank you.

DO: Keep it simple stupid

It’s a proven fact that sign up forms with more than 3 items (usually – name, email & one other item) will have a significantly lower sign up rate than the easier forms. People HATE doing things for too long – so don’t over complicate things. Make things as easy as possible for your readers by pretending a 4 year old will be viewing it. It definitely helps get things out in the open where they need to be.

Example

DONT: Go on and on (and on) about nothing

Rambling, excessive LOL’s, too many smiley faces and random dribble will drop attention spans of your visitors. You want them to stay – act like it. If you have a personal blog where you write about your life, thats one thing, but to randomly post about what you ate, or where you went yesterday on your business website will definitely drive people away.

DO: Focus on killer copywriting

Words matter. Keep them short, sweet and to the point. If you have trouble writing copy that attracts the readers attention to where you need it to go, hire someone. Copy is just as important as the design of your website. Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.

Example

DONT: Stuff your pages full of keywords

Google isn’t stupid. Neither are your readers. If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit.

DO: Set your navigation up properly

If you’ve got a sign up page on your website, maybe you’ll have your main navigation in a blue color, while the sign up button is in a green color. Regardless, you’ll want to make your navigation easy to spot and easy to use.

Example

DONT: Make your readers search to find something

Your readers shouldn’t spend 30-40 seconds trying to find a contact or about page. They also shouldn’t have to click through three pages just to get to a sign up form. Get the important things out in the open. For the items that aren’t required to have a strong focus on your website, you might want to invest in a search box – I HATE when websites don’t have a search box. Web design 101 maybe?

DO: Optimize your load times

If there’s one recurring theme in this entire article it is the fact that visitors are impatient. You need to build your website with optimal speeds and allow your page to load in around 1-2 seconds. You can do this by making sure your css files are compressed, using the google hosted javascript files and ensure your page is coded and designed with optimal speeds in mind.

Example

DONT: Make everything on your page an image

Text on a website is there to be exactly what it is -text. There is no need to make the text blocks of your site jpg images. Also, making your website background 1MB or more in size will also cause your page to load very slow. I’ve seen websites also use 2 different javascript libraries and load 10+ plugin scripts for them in the headers and their websites took around 20 seconds to fully load.

DO: Choose the right fonts and sizes

I’ve only recently got into typography and have realized that it is a highly important aspect of web design. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font.

Example

DONT: Have 5 different fonts in 10 different sizes

Picture this: Page titles are in times new roman, content for those pages are in Arial, navigation links are in comic sans and the sidebar is in impact (yes, that impact). How ugly does that look? Now, remember that vision the next time you want to build a website with 5 different fonts.

DO: Make your page visually appealing

The world may tell you that people don’t judge a book by its cover, but thats a lie. The first thing people see is the web design you’re branded with. That first impression better be a good one. Utilize textures/gradients that give your website depth and draw attention to the beauty of your design. I would strive to ensure each of your website designs are accepted to galleries like css mania.

Example

DONT: Throw a bunch of crap together and think you’ll do well

Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year olds myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it. If you’re a professional, act like it and make sure your designs are up to par.

Here’s where you come in

Below is a comment box. We’d love to have you use it and let us know what you think. I’ll even make sure I respond to any of your questions, because, lets face it – you’re important to us here at Web Design Ledger.

97 Comments

  1. Adam Hermsdorfer
    November 1, 2009

    I agree with Christian’s comment. Great list for novice designers.

    Reply
  2. Matt
    November 1, 2009

    This is an excellent list, another thing that may be important, particularly when considering the “blocks everywhere” scenario is not to use too many features. Many content management systems, such as WordPress, Drupal, Joomla etc have many features available which can lead to attempting to incorporate their functionality into the design when in reality, that function may not even be needed at all.

    This might fit more with development but it very much affects design.

    Reply
  3. wien
    November 2, 2009

    nice post, very helpful, thanks

    Reply
  4. Cippo
    November 2, 2009

    Cool article, thanks for sharing it. I’m in a middle of redesign process for my website and this article is helpful. Thanks again

    Reply
  5. Kevin Zurawel
    November 2, 2009

    It’s a nice list of basic tips. I especially like your tip about choosing the right colors – bold, saturated colors for sites that want to be in your face, and lighter, “open” colors for sites that are trying to be more calm.

    Reply
  6. jake pucan
    November 3, 2009

    Nice Job! Thanks for sharing=)

    Reply
  7. Bill McEntee
    November 4, 2009

    Terrific list! Thanks for taking the time.

    Reply
  8. Egg Design
    November 9, 2009

    Cool, thanks for the tips. Some lovely sites there too.

    Reply
  9. Juan Torrijos
    November 11, 2009

    I was hired to redesign a website and am in the middle of doing so. This list has worked wonders for me. Thanx a lot all the way from Panama City, Panama. :D!!!

    Reply
  10. honour chick
    November 12, 2009

    great advice, will do in practice… thxs ;)

    Reply
  11. ThunderZeaL
    November 12, 2009

    thanks for these tips, it’s really relevant.

    Reply
  12. Robert
    November 16, 2009

    I like this article! It’s very straight to the point…. Actually, it’s what every web designer should know!! It’s basic stuff…. =)

    Reply
  13. Joey Dodge
    November 17, 2009

    Excellent Post!, especially about the animated GIF part. I can’t stand that dancing cowboy and 1980′s banner!

    Reply
  14. aikiwolfie
    November 17, 2009

    Excellent list. A lot of good basic advice here in a fun format and interesting format.

    My contribution to the list is;

    Don’t Become Obsessive Over Web Standards and Technologies!

    Personally I like nothing more than simply using what works. And in most cases sticking to web standards works. But sometimes you need to be more flexible. After all we all have to cater to the client and the clients audience. The client pays the designer.

    So don’t start getting all art house arrogant over things. Focus on the job at hand.

    If your client is trying to maximise web exposure. Stick to open web standards and tried and tested methods. Make sure the design works with IE.

    On the other hand if the client is trying to catch the eye of the more modern hip web surfer then don’t be afraid to make sure the web site works with Firefox, Safari and Chrome.

    If it’s a corporate web site. Test it out on a mobile device. Especially smart phones. Corporate surfers need access on the move!

    Reply
  15. Tony
    November 19, 2009

    Let’s be fair to frames: they mostly got a bad reputation because they were mostly badly used.

    (And yes, I’m guilty of indulging in this myself!)

    In the latter days of dial-up putting your logo and navigation in side/top frames and juggling your content centre-stage could save a worthwhile chunk of page-load time.

    These days, with broadband fast becoming the norm, a k or two of text in the html/php is the least of your worries – a drop in the ocean compared to video or shockwave.

    Search engines aside, I swore off frames forever for a wholly different reason:

    I have a friend who is registered blind, who told me that frames really screw up his screen-reader.

    “Tables can be bad enough, but frames really kill a website.”

    One day I’ll gather enough courage to ask him what css positioning does for him. After I’ve indulged myself a bit . . .

    Reply
  16. Kaushik
    November 23, 2009

    Thanks a lot :)

    Reply
  17. Ashely Adams : Sticker Printing
    November 26, 2009

    Thanks for this basic list….This will certainly help new designers..I would like to add that it would be better if one can come up with some creative ideas for the design…

    Reply
  18. Kuzma
    November 26, 2009

    Your banner ad at the bottom of the page is 1px off to the left in Chrome :P

    Reply
  19. Brian Jones
    December 8, 2009

    Great tips – thank you for sharing

    Reply
  20. Bob Ruffolo
    December 14, 2009

    Awesome Article. Great Tips. Thanks.

    Reply
  21. The Most Popular Articles of 2009 | Web Design Ledger
    January 3, 2010

    [...] 20 Do’s and Don’ts of Effective Web Design [...]

    Reply
  22. ryanMoultrup
    January 4, 2010

    You’d think all this would be common sense this day and age in the web. However I am still shocked on a daily basis how poorly some websites are designed. Everyone who is attempting to design/develop a website needs to be aware of all the point that were hit on. This is a great list that covers a lot of the mishaps you see all over the internet today.

    Reply
  23. Alex
    January 4, 2010

    Good article and enjoyable read.

    I think the “it’s no longer 1980″ should be closer to the ’90s.

    Reply
  24. Richard Georges
    January 10, 2010

    Great list. I have a friend who is a beginner, I will make sure and forward this list to her.

    Reply
  25. Husien Adel
    January 24, 2010

    nice article , i think to print it and translate it to Arabic and put the link of it , if you don’t mind :D

    Reply
  26. Luigi Fulk
    January 31, 2010

    Found you on Twitter, some of my followers recommended you – and I’m not disappointed after reading this. Great resource.

    Reply
  27. cssclassic
    February 14, 2010

    Very Excellent Article.

    Reply
  28. Mahmoud Tantawy
    February 17, 2010

    Thank you for the great advice :)

    Reply
  29. rubber band bracelets
    February 28, 2010

    Hello, I just thought I would post a comment and inform you that your blogs layout is really messed up on the Firefox browser. Seems to work fine in Internet Explorer however. Anyways keep up the great work.

    Reply
  30. solexy
    May 17, 2010

    good article, useful advice, thx

    Reply
  31. Dr Nandita
    June 23, 2010

    Hi! i am just in the process of getting a website developed. Your article of do’s n don’ts was really helpful. Thanks :) Lookin forward to more soon

    Reply
  32. Mahesh Palghadmal
    July 20, 2010

    Nice Article, I will definitely use this in my design, Thanks – Mahesh Palghadmal

    Reply
  33. Mikel Kahao
    August 30, 2010

    Sigh, I am hooked to twitter followers now. All the people actually really don’t do a great deal for me, yet , it just simply delivers me a content effect on the inside being aware of that men and women are actually, well probably reading through what I write about.

    Reply
  34. Logan
    September 6, 2010

    Nice article. I’m always looking to improve my work, but sadly, this article didn’t tell me anything I didn’t already know…
    I do have an observation though:
    I came to this post and I found exactly what I was looking for. As a result, I simply read the article. My eyes never once drifted over to the right side of the page for longer than was necessary to determine what it was. The same can be said about the links between the end of the article and the comment form… I scrolled right past them.
    My question is this: Why is this extra content here? All that resulted from it was a slower load time on my browser. In my opinion you could do far worse than removing the stuff on the right side of the page and replacing it with the links to other articles that just seem to float in the middle of nowhere…

    Reply
    • Henry
      September 6, 2010

      Thanks for the feedback.

      I assume the stuff on the right that you’re referring to is the advertisements? If I removed the advertisements, WDL would no longer be. They keep this site going by providing revenue.

      Reply
  35. Jack
    October 2, 2010

    Nice tips!I would also like to read the author’s opinion on optimizing web design for sites that sell multiple models of machines.

    Reply
  36. Stefan
    November 13, 2010

    Dear All,

    I just thought I share my views on Mike Smith with everybody. We have recently contracted him to do our web-site but unfortunately the deal did not work out. While we have tried to resolve the situation, Mike Smith has not made any efforts to find a solution. He simply stopped replying. While we paid him a lot of money in advance, he did not deliver. The quality of work was very average and his attention to detail questionable (developed business card templates with spelling errors). Overall, we paid him US3,500 to get one logo, a business card and an e-mail signature. When the actual work should have start, Mike stopped responding to our e-mails.

    Thank you .

    Regards,

    Stefan

    Reply
  37. Jerry Scholder
    March 24, 2011

    Mike:

    What’s your reply to the last comment dated Nov. 13, 2010? Did you rip some one off and disappear or what? I anxiously await your side of the story.

    Reply
    • Henry Jones
      March 24, 2011

      Just to let you and everyone else know, Mike is no longer writing here. I similar experience with Mike as Stefan did. Needless to say, Mike has some character issues.

      Reply
  38. JamieK
    March 14, 2012

    Nice list of do’s and Don’ts. It will help newbies as well as experience designers and through this they can came to know about which points they have to consider and which are ignored.

    Reply
  39. Joe
    April 18, 2013

    Great blog post John, thanks!

    I recently published one on effective webpages, I hope it’s of use! http://brightbyte.co.uk/webpages-that-work/

    Thanks

    Reply
  40. Christina
    June 10, 2013

    very helpful:)

    Reply
  41. Howard Steele
    June 24, 2013

    Excellent post! After reading it you’re bound to design a gem of a website :)

    Reply
  42. Ajay Mahajan
    November 11, 2013

    I have realised that my personal website has too much of content… probably because i have built it myself and I am NOT a designer…

    Have been thinking of redoing the site and the pointers here make a lot of sense to me.

    Thanks John.

    Best

    AJ

    Reply

Leave a Reply