As web designers, we are often confronted with the argument that the work we do isn’t “really art” because the constraints within which we most frequently work are labeled “commercial.” Yet the solutions we create, at least the successful ones, are almost always based on foundational principles of art and design taught in schools everywhere (whether or not you’ve ever taken a course on basic design or color theory).
I’d prefer not to define “art.” In fact, I’d prefer not to define “design” of any kind, web or otherwise. But I would like to share a few techniques I learned in art school that I use to this day to help improve my own website designs when I don’t have an extra pair of eyes handy to tell me that my perspective is off or that I suck at designing for women.
First, a short background story…#section1
I vividly remember the day my professor tapped me on the shoulder and motioned for me to step back from the oil painting I had spent weeks laboring over in meticulous detail. The canvas measured four feet by six feet, and the image slowly emerging was a trompe l’oeil collage anchored by a photorealistic falcon. This painting would garner me the unofficial nickname “The Bird Guy” for my last two years as an undergrad.
My professor stepped back a few more paces. I followed. Seven feet of concrete separated me from my masterpiece. For a few silent moments, we both just stood there, staring at my work.
He broke the silence by asking, “Have you ever heard of the term ‘artistic distance’?” I shook my head. He took a breath, then explained that artists have a tendency to get too close to their creations, and the resulting physical and emotional proximity combine to form a mental block that prevents the artist from seeing flaws in his own work.
He stood with me while I pored over every brushstroke in my painting. I could feel the tension in my body dissipate as the minutes passed. Just stepping away from the easel was enough to get me to relax, and what I saw before me was genius. I was in mid-internal-congratulation when I saw what he had seen. The facial anatomy of my beautiful falcon was off by a fraction. “Fuck.” A satisfied smile spread across my professor’s face, and he moved on to a fellow student.
I learned an immeasurably important lesson that day. And for the past 22 years, I have applied that lesson in all of my personal and professional work.
My efforts to identify the concept of “artistic distance” in textbooks came up remarkably empty. Yet it isn’t by any means a new concept. It’s taught in every art school around the world in one form or another. And you will hear docents at nearly every museum telling their tour groups to step back from the work to truly “see” it. (Unless it’s a Vermeer.)
The question then is, when was this concept first proposed?
Aristotle introduced the idea of aesthetics in his seminal work Poetics, in which he discusses the various metaphysical components of drama.
Artistic distance, as described by my professor, is actually a combination of two parallel concepts that build on Aristotle’s musings.
Shortly after the turn of the 20th century, psychologist and philosopher Edward Bullough wrote a ground-breaking essay entitled ‘Psychical Distance’ as a Factor in Art and as an Aesthetic Principle1. His treatise first appeared in 1912 in the British Journal of Psychology.
Bullough described various “types” of distance that range from spacial to temporal to physical. The crux of his arguments can be summarized in his own words:
Bullough’s theory deals primarily with works of art that you can view in isolation—on a gallery wall, for example—and is meant to describe how to interpret the experience a spectator may have when viewing a given piece of art.
In 1946, Stephen C. Pepper published a follow-up to Bullough’s article in The Journal of Aesthetics and Art Criticism entitled Emotional Distance in Art.2 Pepper argued that, “[F]ailure to achieve sufficient emotional distance destroys the aesthetic value of a work of art.” Pepper’s radical ideas on the perception of art are grounded in two inviolate principles that he maintained must occur for a spectator to fully appreciate art. First, the spectator must be within the perceptual field of the physical object. Secondly, the perceiver must be open to receive to such stimulation.
How does this apply to you?#section3
Dribbble and Forrst are two examples of social networking websites that attempted to solve a problem all independent creatives deal with on a daily basis: isolation. Both of these sites were designed to create a space where independent creatives could get feedback on works-in-progress. The hope was that by engaging in critique, people could raise the overall level of design in the community. The effectiveness of either effort are up for debate.
While I’m sure that someone will disagree, these sites have proven that very few “professionals” have the ability or courage to provide a well-constructed analysis of someone else’s work (whether or not the evaluation was solicited). My opinion has nothing at all to do with either website, but rather with industry professionals’ inability to challenge, or fear of challenging, the status quo. Far too often, honesty is met with ridicule, shame, or outright rage from people hiding behind electronic media. As a community, if our goal is to continue raising the bar for design, we need to get to a place where objective discussion is welcomed, not scorned or drowned in obsequiousness. I would love to see discussion of basic design move past the superficial trendiness of emerging web technologies.
My opinion is based on two things, fact and observation:
Fact: when Dan Cederholm launched Dribbble, his stated intent was to create a place that would elevate the level of design in the industry by bringing together the best talent in web design to help isolated professionals improve their own in-progress work through discussion (critique).
Observation: I’ve been a member of Dribbble for nearly two years and have watched it grow from humble beginnings through minor controversy to the place it has become—an online showcase. Dribbble has proven that the level of talent in the industry is impressive and I personally follow a number of designers and illustrators whose talent is absolutely worthy of admiration. However, if you spend five minutes paging through the site, you’ll find thousands upon thousands of superficial responses, but very very few threads with any valuable feedback. Ninety-nine of 100 responses fall into the “awesome” or “wow” categories, regardless of how well designed or technically proficient or conceptually strong a piece actually is. It’s great eye candy, but not the learning tool I believe it was intended to be. And the question is why?
Everyone wants to hear a client or colleague say “wow,” “awesome,” and “so cool” when they deliver a job. But unsolicited praise is useless beyond immediate ego-gratification. It teaches you nothing. Gushing praise on Twitter, Dribbble, or any other social network should be held up to the same scrutiny as unsupported criticism.
The crux is simple: if you can critique your own work, you’ll be better able to offer constructive criticism to someone else. Taken a step further, the more confident and accomplished you become at critique (self or public), the better equipped you will be to defend your design decisions when you unveil your work to your client for the first time.
Critique or “constructive criticism”#section4
Critique is not opinion. Opinion doesn’t need to be supported.
Critique is a detailed, objective evaluation. It’s impersonal. It’s honest. It can be delicate like the flavor of heather in a fine single malt scotch, or it can feel like you’ve been bludgeoned by a Louisville Slugger. But its singular purpose is to provide another objective point of view. You, as the web designer, have the option of accepting or rejecting the design analysis. It’s neither right or wrong. It’s simply another studied point of view.
A good critique is the difference between saying, “That sucks” versus “Here’s why I think that sucks.”
For example, I left the following observation on Dribbble for my friend and colleague Philip Zaengle:
“One observation: the final upward curl off the “corp” loop is distractingly magnetic to my eye. Draws my line of sight up and away from the logo instead of back toward the logo.”
This is a fairly tame example, but you can be brutally honest”—providing you back up your words with a considered analysis. Critique isn’t about putting someone’s work down or, worse, putting the person down. It’s about helping someone see past their own blinders. And remember, thick skin isn’t only beneficial to alligators.
Consider the response I received from a trusted non-designer regarding my first design pass with the samples I used to illustrate this article. “No woman reading about luxury will spend any time on that site.” I asked a couple questions to help me understand her thoughts. Then came the flood. “The colors are all wrong, it’s too boxy, pictures are too small, font is small, why is the Facebook link over there, main navigation is ugly, articles are too long, looks like a man designed this, have you ever seen Tiffany’s website? This sucks.” Analysis doesn’t have to be perfectly articulated to obtain invaluable feedback. But as a designer, the goal is to know your craft well enough to be concise and honest in your appraisals as well as considerate of other people’s points of view. You are, after all, creating a commercial product.
Does it also stand to reason that there is such a thing as “constructive praise”?
Assuming most people are hesitant or afraid to criticize the work of a peer, try something different when you give props. Don’t stop at “Fantastic!” Take the time to describe in detail why you find a certain aspect of someone’s work superlative. Explain in detail why you believe a “wow” is warranted. What is it about the color palette or composition that appeals to you? Why do you like the detail in an illustration? Can you guess the brand requirements or conceptual intent of the artist by analyzing the execution? What foundational elements of graphic design can you recognize? Is there a technique you cannot identify?
By learning to describe the details in a design you admire, you can also learn how to recognize and describe a design you feel isn’t quite as “awesome.” In some cases, you may even find yourself reevaluating your initial impression after taking the time to try to explain to yourself why you thought a certain piece was “awesome.”
Artistic distance and pixels#section5
At some point during every job, we all want to know if our designs or illustrations or logos are on track. If you regularly impose your designs on your colleagues or friends for feedback, good for you. Consider yourselves lucky to have friends who are willing to indulge your ego long enough to provide you with thoughtful feedback. But what about the times when you are completely on your own?
In the absence of a formal definition, artistic distance can best be described as a methodology for “self-critique.”
I use these techniques to help me digest and dissect the effectiveness of my work while it’s in progress. These techniques work for web design, illustration, photography, and any other visual medium.
Get off your butt#section6
Get up, walk across the room, and look at your design. What do you see? Can you read the call to action? Is there a noticeable visual path for the user to follow to mandatory elements? Can you see the buttons? Does your layout make visual sense? Is it too cluttered? Or too sparse? Move closer and ask all these questions a second time.
Creating spacial distance between you and your design will help clarify all of the questions I’ve posed above and more. Spacial distance will help you focus on important layout issues, instead of obsessing over the intricate pattern you’ve designed for a content header.
Review your design from across the room.
A simple trick that illustrators use to identify anatomy and perspective problems in their work is to turn their drawing upside down. By shifting the plane of the object (or yourself), you force your brain to momentarily rewire itself to understand the visual composition. Problem areas will stick out like a sore thumb.
You can easily apply this same technique to your web designs by using your preferred graphics editing tool to rotate your design on-screen 180 degrees.
Turn your design upside down.
Once you have your design upside down, start asking yourself questions. Does the basic composition still work? Are the required elements noticeable?
Where is the emphasis in this design? Based on what you see, what are the primary focal points?
You’ve been perfecting your color palette for days, maybe even weeks. But does it work?
Convert your design to grayscale. Nothing reveals the effectiveness of your color choices better than removing the emotional attachment of color itself.
If your design works in black and white or grayscale, it works. Period. Grayscale will show you how well your visual queues—buttons, headlines, etc.,—are represented in your layout.
Ditch your color palette and see how your design works naked.
By converting this design to grayscale, you can clearly see what elements of the page were designed to be the focal points.
In this example, the entire header, including the logo and navigation were designed to display with less contrast than the images, article headlines, and blurbs. Every effort was made to draw the user into the page using the photography as the visual hook.
After converting your design to grey scale, invert it.
You can even take it a step further and invert the grayscale by selecting invert in the page display mode menu. Turn the blacks to whites and the whites to blacks and see your design from a totally new perspective.
Again, what stands out?
You spend hours, weeks, or months arranging the deck chairs in your melon for a design before you sit down to commit it to paper or pixels. By the time you’ve clicked your mouse for the first time, you’ve committed yourself to a “solution” you believe meets the project and brand requirements. The emotional bond is already strong. How do you break it?
Get the design out of your head and create the initial layout. Add as much or as little detail as you want, then forget about it. Come back to the design a few days or weeks later. Open a .jpg and let it sit on screen all day (for one or more days) while you exercise, do your daily paperwork, or just walk into and out of your office. Allow the design to engage your attention for brief moments and let it to sink into your subconscious. You’ll know when to reengage.
No doubt someone will argue “No one has the time to let a design sit for days or weeks! We have deadlines!” If you aren’t building in the time necessary to allow a design to “gel” in your head, you’re short-changing yourself and your client. Custom design requires “head” time, and you need to build that time into your process. And, yes, “thinking time” is billable time.
It takes a certain mindset to be able to disengage your emotions long enough to self-critique or even listen to someone else tell you how they would improve your work, without taking it personally. Truth is: most people can’t.
If you are passionate about what you create, it is virtually impossible to completely disassociate yourself from your work. However, your ability to achieve “artistic distance”—that is, to achieve a place that allows you to contemplate the object (design) on its own merits—will enable you to improve your own work immeasurably and, ultimately, cast off the immature shackles of ego.