Web Site Design Principles

1
Web Site Design Principles

• CIS 311

2
Design Principles

• Process
• Interface Design
• Site Design
• Characteristics of good sites

3
PROCESS

• What is the first step in designing a web site?
• Define your audience and your goals for the site
• A short statement of 2 or 3 goals provides
  foundation for your design

4
PROCESS

• Six major stages of the site development process
• Site definition and planning
• Information architecture
• Site design
• Site construction
• Site marketing
• Tracking, evaluation, maintanance

5
PROCESS

• Site definition and planning
• Purpose and goals
• Content expert
• Webmasater
• Technology (browser support, bandwidth of average
  site visitors, dynamic HTML, database)
• Web server support (in-house or outsourced)
• Budgeting

6
PROCESS

• Information Architecture
• Content and organization of the site
• Build small prototypes of parts of the site
  (why?)
• Test site navigation
• Develop user interface
• Assess how well the navigation interface supports
  the information design
• Deliverables
• Detailed description of site content
• Site map, thumbnails, outlines, table of content
• Technical specs web server, browser support,
  connect speed
• Graphic design and interface design drafts
• Schedule for implementing site design and
  construction
• Several prototypes of multiple pages

7
PROCESS

• Site Design
• Design pages, graphic design standards,
  audio-visual content, research, writing,
  organizing sites content programming, DB design
• Deliverables
• Text, edited and proofread
• Graphic design specs for all pages
• Header/footer for templates
• HTML template pages
• Java scripts, DB tables, Search engines
  designed/tested

8
PROCESS

• Site Construction
• The mature stage of the project
• Bulk of the sites pages are completed
• Deliverables
• Finished HTML for all pages
• Finished navigation link structure
• All programming in place
• All DB components in place
• All graphic design in place
• Final proofreading of the site content
• Detailed DB testing

9
PROCESS

• Site Marketing
• Print ads, radio ads, direct mail, posters, etc.
• Site Maintenance
• Currency, accuracy, relevancy

10
Interface Design

• Users of web pages do not just look at
  information, they interact with it
• GUI comprises
• Interaction metaphors, images and concepts to
  convey function and meaning
• What does every web page need?

11
Interface Design

• What does every web page need?
• An informative title
• The creators identify
• A creation or revision date
• The home page URL on the major menu pages in
  your site

12
Interface Design Basic Principles

• User-centered design
• Clear navigation aids
• Where are you
• Include links to home page and to other major
  navigation points in the site on every page
• No dead-end pages
• Link to home page or local menu pages
• Direct access
• Minimize the number of clicks
• Simplicity and consistency
• E.g., using graphical headers as navigation aids
  consistently on all pages (http//www.talbots.com
  )

13
Site Design

• Organizing information
• Divide your content into logical units
• Teachers site
• Helpful links, field trips, photo gallery
• Teachers portal
• Resources for teachers, for CIS311 students, for
  parents
• Establish a hierarchy of importance among the
  units
• Use the hierarchy to structure relations among
  the units
• Build a site that closely follows your
  information structure
• Analyze the functionality of your site

14
Characteristics of good sites

• Clear purpose and target audience
• Organized
• Easy to navigate
• Up-to-date, current information
• What will entice your users to come back to visit
  the site?
• Multimedia heuristics if it des not add much
  value in helping communicate the content do not
  include it
• Simple, content-rich, appealing and maintainable
  sites
• American Library Association -- Great Web Sites
  for Kids Selection Criteria http//www.ala.org/ala
  /alsc/greatwebsites/greatwebsitesforkids/greatwebs
  ites.htm
• Site Map

15
Site Map

• Defined
• A visual presentation of the content of a web
  site.
• A map of a web site
• A hypertext listing of all sections of a website
• An outline of all the pages on a Web site
• A simple way to receive an overview of the site
• Purpose
• To enable the end-user to click on a site map
  LINK and move directly to a section of the site
  from the site map

16
Site Map

• Advantages of creating a site map tree navigation
• A visual model of the sites content
• Users can quickly find content they are looking
  for in a single, centralized location on a web
  site
• Example1 of a site map
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/samplePortal/siteMap.htm
• Example2 of a site map
• http//www.csupomona.edu/sitemap.php