December 10, 2024

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

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.

Share

One Ping

  1. Pingback: The Most Popular Articles of 2009 | Web Design Ledger

99 Comments

  1. Eli Reply

    A lot of it just seems like common sense, but it’s probably surprising to find how many people don’t think of these things.

    Definitely a useful article, especially for those just starting web design.

  2. Renee Brisson-Khan Reply

    I thought it funny that you specifically referenced 5 fonts as over the top. I’m a graphic designer and I have actually seen letterhead with this problem…and that’s without the letter printed on it yet. I’ve since called it “the 5 font horror”. Even wrote a blog about it. https://rbkartworks.wordpress.com/2009/06/18/5-font-horror/

    Not every blog post has to be for advanced users, I’ve bookmarked this to pass on to the DIYers I know who’d like a base to build with.

  3. byter Reply

    This is the best and most comprehensive do’s and don’t web design article i’ve ever read. Frankly, i have read loads of stuffs like this, but your article is the best. very enlightening in terms of web design issues. thanks!

  4. Robin Cannon Reply

    Good common sense article. Or at least you’d hope it’s common sense. Yes, this is information that’s everywhere on the web, but there’s always new people coming into the world of web design who could do with a little checklist, if only to get them started on the right path with the very basics.

    One addition to choosing the right color scheme – don’t be afraid to be different. Yes, take a look at some color theory and the links between color and emotion, but don’t just make your site number 783,821 of a series of pastel blue just because everyone else is doing it. Be prepared to be daring.

  5. W3planting Reply

    Nice article Mike. Some novice designers, most of the time fall in this trap
    1. Make everything images, to make the site look more attractive.
    2. Use lot of different colors
    3. Use more then 2-3 types of fonts

  6. Cristian Reply

    Nice list. As stated above, it’s all common sense, but common sense is not that common. Just look at any give site. Clutter and confusion reign supreme. That’s why it’s such a nice break to find well designed sites. Gives the eye a rest and effortless draws users.

  7. myfr3ak Reply

    100% totally agree with you. most of Malaysian blogger still use animated gif, page with full of ads, and some of that, embedded online radio @ mp3 playlist that automatic play on load. *sigh*

  8. Garry Williams Reply

    Thanks for that.

    Another: Don’t use grey fonts on white backgrounds. It hurts my eyes after more than two sentences.

  9. Michael Pham Reply

    I find this article offensive. My site has all of the don’t and none of the do’s and so far I’ve had nothing but success.

  10. Wil Reply

    Thanks for this good list. It’s always a good reminder on the various do’s and don’ts. Although I do find killer copyrighting hard to achieve!

  11. Lauren Reply

    All good tips – one day I’ll try to create some examples of what NOT to do — either making a fake page with everything done incorrectly or just pixellating the domain name to protect the innocent. Actually, come to think of it, I’ve probably ALREADY done most of these things at one time or another. Egad.

  12. John Campbel Reply

    Great list. My biggest challenge with DesignBump is trying to improve load times. It seems all the images and JS files I have currently are necessary, so trimming them down to improve speed is a bit difficult.

  13. Chris Morata Reply

    Wonderful article. This is especially useful for those learning the basics of web design and user experience. I would’ve liked to have seen a little more discussion on the use of semantic HTML (heading tags, paragraph tags, etc.) but other than that I thought the article was great!

  14. miguelmonster Reply

    Here’s one for the ledger – keep your content area wider than the add area. The first thing I think at the top of your site is “Wheres the article?” Then I’m even more bummed out when I have to scroll to get to it. On a large screen no less…

    1. Henry Reply

      @miguelmonster: You make good points that we are already aware of. Web Design Ledger wasn’tdesigned to display this many ads, but I’ve had to fit them in. Since this is a business we can’t exactly turn down good sponsors. The good news is that I am currently working on a redesign of WDL, which should be launching soon. Thanks for your feedback.

  15. Mike Smith Reply

    I am so glad everyone’s found the article useful. Yes, these are some common sense items, but sometimes a specific item on the list might slip your mind, or like it’s been said above, new web designers (or old web designers who don’t have common sense) might find this useful.

    I also want to thank Henry for running such an awesome site and allowing me to write for it. Here’s hoping we get that 1 million visitors Henry! 🙂

  16. Bruce Reply

    Good article. However, there is one more thing that I would consider very important – screen resolution. Some designers tend to forget that what looks good on a 1440 resolution looks absolutely ridiculous on a 1024 resolution.

    A good 24% of visitors still use 1024 resolution – which means that a general one-fourth of your traffic wouldn’t see the optimized page you design. As for graphics, if you have a good compressor for your images, you can increase image rendering speeds by 60-70% while maintaining about 90% of the quality of the graphic.

    It is true that there are a lot of websites that have moving text, monkeys crawling everywhere on the page holding a sign saying “Welcome To Our Website!”, and menu schemes that is as old as the days of windows 95, but surprising it is that some still perform very well.

  17. create website Reply

    These are excellent tips for creating your website. Many people think that more is what you need and that is quite the opposite. You need to have a certain amount of “whitespace” on your site in order for it to not seem cluttered to the viewer.

  18. Jen Pennington Reply

    What’s nice about the list is that designers can send it to possible new clients as a primer before starting a project. This way it educates the client and allows the designer to actually design, and move forward on a project without having to always defend some of their choices.

  19. MTN Contracts Reply

    Fantastic post. Between SmashingMag and WDL there’s absolutely priceless info even the most hardened designer can learn from! This is the kind of post I would re-read every time I design a new site.

  20. Prem Sichanugrist Reply

    This is such a wonderful article!

    I wonder one thing …. What is the license of this article? Can I translate this article and posted on my blog, since I want to share it with Thai web developers?

    Thank you 🙂

    1. Tony Reply

      Apostrophes aplenty in the body text.

      Oh, you’re (apostrophe included!) right: every other heading starts with “DONT”!

  21. Matt Reply

    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.

  22. Kevin Zurawel Reply

    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.

  23. Robert Reply

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

  24. aikiwolfie Reply

    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!

  25. Tony Reply

    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 . . .

  26. ryanMoultrup Reply

    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.

  27. Dr Nandita Reply

    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

  28. Mikel Kahao Reply

    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.

  29. Logan Reply

    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…

    1. Henry Reply

      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.

  30. Stefan Reply

    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

    1. Henry Jones Reply

      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.

  31. JamieK Reply

    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.

  32. Ajay Mahajan Reply

    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

  33. Steave Stern Reply

    The FitnessGramâ„¢ Pacer Test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20-meter pacer test will begin in 30 seconds. Line up at the start. The running speed starts slowly but gets faster each minute after you hear this signal. [beep] A single lap should be completed each time you hear this sound. [ding] Remember to run in a straight line, and run as long as possible. The second time you fail to complete a lap before the sound, your test is over. The test will begin on the word start. On your mark, get ready, start”

  34. Grace McVeigh Reply

    Very useful. Do you have any other tips of how to initially avoid these issues when designing a website of your own?

Leave a Reply

Your email address will not be published. Required fields are marked *