The topic of design comps for websites has been swimming around in my head since I attended several SXSW panels on rapid prototyping earlier this year. Then came Matt Griffin’s A List Apart article, Responsive Comping: Obtaining Signoff without Mockups, and it became clear to me that our process for exploring and presenting website designs in round after round of static comps prior to development was inherently flawed.

I put together a presentation to articulate my thoughts on the subject to the team here at Substance last week. My hope was the presentation would spark a discussion around the relationship between Art Director and UI Developer in a browser-based comping process and what it would mean to the way we approach projects as a whole. My hopes for a lively discussion quickly became a reality.

Below is the slideshow from last week’s presentation followed by more detailed thoughts on design comps for websites.

Rethinking the Web Comp from Substance

First, what is a design comp?

Wikipedia has a good description of Comprehensive Layout, but it’s based in the practices of a specific industry using a completely different publishing technology.

“In graphic design and advertising, a comprehensive layout or comprehensive, usually shortened to comp, is the page layout of a proposed design as initially presented by the designer to a client, showing the relative positions of text and illustrations before the final content of those elements has been decided upon. The comp thus serves as a draft of the final layout, and (if approved) is used as guide for further design changes and, ultimately, production.”

That description makes me nostalgic for my youth, adhering design comps of logos, ads, brochures and billboards to black gator board. I can just smell the spray mount. However, for the purposes of web design there’s a dimension missing from this definition of comps: The experience.

Design comps are paintings of a website

Think of a landscape painting. The true experience of being in this environment is abstracted. We don’t feel the chill in the air. We can’t touch the rocks or see what’s underneath them. The static image lacks the dimensions required to get a true and accurate sense of the experience, rather it’s an impression of an experience.

Static design comps only paint a picture of a website and we miss the subtle cues that go along with an interface. Certainly it is important to explore design directions, but that does not equate to designing a bunch of website pages. It means capturing distinct themes so a design direction can be approved.

Represent the experience, not just the design

Once a design concept is approved, the actual designing begins. The definition from Wikipedia quoted above calls the comp a “draft of the final.” Then it must be a draft of final experience as well, not just what it will look like. This means applying the approved design direction to the content, functionality and page structures defined in the wireframes within a framework that is true to the final; HTML, CSS and Javascript and whatever other web technology is appropriate for the project.

In the course of a normal web design project, many hours are devoted to designing and revising design comps. If this is done in Photoshop it means a lot of design decisions are made outside the context of actual interactions and in a format which will eventually be abandoned. These resource hours would be better spent actually designing and developing a working model of the experience.

It’s ok for this working model, or prototype, to have limitations, like maybe it only works in a single browser. Or, some of the more complex functionality is “roughed in” or is simply a placeholder graphic at first. From applying style to content and page structure to building out complicated Javascript powered interaction, as the project progresses the experience and functionality comes more and more into focus with each round of review.

What does this mean for our process?

WIREFRAME

Design thinking actually begins in the wireframe stage because we are considering content in terms of presentation. Wireframes are blueprint layouts using design elements and principles. Size, space and scale are used to build relationships between content elements which make up the hierarchy and dominance of each page structure.

DESIGN CONCEPT

Something we can take from the traditional ad agency model is the Art Director and Designer collaboration relationship. The Art Director defines the vision, or concept, and the designer executes the vision. The Art Director uses the content elements, functionality and page structure outlined in the wireframes as a starting point to develop design concepts which are appropriate for the brand and audience. The quantity of concepts explored and how the concepts are captured (ie. style tiles and design pattern libraries) depends on the needs of the project.

DESIGN PROTOTYPE

The modern UI Developer is a hydrid, someone highly skilled at development coupled with interface design and user experience sensibilities. So, using the previous example of the Art Director/Designer model, the UI Developer becomes the designer, extrapolating the design concept and applying it across the pages of the site with the oversight of the Art Director.

TESTING AND QA

As design comps become prototypes, QA can have a presence earlier in the process. If a feature or interaction requires testing, QA can help with a test plan. As publishing and content rules are finalized, QA can document these rules for the content entry administration process. Understanding the intended experience of an interaction or content flow is invaluable for QA because it provides a control experience to test against in the final QA stages of a project.

The Process in a Nutshell

• Use style tiles, or similar, to explore design concepts for client approval.
• Once approved, create a design pattern library for known common elements.
• Develop design as it is applied to content, functionality and page structure.
• All further reviews happen in-browser, fidelity increases with each round (or sprint).

The Benefits

• Team and client can assess design execution and user experience in context of the final medium.
• QA and user testing of the design implementation can begin earlier in the process and in a more relevant format.
• Redistributes resource hours to more appropriate roles for each deliverable.

What now?

After my presentation, we discussed the implications of this process and in some cases came to realize that it’s not such a great departure from the way we currently work. It was also clear to us that this wasn’t some kind of silver bullet process that saves time on rounds of design or cuts down development hours. We all felt the process could take the same amount of time. It’s simply a matter of working smarter and more efficiently, capitalizing on the skill-sets of our team while moving the project forward with every phase.