I Can’t Design in the Browser

It’s a guilty secret I’ve been harbouring for about a year, I cannot design directly into the browser. My creative brain switches at the point when I open my html/css editor (Espresso), and starts thinking in terms of structure and how to achieve the look of my design using as much native CSS as possible. If I don’t have my design to follow, the whole process breaks down for me. I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.

Once upon a time this would not have been a problem, as much as it is today. With the rise of responsive/adaptive design (I still prefer adaptive but hey, tomato tomatoe) but it’s just not doable to produce endless Photoshop comps for every breakpoint. Photoshop comps have been a pain in the bottom at the best of times. A client saying “Can I just change that blue, to a slightly different shade” invoking fear amongst Photoshoppers, whilst designers-in-the-browser laugh at our stone-age tools. Aside- Why Adobe have never implemented global changes a’la InDesign, I’ll never know. Seconds later, they have a new blue, across an entire site while we sit changing manually. It’s a labor intensive process at times.

So what’s the answer? I’m still trying to find it. For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals. Visuals that are slowly becoming less and less useful as they adhere to a fixed canvas size.

Designing straight into the browser isn’t an option for me though, I still need to go through that creative process in my graphics editor away from the structure of div’s and presentational code, but after getting some initial designs down on paper. Thankfully, I know I’m not alone, I’ve spoken to various others in the industry who all feel the same. Frustrated creatives with no real answers.