Kevin Wright’s blog

For a website, a prototype is a first attempt to express or demonstrate the functional design through one of the other design phases. Following are a few examples of prototypes:
* The navigational prototype is usually a layout of the navigational structure of the site, also called the site skeleton or framework. Without implementing actual features, this prototype shows only the overall navigation structure. It uses plain links and blank pages,
or pages with sample data.
* The technical prototype is a raw demonstration of the features required by functional
design. It may be a programmatic interface to a database, which shows how you can
search a particular database by various parameters.
* The visual prototype could take the form of a simple graphic file (not even a real HTML
page) showing an ‘artist concept’ of the home page. This is often called a ‘treatment’ or
graphic approach.
What all of these prototypes have in common is that they provide the first ’support beams’ for the website, a starting point from which the design can proceed. As the various prototypes are refined and accepted, they are combined to build a first version of the website, which may also be called a prototype. Design proceeds in modular fashion where possible. If you must discard your work, which is expected, it’s best if you can do so in removable chunks.

Phase 2: Skeleton Framework

Phase 1 developed the concept through creation of the menu-tree diagram. From that document, planning work for the functional, technical, and creative efforts ensued. The next step is to prototype the website by developing skeleton Web pages representing the pages on the menu-tree diagram (Figures 8.4 through 8.6). These pages are ‘empty,’ consisting only of the minimal HTML tags and content for the page title and navigation links. It’s best to work without content or graphics at this stage. If, for some reason, you find it useful, dummy content should suffice. In this manner, you can quickly prototype the whole site. As you click your way around the site, design flaws will be readily apparent. In this bare bones environment, nothing can hide the navigational structure. An ideal iterative environment, the skeletal framework takes only a few minutes to build or change. You can test-drive concept and structure and easily experiment with modifications.

Phase 3: Home Page and Motif

With the skeleton framework in place, the graphic artist has enough information to sketch out a visual design approach, or motif, for the site. The work generally begins in a graphics program such as Photoshop. Drawing from the creative brief and samples of the client’s existing images, the artist works up a few alternative designs and approaches for client review. Based on feedback from the client, the artist revises the home page design until client approval is gained. Once approved, the motif can be applied to the rest of the pages in the site, keeping the site style consistent.