Day 14: Elements of a Good Web Design

Now that your website has been set up, it is time to design it.  The way your website is designed creates a huge impact on the people who visit it.

Why Your Web Design Matters

“If the website does not please the visitor, the reaction you are more likely to get is bye-bye instead of
buy-buy.” – Linda Caroll

The look and feel of your website is the first thing that influences visitors.  And let’s face it, first impressions do matter.  If they don’t find it pleasing, chances are that first time visitors may never come back.

Elements of a Good Web Design

Here are a few characteristics that good web designs are made of.

1. Proper Website Structure

Before you can even start designing your website, you should have a clear idea of which pages and categories you’d like to include in your website/blog.  Having a clear and streamlined structure will make your website more search engine friendly.  For an example, check out the sample site structure below, that I submitted for my Market Motive certification program.  (The screenshot is of a law firm’s website.)

Site Architecture

2. Platform Compatibility

You need to make sure your website loads properly on different devices such as Mac, PC, various tablets & smartphones.  While the HTML coding remains the same, there are a few other factors that affect how your website is displayed on different platforms.

3. Browser Compatibility

Your website should be able to function on all major browsers (Internet Explorer, Chrome, Safari, Firefox, etc).  Just because the site works on your browser doesn’t mean it will on all other browsers.  There are still users who stick with older browser versions, so ensure that your website is compatible with them as well. (For example, try to ensure that your site is compatible with IE6 upwards.)  There are online simulators available using which you can check your website’s compatibility with each browser.

4. Colors

When designing your site, use a color for the background and font that is browser-safe (colors that will appear the same across all browsers).  This will ensure that people actually see the crimson text on an ivory background that you intended them to see, instead of red text on a pale yellow background.

5. Navigation

Good navigation is crucial for your website.  Your navigation style should not change from page to page.  It confuses people when the top navigation bar changes for each page and the site looks completely different.  The only exception is when you use landing pages (For example, the landing page for our ebook).  If your website is extremely large, you can also include a sitemap for your viewers’ convenience.  Keep in mind that if visitors get confused while navigating through your site, they will dispel the confusion by leaving your site!

Bread Crumbs

If you remember the fairy tale involving Hansel and Gretel, you’ll have a basic idea of what the concept of bread crumbs is.  This brother-sister duo left a trail of bread crumbs as they went into the woods, so they could find their way back home.  Design your website in such a way that there is always a trail to let visitors know exactly where they are on your site.  Ensure there are links on each page to guide them to the home page or to the previous page they viewed.

Here is a screenshot of a website that includes bread crumbs in its design.

Bread Crumbs

6. Fonts

When developing your website, choose a font that everyone can read, be it on a browser, smartphone or tablet.  Choose a font size and color that will make your site attractive and easily readable.

7. Images

Always include relevant images in your design.  It’s a known fact that a picture speaks a thousands words.  Adding relevant images to your website ensures that your audience easily connects with your business.

Here is the example of a website that uses the header image to portray to visitors what the site is about.

Good Web Design - I Can Teach My Child

When adding images, ensure that they are well compressed and optimized.  Try to avoid images with a large file size as they will increase the page loading time.

What to Avoid

1. Under Construction pages – It is perfectly fine to have a ‘Coming Soon’ page when you initially start your website.  But if your business website that is already up and running has an ‘Under Construction’ page or ‘Coming Soon’ page, it does not look very good.  If a particular page is not ready, don’t put it online.

2. Spelling and Coding Mistakes – This is an absolute no-no.  Your website won’t look professional if it contains spelling, grammar or coding mistakes.

3. Lack of Real Content – The content on your website should not be just placeholder text; neither should it be a glorified sales letter.  The content should instead be relevant, helpful and provide the information visitors seek.

I hope this article has given you a basic idea of what a good web design looks like.  Look out for more information on how you can design your own website tomorrow.

Today's Action Step: Create a site structure for your business website using a mindmap software or PowerPoint.

Click here to catch up on all the posts in this series.