Create Comps when Designing a Website

By Lisa Lopuck from Web Design For Dummies, 3rd Edition

Comps, as they’re called in web-design circles, are visual mock-ups of a proposed, new web design. They are the designer’s chance to establish what the website will ultimately look like — from the page’s background colors and textures, font choices, colors, and sizes to navigation and button design. The key to designing comps is to focus on designing templates.

There is usually a comp developed for each template (often with multiple Photoshop layers and layer sets that show different states of interactive components). Therefore, when designing a comp, you must think of each template’s pillars. What is the grid that this page uses? How and where will different types of text elements display? Are there expandable and collapsible sections for which you need to show both views? Is there a special treatment or border for images or forms? What do the navigation and buttons look like?

When developing comps, pick a sample page that uses one of the templates. Use actual headlines, button copy, and photos (or close to what will be the actual copy and photos) in order to capture the right mood and tone of the proposed site.

Often times, a comp will require you to include browser system elements like scroll bars, radio buttons, and check boxes. There is no need to chop up screenshots or (worse) create custom widgets from scratch (unless that’s what you are going for). There are online sites such as Designers Toolbox that allow you to download Photoshop files that have these elements on transparent layers, making it easy to incorporate them into your designs.