The primary goal of website design is to combine usability, or ease of use, with a pleasant and appropriate look and feel, or overall appearance.

Usability
A site with usability lets visitors get the information they need quickly and easily.  Your website’s usability is determined by the layout that you use throughout the site.

Website Layout
Layout is the arrangement of the core elements that appear on each page of a website.  These elements include:

• Header:  An area at the top of the page that typically contains the page title and graphic.  It may also contain navigation elements (see below).
• Navigation: This refers to the tools that visitors use to move among the pages of the site.  Navigation can appear in a horizontal header at the top of the page, drop-down menus (called pull-downs), or vertical sidebars (columns along either side of the main content area that often contain advertising as well).
• Core content:  This is the page’s main text or images, which the user has come to the site to read or see.
• Footer:  The footer is an area at the bottom of the page that typically contains links to legal information as well as navigation to the site’s main pages.

Website Layout

How to Design Your Layout
Follow the three C’s to give your site a user-friendly layout.

• Clean:  Avoid clutter by including only crucial page elements and arranging them simply and neatly.
• Clear:  Allow ample space between page elements to make your content legible and inviting to the user.
• Consistent:  Maintain the same basic layout and navigational elements throughout the site.

Look and Feel
The look and feel of your site should appeal to the type of users you expect to attract.  It should also complement your site’s core content.  To ensure that your site’s look and feel meets both of those goals, choose appropriate colors, fonts, and images.

Colors
Your site should incorporate a color palette, or a set of colors that complement one another.  To get ideas for palettes that might suit your site, search online for a color palette generator, an online application that creates sample palettes.   The guidelines below will also help you use color to enhance your site’s look and feel.

• Consider your audience:  Your color palette should vary depending on the demographics of your expected audience.  For instance, a fan site for a folk musician would likely feature soft, welcoming colors, whereas a site geared toward hard rock fans might include a lot of black and other dark hues.
• Use background colors wisely:  Whatever background color you choose, be sure to select a text color that’s readable against that color. Black text on a white background is the most legible option.
• Style your text and links:  Unless you specify text and link colors in your style sheet (see Cascading Style Sheets), your browser will default to a combination of black, blue, and purple text.

How Color Works on the Web
You have a choice of 216 web-safe colors to use on your web pages.  These colors are “safe” because they appear consistently on all browsers and platforms (Mac, PC, and so on).  Each web-safe color has a unique hex code, a six-digit combination of letters and numbers preceded by a pound sign (for example: #336699).  To see a complete list of web-safe colors with hex codes, search online for “web-safe colors.”

Fonts
The fonts, or type styles, you can use on your site are limited by the number of fonts installed on a typical computer.  To keep your website clean and readable by all users, use just one font.  The most common fonts are: Verdana, Arial, Times New Roman, and Courier.

The text on your site can also be customized according to font size and style, such as bold or italic (for details on customizing text, see Cascading Style Sheets).

Images
Images on the web usually appear in one of three ways:

• Background images:  These repeat, or tile, in the background of a web page.  In general, you should avoid using these, as they tend to make text illegible.
• Inline images:  These usually appear next to a portion of text that wraps around the image and are ideal for smaller images that complement the text, as on news sites.
• Block-level images:  These appear on their own line above or below text and are best for use with large photos or illustrations.

How you use images should depend on the look and feel you prefer for your site.  Some text-heavy sites, such as blogs and news sites, use images merely as accents to break up text.  Others, such as online photo galleries, make images the main component of the site’s look and feel (see Adding Images to Your Web Pages).

* The above information was provided by Barnes and Noble – Quamut – how to do it ™ series which can be purchased by clicking the Barnes and Noble advertisement.