A Veritable Article

Designing in the Browser: Where I'm Headed in 2016

By Marc Carson · Friday September 4, 2015

[Above: Building the Schnooer, Provincetown by Childe Hassam. Photo by Sean Pathasema]

Back in 2012, I decided I was done designing websites in Photoshop, start to finish. That process always felt pretty crude and untrue to the medium. While some of my designer clients continued to send me Photoshop files, and that was (and is) still fine, I began to push back a bit, urging these clients to think about browser-based design and its advantages given the interactive medium for which we were designing.

This started to pick up momentum in my work process, and the change felt great. I designed many websites solely in the browser, and I still continue to do so. But by 2014, after I had created some bigger websites that way, I paused to seriously reflect on the pros and cons. Here they are, as I see them:

Pros of designing in the browser

• The result is actually a true website, as opposed to a “Photoshop file made interactive”. Hooray!
• The website development process can be much faster
• Many different tools and frameworks are available just for this purpose
• Clients can quickly preview the final result and get an idea of what’s working and what’s not

Cons of designing in the browser

• Works well for some sites, not for others
  • Can make unique layouts harder to iterate
• Encourages in-the-box thinking
  • Rather than using graphic elements to solve problems, it is easy to just use common “web design elements” like “tiles”, etc.
  • Using common patterns is fine, but a convergence toward the boring can happen
• Can create too much reliance on frameworks
  • Frameworks make in-browser design much easier in some ways
  • But this makes it easy to design for the framework rather than design for the client

Return to middle ground

I still start with a pen and paper to develop concepts. That has never changed.

But after that, I make a decision: How important is a unique visual concept? What are my priorities for this design?

Option A: If the design needs to be really unique, I iterate on my big-picture ideas in visual design software, because I find that it’s easier that way. I move to the browser as soon as I’m ready to start the more detailed refinement process. Any interactivity problems that were caused by the static visual design are usually easy to iron out in the browser.

Option B: If the design can follow existing patterns relatively closely without compromising its purpose, I usually skip over the design software and go straight from pen and paper to the browser. This is extremely efficient and fast, and even if the result isn’t visually groundbreaking, it still looks and works great.

Evolution of the process

Most recently, I find myself planning even more of the details before I start up any software. And in addition to the pen, I’m relying on a pencil and eraser. I some cases it seems I can save quite a bit of time by developing tighter mockups on paper, though this is still a work in progress and seems to depend on the specific design elements I have in mind.

Conclusion

In our quickly-changing field, it’s easy to get sucked in by new trends. For the sake of sanity, big changes like “design in the browser” should be taken to mean “give it a try and think about what works for you” rather than “this is what everybody should be doing now.” There are many different ways to design an effective website, and committing yourself 100% to the browser from the start is just one of them.