Web Design Process: Design in the Browser?

“Designing in the Browser”

My previous post about web design for print designers, got me thinking more about what the “best” process, the best workflow, for designing and creating websites is.

Andy Clarke, a very influential British web designer gave a very influential talk about this a few years ago,  being a proponent of “designing in the browser”—that is, leaving Photoshop behind, and working straight in the medium that your client’s site will actually be living in—HTML, CSS, Javascript.

Here’s a sloppy summary of why:

  • The way Photoshop treats type is totally different from the way browser treat it
  • It creates a whole other step in the process, that can slow things down
  • PS does not have any way of mocking up dynamic elements, such as hover-over behaviors
  • You have to translate what Photoshop can do, into what a browser can do—why not start in the browser itself?

Meagan Fisher did another great article about this on 24 Ways. She goes into more depth about the process she uses to design in the browser—using HTML and CSS. (See the comments on this article for an in-depth discussion, by real designers, of the pros and cons of this method.)

A small company called Handcraft has even started to create a little web app to help you do this, Dan Lewis James wrote a post about his process, and 37 Signals wrote a characteristically great and opinionated piece about it, Why we Skip Photoshop.

Why it Matters

My previous post got me thinking a lot about the problems of using Photoshop—or Illustrator, or really, Fireworks.

  • It encourages the client, and the designer, to continue thinking about the work as a static piece of paper, that only gets “converted” into a web page at the end
  • It relegates any work on the dynamic elements to the end, if at all (if the designer doesn’t pay attention to them, and the developer doesn’t feel it’s his duty to worry about it, and the client doesn’t even know that it’s possible—where the heck is it supposed to come up?)


There are a number of drawbacks of the “designing in the browser” approach:

  • Many designers don’t know CSS and HTML, and don’t want to
  • Working in the browser might make you think more “left-brained,” and limit your creativity (if you’re like that)
  • It might make you think in “boxy” terms, because it’s so easy to make boxes in HTML and CSS; Photoshop lets you break out of the “box” and create things that people may not have seen before—then, you can go back and figure out how to code it

Moving Forward—Solution?

I don’t think there’s one solution here. Here’s what I think:

  • It’s not just a question about tools; it’s a question about process—the process tends to drive decisions. For example, if the designer is the de facto driver of a project, and the designer uses a process of “I show the Photoshop comps to the client, and he signs off on them,” this will inevitably tend to downplay dynamic elements, and relegate them to the back burner. They may never get addressed at all.
  • We probably need to think about a process that includes people working concurrently—let’s have a copywriter developing some lead copy, as the designer uses whatever creative tool they like to work with to open up their minds, and meanwhile, let’s have a “web expert” point out great examples of subtle dynamic behavior, or trends in web design, that could positively impact the design.

Let me summarize even more:

  • I think we need a process that co-evolves with an expert writer, a web expert, a coder, a designer, and a marketing person, and an information architect, all co-creating the work simultaneously, so that the project ends up placing correct emphasis on everything, and design considers.. marketing. Design considers… the actual content. Design considers… the organization of the site.

Of course, you could have more than one person wearing some of these hats. But bottom line, I don’t think anymore that you can have just one person who understands the big picture well enough to create a work in isolation. I think you should use the tools that work for you, but you should incorporate any important considerations in the process. It’s unrealistic to make one person responsible for all of this—it’s just equally unreasonable to ignore the different factors.


What do you think?

What is your web design process like, and how does it work for you?



Posted in