1 / 16

Basic Web site Design

Basic Web site Design. PMEHS Web Design Dr. Kerby. Designing for the User. Who is your audience. Who will read these pages? Young people? Old people? Muscians? Politicians? Athletes?. What is the purpose of the site?. Consistent, Unified Look. Colors Graphics Layout Navigation.

kgamble
Download Presentation

Basic Web site Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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? • Old people? • Muscians? • Politicians? • Athletes? What is the purpose of the site?

  3. Consistent, Unified Look • Colors • Graphics • Layout • Navigation

  4. Color scheme examples: • Army Web site • Nick Jr. Web site

  5. Alignment • Consistent • Horizontal OR • Vertical • Left (easier to read) • Right • Center (eyes draw down the center)

  6. White Space • Types: • Active – separates content/images • Passive – 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

  7. White space sample Active White Space Banner Passive White Space Navigation Text block Image Footer

  8. Organize long lists of information and links. • Microsoft Web site Or use a navigation bar . . . • 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 • Web evaluation form for secondary grades • Ten Good Deeds in Web Design

  12. Ten Good Deeds in Web Design • Place Name and Logo on every page • Provide a search box if Web site has over 100 pages. • Clear headings and page titles. • Use grouping and sections to make pages easy to scan.

  13. Use hypertext links for navigation. • Use thumbnails for catalogue pages. • Create relevant thumbnails. • Write clear link titles. • Add accessibility to users with disabilities. • Design sites in a way viewer will expect.

  14. Ten Good Mistakes in Web Design • Original Top Ten Mistakes • Top Ten New Mistakes • The REALLY Bad Web Page guide

  15. Basic Web site Design • PMEHS Web Design • Mrs. Kerby

More Related