Website prototype

Perhaps the most important thing to remember about creating a site prototype is not to get ahead of yourself. There are many stages that the prototype design should go through, each of which is important. The stages can be placed in the following order:

  • re-read the site 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 sketch
  • 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 analysis
  • 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 teams 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 team 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).

Specifics

  • Each team member is to create a line sketch for the prototype front page and an inner page. So, if you have 5 people in your team, you should wind up with 10 line sketches. Sketches should then be scanned into the computer and saved as .gif files (not *.pdfs). Please submit your sketches in Blackboard. There is one scanner available for use in Par 102; for info on how to use the scanner, see the tutorial on the cwrl web page. More scanners are available on the 3rd floor of FAC. 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.
  • Create rough draft designs based on the individual sketches -- one rough draft for the front page and one rough draft for an 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: http://www.subterrane.com/loremipsum.shtml. The rough draft should include at least the following: main navigation, any sub navigation, and some lorem ipsum text. You need to have a banner image at this point.
  • Please create Web page prototypes for 3-4 of the pages you will be creating for the final design, trying to implement your Photoshop design as much as possible. Of the ones you choose to prototype, one must be the front page, and the rest should link off of the front page. You can use the lorem ipsum text if you'd like, but the main navigation and sub navigation should appear and function as a normal page. You can also use placeholder images in the content instead of real images. Code should be accessible: for example, links should have titles, images ALT text, and main navigation and other important links should have access keys.

Your team 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.

Additional Resources