Basic Principles of Web Page Design

1
Basic Principles of Web Page Design
CSCI 150, CSCI 155, CSCI 211-214, MSTI 131 and
MSTI 260 Developed by BNapoli
2
Web Page versus Web Site

• Page --
• single .htm file
• all information related to a single theme
• usually small (in physical file size)
• requires planning for layout

• Site --
• consist of multiple pages
• May integrate several different components
• can be immense
• requires more careful planning for design

3
Principles of Image Integration

• Keep the file size for any image small on the
  main page (use thumbnails and links, with file
  size information.)
• Use colors from the standard color palette to
  reduce file sizes and increase flexibility
• Keep backgrounds simple and not busy
• Keep background contextually appropriate
• Keep the viewable size of the page in mind so you
  can avoid scrolling as much as possible due to
  image integration

4
Site Navigation Principles

• Use a simple, consistent navigation interface
• Navigation buttons are out. Use text or
  context-images as hyperlinks
• Its the World Wide Web, not the World Wide Bowl
  of Spaghetti keep architecture hierarchical or
  sequential for ease-of-navigation by the viewer
• Carefully plan the site organization first. Site
  design should be based on function and content
• Three Clicks to Information

5
Text Organization Principles

• Do not rely on spacing, tabs, or line breaks. Use
  the Increase Indent and Decrease Indent tool for
  format and layout enhancement
• Use tables in moderation to space the information
  on the page
• Use horizontal lines to separate content only,
  not for visual organization
• Maintain a good, consistent visual hierarchy with
  navigation links available to second tier web
  pages at both top and bottom of each web page
• Dont overdue lists they are good for
  organization but get redundant fast without
  supporting text information for each list item

6
Principles of Linking

• Never install raw url. Provide the user with
  information about the link (title of site,
  purpose, etc.)
• Dont change the link colors, the followed link
  colors, or the basic text colors
• Use a simple, consistent navigation throughout
  the site
• Check for broken and dead links often

7
Principles of Information

• Include author information and contact
  information to the web author
• Focus the content of each page
• Vertical stratification of information is
  important to maintain consistency
• Be concise and factual

8
Editing and Maintaining

• By all means, spell check!
• Frequently check active vs. dead links.
• Show, on the page, the date of the last
  modifications to the site/page beneath the web
  authoring information
• If you have to take the site down temporarily,
  provide an under construction page for the user
  with an estimated date of return
• Plan a naming convention for folders and files
  first so that updating and maintaining is less of
  a hassle.

9
Site Design Templates
Home Page
A1
B1
C1
D1
A2
B2
C2
D2
A3
B3
C3
D3
Basic Grid Format
Hierarchical Format
10
More Templates
Sequential
Web Layout
11
Summary of Templates
Complex Educated Audiences
Simple Basic content, Training sites
Linear narrative Predictable structure
Nonlinear, hyperlinked Flexible, may be
confusing