project 1: site prototype

important due dates

  • Oct 6: Site Inventory and Analysis due; start of class
  • Oct 20: Site Prototype due; start of class; present to class
  • Dec 8: Final Site Re-design due; present to class

creating a site prototype

Perhaps the most important thing to remember about creating a site prototype—especially for a Web site like the Rowan IT web site—is not to get ahead of yourself. There are many stages that the prototype design should go through, each of which is important. Furthermore, each stage must be justified according to the usability analysis created by your group. If the design does not work with the analysis, the analysis wins out: change the design. The stages can be placed in the following order:

  • re-read the analysis in detail, determining which features of the old site work well and which don’t
  • using pencil and paper begin to sketch out what the Web page structure might look like — each group member is responsible for coming up with a sktech
  • create several different sketches for each main page, thinking about how each element on the page — content, navigation links, images, color, etc. — works with or against your usability analysis
  • create wireframes of your site using Photoshop
  • create a rough draft of the Web page using Photoshop
  • using an HTML editor, create a rough copy of the Web page (hand coding only)

The prototype process is one that has re-vision built into it; each stage in the development of the site is another take on your initial design(s). Do not fall in love with one design immediately; constantly question what you have drawn, take risks, and place whatever ideas you have on paper. Seeing the ideas on paper, will help you more clearly visualize your page.

And please, do not get ahead of yourself; follow the above steps and you will have a design that is more thought-out and usable. This is especially important for groups that may have started the design process. If you have, stop what you have done and begin the prototype process as described above. Forget what you have done already and keep your mind open to new ideas. If you plan on using code (such as PHP; Javascript is not allowed) that is more advanced than what we will be learning in the class, each member of your group MUST understand what the code means and is doing or you cannot use the code.

This section of the project corresponds to Chapter 4 of Web Re-Design: “Phase 2: Developing Site Structure,” starting at page 98 (site mapping is still important at this stage). Our assignment will incorporate many of the tools Goto and Colter advocate, and I encourage you to refer to the text often when considering what you should be doing at this stage. The book has many resources (as does its web site), so please take advantage of them.

assignment specifics

  • Each group member is to create a line sketch for the prototype Rowan IT web site front page and an inner page. So, if you have 5 people in your group, you should wind up with 10 line sketches. Sketches should then be scanned into the computer and saved as .gif files (not *.pdfs). Provide links to the sketches off your Group web page (see below for web page specifics). There are scanners available for use in most, if not all, of the Rowan computer labs. This is a vital stage in the process. If you just start coding without thinking ahead, your page will not be usable. Remember: usability and accessibility undergird the entire web page; if the design you want is not usable, then do not use the design. It is rare that the final web page will look exactly like the initial sketches.
  • After your group has decided on an layout based on the sketches, create sets of wireframes, one set basic (as shown below) and one set more advanced as shown in Goto on page 107, figures 4.11 and 4.12. Create basic and advanced wireframes for your new Rowan IT front page and for a new inner page. Color-code the basic wireframe and include estimates of the section sizes.
  • Create rough draft designs — one rough draft for the Rowan IT front page and one rough draft for a  Rowan IT inner page. To create rough drafts of your design, use Photoshop and create something similar to what is shown in Goto on page 107, figure 4.13. Note that the large Xs are placeholders for images that will appear on the page, and that the text is actually Latin. The standard fake text to use is lorem ipsum. You can customize the amount of lorem ipsum to use at: The rough draft should include at least the following: main navigation, any sub navigation, and some lorem ipsum text. You do not have create any images at this point.
  • Create a group web page, titled “index.html” which you will place in your group folder in the open area. All work will be posted on this web page. If you want to create a group name, please do so. Your page should have at least the following info: all group member’s names and email addresses, a link to the assignment, and a brief discussion of how your group is and has been approaching this project. Discuss what usability theories have specifically informed your ideas on redesigning the page. This should be no longer than a paragraph, but should be detailed enough so a user unfamiliar with the site will be able to understand what your group page is all about. In short, make the group page usable, too.
  • Write one paragraph justifying each prototype design according to your usability analysis, and post it on both your group home page and your group’s forum. It would be great if you could find a way to show how your ideas progressed from stage to stage.

Your group will present your work in class, so be prepared to answer questions about the reasons why you have decided to add and delete and change certain features.

samples of steps in the process

Additional Online Readings

Leave a Reply

Your email address will not be published. Required fields are marked *