Deliverables: What Are Comps?
/At some point in your career, you're going to hear the word “comp” thrown around and during that conversation many people will have this question in their head - what are comps?
Basically, comps are the opposite of a wireframe. Where wireframes are just rough sketches with no real details and usually no color (just black and white sometime shades of gray - for more details check our previous post) but comps are provided to give you a better feel for what the site or application will actually look like, including colors, real content/images (or placeholders), the whole shebang.
You may also hear someone mention "mockups" and in most cases they are referring to comps, but some people call low-to-medium fidelity comps mockups.
For BAs, the term will, generally, refer to the detailed graphical representation of the way a website or application user interface will look.
Comp Example
The comps are blueprints of the website/application, presenting the plan in a tangible way to help the stakeholders review, understand, and hopefully approve and move the project on to the next step. If changes are needed, the comps are an important tool to help ensure that everyone has the same “picture” in their heads, and to focus the discussion on specific details. Refer to the comps often, looking at them as you talk through issues and possible solutions is very helpful to keep the conversation focused. After the adjustments are made, the new comps will be presented. After the plan is approved, it can be used as a blueprint to create what will be the released project.
Comps help you avoid wasting effort on an idea the stakeholders may not like. It also saves the client/company time and money spent on changes that can easily be fixed ahead of time. The comps help both parties by decreasing the possibility of disastrous miscommunication. Consider your comps as a checkpoint to ensure that a job is on the right track to getting done properly.
Expert Tips
- Never ever “skip the comps” to save time. It will bite you, hard, later on. The time spent on comps will pay off BIG in the long term. Don’t learn this lesson the hard way.
- To get the most from your comps, and to help avoid confusion when discussing the comps, assign a unique number or alphanumeric ID code to each page. You can also add those ID codes to your workflows to help people walk through the process and view the related screen view for each step and process state (in progress, errors and alerts, success, etc.). This can really help everyone understand what happens when, and how that will look to the users. As an extra bonus, trainers, user guide writers, and your QA (quality assurance) team can use those materials to get their work and test cases started in parallel with the development effort.
The Right Tool For The Job
Tools like Adobe Fireworks, Photoshop, Illustrator are the most commonly used tools, but you can use pretty much any graphics tool you have access to - for example, there is a basic editor in the screen capture/recorder tool Snagit that works great, or you can use free graphic tools like Gimp, or moderately priced ones like Affinity Photo or Affinity Designer.
While, sadly, Adobe has abandoned Fireworks, you can still get it. It's a stable tool, but they won't release any updates for it. That said, it it still my go-to tool for comps - it's like it was designed for that work. You can create multiple pages, share elements between layers and pages, and add markers and notes - all in one file. That's a huge help and oh-so-easy to keep organized. I'm currently using the Affinity tools to see if one or both will be a good long-term replacement. I'll let you know how that goes...
*Although some people prefer to refer to "composition" or "composite layout" - but the meaning is the same.