Project Design - Hypermedia and the Web

Now that the requirements for your Web application have been specified, your team needs to collect together decisions concerning the software architecture, database schema design, information design, software design, and detailed graphical layout of pages in your site. Together these comprise the design of your project.

There are several benefits of having an explicit design phase. One is that your team develops a consensus on the design approach for your project up front, before starting low-level development. This improves communication among your team, and ensures that team members are working towards the same goal. Another is the ability to explore different design alternatives while it is still easy to modify the system. Once code, XML, and HTML has been written, it becomes increasingly difficult to make significant changes to it. Finally, the design activity causes ideas to be fleshed out before development work occurs.

For the design phase of your project, you need to provide the following:

• Software architecture: One or more diagrams showing the architecture of your entire Web application (including browser, server, servlets, databases, other information systems with which your code interacts, etc.) The internal architecture of the server-side code (and client side code, if applicable) must be described (i.e., it is not sufficient to just have a component labeled "servlet code"). The architecture diagram must clearly identify which code is being developed specifically for this project, and which code is being reused (such as a PHP component).
• Software design: For all new code being developed for the project (on the client and server side), one or more UML structure diagrams showing minimally the inheritance and aggregation relationships among the classes that comprise this code.
• Database design: For projects that involve persistent storage of information in a database, provide one or more diagrams that give the database schema, including all tables, columns, datatypes, inter-column constraints, and which columns are indexed.
• Information design: Provide 1-4 pages of text describing the rationale underlying your site's information design. Then, provide a graphical or pictorial representation of your site's information layout. This might look similar to the digrams in Chapter 3 of The Art and Science of Web Design, or Figure 9-5 in Chapter 9 of Hypermedia and the Web (both are class readings). Be creative, yet accurate in representing your information design.
• Refined prototype/storyboard: An improved version of the paper prototype and/or storyboard created for the scenarios and requirements phases. Whereas perviously the paper prototype and storyboard was not required to have significant presentation details, in the design phase you must now make decisions on items such as:
  • amount of screen real estate dedicated to each page component
  • fonts, colors, and other presentation details
  • logos
  • link highlighting
• Customer approval of requirements: Similar to the requirements phase, for the design phase you must include an email message from your customer that states:
  
  I have read the requirements document produced by {your team}, and approve it as an accurate representation of current project requirements. The team is ready to begin translating the requirements into a detailed design.

Similar to the requirements phase, your writeup must include a title page, change log, and table of contents.

Extra credit: teams may receive up to 5% additional extra credit for providing detailed requirements traceability information. Specifically, provide a document that describes, for each requirement, all of the elements of the design that specifically contribute to meeting that requirement. If a requirement does not have a visible manifestation in the design, describe why this is the case.

Last modified: 5/5/2003