About five years ago I had a sudden realisation; my design process was wrong and outdated. I was wireframing and then jumping into Photoshop to build out the look and style of a site, where I should have been doing this in the browser. Yes, designing in browser was the sensible thing to do. It was revelatory moment and I could suddenly feel free of the constraints of the pixel, less in inclined to perfection, and therefore designing for pure function. Every client could now see what I was creating in an instant.
At the time, I had read Andrew Clarke’s words about designing in browser and taken it as gospel. Then I remember a wave of designers started commenting how this method was the only good way of getting a practical working solution to a website. It was a way of letting go of the ‘artifice’ that can distract from good user experience. And I was receptive to this philosophy. Maybe it was because I was bored with using Photoshop or maybe it felt quicker to start with code. I am not sure.
At the time, I had read Andrew Clarke’s words about designing in browser and taken it as gospel. And I was receptive to this philosophy.
Designing in the browser then became the responsible way to design if you were a ‘web’ and ‘UX’ professional. Having mild OCD, I had to pick one design process over another, so I chose designing with the browser as my canvas with a unfathomable ardour and stuck to it.
My workflow had refined over the intervening years. My design process has been one of paper prototyping, sketching in my notebook, then wifeframing in Balsamiq, creating the low res HTML prototype and then developing the final version in code.
I felt happy with my process, it felt stable and logical, yet I was constantly nagged by the feeling that something was missing.
Not so long ago, I was asked to create a dashboard design for an app. All they needed was a visual, no code. They had good wireframes to go on too.
This was the first time for what seemed like years that I had be asked to create a purely visual design for web. It was an odd moment. How was I to start this project? I now had to work with Photoshop, but this didn’t feel like the correct way to start with a web project. Wasn’t Photoshop just for designing the frills after the refined layout was in place? So I began my design.
I think I was terribly wrong about my assertions. Blinded by the good intentions of ‘superstar’ designers who I followed religiously back then.
At that moment, I had another sudden realisation. Maybe designing in Photoshop and not directly in the browser was something I had missed. It felt strangely liberating. Where once I had the limitations of CSS, now I had a full artistic toolset to render what I really wanted. Not constrained by fighting with positioned elements and floats.
What just happened?
I think I was terribly wrong about my assertions. Blinded by the good intentions of ‘superstar’ designers who I followed religiously back then. Now I am only speaking for myself in this, so don’t all start calling around and trying to burn the heretic.
I now think the ‘browser’ method is flawed for me, to a degree that could have wasted potential in some of my work. Designing in the browser is in essence an excellent method; design with function in mind, quickly prototype and change if necessary. Doubtless the biggest advantage is that you can view the behaviour of effects. Yet for all this, it was missing the crucial element for me, namely ‘inspiration’.
I have found that the options I choose now are far greater when it comes to designing in Photoshop or Fireworks. It allows me to find more possibility in a design. I can test visual ideas quickly, I’m simply talking about visual ideas, not behaviour.
What I felt I had lost was a sort of visual craftsmanship and I wanted was to become a ‘visual’ designer again.
When designing in browser, I was continually trying to improve things yet not really changing anything. The efficiency of coding has the advantage of seeing everything instantly, but it was holding me back from considering there may be more possibilities in the design because, the layout looked good, and it’s nearly built, and it’s functional, so why mess with it?
What I felt I had lost was a sort of visual craftsmanship and what I yearned for was to become a ‘visual’ designer again. I was always thinking about the function to the detriment of everything else.
Yet this comes with some issues of course. Photoshop mockups become unwieldy, eye strain from trying to locate hidden layers abound and of course you are unable to test behaviour.
I still use my old process; paper prototyping, then low fidelity HTML mockups, but I now I complement this with something visual. And as usual, when the development code starts flowing, the static visual gets relegated to a blueprint, yet at least I feel have started with a vision.