1 / 18

EDUC 275 – Website Design October 23, 2007

EDUC 275 – Website Design October 23, 2007. Getting Started: When your group arrives, continue working on your podcast. We will have some visitors with us today…get them involved as callers, hosts, etc. *Turn in rewrites to the front table!. AGENDA: 1. Finish podcasting.

yosefu
Download Presentation

EDUC 275 – Website Design October 23, 2007

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. EDUC 275 – Website DesignOctober 23, 2007 Getting Started: When your group arrives, continue working on your podcast. We will have some visitors with us today…get them involved as callers, hosts, etc.*Turn in rewrites to the front table! • AGENDA:1. Finish podcasting. • 2. Discuss website design principles. • 3. Explore FrontPage. Dr. Marshall Jones & Dr. Lisa Johnson

  2. Webpage Design Points to Consider Dr. Marshall Jones & Dr. Lisa Johnson

  3. A Planned Site • Site has a pre-conceived purpose. • Visual presentation is controlled. • Elements such as content, graphics, and links have a logical connection and are planned before development.

  4. An Unplanned Site • Content continuously added and modified. • Navigation may be inconsistent. • Visual design changes frequently.

  5. Your Site?? • A combination of both. • You will have a pre-conceived purpose and content. • A suggested template: http://coe.winthrop.edu/educ275/websiteexample/default.htm • Components added as they are learned.

  6. Elements to Consider • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  7. Elements to Consider • Should make sense for the page • Small enough to fit on page – large enough to see • Enhance NOT distract • Use animation sparingly • Free of biases • Consider loading time • Balanced with text • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  8. Elements to Consider • Can be any picture • Should compliment text (i.e., light background/dark text) • Enhance NOT distract • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  9. Elements to Consider • Sans Serif vs. SerifNon-curly: Arial, Impact, Comic SansCurly: Times New Roman, Palatino • Avoid the Font War – stick with standards fonts • Font Sizes • Justification (avoid full) • Capital/Lowercase (avoid all capital) • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  10. Elements to Consider • Everyone enjoys a menu • Highlight sparingly • Stick with defaults • Think like a user, not a designer • Maintain context around links“One habitat is a rain forest.”“Click here for rain forest data.” • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  11. Elements to Consider • Should match your purpose. • Serious sites don’t need juvenile pictures. • Cohesiveness is key. • With one look the user should know where to go to get what they want. • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  12. Elements to Consider • Include short introduction stating site’s purpose. • Name and information about author is given. • Chosen graphics are free from bias. • Include all references used in design and content. • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  13. Elements to Consider • Consider various kinds of learners. • Use ALT text for graphics. • Limit animations. • Label links. • Visit www.cast.org for more information on accessibility. • Graphics • Background • Text • Navigation • Appearance • Perspective • Accessibility

  14. Your Task • Design a webpage that could serve as your “teacher website.” • Limit personal information that may not be appropriate for K-12 audiences. • Follow design principles outlined in this presentation. • For required pages and grading sheet seehttp://coe.winthrop.edu/educ275/07_new_assignments/front_page_jones_sp05.htm

  15. First Step: Planning • Imagine your site like a bubble map with your homepage in the middle. • See sample pages on last slide. Family Pictures Links About Me Home www.myscschools.org Resume Tech Projects

  16. Second Step: Design Basics • FrontPage “Cheat Sheet” OR http://coe.winthrop.edu/itc/training/frontpage/default.htm • Helpful Hint #1 –Design the basics first then go back and add/modify if time allows • “Default” = Homepage • NEVER SAVE IN YOUR Z-DRIVE! • Create all pages first.

  17. Second Step: Design Basics • Inserting graphics • Add “ALT text” • Right click on graphic • Picture Properties • General Tab – Alternative Representations • Text – Type what picture is only (“teacher” NOT “picture of teacher”) • Create menu for each page • Links • Internal/Relative (within your site – between pages) • External/Absolute (WWW)

  18. Second Step: Design Basics Elementary • http://www.cms.k12.nc.us/allschools/matthews/staffweb.html • http://www.iss.k12.nc.us/schools/lakenorman/viscla.htm Middle • http://pages.cms.k12.nc.us/jayrobinson/facstaff.html • http://www.iss.k12.nc.us/schools/lsm/nerquitt/index.html High School • http://pages.cms.k12.nc.us/hopewell/history.html • http://www.iss.k12.nc.us/schools/LNHS/stafflist.htm • http://www.iss.k12.nc.us/schools/sihs/fs/listing.html

More Related