Beneath the streets of a characterful city, we gathered in a characterless basement. No windows, faulty air conditioning, barely enough space to hold the assembled designers, developers, and client team, yet this was an opportunity to work alongside a number of respected practitioners on a once-in-a-lifetime project.
Following lengthy client presentations, the first opportunity to respond was a short breakout session for personal brainstorming—an exercise to help us each explore how we might approach the complex task ahead.
Most of us remained seated with notepads and laptops. The exception was a designer who stood up from his chair and plastered the wall with large sheets of paper. Armed with colored markers and an acute sense of purpose, he spent thirty minutes sketching his way along the wall, identifying patterns and starting points, never hesitating, always drawing.
The sheets held no written words, just lines, shapes, forms, colors. Initially, this almost frenetic scribbling appeared idiosyncratic, erratic, perhaps even arrogant. In fact, as proven by his eloquent explanation as we reconvened, it was structured, considered, and methodical. The entire room seemed in awe. To watch someone on top of his game is thrilling. You understand just why some people are regarded so highly by their peers and why their output is so consistently strong.
Here was a designer tackling the problem with a dizzyingly impressive combination of knowledge, confidence, and instinct. Now, confidence and instinct (whether born of experience or natural talent) are all very well, but I was fascinated by the obvious depth of knowledge that informed this designer’s response.
Strengths And Values
As part of this epiphany, I considered what distinguishes the great from the good, or what makes some designers more equipped than others. I concluded that they often inquire beyond the necessary to explore other areas, look at things differently, and bring these findings back into their work.
To progress and to create work of substance or even greatness, we each must start by knowing our values, our strengths, and the level of expertise we seek. Understanding this helps us navigate the choppy seas of that glut of information found out there on the web and to sharply define our course through it. The great designers have found a way to continue to learn, yet focus on what they love.
The Weight of Learning
In her wonderful article, “The Sad, Beautiful Fact That We’re All Going To Miss Almost Everything,” Linda Holmes looks at how we manage the weight of information and possibilities available to us through what she calls culling and surrendering. By culling, we decide that certain things are not worth our time, so we rule them out. When surrendering, however, we acknowledge that it isn’t possible to study most of what we’d like to learn, so we choose which lovely subjects to give up.
I choose not to care about things like fine wines, obscure programming languages, and fiction about elves and goblins, so I cull those topics. But I also surrender things that fascinate me, like technology. As someone who still marvels at the concept of radio, I’m not versed in the complete history of the microchip. Likewise, if I try to think about the scale of the universe, it breaks my brain. The upside of this is that technology and the universe are boiled down into a simple concept: they are made of magic. That’s all I need for now.
Our industry is growing so quickly and splintering into so many fragments that we increasingly find a need to specialize and reduce the number of areas in which we might be considered experts or even competent. Knowing our strengths and values helps us cull, surrender, and then understand where we should focus. To attempt mastery of everything inevitably makes us mediocre in many areas. I’m not interested in being a mediocre Rails programmer, just as I don’t seek to have a mediocre understanding of the universe.
As a designer often working in collaborative situations, I need a little knowledge of what other members of the team can contribute. But that’s all I need: a basic understanding. I might want more, but what I need is enough. I cull and surrender; then I focus on my strengths, mastering my core skills and studying other fields and subjects that will enrich and deepen my work and give me insight. This defines my path as a designer and fulfills my desire to develop my craft in a meaningful way.
The Value of Craftsmanship
In his book The Craftsman, Richard Sennett proposes that craftsmanship is a basic human impulse: the desire to do a job well for its own sake. Sennett sees this as a core value, one available to every person working on the web. So the question is: Do I want to simply make a living and move from project to project building websites and getting things done, or do I want to imbue my every process with the skill, integrity, and value of a true craftsman?
Think of the meticulous and careful pushing of individual pixels, or the process of hand-coding. I often consider how automation is robbing us of the knowledge that craftsmanship requires. If I choose, I can load a web-based generator and animate every conceivable CSS3 trick with some dirty copy/paste code. But by doing so, I fail to understand exactly what is happening in that process and how I can apply craftsmanship to manipulate the details and in turn create something more thoughtful, nuanced, or even extraordinary.
Craftsmen and craftswomen discover through doing: honing their skills over a significant period of time with substantial commitment. They understand the importance of mistakes, and while they are prepared to throw away perhaps 70 percent of what they do in pursuit of the magical 30 percent, they still see that the entire 100 percent is important. Our hope, as we work, is that peers, clients, and audiences will appreciate good craftsmanship amidst the vastness of indifference and thoughtless production by numbers. Craftsmanship makes our work more meaningful to us. It also spreads the perception that our profession is valuable and even irreplaceable.
The Immature View of Tools
One of the biggest mistakes we make is to lean on the tools of our trade or make our work about these tools. What we do is not about tools—whether programming languages, software, browsers, or mobile devices. Tools are the scaffold for what we produce, the enablers; they help us bring our ideas to fruition. But robbed of our favorite tools, we’d still manage to achieve our design goals. Did the designer in that basement limit himself in that session by worrying if the CMS could do X or Y? Of course not. His physical tools were markers and sheets of paper.
Tools are secondary. As Oliver Reichenstein tweeted, “The tool doesn’t make the craftsman. Choosing the right tool for the right purpose is a technical and personal choice.” What designers do is solve problems and enhance communication—whether to the largest possible audience or to a specific audience—and seek emotive responses and actions. To reduce the impact of communication because we feel constrained by our tools or, conversely, to throw in a dozen clever CSS3 tricks just because we can is to lose sight of our responsibility as designers. Fluency with some tools can mask, at least in the short term, deficiencies in our design education, process, or talent.
It is a human instinct to want to investigate, to know why, and to create something significant or lasting; we learn, we grow, and we transcend the mundanity and limitations of tools.
The Creative Need For Inquiry
Truly creative people have an unswerving need to inquire into their craft more deeply. Simply performing the core tasks admirably day by day is rarely satisfaction enough. They desire to broaden their influences, draw upon wider fields of knowledge, make connections and discoveries, and find new outcomes.
The subject matter will vary, but often this inquiry is a single vision and an ongoing fascination with a core subject that informs personal side projects, frameworks, books, and presentations. To proceed without such inquiry is to be a drone unlikely to advance to more meaningful and rewarding work. These individual lines of inquiry are what will, more than anything else, drive us to develop greater maturity in the discipline of web design.
My Own Line of Inquiry
Since watching that designer draw all over those walls, I revisited much of what I’d learned at art school and immersed myself in the theories behind the creative process. I rediscovered my passion for the analytical, the process of informed decision-making, the importance of patterns, and the beauty of visual grammar.
We can learn a great deal from the visual grammar found in virtually all successful creative work, whether art, architecture, film, furniture design, industrial or graphic design—the list goes on. To best understand why this visual grammar matters, we can look at our close cousins, graphic and product design, and what they tell us about distribution, form, pattern, texture, repetition, color, white space, and typography.
Informing design of all kinds is a rich alphabet of components such as line and point, structure, color, shapes, rhythm, and movement. These elements form a visual language rather than a verbal one, and we use it to shape our messages. The grammar of this vocabulary assists us in finding balance, forming effective composition, understanding interactions, identifying patterns, discovering starting points, and deciding how to approach problems. The graphic designer uses the syntax of this language to communicate.
This grammatical scaffold matters because of the way we humans communicate—how we receive and interpret information. Understanding more about how we perceive meaning can help web designers make smarter decisions. Design is certainly not a science, but coupling visual grammar with the science behind semiotics, mental models, human senses, and emotional response provides us with a far stronger approach to our work than making choices because they just feel right. Making arbitrary decisions can lead to wonderful outcomes, but why rely entirely upon chance? What happens when you hit a wall and need to make informed decisions?
We all agree that the web is not print. Yet, despite working with an interactive canvas, we’d be foolish to abandon solid ways of thinking without good reason. These days, I think more analytically about symmetries, depth, affordance, juxtaposition, balance, economy, and reduction. I now pay greater attention to the principles of structure in order to be more efficient with wireframes, layouts, composition. Over time and with experience, the study (whether self-directed or formal) of these principles can become second nature. We can learn these principles and then forget them because they’ve become a muscle memory of a sort; they seamlessly merge with our creative process. There’s a massive chasm between that type of forgetting and never learning these principles in the first place.
Building the Lexicon of the Web
Though I value what we have appropriated from graphic design—and the parallels are many—I would never advocate the wholesale adoption of terminology from another discipline. There is that which we can and should use. Yet, we are also tasked with moving beyond what is available in graphic design’s vocabulary, refining and redefining it, and also creating terminology of our own so that our vocabulary applies to the uniqueness of what we do on the web and the challenges and changes we encounter or invent there.
The maturity of our lexicon matters if we want to do more effective work, communicate clearly with one another and with clients, and build respect for our profession. We rely heavily on our instincts or sensibilities when evaluating our work. That works well for some, but usually best for those who’ve studied why some things work and some don’t and have the vocabulary to think it through. We’ve made great progress moving our industry forward, but we’ve been a bit neglectful of the vocabulary that would enable us to be better at helping, teaching, and critiquing each other—or explaining our choices to those outside our field. A mature lexicon is also a hallmark of a mature profession. Immaturity is glaring; it attracts disrespectful, dismissive, or demanding clients; a life of compromise; lower pay; and the honor of being first to be fired when a company goes through economic hard times.
I believe we share this responsibility to expand our existing lexicon. The task begins with earnestly studying our roots in graphic design and related fields. It then requires taking stock of the unique elements of designing for interaction so we can better articulate what is ours.
For example, Ethan Marcotte’s term responsive web design is a successful addition to our vocabulary. It elegantly describes the unique interactions within what we create and successfully defines the parameters of a specific way of working that can evolve regardless of the tools or devices we use many years from now. The responsive approach to design and architecture is nothing new, yet Ethan has looked back at existing principles, understood how these apply to what we do on the web, and applied the all-important name. When we have the right words, we can begin to say the right things.
The terms responsive and adaptive are distinct yet related and have evolved naturally from outdated web-based layout terminology (such as liquid and elastic) as we redefine what web design is and how it is viewed across a myriad of devices.
Later in The Manual, Dan Rubin will explore and uproot the concept of the page and how the use of this word affects our work. This is a craftsman following his line of inquiry to better understand a problem. He helps us refine our working vocabulary; we can then have sharper conversations about our practice and be inspired to turn other assumptions on their heads.
Cull, Surrender, But Always Learn
We can each strengthen our work by revisiting these foundations. If we are designers, we should each know the principles of graphic design inside out. Beyond that, we cull and surrender and—despite this sifting process—we will still find much to study that will bring intelligence and insight to our work. We might expand our education about the history, art, and craft of type design and typography. We could explore disciplines which are one step away: architecture, photography, painting, book design, and other fields with solid vocabularies, both visual and verbal. We each have the energy and time (yes, we really do) to pursue our own related passions, share our findings, and help the discipline of web design reach full maturity.
Some argue that this investigation into traditional and modern visual grammar and knowledge of terminology is unnecessary, saying that for many designers courage of conviction—essentially, winging it—is enough. But, aside from a sort of defensive resentment of education, which rarely makes for a strong argument, they’ve forgotten that design and art are two different things. All design has a job to do; so too does web design.
Education (self-directed or formal) will inevitably enhance any natural talent and help us do our jobs more effectively as will learning to be critical thinkers. Just as earlier voices advocated web standards and called for order amidst the chaos, we, too, should take the next step, calling for the definition and backbone of the design in web design that will continue the maturation of our profession.
I no longer consider the web to be young or markedly immature—it is established and is integral to a modern, functioning society. Communication between real people is our reason for being here. Basically, we are the web. We are the makers, the explorers, the end users. Let’s be smart about our decisions and directions, let’s work communally to gain respect in the world (the very world we’re changing), and let’s stand on the shoulders of those who came before us or who work alongside us to shape a discipline that helps us all work with confidence, intelligent experimentation, and, at times, even brilliance.