EDUC 275

1
EDUC 275 Website DesignMarch 23, 2006

• Getting Started Read over the FrontPage cheat
  sheet from the EDUC 275 website.
• http//coe.winthrop.edu/educ275/handouts/front_pag
  e_cheat_sheet.htm

• AGENDA1. Review assignments/schedule.
• Discuss website design principles.
• Explore FrontPage.
• Start websites.

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/educ
  275/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 linksOne 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 dont 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 sites
  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 accommodates both a
  personal and professional purpose.
• Incorporate an original podcast.
• Follow design principles outlined in this
  presentation.
• For required pages see
• http//coe.winthrop.edu/educ275/harris/frontpage_
  assignment05.htm

15
First Step Planning

• Use paper/pencil or computer (Inspiration works
  well for this task).
• Imagine your site like a bubble map with your
  homepage in the middle.
• Be specific in your planning.

Family Pictures
Links
About Me
Home
www.myscschools.org
Resume
Tech Projects
16
EDUC 275 Website DesignMarch 28, 2006

• Getting Started Pick up two sheets from the
  front table Checklist/Rubric for your website
  and Review Sheet for test two. Look over the
  sheets and make note of any questions.

• AGENDA
• Discuss Activity Write-Up One.
• Review for test two.
• Answer questions about website/podcast
  assessment.
• Work on websites.

17
Activity Write-Up One

• You may redo parts of activity write-up for
  additional points.
• No more than half the missed points will be given
  (for example, if you received an 80 and made all
  suggested changes you will not receive higher
  than a 90).
• Rewrites due by Thursday, March 30. Return all
  drafts/rubrics with new copy.
• If you have questions, comments, or concerns
  about your grade or my feedback PLEASE come see
  me during office hours.

18
Second Step Design Basics

• FrontPage Cheat Sheet OR http//coe.winthrop.ed
  u/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.

19
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)

20
Second Step Design Basics

• Saving Technology Projects
• Open project
• File Save as Web Page
• Save in your zdrive (youll see a file and a
  folder)
• One word name, leave htm extension
• Select both the file and the folder and copy
  (click one use control key click the other)
• Return to FrontPage
• Go to file list (left side) and paste
• Create new folders for organization
• Link project name to file (not folder)