Principles of Web Design: The Good, the Bad and the Ugly

1
Principles of Web Design The Good, the Bad and
the Ugly

• Pat Pecoy
• Adventure of the American Mind
• Furman University

2
Step I PlanningWho is your audience?

• For whom is the website intended?
• Students?
• Parents?
• Professors?
• School District?
• Wide Audience?

3
Step I PlanningWhat are the goals and
objectives of your site?

• What is the content?
• What is the depth of your website?
• Ex One course
• Multiple courses
• What is the breadth of your website?

4
Step I PlanningGoals

• Goals provide the general framework of your
  website
• Goals are broad statements that indicate the
  purpose of the site
• Ex The purpose of my website is to provide
  information to my students about the courses they
  are taking with me.

5
Step I PlanningObjectives

• Objectives are precise statements about specific
  website content
• Objectives organize site content information
• To write your objectives, answer the following
  question
• What specific information do I want web users to
  know?

6
Step I PlanningSample Objectives

• The home page will provide an overview and links
  to each course
• The ED 195 page will provide links to each
  required element in the course
• The lesson plan page will inform readers of my
  instructional plan
• The Webquest page will provide information about
  the webquest activity

7
Step I PlanningHow will you organize your
website?

• Plan out the site before you begin
• Storyboard
• Use pencil and paper!
• Or, try using Inspiration to set up the
  hierarchical organization of the eventual web
  site (Example)
• Plan for eventual growth and additions to your
  site

8
Step I PlanningHow will you organize your site?

• Sequential (alphabetical order, chronological
  order)
• Grid (no particular order of importance)
• Hierarchical (most common uses home page with
  topics and subtopics arranged in order of
  importance)
• Web (free-flowing, non-structured navigation
  hard to follow)

9
(No Transcript)
10
Step I PlanningWhat will you use to construct
your website?

• What authoring tool will you use?
• Netscape Composer (great for mentees or beginners
  in general)
• Front Page (server constraints)
• Dreamweaver (for advanced web authors)

11
Step II DesignDesigning in Screens

• Before you begin set your screen resolution to
  800 x 600
• A web page should contain no more than two
  screens of information
• Scrolling is disorienting
• Put the most important information at the top
  less important information belongs lower down on
  the page

12
Step II DesignUsing White Space

• Margins define the reading area of your page
• Define margins and use them consistently
  throughout your site
• Do not scroll text from one margin to the other
  (Example)
• Ideally, limit the text line length to 10-12
  words per line (Example)

13
Step II DesignText

• Present information in short chunks
• Amount of text should be limited to 30-50 of
  the screen area
• Type and size of font should be easy to read
• Sans serif fonts should be used
• Forecasting and summarizing devices should be
  used effectively (ex lists, headings, graphical
  summaries)

14
Step II DesignBackground vs. Text

• Do not use graphical backgrounds that make it
  difficult to read the text (Example)
• Do not use garish colors for your background
  (neon green, magenta, etc.)
• In general, use a light background with dark text
  it will be easier to read
• Be sure there is high contrast between the
  background and the text

15
Step II DesignNavigational Devices

• Titles, headings and subheadings should be
  meaningful out of context
• Buttons, targets and links should allow a reader
  to navigate easily through the site
• Menus allow a reader to choose where to move
• Links provide integral or supplemental
  information and all links are functional

16
Step II DesignGraphics

• All graphics should be
• Functional (no dead links!!!)
• Appropriately cropped or thumbnailed (Example 1)
• Integrated effectively
• Artfully arranged (with lots of white space)
• Do not use excessive animation on a page one is
  MORE than enough (Example)
• No white boxes around gifs - make them
  transparent! (Example)

17
Step II DesignGraphics

• File size should be as small as possible to make
  downloading quick
• Graphics should be labeled appropriately (titled
  or captioned)
• Graphics should be supplemented with explanatory
  text (for ADA compliance)

18
Step II DesignGraphics Where to find them?

• Windy Web Graphics
• Clipart.com
• Graphic Garden (Elementary)
• Graphics for Teachers (Elementary)
• Enchanted Learning

19
Step II DesignConsistency

• Headings and subheadings are positioned
  consistently
• Font style and size are consistent across pages
• Background, graphic elements are consistent so
  the entire site has the same look and feel

20
Step III DevelopmentPublishing

• Where will you publish your website?
• District server
• Do this ONLY if you yourself have permission to
  post files to the server DO NOT use this option
  if you must give your files to someone else to
  upload
• Free web hosting service (Angelfire)
• Downside your site will have advertising you
  cannot control the ads

21
Step III DevelopmentPreparing to Publish

• Define your local site first!!!
• Establish a folder into which you will put ALL
  your web materials save EVERYTHING into this
  folder
• Test your site on at least two different browsers
  to check for browser compatability

22
Step III DevelopmentFile Naming Conventions

• Filenames should be 8 characters MAXIMUM
• Filenames MUST NOT contain any spaces
• Filenames must not have any accented characters
• Filenames should be all lower case