Designing 'in the browser'

September 16th, 2015

I've been hearing a lot of debate around "Designing in the browser" recently and I thought I'd write down some of my thoughts:

Without a shadow of a doubt, Chrome dev tools is the most important tool I use day in and day out, for making small tweaks or fixing bugs, its crucial to my workflow. But when in need of a design decision, I often find myself pushing pixels or tweaking colours in dev tools, waiting for some kind of devine inspiration that never comes.

The temptation to go from concept, to wireframe to an in-browser prototype is often strong, and its how I like to work. But more and more often I'm finding that get some design decisions BEFORE building the code is super helpful for referring to when the thoughts in my head are not translating to the web page.

I use Sketch to create these, I love how nothing can be made in Sketch that can't be replicated in the browser. The restraints are great and it really applies to my full-stack developer workflow.

But don't get me wrong, I don't spend long on these layouts and designs, nor do I wait for perfection before moving to the browser.

When I do get stuck and find myself pushing pixels in Dev tools, I can refer back to the designs, refine them and then move to back to the browser with a more solid idea of what I'm trying to create.

So really I am not hugely for or against the "Designing in the browser" workflow, I've just found that theres a time and a place for it, and knowing when that is is vital to a frustration free process that produces the best outcomes.