Category: Post-Comp Era

The “post-comp” era

A few days ago, I wrote about moving into the “post-comp” era in the web design process. I linked to a post by Brad Frost, and now Dan Mall has written a reply to that article.

As I mentioned in the comments, I think it’s an expectation problem. The typical workflow for web design projects is to send a client a “preview” of the site to approve before beginning development. This “preview” usually comes in the form of a comp that shows how a page might be laid out and often contains specific, pixel-perfect choices with typography, spacing, images, columns, and other very fine details. The problem is that this says to a client, “We’re now at a stage where we’re focusing on details.” It’s only natural that their feedback focuses on details.

A responsive design process is like a scandal. You’ve gotta pre-emptively control the conversation. If your client wants to have conversations like this, it likely means you didn’t do a good job of setting expectations.

As Dan points out, this expectations need to be set in the Sales process—at this point, the designer should be engaging with the potential customer and trying to establish the deliverables.

Rather than promising multiple rounds of page designs as some of the first design deliverables, we’re setting the expectation that the first things they’ll see are unstyled HTML to demonstrate content hierarchy and flexibility across various screen sizes and a few pieces of a visual style—works-in-progress and unrefined broad strokes, not polished visuals that call for critique at a fine detail level. That’s why I’ve grown to love element collages; they’re literal enough that your client can start to see a picture of things coming together but still enough of a work-in-progress that there’s no expecation that the site would actually look like this for everyone.

This is, in this age of multiple devices, simply not sustainable; in short, it creates false expectations for your customers.

To be fair, I don’t think we’re in a post-PSD era, but I do think we’re moving towards a post-“full-comp” era. I can’t envision a project where I don’t use Photoshop. Photoshop isn’t the problem. It’s a great tool. My favorite, actually. It’s the stigma that comes with presenting a full comp (I define “full comp” as an image of a website viewed on a desktop, typically around 960px wide). By default, presenting a full comp says to your client, “This is how everyone will see your site.” In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that.

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context. If you can get your client to believe in the sales process that you’ll do that for them, they won’t care what the site looks like.

This is precisely right. Of course, when you are in a company that has a Sales Team—rather than the salesman being, principally, you—then the first people that you have to convince is the Sales Team.

As I mentioned in my previous post on this subject, we have just started moving our first customers towards this process; however, we are feeling our way to a certain extent and not yet nailed down the outputs.

Yes, the projects on which we have deployed this process do seem to be going fairly well: however, we need to firm up the process very swiftly now—and then sell it to our Sales Team.

I am absolutely convinced that we are moving into a post-comp era and that it is going to lead to far more satisfying results for both designers and customers. However, it needs to be presented in the correct way, and both sides need to understand the deliverables. In short, expectations need to be sold, set and delivered.

I will continue to update you all on how it goes…

Removing comps in web design

For a few years now, I have had the feeling that we are approaching web design in the wrong way. Many designers—and their clients—have made the transition from the medium of print, and transferred the design processes too.

In print, we were all used to producing proofs with millimetric—nay, pixel-perfect—precision because we had to: the high-resolution of print meant that that one pixel gap was obvious when the material came off the press.

But it made absolute sense to produce these proofs—or composites (“comps”)—because print is a fixed medium: what you see is, pretty much, what you get.

Building a nightmare that never stops

Hence the bane of the website builder’s job: a pixel-perfect Photoshop comp married—in Hell—with a customer who doesn’t understand that their website is never going to precisely match that beautiful image proof that they have signed off.

The web has always been a fundamentally fluid medium: in print, the amount of text was often governed by the size of the printed page—in web design, the very opposite is true.

And this point is compounded when designing for a content management system (CMS), where the designer could not—and should not—absolutely control how much text a user can insert.

The death of the static image comp in web design

As such, I really believe that we need to kill this idea of using static image comps in web design and, a few weeks ago, Brad Frost succinctly summed up why in a post entitled The Post-PSD Era

Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. Pixels get pushed, details are sweated, pages are printed out, hung on walls, and presented to clients. Clients squawk their feedback, then designers act on it. They repeat this dance until everyone is content (or until nobody gives a shit anymore, which happens more often than you’d think).Only then do those pristine comps get handed (more like shoved) over to developers to build.

It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.

As it happens, Brad wrote this post at roughly the same time as I was presenting a new design process to my fellow managers—and I found it when looking for some pithy comment with which to populate a slideshow presenting said process to the rest of the company.

Bringing it home

My company designs and implements websites on its own Content Management System (CMS). I have moved through different positions within the company over the last five years, but I was put in charge of the new Creative and User Experience Team in July.

In between delivering customer projects, I have been attempting to make our processes more efficient. It swiftly became obvious that there were a number of problems with the way in which we designed and build our websites and intranets.

Improving our process: driving efficiency

The first has been largely improved by the adoption of an increasingly robust CSS LESS framework.

The second, however, was more difficult to address—customers’ expectation that their websites would look precisely (yes, even in IE7) like the lovely images that they had signed off .

We were also duplicating work.

So, the first thing that we did was to push the responsibility for producing wireframes solely onto the Information Architects; wireframes were already an output of these workshops (driven largely by the Attention Mapping exercises), so duplicating this work seemed ridiculous.

Next, we created a selection of mood boards—with recognisable, non-techie names—which, combined with the wireframes, enabled our designers to get a very good idea of what the customers were aiming for.

Zombie comps that will not die

But, at the end, we were still producing fixed image comps that were taking too long to create and, importantly, amend. Customers were getting hung up on the positioning of elements when, in our CMS, you can place anything anywhere (just about).

So, in December, I my research turned up Samantha Warren’s styleti.es—a website dedicated to promoting the use of said Style Tiles.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

The sites and systems that we build are huge.

There is simply no way that we can proof up all of the pages that make up the tens of functional Modules that our customers may have bought.

Style Tiles and a way forward

As I saw it, Style Tiles—with a bit of modification—would enable our company to provide the important elements to our customers (the look of a menu system, how a Staff Directory entry might be displayed) without them getting hung up about where on the page these elements might appear.

After all, not only is the web a fluid medium but our CMS also gives the customer total control over their page structure.

With Style Tiles, clients could focus on the important details, rather than getting hung up on where those things appeared on a page. We would, in fact, be aligning our processes with the flexibility of our product and thus reinforcing its superiority.

There were, of course, other benefits, including being able to turn around work much more quickly and thus increase the productivity of the team.

It’s never enough…

But Style Tiles wouldn’t be enough—especially in the age of Responsive Design.

As such, we decided to build Live Prototypes alongside the Style Tiles. With our LESS framework (which has mobile @media break-points built in), and the CMS’s inbuilt styling options, this became a viable proposition.

The first run is scheduled for Tuesday morning: I’ll let you know how it goes…