Imagine: You’re in the Tate Modern. You enter one of the upper-floor galleries. The far wall is covered in pictures. People stand, hands clasped behind their backs, contemplating. Some pictures seem sparse, some muted, others rich with color. Some seem to be all text; others appear to have none. You walk closer and you realize they’re all pictures of websites. Frozen, in frames, on the wall.
You notice a sign set in VAG Rounded, from which the Tate logotype was derived, and you smile in recognition. But then your attention snaps back. Wait a second. Websites, in frames, on a wall.
The sign reads “Web Design Gallery.”
Unintended Consequences
Web design galleries have been with us for a long time. Hundreds of sites are added to them every day. They’re a common destination for many designers searching for inspiration. They aggregate our work, becoming the default archives of web design. When sites are changed or simply disappear, a gallery screenshot (or perhaps a screenshot in a portfolio) is often all that remains.
The best gallery was the CSS Zen Garden started by Dave Shea in 2003. Updates stopped in 2008. It had a specific purpose: A “demonstration of what can be accomplished visually through CSS-based design,” created in order to rebut a common misconception at the time that standards-based design was boring. It wasn’t just a set of static images. Each page was an exhibit, with identical HTML and text, but with CSS and images submitted by web designers. Only a few were selected to become official entries. The Zen Garden provided education and inspiration to prompt web designers to drop the familiar tables-based layouts and inline styles they were using—and it worked. In tandem with grassroots advocacy from all corners, increasing numbers of web designers embraced web standards. Web design reset itself to a simpler, more usable, more accessible mode.
Other galleries sprang up, mostly imitating the CSS Zen Garden with a requirement for table-less HTML and CSS, but with little or no curation. Then we started to be bludgeoned with blog posts full of so-called design inspiration with titles like “Thirty Awesome Minimalist Designs” and “Fifty Amazing Grunge Designs.” In contrast to the CSS Zen Garden, the web is now littered with galleries of all sizes that pay little more than lip service to web standards.
Command Shift 3 is an accidental parody of a web design gallery. It invites viewers to compare two randomly chosen sites at a time and decide which are hot or not. There’s something to be gleaned from our proclivities by viewing this gallery’s all-time best list. Sites with large format stock photography and rich illustrations feature heavily. The rediscovery and enthusiasm for typography is apparent. Votes motivated primarily by popularity, favoritism, or a sense of loyalty are manifest.
Today, the most common type of web design galleries are link farms and the web equivalent of trade magazines. They generate traffic by relying on designers who are looking for inspiration. The attention they attract is converted to advertising revenue. Most have almost no information about the work, just a screenshot, a credit to the designer, and a URL. We can visit the site if it still exists, but any celebration of the craft of web design is absent.
Galleries misrepresent web design as a state, not a process. They divorce what a site does from how it looks. They celebrate style and tone, not purpose.
By style I refer to genre. Web design is often a jumble of styles that unconsciously reference different movements and genres in art and design; they range from baroque to photorealistic, to modernist, postminimalist, and postmodern, and often give a nod to Americana.
Tone is emotional nuance. Emotions can be instantiated based on our prior conditioning but are often unconscious, automatic reactions. The emotional seat of our brain is the amygdala. It’s one of the oldest parts, known as the lizard brain. Instincts like fight or flight reside there. It can receive sensory input but the amygdala has no language. That means we can have an emotional reaction without words to something we see. So when we see a screenshot of a website, we can have an emotional reaction before we have words to describe it. We see this in our use of words and phrases such as lost for words, speechless, or dumbfounded. Sometimes, there are no words, just emotions—positive or negative.
By purpose I refer to the appropriateness of the style and tone. Do they fit the project? That question is rarely asked or answered by galleries. The only reaction galleries solicit is an emotional one. Like or don’t like. Hot or not.
And, We’re Live!
In this era of responsive, adaptive web design, APIs, and free-flowing data, websites are almost alive. We abandoned believing that they needed to look the same across all platforms when we realized that would be like expecting type to print identically on toilet roll and art paper. Websites now respond to the device and the viewport. They can be progressively enhanced. They are ripe with narrative possibility; they emerge and react as people use them to create content and interact with each other.
Websites are like places, not postcards. A postcard of Barcelona will never be the same as being in Barcelona’s Plaça Reial, hearing the noise, smelling the pungent odors of the Barri Gòtic, turning full circle by the fountain to catch glimpses between the palm trees of the clubs, bars, and restaurants under the arcades designed by Gaudí. Even a 360-degree interactive panoramic isn’t the same. Yet most design galleries don’t even give us that. They present us with postcards to be admired rather than places to be experienced. This leaves us dislocated from the atmosphere, the purpose, and the reality of what the designer created. We’re like people trying to hear a record by staring at its cover. The cover art may be beautiful in its own right, but it is not the music inside.
Client Misconceptions
Like designers, prospective clients also use galleries for inspiration and research. Some also delve into sites themselves and come up with preferred styles and features. However, in the same way that there used to be a misconception that standard-based methods made for boring websites, there’s a misconception among some clients that web design is like graphic design but with bits that move. The difference is, there is no CSS Zen Garden to help disabuse them of this belief.
It’s only natural that clients will do their own design research. They will make aesthetic judgments and have their own taste. However, it’s worth understanding the difference between the two: An aesthetic judgment is often inexplicable, like an emotional reaction; it’s instinctive and can defy explanation and resist attempts at persuasion. To the client, something is either beautiful or it is not. Taste is more rational and can evolve rationally based on an appreciation of what something is for, why it is designed in such a way, what the result will be, and even how it is made. In a good, collaborative client relationship, we should always be able to influence taste.
Sometimes, rather than asking us to provide solutions and answers, clients ask us to implement theirs instead. My Analog colleague, Chris Shiflett, likens it to clients who say they want a window in a wall when what they really want is to eat their breakfast in the sunshine.
The best designers educate clients and inform their tastes. They avoid clients who ask designers merely to implement the clients’ ideas, and they don’t promote the misconception that web design is graphic design with interactive bits. They reset the process to identify the audience, problems, questions, and opportunities of the project before researching or implementing solutions. They refuse to do spec work for free; this work is a costly and damaging legacy from advertising and print. For example, Edenspiekermann helps clients with their creative brief, but only proposes solutions after they’ve been engaged by the client. I work in the same way and believe we all should. Producing any material whatsoever that provides answers and solutions before engagement should not be part of what we do.
Galleries do not bear sole responsibility for how design is commissioned. However, they do encourage clients and designers to value style more than process. They do promote transient fashion over fit and make trends of movements such as minimalism or styles like grunge or the ubiquitous Apple®-inspired aesthetic. The answers to a project’s questions may have something to do with fashion, but not often. Good design does not have a shelf life. The best web designers gently disregard issues of style at the start. They rewind their clients back to asking the right questions, so they can rewrite the brief and understand the objectives before they propose solutions. After all, it’s impossible to design solutions that fit the job at hand if we don’t really know what the purpose or problem is.
Showing empathy for the audience is an essential part of what we do as a profession. The best designers advocate for users at every stage and realize the audience is the true client. However, there’s a flip side to empathy. By being empathic, designers are often informations sinks, absorbing influences from everywhere, and as a result they perhaps are even more susceptible to fashion. It means we all have to moderate, just a bit, our enthusiasm for the new. At the same time, we also must moderate our clients’ enthusiasm for solutions before process. By moderating both, we free ourselves to focus on process, to connect the dots between bits of inspiration, and to gain insight into how we might solve the problems at hand.
Designing Places Not Postcards
Galleries can offer us graphic design inspiration from colleagues. We aren’t graphic designers, though; we’re web designers. There is much more to what we do than combining typography, layout, photography, illustration, and color.
The images in galleries are like flat comps (comprehensive layouts). They encourage a feeling that comps have more value than they actually deserve. Comps are used in graphic design and advertising to present a proposed layout to clients.
Most web designers start by distilling their research and ideas with notes and sketches, either on paper or in pixels. Sketches often evolve into hi-resolution comps in applications such as Photoshop® or Fireworks®, or wireframes in OmniGraffle®, Keynote®, or Powerpoint®. They’re useful for mocking up a design while bearing the final medium in mind, but they aren’t the end of the story. At the most basic level, the two commonly used graphics applications I mentioned both use their own text rendering engine, so even the ability to preview type is not truly accurate.
Collaboration between designers and developers is crucial to the final product. Throwing a Photoshop comp over the fence into the arms of a front-end developer is not optimal, no matter how neatly annotated and layered it is. I call it a throw-over. It is the most likely point of failure. Substituting collaboration with a post-production review almost always means more revisions. Throw-overs rely heavily on web designers knowing the technical opportunities and limitations of the medium, and on front-end developers having as much skill in design as the designers themselves.
The same goes for wireframes thrown to a graphic designer or front-end developer. Wireframes are not a website. They could be considered hi-res interaction comps if annotated properly, but they still rely on graphic designers and front-end developers delivering the vision of the user experience designer, and the UX designer knowing the medium well.
The web designer’s role is to design a website that meets the objectives of the project. Though we are often not the ones configuring server environments, building server-side components, or even building the interface itself, as designers it’s our vision that will meet the objectives. If we assume that role of meeting project objectives, effectively we are product managers, and, as such, we have to see the project all the way through to becoming a product.
Whether we work within a team or independently, our understanding of the audience, context, and medium is critical in order to effectively design for them. Galleries don’t show objectives; they don’t show the context of the project or the cognitive, behavioral, and technical grammar of the web. Without those components, a website might as well be frozen pixels, in a browser chrome, on a screen.
Designers for the Web
In every respect, we have defined our own profession out of the many disciplines needed to make websites. In between making them, we are constantly augmenting and refining what we do and trying to find the language to explain it.
I call us web-taught because that’s what we are. In 1991, when I was experimenting with plate and press and musing with my brother on this new thing called web design, there were no degrees in web design. They may exist now in some form, but the vast majority of us are still self-taught. We are constantly asking why we do something in a certain way, not just what we should do, or how we should do it, and we freely share what we learn. We see the necessity of combining our creativity with pragmatism, realizing that we must make sites that work—for us, for the client, for the visitor—if we are to be paid. And yet, we’ve managed to imbue our practice with an abiding sense of responsibility for the universality of the web (as Tim Berners-Lee described it). That makes it even more important that the archives of our work contain more than just images.
The founder of Patagonia, Yvon Chouinard, described himself as an “80 percenter.” In 2007, Dan Cederholm suggested that, as a web designer, he was an 80 percenter, too. I think I am, and many web designers are. We throw ourselves at a discipline to reach an 80-percent proficiency in a variety of skills our work requires. By being 80-percent proficient in the subsets of web design, we can get very close to achieving 100-percent proficiency in web design itself.
More and more, the range of skills we need in order to make websites are distributed across the members of a team. To design interfaces that work in the best possible way, everyone needs at least a rudimentary understanding of what everyone else does and an abiding dedication to this medium we all work with. Molly Holzschlag referred to silos of thought at Web Essentials in 2005. Molly imagined our knowledge as a T shape: a broad familiarity across many disciplines but deep expertise in one. Molly nailed it. And by doing so, she neatly illustrated how a variety of effort goes into making every website.
Redux
Tucked away in the north corner of the Plaça Reial in the shadows of the arcade is a restaurant called Taxidermista. I remember it as a beautiful place to sit, eat, and watch the world go by on a balmy evening in one of Europe’s most iconic plazas. It’s changed a lot from the taxidermy workshop that used to be there. Except for the Wayback Project and still-functioning sites, the galleries serve as the primary archive of our work, and they are like taxidermists, preserving websites by stuffing them into screenshots. It’s time to realign or reinvent how we archive our work.
One day I’d like to walk into a gallery in the Tate Modern and see the improbable: A scattering of old devices running old browsers on old operating systems serving websites of a bygone era from antiquated server architectures to tiny screens at low resolution. The designers may cringe a little—in the way all of us do at some of our old work—but for me it would be a joy to see, touch, and experience. In much the same way we marvel at the achievements of game designers working with 8 kb of memory, I think we’d marvel at what our peers achieved with an early web browser and a 640 by 480 resolution display.
Until that rather optimistic imaginary exhibit exists, I’d settle for galleries that annotate, explain, and act as a guide to a place, even if the only visual artifact is a screenshot. Many designers already write about their work. I’d like us all to try to work out ways to tell the stories of websites, so that we honor the craft of everything we do. I’d like to know what a website is for, what went into making it, how it was built, who collaborated to make it so, but most of all why the design evolved to be as it is. In our offline lives, we can be mentally transported to a place by reading about it, and we can even enhance our physical visit to a place by reading about it. I’d like us to offer ourselves and our clients the same opportunity when visiting these websites, these places. We should start with our portfolios; after all, they should be the best galleries. Perhaps as we refine how we archive and exhibit web design, we will also foster a better understanding of our profession for aspiring web designers, our clients, and each other.