Designers, Step Away From the Photoshop

In many cases, web design begins in an image editor. A designer mocks something up in Photoshop (or some similar tool) and that design is eventually translated into HTML, CSS and JavaScript to create a live website.

But why do we work this way? It violates one of the fundamental tenets of good design, that design should follow content. It also means working with static documents. You submit a design to a client, the client likes it, but wants all the corners rounded. Have fun changing the corners in Photoshop — meanwhile, we’ll be adding a single line of CSS 3 to our live mock up.

In the final post to this year’s 24 Ways (see our coverage of other 24 Ways highlights), Meagan Fisher picks up what’s become a popular idea among many of web design’s most respected voices — that web designers should do their mockups in markup. That is, start with a live HTML and CSS page to create your designs.

Citing Photoshop’s shortcomings (not to mention expense) Fisher argues that tools like CSS 3 make writing — and more importantly updating — your mockups pure code just as fast, if not faster than the old Photoshop methods.

But there’s an added benefit Fisher touches on only briefly that bears further emphasis. Working with the code from the begin gives you chance to refactor, refine and improve it before production work ever starts.

Part of the reason lies in something designer Jeffrey Zeldman once posted to Twitter, “design in the absence of content is not design, it’s decoration.”

Starting with content — whether actual content, or simply the markup of the page — will force you to focus more on structure and making sure that your design fits the site from the ground up. In our experience this leads to slimmer, more semantic and easier to maintain code. As with writing in any language, the real process is not writing, but rewriting.

Even if you’re thinking that the world can pry your Photoshop markups out of your cold dead hands, give Fisher’s piece a read and, even better, try starting with code and see what happens. For some it might mean learning a new skill set, for others merely a shift in thinking. Regardless of whether you decide to switch to this method for good, we guarantee you’ll learn something new in the process.

See Also: