The Five Steps for Building a Web Site | 2 | WebReference

The Five Steps for Building a Web Site | 2


[prev]

The Five Steps for Building a Web Site [con't]

Step 3: Prototyping

Until now, you haven't written a single line of code. The client must be getting anxious about when they will see the first pages. At the end of this step, you will show them something in the browser—but not what they are expecting. They will want to see the design first. You will show them a prototype site instead.

A prototype site is a fully functional site with all pages containing the necessary content. If the site has a navigation, it must figure somewhere on the prototype pages. The "Contact Us" form must be wired up to send the data by mail to the required address.

But how is this different from the final site?

Oh I forgot to mention, the designer has still not made the design. The prototype is a bare naked site that contains almost no graphics. The purpose of the prototype is to be able to very quickly put things into place and find the usability errors. You could have started out with a two-level structure, but soon realized that you underestimated the complexity of the site. You need to add a third level. If you realize this after the design has been created, the designer would have to redo the design. This duplicate work can cost a fortune.

Step 4: Designing

Looking at the prototype, the designer knows the site structure and what goes on every page. In Step 1, you defined the target audience and the purpose of the web site. These are vital input for the designer. She now has most of the input that she needs. In a few days, she will come up with two or three template designs for the site. At the end of a few sessions with the client, one of the designs is chosen.

Remember, the designer doesn't design in HTML. She will use Photoshop or a similar application. She will provide one template for each type of page.

Step 5: "HTMLize" the Design

Once the design is approved, you need to rebuild it in HTML and CSS. If the design contains transitions, you will need to use JavaScript and possibly Ajax. For each template design, you should build one HTML file. Dump some "Lorum Ipsum" in the placeholders so that you can see how the page looks.

After building the HTML templates, test them on various browsers. You are bound to be confronted by browser issues. The earlier you fix them, the less you will need to replicate the corrections.

Once the HTML template pages are ready and tested across browsers, you can replicate the prototype pages with the new design. While replicating, use inclusions judiciously. You can include common chunks of code such as headers and footers. This reduces code on each page and makes the entire web site code base more manageable.

That's it! You have gone from the idea of a web site to building one in five steps. If you are interested in digging a bit deeper, you might want to read up about the following topics.