Building a Web site from a prototype image file with FrontPage 2003

By Jeannine Gailey

Applies to
Microsoft Office FrontPage® 2003

Introduction

The conceptual design and layout for a Web site are often done using prototype images files. Prototype images are single, high-resolution image files (typically JPEG) that are used to quickly communicate the design and layout of a Web site. Prototype images help get crucial customer and end-user input on your Web site designs as early as possible, before any HTML has been generated. The challenge in using prototype images has always been the tedious process of faithfully replicating all of the image design details in code.

Using a graphic design software program such as Adobe Illustrator, it is easy to generate multiple prototypes of a single Web site. These prototypes can serve as important tools for communicating with the customer, developing storyboards, and testing design concepts with end users. Once a design has been decided upon, the prototype image can be used as the foundation for building the site.

FrontPage 2003 makes it easier to build Web sites by using the prototype image as a tracing image. A tracing image is displayed behind the workspace in Design view, and it can be adjusted horizontally and vertically for proper alignment within the page. The opacity — the level of transparency of the tracing image — can be reduced to better distinguish page elements from the prototype image.

Best practices for creating a prototype image

Good Web design often involves presenting repeated iterations of site prototypes to the customer and their end users. Most graphic design software packages make it possible to quickly produce prototypes that use a variety of Web site layouts and color schemes. The best designs take into account such factors as ease of use and general appeal.

It helps when creating a prototype image to maintain buttons, banners, and other page elements in separate layers so that they can be adjusted and modified independently of each other. When the design is complete, the layers can be collapsed into a flat file (usually JPEG format).

Keep the following goals in mind when creating a prototype image:

  • Prototype images should accurately reflect what end users will see, including the browser and any operating system elements, such as the Microsoft Windows taskbar.
  • The size of the prototype image should reflect the intended user's screen resolution. If you plan to reuse any parts of the prototype as structural elements in the Web site, such as banners and buttons, make sure that the resolution of the prototype image is sufficient to support the target screen resolution.
  • Make a note of the hexadecimal values for the colors used; also note the font families, sizes, and styles of text.

Once the prototype has been prepared and approved by the customer, it's time to construct the Web site.

Creating the Web site

Before you start building the site, you should prepare any images that you will use. Ideally, banners and buttons can be captured right from the prototype image itself. You may also want to use FrontPage 2003 to create a new cascading style sheet (CSS) for the Web site that reflects the colors and font properties in the prototype, which should have been noted when the prototype was created. To learn more about CSS, see Using Cascading Style Sheets on Your Web Site.

Now to create the Web site itself. After creating a new page in FrontPage 2003 and attaching the style sheet, it's time to display the prototype image as a tracing image in Design view.

To define a tracing image

  1. Make sure that you are in Design view.
  2. On the View menu, point to Tracing Image, and then click Configure.
  3. In the Tracing Image dialog box, click Browse, select the prototype image to use as a tracing image, and then click Insert.
  4. The tracing image offset can be adjusted so that the tracing image aligns properly, which is needed when the prototype includes other elements (such as a browser toolbar) that are not meant to be part of the page. Adjust the X and Y offset values to align the upper-left corner of the Web page in the tracing image with the upper-left corner of the Design view.
  5. When using a tracing image, you may want to adjust the image opacity. For example, when you want to see how the page under construction looks without the tracing image, reduce the opacity of the tracing image by moving the slider to adjust the opacity to the desired level.
  6. Click Apply to preview the tracing image.
  7. Repeat steps 4, 5, and 6 to obtain the desired effect; then click OK.
  8. With the prototype image visible in Design view, you can now begin designing the page.

To lay out the Web page based on a tracing image

  1. In the Layout Tables and Cells task pane, choose the predefined structured page layout in FrontPage 2003 that most closely matches the structure of the tracing image. To display the Layout Tables and Cells task pane, on the View menu, click Task Pane. Then click the arrow at the top of the task pane, and click Layout Tables and Cells. For more information on using this feature, see Create a structured page layout by using layout tables and cells.
  2. Resize the cells in the table and insert other layout tables to reflect the structure of the tracing image. Figure 1 shows the process of adjusting the page layout (represented by the blue lines) to match the tracing image.

    A Web page in Design view with a layout table superimposed on a tracing image
Figure 1: Using a tracing image and layout tables and cells in Design view makes it easy to modify the layout of your prototype.
  1. Insert images, buttons, and other structural elements into the layout so that they match the tracing image. Figure 2 shows the page with the banner and some of the buttons added to match the tracing image.

    Web page in Design view with design elements inserted that match the tracing image
Figure 2: Insert the individual elements into place by using the corresponding sections in the tracing image as a guide. Note that the image of the letter W is out of alignment. FrontPage image tools can be used to place the image over the location of the W in the tracing image.
  1. Fine-tune the layout to match the tracing image by creating additional layout tables and cells or by adjusting the margins and padding values of cells.
  2. When the design is complete, turn off the tracing image to see the result. To turn off the tracing image, on the View menu, point to Tracing Image, and then click Show Image.

Conclusion

Prototype images can be very beneficial when planning, testing, and designing a Web site. Not only do they facilitate concrete discussions with your customers, but they can be used to elicit important feedback from end users and assembled into storyboards that model the overall site experience. Best of all, FrontPage 2003 makes it even easier to accurately re-create image-based Web designs by adding prototype images as tracing images in Design view.


About the author    Jeannine Gailey runs Webbish6 and is a technology writer and owner of her own small writing and consulting business. She has worked in technical documentation and has managed Web-based projects at IBM, AT&T, Capital One, and Microsoft.

 
 
Applies to:
FrontPage 2003