In Web Design
Decoration is only superfluous
There has been recently a huge discussion on designing in the browser vs. doing it in Photoshop/Fireworks. While checking out your mockup in the browser is great, this mechanism it’s not suitable for all sites.
Turns out that as web designers, we design interfaces. You can think of them as part of a complex set of interactions: between your site and your user. Most people will agree in naming interfaces and interactions components of a science called User Experience Design.
An interaction, on the web, is done within a set of interfaces. An interface is designed in function of the experience you want to achieve (”recommend a person in Linkedin” or “add a photo in Facebook”). We design interfaces per page, and it’s a misunderstanding to think a general template (for example, a 3 column page layout) will fit all cases successfully.
So, when designing in the browser, it is tremendously difficult to actually experiment with page layouts, copy placement (copy is interface) and imagery. It seems that we are eager to see how text renders in Safari, how a text-shadow adds (crappy) dimension to a typeface, and such. We tend to think in decoration, and not in interfaces.
Take a look at Badoo.com, for example (a site with one of the greatest interfaces for the web ever made). Badoo has different page layouts for different experiences: the experience of “signing up”, the experience of “browsing for friends”, and such. I’m sure they designed these interfaces in a sketchbook (or software, like Fireworks), previously to code them. Why? Because it’s faster to try and catch up on errors than just starting in the browser with a fixed, 3 column layout that should fit all cases.
What happens when you discover that the labels in your forms work better top aligned than left aligned? You proceed to modify your CSS in order to make it work. And then cames user research, showing you that left aligned labels in fact were working better for your users. You need to touch and modify your CSS (and probably HTML) again. Nuts. In Fireworks this is an easy task, and it’s even easier to present different options to potential users to choose in the first place. Flexibility is the concept, not getting married with your own design is the key.
To my eyes, all the recent efforts in showcasing the benefits of designing in the browser are only efforts on showcasing how decoration can be tackled in the browser. While pushing CSS to the next level is great (I have mixed feelings on progressive enhancement, though), I don’t think starting a site design right in your browser of choice will cut off design time, neither costs.
Don’t get me wrong, I’m all for the browser. In fact, my workflow is kind of akward: I start in Fireworks, when I get a workable mock (pretty much a basic type structure), I proceed to code some bits of it. Later, I find myself taking screenshots of Safari’s rendered text to paste in Fireworks, and start again. But this work well with simple sites, and not with critic, complex, user oriented sites. For the later, rapid prototyping tools are fundamental.
Because no CSS beats the speed of pointing with your mouse, selecting 3 layers and changing the look of a mockup in a breeze.
We design interfaces. Decoration is only superfluous.
