Designing with elements and modules

November 29th, 2013

As a digital designer, one hot topic which I find revisited again and again is the idea of ‘designing in the browser’.

As we strive for ways we can better our processes, work more efficiently and deliver better products, designing in the browser has became one solution of getting into the browser sooner and removing our dependency on signed off PSD deliverables. While there are plenty of positives to this approach and I believe it highlights many of the flaws of our reliance on graphics editing software, this practice leaves behind traditional methods of visualising design which many of us are not yet completely comfortable doing. At the same time, we can’t detach ourselves from the need to deliver the client something tangible and visible that demonstrates our intent.

Designing in the browser has became one solution of getting into the browser sooner and removing our dependency on signed off PSD deliverables.

But when it comes to working in Photoshop, we all know that our designs don’t work the same as they would in the browser -typefaces will not render the same and we seldom replicate the level of perfection achieved in the PSD due to the greater control we have inside our graphics editor. We invest so much time perfecting every page & state which is often wasted when decisions can be made in the browser.

Despite this, I believe that graphics editors still play an important role in how we visualise and deliver our websites. There is a way in which we can utilise the best of both approaches, allowing fluent transition between our graphics editor and the browser where we can then make final decisions. For this approach, we need to start looking at our designs as ‘elements’ and ‘modules’.