Kicking the Design Comp Habit

If you’ve ever been a part of a website design project you’ve seen them: hi-res ‘pictures’ of what a website will look like, or design comps (taken straight from graphic design, they’re short for ‘comprehensive layout’). Designers have been using design comps since the dawn of the Internet as a key ingredient in the design process. They served us loyally and gave our clients accurate reflections of the visual design of a website.

But around 2010 we began to have problems with our faithful design comp deliverables. The Internet became squishier with the introduction of responsive design. One design could now show up in multiple places, and a basic design comp suddenly became too rigid to show all the different device variations.

Our comps had become inefficient.

We experienced this ourselves when we launched a large-scale responsive project. We created a small mountain of wireframes and, of course, design comps, enough to eclipse our previous three projects combined.

A Matter of Perception

To become more efficient, we had to give up the concept of a ‘page’. Where we built ‘web pages’ in the early 2000’s, we now build complicated systems that dynamically adapt to a user’s needs and requests.

Our thinking has to be just as squishy as the web has become. And that means we also have to change the way we talk about visual design on the web.

So if we’re thinking in systems rather than pages… what does that look like? How do you even talk about it? If you think of other complex systems that exist, the easiest way to discuss them is with their individual parts.

The notable designer and front-end developer Brad Frost likens it to chemistry:

Individual components (atoms), when chained together, form more complex structures (molecules). These molecules then can be used to create something more tangible and concrete, an organism.

In this example, a single button treatment would be our atomic level. Chain it together with an input field and a label and now we have a search field, or a molecule, in our system. Several more different molecules could be combined together to form something like the navigation system, our organism.

The organism now becomes the basis of our discussion: pieces, not pages.

Piecing It Together

If you want to get a better understanding of something, asking a question is infinitely more useful than making a statement.
— Jason Santa Maria, designer

To apply this to our situation: the single most useful product of a design deliverable is conversation.

When we began working on the relaunch of the major site Blu eCigs, we had lots of design questions to answer. What colors fit the brand best? What typefaces communicate the aesthetic of the brand? Is the tone of the site sophisticated? Quirky? Buttoned-down? Light-hearted?

The best way to discover these is to talk about them! Shocking, right? It might seem overly simple, but a comp exists as a statement rather than a question. A designer had to make assumptions about these answers, and if they didn’t get it right…? Well, it was back to the drawing board and easily another 20 hours down the drain.

During our design process with Blu we were able to use some alternative techniques to lead the conversation away from the page and towards individual design pieces.

Visual Inventory

The brainchild of designer Dan Mall is visual inventory. In its simplest form, this technique is a slidedeck of already existing designs paired with smart design questions about the current project. It’s extremely fast to produce and can give an amazing amount of quality feedback. This is a great ice-breaker on a new project and gives us a good sense of how a design should feel.

See an example of a visual inventory.

For Blu we created a Visual Inventory and shared it with the client. By hearing their thoughts on the different designs, we were able to tease out recurring themes and terms. Bold. Iconic. Distinct. Using these terms and their reactions to different designs we began to get a feel for what the new design should be.

Style Tiles

First explored by Samantha Warren about two years ago. Since then the process has become a staple in the industry and has been used to good effect at Pace.

A style tile is typically a small board of designs, usually at our organism/component level, paired with descriptive adjectives. (View example 1, example 2, and example 3)

It’s a great initial exploration from the feel we’ve gathered from something like the Visual Inventory. In our Blu example, we took back our findings from our Visual Inventory for Blu eCigs, and created some ideas around the different themes that emerged. You can view the Blu moodboards here.

Blu eCig Moodboard

Using these style tiles as a conversation piece, we were able to nail down a visual direction that we could use across the entire site, in about a third of the time it would have taken with comps!

Element Collages

Element Collages are a mature collection of Style Tiles, except with a single visual language. They are useful for exploring the interaction between different components and how they will exist in different places.

See an example of element collage.

This technique is useful for getting feedback on designs without being overly concerned about the little details (save that for the final stage!). Because they are loosely grouped, visual ideas we can show design thinking about structure and interaction in a way that comps can’t.

So … Are Design Comps Dead?

Nope. There are some points in a project that need something clearly and explicitly defined. Design comps still excel at this so we still use them where appropriate, but not for the entire project. Our job is to pick the right tool for the project so that we can give you, our clients, the most effective solution.

As we continue to keep our eyes open for new techniques, tell us in the comments what design techniques help your process. The more we can learn and share, the better!

Keep reading in Design & Development