Online Web Design Tutorial : Basics Of A Good Web Design

Posted by Scott Tan on Apr 16, 2012 in Online Web Design Course Singapore Training Tips | Comments Off on 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

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!