Advanced Web Design: AD650

COURSE CALENDAR | WEEK 05 CLASS OUTLINE | Homework

  1. AD650 Learning Forum: New Technique presentation
  2. Phase 2: Developing Site Structure
    • Sitemap Development: Site-View
    • Wireframe Development: Page-View
    • Interaction Development: Functional-View
  3. Sitemap Development: Site-View -- 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 or Content Outline, like a Table of Contents, to show the structural relationship between units. (sample)
      • A Site Diagram, 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, Photoshop or Visio. Sample Site Maps: 01 | 02 | 03 |
  4. CLIENT WORK: Finalize Content Outline and Site Map
    • List of all content to be included on the site. Trim anything that does not match the goals or audience needs as stated in the creative brief. Be sure to leave room for growth. Group content into categories and create an outline of your content.
    • Take your final content outline and create a sitemap or site diagram. A site diagram is a visual representation of your content outline and site structure.
  5. Wireframe Development: Page-View
    • Wireframes are referred to as "schematics" or "page architecture". They focus on how site works and reads, not "look and feel" in early stages of site development (Color, fonts, styles should be avoided). A wireframe is a visualization tool for presenting the layout of a web page elements: the content; navigation; header & footer; branding etc. (sample)
    • What should be included in a wireframe?
      1. Key page elements & location: header, footer, navigation, content objects, branding elements
      2. Grouping: side bar, navigation bar, content area, etc.
      3. Labeling: page title, navigation links, headings to content objects
      4. Place holders: dummy text (lorem ipsum dolor...), and image place holders
    • Which pages need wireframe designs?
      1. Any page that represents a major subsection of the site and requires a distinct layout and functionality.
        • Home page
        • Major portal pages to subsites
        • Template pages to grouped content
        • Discussion forum
        • Search results page
        • 404 Error page
  6. CLIENT WORK: Create wire frames
    • Experiment with wireframes that best fit your project.
    • You can use the following as a starting place. Also look back at the different types of layouts we created last week.
    • Once you've decided on a few structural layouts, begin to identify specific elements in the interface and where they should be placed. It may be necessary to create one layout for the index page, one for section pages and another for content pages.
    • Create your wire frames in Illustrator or Photoshop.
  7. Background Images and Image Replacement (ZIP)
    • Tiled backgrounds
    • Background image positioning
    • Rounded corners: fixed and flexible
    • Image Replacement methods

Homework | Week 5

Phase 2: Developing Site Structure

  1. Finalize Content Outline and Sitemap
  2. Complete least 2 wireframe examples (one for each level of the site)
  3. Ask clients for feedback on Phase02 documents
  4. Setting up your Staging Area
    • Re-define your site with client_site as your root directory. Set your FTP host directory path to public_html/yourlastname/client_site.
    • Based on your site map, build the site structure in Dreamweaver using dummy pages and folders for each section. Upload everything to your folder client_site on the FTP server.