Course: Advanced Web Design

Project Goal/Problem: To produce a finished, professional client site with detailed documentation of site definition, management, structure, interface design and final production within 15 weeks.

Learning Outcomes: Students practice professional project management and development skills with a real client. They will experience the roles and responsibilities of each member of a project team or small web business owner, including negotiating and following a project budget and calendar, administering client surveys, writing creative briefs, defining clear and effective site architecture, creating interface and visual design, using standards-compliant, universally accessible production practices, and effective marketing techniques.

Technical Skills: research, technical writing, documentation, public speaking/presentation, prototyping, standards-compliant XHTML, CSS, Javascript, visual layout and image optimization, metadata development & advertising, FTP implementation.

Procedure:
Phase 1: Site Definition

  • Client Survey: Results of your Client Survey
  • Creative Brief: Determines the goals of the site and overall scope of the project, including look and feel and marketing strategy.
  • Calendar/Schedule: (A WEEKLY BREAKDOWN) with key dates for deliverables, various phases, and the target dates for beta, QA testing and launch.
  • Budget: Should include an hourly wage, based on guidelines, specific deliverables and the time allotted. Even if you are completing your client website free of charge, you must include a budget. Simply give a 100% discount.

Phase 2: Developing Site Structure

  • Sitemap Development: Develop structure from a site-view perspective. Show overall organizational structure. Keep sitemap updated throughout project.
  • Wireframe Development: Lay out main content areas and navigation from a page-view perspective.
  • Interaction Development: Show the relationship of one screen to the next. Test the navigation experience from a user-perspective. Include the User Profile and Real Use Case diagram based on your “paper prototype” testing.

Phase 3: Interface Design & Production

  • Visual Design Development: Based on Client Survey and discussions, create at least 3 mockups, using Photoshop or Illustrator.
  • Protosite Development: Bare bones site, without client content.
  • Art Optimization/Production: All graphics and client images optimized.

Phase 4:  Technical Engineering

  • HTML Production/CSS Layout: Create a XHTML template page with linked CSS for each level of your site, using properly structured, semantically correct XHTML and CSS.
  • Standards and Sec. 508 Compliance: Use Web Developer tool bar and W3C Validation services to make sure your files are in compliance.
  • Browser Compatibility Testing: Use Browser Cam to test for bugs along the way.
  • Javascript/DOM: If your site requires scripting using Javascript/DOM, make sure your code follows Graceful Degradation and Unobtrusive Best Practices.
  • Beta Launch/QA Testing: Upload to testing server and request feedback from peers.

Phase 5: Publishing/Marketing/Launch

  • Maintenance Schedule/Updating: Create client-approved schedule and budget.
  • Domain and hosting setup: Setup hosting based on client approvals.
  • Search Engine Submissions: Define metadata and marketing terms; submit to search engines.
  • HTML Style Guide: Create a guide that your client/company can use for future changes, updates.

Milestones

MIDTERM: 10 Minute Project Presentation
Phases 1, 2, and 3 will be presented at midterm critique. You will be presenting your project to the class. It is recommended that you prepare a simple website or powerpoint presentation as the vehicle for your presentation.

FINAL:  Client Site and Style Guide Presentation
Site must be complete and ready for approval by client. Site structure, design and development must reflect completed Phase sections and planning decisions approved by client. Modifications from original plan must be approved by client. Your Client sites must be loaded and functioning on the FTP server in order to receive a passing grade and should show a logical and organized progression from Phase 1 to Phase 5.

Sample  Student Work

Structural and Visual Design Deliverables

Style Guides

Final Sites