How it is

Going through community college has taught me a lot of great things. I learned a lot of the basics of building websites. I have a foundation that will carry me through my aspirations of being a web designer.

Community college has also taught be how to do things wrong. Enter: the design comp. A design comp. is an image by using image editing or drawing tools to dictate the look and feel of a web site.

An assignment I was given was to create three comps for three different pages (Home Page, secondary and tertiary) for three different view ports being; desktop, tablet and mobile (my instructor was a big advocate for "desktop-first").

I remember opening up illustrator and starting the process of designing a website. I reference a wireframe structure that I had previously made in illustrator and started clicking away. Hours later I was starting to finish up my first set of comps for the homepage. Then a few more hours of work for the other two sets for a total of nine comps.

I don't know about you but, that was a lot of work! Now, to be fair I'm not a super skilled AI professional. But I thought to myself that this was a lot of work considering I haven't even touched a lick of code yet!

At the time, I thought to myself, "I guess this is how it's going to be, huh?" I figured I'd get more proficient with my illustrator skills and it wouldn't take me nearly as much time in the future. Besides, I'd be getting paid hourly, right? My assignment was pick apart by my teacher and then I decided on a final and moved into implementing the site.

I got to building the site. I made some adjustments to the placement and measurements of certain objects here and there that just made more sense when coding the site.
After all I designed it, I can change it, right? Not if I want to get full credit for the assignment. After turning it in the comments from my teacher were that it wasn't exactly like my comp to the T and said that I should revise my comp to match the site.

After spending hours on a comp then on a building the site I found myself stuck with the thought of wrestling with the idea of doing double the work forever. Why can't I just do the work once? I suppose this is why they hire two people to do two different kinds of work.

The explanation I was given left much to be desired. Basically "We give a comp to the client to see if they like it and change it if we need to." That made sense to me at the time. Sure, the client needs to like how their site looks.

Designing in the browser

I first heard the term "Designing in the browser" from a treehouse video that put two different designers side by side and asked them to design the same site one using illustrator and the other a text editor and browser.

This really intrigued me since I always thought that a comp was a necessary part of the workflow of web design. I observed that the work was equal. Everything that was being illustrated was being coded just as equally. This demonstration proved to me that I was doing double the work but still didn't know why exactly. The answer was ultimately: For no good reason. One could ascertain that it was merely for the client to approve of a aesthetic that of the site. But this poses the problem of not offering flexibility in the workflow. If upon the construction of the site things need to be modified to enhance user experience during the implementation process we end up at odds with the fact that the client may not like the changes to the previously "approved-upon" comp.
The dilemma causes us to back track to make the client happy with the design.

Promise Breaker

In the end the client looks at a comp as a "promise." Now, there's nothing wrong with delivering what you promised. The problem is what the perceived promise is. Did we promise a beautiful looking site? Hopefully. As a user experience designer the real promise is to deliver just that: a User Experience. The promise includes an aesthetic that a user finds visually appealing. The contention is beautifully put by Samantha Warren in her article Style Tiles and How they work.

"it’s human nature for people to mix and match, this allows clients to sabotage the best solutions to their design problems based on transitory stylistic preferences. In the end, you have a Frankencomp, a mishmash of interface elements conceived outside the website’s goals... Style is preference-oriented while design is goal-oriented. It can be daunting to help your client understand how the two are separate."

As a UXer, your job is not only to make a beautiful site but to also offer a wonderful experience. It's our goal to deliver this and nothing else. Being at the whim of "Can we move the logo up a little bit" is not the goal, the user is. This is not flipping off your client. This is being true to what your profession is and being directive about it.

Style Tiles

But isn't there a way to help this? There is! Implementing style tiles is all about that. They offer a way for the client to be a part of the design process without getting in the way of the user experience. The concept is to compile all the aesthetic elements that do matter to the client, such as logo, typefaces colors into a series of image variants that present the look and feel of their brand and image. This provides a more concise version of a mood board. All of the feeling is there with much less work to develop. The client may pick and choose the elements they want; a typeface from here, a color from there... etc. For you as a UXer, you get the flexibility to offer great UX while using the style tile as an aesthetic guide.

Conclusion

Comps are a tool for a different industry from a different era. We have to utilize different tools and evolve our process to make sense with what we do. Use Photoshop to edit photos, Illustrator to illustrate and code to build websites. A website is more that a graphical representation of a brand. It's an experience to be delivered.