Online Web Design Tutorial : Basics Of A Good Web Design

Online Web Design Tutorial : Basics Of A Good Web Design

Online Web Design Tutorial : Understanding The Basics Of A Good Web Design

Continuing in our series of online web design tutorials – today let’s discuss the BASICs of what make a good and bad web design.

Good web design basics are essential because :

– you want your visitors to stay longer

– you stand a higher chance to ‘convert’ a longer staying visitor

– your web design represents the image of your business


True : One of the elements of good web design is a lack of the elements that make bad web design.   I’ll make it simple for you to understand – Keep these concepts in mind:


Web design tutorial on Basics : General Design

Website Pages must load quickly (don’t use templates that load too slowly, no matter how beautiful.  Don’t make the same mistake many of my students did :  beginners tend to be drawn to having stunning graphics!)

Home page and First page  fit into 800 x 600 pixel space (you can vary of course) of your website design

All of the other pages/posts have the immediate visual impact within 800 x 600 pixels

Good use of graphics (pictures,  pull quotes, subheads) to illustrate or break up large areas of text

Consistency : Every web page in the site looks like it belongs to the same site; there are recurrent elements throughout the pages


Web Design Tutorial on Basics : Text

  • Limit the number of types of font on your webpage to avoid looking amateurish
  • Text is big enough to read, but not too large (recommended arial font size : 12)
  • Columns of text are not too wide : should be narrower than in a book to enable easier reading on the screen
  • The hierarchy of information is perfectly clear
  • Break up long paragraphs and sentences into shorter ones (our generation of readers generally don’t like chunky text!)


Web Design Tutorial on Basics : Navigation

  • Navigation bar is not placed in an obscure position.
  • Navigation bars and buttons are easy to use and understand.
  • Navigation guides the visitors with a clue as to where they are, what page of the site they are currently on
  • A large site has an index or site map (Google loves site-maps)
  • Navigation is consistent throughout web site


Web Design Tutorial on Basics : Links

  • Link colors coordinate with page colors
  • Links are underlined so they are instantly clear to the visitor
  • Links should NEVER be broken (you earn SEO penalty points from Google)
  • Links to authority sites and relevant sites are welcomed by Google
  • Consider putting up Relevant external Links under a Resources section of your website.


Web Design Tutorial on Basics : Graphics

Online Web Design Tutorial - Web Design Course Singapore.Buttons are not oversized and looking out of proportion to the text

Every graphic or picture has an alt label (WordPress helps you get alt label extremely easily)

Every graphic or picture must match the content.  Don’t use your best dog photo for your website on health and fitness!

Web Design Graphics and backgrounds use browser-safe colors

Do not use images that blink or move or change or rotate or flash or do anything on your web design page. Or use them sparingly.

Use lots of pictures featuring your product with PEOPLE! (it has a good psychological impact on readers – eg, telephone pictures with people smiling are more powerful than telephone pictures, especially if you want to sell telephones)


Web Design Tutorial on Basics : Content

Finally the most important piece of advice for you in this online web design tutorial : Write what your readers want to read or are looking for.  Add value to your readers by telling them something they want to know, but don’t already know!


Do you like this Web Design Tutorial on Web Design Basics?

If you do, check out the following other tutorials :

Comparison of different Web Design Courses in Singapore, Malaysia and Asia

Online Web Design Tutorial : 5 Steps To Create Your Own Website

Web Design Trends in 2012

WordPress Plugins For Your New Website


Or if you prefer classroom training,

Sign Up For Our Professional and Easy WordPress course



Click here << Web Design – Personal Coaching >>





Comments are closed.