Ignorance, Mockups, Bliss, and Markup

Published on .

The latest polarizing dust-up in the Wide World of Web Design involves the methods and tools we designer-types use to solve our clients’ (or our own) problems. This most recent round of misunderstood comments, edge case examples, and generally circular arguing was touched off by two posts (one and two) from the 2009 edition of 24 ways.

The authors, respected designers Andy Clarke and Meagan Fisher, propose similar-but-slightly-different design strategies, which may be boiled down to: “design in the browser.” Meagan even goes so far as to proclaim, “Die, Photoshop, Die.” A bold statement, for sure. Both posts are insightful peeks into the processes of two well-known web practitioners.

Upon first reading, though, I was disappointed that the authors failed to present a balance to their position: neither addressed the potential “gotchas” of his or her method. Most of the ensuing discussion in the posts’ comments dealt with such concerns.

Being a “shades of grey” type (or, “moderate” if you will), I did what came naturally: asked designers smarter than me for their opinion on the issue. Overwhelmingly, the responses I received favored balanced approaches over an either-or binary choice.

Balance to The Force

“Designing in the browser has influenced me to explore unfamiliar CSS3 functionality,” writes Dave DeSandro. However, he continues, “jumping right into markup dissuades me from trying more visually evocative composition.”

Hashrocket’s Doris Steere agrees that designing in the browser is great: “It’s quick, easy to manipulate, and gets you instant feedback.” She does worry, though, that there’s the potential for less creativity and exploration when using this method.

“I think it’s important for designers to have spent a decent amount of time in both modes,” writes Jackson Wilkinson. “Designing in the browser helps you learn to understand the web as a medium, but I think there’s a better opportunity to produce sophisticated, high-quality work using Photoshop as your composition tool.”

My long-time collaborator and co-conspirator Nguyet Vuong sent along her approach to design and how she works with her clients:

“Designing in the browser using CSS is a great idea if it’s applicable to the needs of the project. Whether it’s more efficient as a design tool than Photoshop or Fireworks or Illustrator is irrelevant. They are all good tools as long as we know how to use them well.

"Due to the graphically intense nature of our designs, we show clients static mock-ups done in HTML and CSS when it’s applicable and makes sense. When presenting comps, we use a hybrid approach: designs start in Photoshop and comps are presented with some coding and interactivity if needed. It is more efficient for us to design graphics in Photoshop and present text in HTML and CSS so that clients can see how text is rendered in a browser.”

So… What’s a Designer To Do?

Do what feels right. Do what works for you and works for your clients. Stay on top of the latest trends and developments. Be open to alternative (new! scary!) methods of designing.

Don’t, however, go blindly charging down a path dictated in a blog post from an “industry expert.” Doug March sums it up: “Pick the tool that serves you. Who cares what others say? Just make things.”

Your homework: Try designing an upcoming project in a way that is not your norm. You may find great success. If not, at least you’ve learned something new and different along the way.

Further Reading