Previous article: Next article:

Ignorance, Mockups, Bliss, and Markup

by Jason Garber on 02/11/2010

Illustration courtesy of Owen Shifflett

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


Comments

  1. Avatar of Russell Heimlich added on February 11th, 2010 at 4:55 PM:

    I like to create quick wireframes within the browser. I do this so much that I made a tool to dynamically generate place holder/dummy images by constructing a simple url. The tool can be found at http://dummyimage.com

  2. Avatar of paul zdepski added on February 15th, 2010 at 11:47 AM:

    from my years in web design, i believe each tool is valid and has its place in the process. i use photoshop to comp, dreamweaver to code (not wysiwyg) and then comes the browser fun… IE 6-8, Safari, Firefox, Opera – Mac and PC… being sure the site holds together across platforms and browsers is the most challenging.

    did i mention smart phones?

    –oofah!

About the Author

Jason Garber is a photographer, musician, web generalist, founder of Refresh DC, CEO over at Ficly, User Interface Architect at Mixx, winner of Major Awards™, record collector, and huge fan of comma-separated lists. He can currently be found neglecting his personal website.



Share This Article

Browse By Category

Sponsors

  • beanstalk
  • less accounting

Become a Sponsor