Designing with Code
To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however – and by taking them within the context of our ever-evolving digital landscape – we can begin to make a case for when working in code makes sense.
Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:
Any kind of prototype that involves programming or markup sounds scary to me – that’s the fastest route to a “developer-y” looking site rather than a truly designed – graphically as well as functionally designed – site.
This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.
Why We’re Afraid to Commit
If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).
The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions – ideas and solutions neither of them would have been able to come up with on their own.
What’s Different Now
With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.
Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)
Why It Matters
In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out of the page metaphor.
In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.
How to Get Started
So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.
There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time – and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive – or want – to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.