What Are Web Design Comps? How Are They Made?

A web design comprehensive, or comp for short, is a mock-up of a website in progress that helps clients and web developers perfect the envisioned design. Web design comps are commonly used prior to actually coding the site so that there is a clear consensus of how the site should look. Comps are not always done for the site as a whole, they may also be created for individual graphical elements such as the site banner. There is no hardline rule as to when or how comps are generated, rather it depends on the unique needs of project at hand.

The Components of a Typical Webpage Comp

As previously mentioned, a web design comp is a preview of the final version of the visual elements that will be integrated into the website.  It will consist of a layout of the site which demonstrates the positioning of the elements relative to one another. Typically, it will show the header, body, sidebars, and footer sections. Within each of these general sections, there will be overlays showing the exact type of imagery or data that will be assigned to each. For example, the body section might include a slider on the top portion, followed by text and related images below.

The real benefit to the design comp is that it will be created to scale. Thus, the client will be able to view the design at the size which it would appear on a modern monitor or screen. Having accurate sizing to critique greatly assists the efforts of the developers because the client can suggest adjustments to spacing or graphic sizes before the hard coding begins. Changing or resizing certain elements after the coding has begun is a lot harder and can actually require starting all over.

How Comps are Created

The web design comp is the culmination of many hours of design preparation and communications with the client. The comp is the last step for the design team before the coding and graphics crews takes over. Although most design agencies have their own preferences for the comp process, there are some general steps that are uniformly followed.

First and foremost, the web development agency will conduct an interview or brainstorming session with the client. This allows the agency to assess the client’s needs and desires and to understand the end goal of the project. It might include a review of the client’s existing site to determine what improvements need to be made. It could also include reviewing the client’s budget for the project so that the agency knows how much it has to work with.

Sketch The Design

http://greatlittlewebsite.com/understanding-html-layout-website/

Next, the agency will produce some rudimentary sketches of the design according to the info obtained through the client interview. This step should be done as a very basic, bland representation serving as the foundation for subsequent work. Care should be taken to get it right the first time to prevent backtracking later.

The last two stages of creating the layout and adding the detail for the comp are often merged. Creating the page layout, sometimes referred to as the wireframe, consists of arranging all the parts of the page in their relative spots. This will often be done in plain black and white and is intended to make sure there is sufficient space per the dimensions of the site. The layout will next be used as the outline for the details of the comp. The final version of the web design comp is created by adding the colors and graphics that will make the site whole.