Presentation on theme: "1 Basic Web site Design PMEHS Web Design Dr. Kerby."— Presentation transcript:
1 Basic Web site Design PMEHS Web Design Dr. Kerby
2 Designing for the User Who is your audience... Who will read these pages? Young people?Young people? Old people?Old people? Muscians?Muscians? Politicians?Politicians? Athletes?Athletes? What is the purpose of the site?
4 Color scheme examples: Army Web site Army Web site Army Web site Nick Jr. Web site Nick Jr. Web site Nick Jr. Web site
5 Alignment Consistent Horizontal ORHorizontal OR VerticalVertical Left (easier to read) Right Center (eyes draw down the center)
6 White Space Types: Active – separates content/imagesActive – separates content/images Passive – blank areas that result in incomplete or mismatched shapesPassive – blank areas that result in incomplete or mismatched shapes Well placed white space makes a Web page easier to follow/read. Recommended - 2:1 Lycos Web page Lycos Web page Lycos Web page
7 White space sample Banner Navigation Text block Image Footer Active White Space Passive White Space
8 Organize long lists of information and links. Microsoft Web site Microsoft Web site Microsoft Web site Or use a navigation bar... Adobe Web site Adobe Web site Adobe Web site
9 Organize Navigation User friendly Group like links together Give links specific names
10 Use of Color Red – stimulates emotion Green – inspires involvement or interaction Gray – indicates lack of commitment or neutrality Blue – shows calm and conservative Yellow – shows cheerfulness and hope for the future, restlessness and change, feelings of anxiety Purple – implies mystical quality Black – indicates power and sophistication
11 Online Resources Usability First Web page design tips Usability First Usability First Web evaluation form for secondary grades Web evaluation form Web evaluation form Ten Good Deeds in Web Design Ten Good Deeds Ten Good Deeds
13 Ten Good Deeds in Web Design 1. Place Name and Logo on every page 2. Provide a search box if Web site has over 100 pages. 3. Clear headings and page titles. 4. Use grouping and sections to make pages easy to scan.
14 5. Use hypertext links for navigation. 6. Use thumbnails for catalogue pages. 7. Create relevant thumbnails. 8. Write clear link titles. 9. Add accessibility to users with disabilities. accessibility 10. Design sites in a way viewer will expect.
15 Ten Good Mistakes in Web Design Original Top Ten Mistakes Original Top Ten New Mistakes New The REALLY Bad Web Page guide REALLY Bad REALLY Bad
16 Basic Web site Design PMEHS Web Design Mrs. Kerby