course documents

course calendar

technical support

assessments

communication

student portfolio

main index

COURSE CALENDAR | WEEK 04 CLASS OUTLINE | HOMEWORK

1. Patterns in Interaction Design | Patterns in Web Design
2. Web Design Vocabulary: Site Design
3. Information Architecture: The information architect's goal is to provide a simple, logical structure and experience for the site's users. We will discuss some of the tasks in this process.
   1. Structuring of Information
      • Divide content into logical units (sample). Generally no more than 6 main sections.
      • Establish a hierarchy of importance among units
      • Once priorities are set, build Hierarchy from most important (GENERAL) to most specific (DETAILED)
   2. Creating an Organizational Framework
      • An Information Listing, like a Table of Contents, to show the structural relationship between units. (sample)
      • Creation of Site Diagrams, like a Site Map, is a communication tool to indicate the content and navigation options available on the site. Draw your site diagram on a piece of paper, then in Illustrator. Sample Site Maps: 01 | 02 | 03 |
   3. Analyzing Functionality
      • Interaction Design | Interaction Patterns: Types of Navigation-- Horizontal Navigation, Vertical Navigation, Horizontal Global Navigation and Vertical Local Navigation, Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.
      • Structural Navigation (sample)
      • Sequences: sequential ordering, when visitors are required to move through information in a predetermined sequence.
      • Hierarchies: organized around central homepage, similar to a family tree, provides access to information via specific entry points.
      • Webs: mimics associative thought and free flow of ideas or when visitors may want to access the information from multiple access points.
      • Shallow vs. Deep (sample)-- have an awareness of the balance between home page and content page
4. CLIENT WORK: Setting up your Project Presentation
   • We will use this HTML file as a template to set up your project presentation sites. Define a site in Dreamweaver with the following site structure.
5. CLIENT WORK: Phase components-- each phase will contain the following or similar components.
1. Phase 1: Site Definition
   • Client Survey
   • Creative Brief
   • Calendar
   • Budget
   • Check List
2. Phase 2: Developing Site Structure
   • Sitemap Development: Site-View
   • Wireframe Development: Page-View
   • Interaction Development: Functional-View
   • Check List
3. Phase 3: Interface Design & Production
   • The Design Process
   • Protosite Development
   • Art Optimization/Production
   • Check List
4. Phase 4: Technical Engineering
   • HTML Production/Layout
   • Beta Launch/QA Testing
   • Check List
5. Phase 5: Publishing/Marketing/Launch
   • Maintenance Schedule/Updating
   • Domain and hosting setup
   • Search Engine Submissions
   • HTML Style Guide
   • Check List
6. CLIENT WORK: Add content to Overview (index.html)
• This page should contain a short introduction, description of each phase of the project and a link to the Client Staging Site (client_site folder in your folder on the FTP server).
7. CLIENT WORK: Add content to milestones.html
   • This page should contain a listing of all milestones. Note those milestones completed and to be completed. Here's some things to get you started: 01 | 02
8. TECHNICAL PREPARATION:
   • Use the index.html to practice Definition Lists and calendar.html to practice Tables.
   • Intermediate XHTML tutorial: http://www.htmldog.com/guides/htmlintermediate/
   • Intermediate CSS tutorial: http://www.htmldog.com/guides/cssintermediate/
   • Start this tutorial or another to create a CSS layout for your Project Presentation site. Review the Intermediate XHTML and CSS tutorials above prior to starting the tutorial.
   • Upload files to your folder on the FTP Server

1. Ask clients to approve Phase01 documents
2. Based on Client Survey and discussion with clients, divide the content they wish to include in their web site into logical units, generally no more than 6 main sections. Establish a hierarchy of importance among units, then build a Hierarchy from most important (GENERAL) to most specific (DETAILED). Create a site map using Illustrator, Photoshop or Visio.
3. Build the site structure in Dreamweaver using dummy pages and folders for each section. Call your project folder client_site and upload it to your folder on the FTP server along with your project presentation files.