How to Find the Best Web Host for Your Website
Streamlining Your Web Site's Navigation
How to Create Profiles of Your Websites Target Audience

Create Comps when Designing a Website

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.

Online design resource sites like Designers Toolbox provide common interface graphics that you can
Credit: © Designers Toolbox
Online design resource sites like Designers Toolbox provide common interface graphics that you can download and incorporate into your comps.
blog comments powered by Disqus
Web Design: Why Image and Monitor Resolution Matters
How to Design Your Company Website around Social Networking
Addressing Ajax Design Issues
Prepare To-Do Lists for User Testing on a New Website
How to Storyboard with Wireframes, Designs, Site Maps, and Flowcharts