Design a prototype website using HTML

Before we create a design document for the web content system, it can be useful to create a prototype of the site using HTML. This prototype should be based on the outline defined in your project plan and the data gathered in the analysis document. The site structure, design, and HTML code you develop for the prototype can be used as the basis for many of the items defined in the design document.

By creating a prototype website using HTML, you get to see what your actual website will look like, plus you develop many of the features used by the web content system and website.

Build the prototype

• The prototype website should include example pages of each page type defined in the project plan and analysis document. It should also include the basic site structure of the proposed website.

• The prototype should be a functional website. It should include functioning navigational features to enable you to browse through the prototype. Examples of real content are used to populate the prototype.

• Take care to ensure that the HTML and other code you write to create the prototype meets coding best practices because much of the code you develop for the prototype will be reused in the Web Content Manager site.

Use HTML to plan the design of the site

A useful method to begin the design of the content management system is to use HTML to develop a prototype of the site. Do this task in consultation with the web content information architect.

The HTML site should include:

• The design for the main home pages of each section of the site

• The design for content pages stored in each section

• The navigation features of the site

The HTML site can then be used to help determine what web content items need to be created for the web content management system. For example, the design of each web page in the HTML mock-up can determine different parts of the Web Content Manager site:

• The layout of each HTML page determines the layout of the presentation templates.

• The design of the navigation features determines what menus and navigators you will need to create.

Other features of the design, such as images and style sheets, will determine what components need to be created and whether you need to develop a new WebSphere Portal theme.

Parent: Plan a website

Previous topic: Create an analysis document

Next topic: Create a design document