1. Better Design
Understand how to incorporate key design concepts to the entire site
Guidelines for site design
Use color, balance, alignment, and other tools for Web page eye appeal
Sketching, prototyping, and testing Web design process

2. Observe First
Before building any new web application, first look at other sites from your organization and at sites with similar purposes, review: - display of information - navigation - choosing and finding - communicating the organization’s identity - feedback and interaction

3. Most important location on a Web Page
Publishers have learned that people look at the upper right portion of the right-hand page first.
First point seen hasn’t been established for web pages yet, but – - top more likely than bottom - things below or right of scroll bar never seen - number of items should be 7 plus or minus 2, “hrair limit” - if you want something seen, put it near the top of the page with few competing items

4. Text Easier to Read if: Black text on white background
10-12 words per line
Standard 12 point system fonts Times, Helvetica, Arial, Times Roman
Serif font for body, sans serif for titles - this is Arial, this is Times Roman
Use only two font sizes, one for titles and one for the body text

5. Text Easier to Read if: (continued)
Avoid words in all caps (only for warnings) DON’T CLICK HERE!!!
Make sure headings contrast with body text. (let’s users scan easily)
Separate paragraphs using a blank line or an indented first line, not both.
Leave plenty of white space around text
Build page around a single axis. We like things to line up.

6. Text Easier to Read if: (Continued)
Balance the page from top to bottom and right to left.
Memorize this: “The simpler, the better. Chaos and clutter are the opposites of order and organization.” A simple page with a few visual and text elements is easier to read than a page with a plethora of items competing for attention.

7. Designing for Eye Appeal
Primary colors – red, yellow, blue
Colors that are directly across the wheel are complementary. They work will together.
Adding black to a color is called a shade.
Adding white is called a tint.

8. Designing for Eye Appeal (continued)
Alignment – human eye likes things to line up, for example, the left edge of a picture and text column (single axis) - alignment should be the same from page to page
Frames facilitate - constant titles and menu items
Pay close attention to how scrolling will work on your pages

9. Web Site Design Steps
Sketch the pages, consider the display of information – text, images, video, tables, lists (pay attention to alignment)
Build navigation: menus, identification, and user control
Consider feedback and interaction issues
Decide how to include Corporate Identity
Decide on type of text
Color, contrast, and balance
Frames & alignment
Scrolling

10. After Design - Prototype
Use a WYSIWYG Web page editor or drawing package to create your online prototype
Test the prototype with the target audience
Ask the questions of prototype reviewers - Text readable? Useful images? Could you find information? - Is it clear where you are and where you going within the site?

11. After Design – Prototype (continued)
- Are all menu choices evident? How would you find “X”?
- Who sponsored the web site? - What seems missing from this page? What could be eliminated? - On a continuum from simple to cluttered where would this page fall? - What changes do you recommend?