Should we really design straight into the browser?

The Mock war…
Should mock-ups be pixels perfect creations? This was a question which I’ve recently been debating and the natural solution to avoid time wasting in Photoshop appears to be to do website mcckups within the browser.

The root of the problem is that clients will often ask for small changes (like textual amends, replacing an image) which would be far easier to do in code rather than in a visual mock-up. Making these amends in Photoshop can be a time consuming process as it is a visual tool rather than a textually based tool.

When does a mock-up get signed off?
In response to those of you who think this may create a grey area regarding the sign off of a mock-up, I would propose still getting an initial sign off based on a Photoshop mock-up. This Sign off would stipulate any further changes will need to be minimal (aka text changes or replacing an image) but shouldn’t break the structure and feel of the design. This would then allow the designer to begin the build of the site in the knowledge that any amends won’t “break their design” and will be easy to implement.

CSS3 and HTML 5 pave the way for designing mock-ups in the browser.
The development of CSS3 and HTML5 is probably the biggest reason designers are even contemplating this move. The introduction of these two big boys (which create the content (HTML5) and appearance (CSS3) of your website) has effectively put Photoshop on the ropes. The big two now have design elements built into them; with elements like rounded corners, dropped shadows, transparencies etc. These elements are making it easier to design straight into the browser and cut out the middleman (aka photoshop!).

Making it easier for your client
Typically clients will be less web savvy than designers (There would be quite a problem if this wasn’t the case!) and will need to see the final functioning website in order to understand how it will work. In a static visual you can’t show how the dropdown animation will work, or how an image will fade in and out. In essence it allows your client (and yourself) to contextualise. For instance how will the tooltip effect work in relation to the rest of the design? Does it make the design now seem too crowded? These are questions which are much more difficult to answer in Photoshop. Making things clear to the client is really worth your while.

Making the web design process more organic
Wire framing is now very much part of the web design process, but I would now question the need for this if we were to design straight into the browser. Surely it is just as simple to produce a wireframe in CSS / HTML than login and use a collaborative wire framing model such as mockingbird. If you have a live test area for all to view your mockup, collaboration could also take place in real time. This also makes the design process more of an evolution, rather than succinct stages…is this a good thing? Until I’ve tested I’m going to reserve judgement on this.

Is this stepping stone needed?
Another point is that sooner or later the build is going to have to take place, so why not incorporate it into the design process. Really all we are doing is removing a small stepping stone and making the one next to it larger! The end result is still the same we can cross the river.

I know though that many designers are more than happy with Photoshop mock-ups. It is a process that works and there is definitely a case for Photoshop being a more organic design tool. Many a designer would argue that the code behind designing in the browser automatically tunes your mind into a more mathematical way of thinking which is opposed to the creative thinking you need for the design process.

I’m still not sure myself which is the best way to go, but I don’t think we’ll find out unless we test the water….right lets take the plunge into that river!

 |    |