Web Page Design: Best Practices

Your web site should be designed to appeal to your target audience. Follow these recommended design practices with your target audience in mind.

Web Site Organization Techniques

1. Hierarchical organization is characterized by a clearly defined home page with links to major site sections.
 
2. Linear organization is a series of pages on a site providing a tour or presentation that needs to be viewes sequentially.
 
3. Random (sometimes called Web organization) offer no clear path through the site, usually found in artistic sites.
 

---

Clearly labeled navigation on every page is helpful. The user should not be lost on your site.

Navigation best practices:

• Navigation bar either text based or graphic should be obvious to users where they are and where they can go next.
 
• Short pages are best as they wont take long to load, pages are considered long if it is three or more screen lengths.
 
• Table of content or bulleted list at the top of the web page provides links to specific parts of the page.
 
• Site map and search features allow visitors to visually scan he content of the site and find information not apparemt from the navaigation.
 

---

Four Visual Design Principles

Repetition

Repeating design components, shapes, color, font and images ties the work together, and crecohesive look.

Contrast

There should be a good contrast between the background color and the text to provide good visual contrast and easy reading. Contrast also makes the design interesting and direct attention.

Proximity

Is placing related items close together, and unrelated items spaced apart to make navigation easier.

Alignment

Creates cohesiveness. Designers should place each element has some alignment with another element on the page.

---

Major Components of Web page design and Three guidelines for each design element

1. Page layout design
 
• Placing information above the fold, which is the area the visitors see before scrolling down the page, is a technique used to attract and keep visitors on your web pages
• Wireframe , a blueprint of a Web page that shows the structure of basic page elements such as the logo,navigation,content and footer is used to experiment with page structures and find the one that works best for a site.
• White space in areas around blocks of text increase readability of the page and around graphics help it stand out.
 
2. Text design
 
• Match the reading level and style of writing to your target audience.
 
• Use short sentences and phrases, and spell check.
 
• Use common fonts such as Arial,Verdana, and be mindful of text size and how it appears smaller on a Mac than on a PC.
 
3. Graphic design
 
• Screen resolution is important, as high resolutions are more popular. Try to avoid horizontal scrolling with resoltions of 1024x768,1280x800 and 1280x1024
• Use animation only if it adds to your site, and keep it mind it appeals more to younger audience.
 
• Use color, children and preteens prefer bright and lively colors whereas individuals in there late teens and early twenties generally prefer dark backgrounds with bright contrast,music and dynamic naavigation. For an older audience use light bckgrounds,well defined images and large text. Avoid using red,green,brown,gray or purple next to eachother, and keep color blind individuals in mind.
 
4. Accessibility considerations
 
• Its good practice to limit the total file size of a web page and all of its images and media files to under 60KB to make sure your page loads quickly so you dont lose visitor.
• Shorten a visitors perceived loading time by braking a long page into multiple small ones or image slicing will allow visitors to see the browser window change and perceive the waiting time to be shorter
• Develop the site so that it looks great in your target audience's most popular browser and look acceptable.

Karen Diaz Colon

---