From Comp to Completion

Home > Build > Design > Tips

by Aaron West

Need that ultra slick design, but don't want to fight the limits of HTML in order to create it? I have some good news for you. You don't have to. You can create a design almost entirely within a graphics application, be able to enter content in the future, and not have to worry about it taking a long time to load or breaking.

This is what many refer to as Comping. A 'comp', which is short for composition, is simply a large graphic that determines the direction a web design would take. Designers have used comps for years. Usually before a site was developed, the designer would create 2 or 3 (or more) comps, and give the client a choice. Once the design was approved, site development would commence.

In the old days, most of the comp would be recreated in HTML, in the interest of load time and browser functionality. With better browsers and faster connections, this is no longer necessary. The browsers can handle complex table structures, or layers, in order to render comps correctly, and the connections can handle larger graphics.

Comps have been used for actual web designs much more frequently over the past year. Many sites have been redesigned using only graphical elements, as opposed to the customary graphics and text. This is now a viable option for the designer, and isn't frowned on as it was before.

An example of a comp design is Apple's recent redesign. The top navigation is one large graphic, sliced together into small pieces. Another example is BeFree, the affiliate program provider. Their entire home page design is a graphic. We did the same thing with one of our network sites, Cool Resources.com.

This can be done quite easily, and can enhance the professionalism of a site. In this tutorial we'll walk you through the steps in order to create a design from a comp. There are four phases to the design, which we will walk you through:

1. Structural Design: This where the canvas for the page will be created. A vector graphics program is recommended for this, but a sturdy image editing tool, such as Photoshop, is more than adequate. For this tutorial we used Adobe Illustrator.

2. Graphic Design: This is where any special effects or photos are added. An image editing application, such as Photoshop or Paint Shop Pro can be used for this. For this tutorial we used Photoshop.

3. Slicing and Optimization: This is where the graphic is chopped into little pieces and optimized to preserve file size. We used ImageReady.

4. Final Layout: This is where the pieces of the graphic are reassembled as a Web page. This can be done with any HTML Editor, or it can be hand coded.

The choices we made were based on personal preference. Everyone has their own favorite tools, so please use what you are comfortable with. Most of the steps involved in this tutorial can be done by many programs.

Structural Design