eTapestry

“When the light turns green, you go. When the light turns red, you stop. But what do you do when the light turns blue with orange and lavender spots?”
—Shel Silverstein—

According to Meagan Fisher‘s completely formal twitter survey, 90% of the web designers she polled use Photoshop as their design tool, before using the browser.  Since I put 100% of my trust in Twitter surveys, I’ll just make you aware that this means that most web designers create a PSD file, fill it with a gajillion hand crafted layers, and then they send the static JPEG version of the draft to a client for approval.  Not until approval, does the PSD file then get converted to HTML and CSS.  In many ways, there is a lot of unnecessary work going on in this process because Photoshop is primarily just a graphics tool.  So should web designers abolish the notion of using Photoshop as a design tool?

If you’re tired of that 2:30 feeling, try this.  (A case for In-Browser-Design)

Designing within a browser is a topic getting a lot of attention thanks to design gurus such as Andy Clarke and Dan Cederholm.  Why use Photoshop to design a site when the ultimate website tool is your favorite browser?  Photoshop paints a picture, but it doesn’t provide the proper canvas.  A website is a functional thing, and its true nature of display is in a browser.  So why do we create designs in Photoshop?  Photoshop is versatile in many ways but the problems it has as a design tool are well known.  To start, text in a PSD file doesn’t come close to looking like it will in a browser.  A giant downside to Photoshop mockups is explaining to your clients why the text looks different from mockup to browser:

Photoshop, text set to ‘none’

Photoshop, text set to ‘sharp’

Rendered in Firefox

Rendered in IE

Another flaw in Photoshop mockups is that when you present a design to a customer as a static image, they don’t get the whole picture of functionality.  You can’t represent hover states for links or JavaScript elements such as slideshows.  Fluid grids aren’t possible if you’re designing a site in Photoshop, so you’re limiting yourself to a fixed width site.  Perhaps the biggest downside to Photoshop designs is that you aren’t taking advantage of CSS3 enhancements and you’re giving your customer the wrong assumptions.  Let’s say you throw some box shadows and rounded corners into your Photoshop draft.  If your client uses Internet Explorer, then you’re going to have to build out background images or use CSS hacks to provide that sort of design element come development time.  Using CSS3, you could build rounded corner and box shadow enhancements into your draft, and your customer’s first impression of the design will be based on whatever browser they view it in.  If your client asks, you can tell them all about Progressive Enhancement, and if they don’t, then as Andy Clarke says, “Ignorance is Bliss”.

You’ve shown me the light, now what is the catch?  (A case for Photoshop Design)

Meet Cindy. Cindy has trouble making up her mind.  While she does use Safari as a browser (which is a plus for her web designer), Cindy doesn’t really know how to describe the kind of website she wants.  Cindy’s web designer tries to understand her organization, and the message that Cindy wants to convey on her website, but each time her web developer sends a new design draft, Cindy rejects it.  Cindy doesn’t feel that the design is portraying what she feels the website should look like.  Since Cindy’s web developer practices in-browser-design, he has to recode the HTML and CSS each time Cindy changes her mind about the website.  Meanwhile, Cindy’s web developer has a growing customer base he must attend to.

What happens when web designers are faced with a situation like this?  I’ve touched upon the advantages that in-browser-design has over Photoshop design, but is this a case where creating a Photoshop mockup makes sense?  In the real world, most web developers have schedules to adhere to, budgets to operate under, and a customer base with a multitude of personalities.  In-browser-design may be the ideal way to design a website, but sometimes it simply is faster to mock up another Photoshop design in order to move on to the next step (development).

The solution is up for debate.

Perhaps the ultimate solution to designing a website is to use whatever tool will be best, based on WHO the customer is.  When it comes down to it, sometimes you have a job to do.  In-browser-design may be the ideal solution but sometimes doing an old fashioned Photoshop mockup saves time and money.  I am not promoting backward notions in an effort o avoid best pratice, I am only proposing the argument.  I think most designers tend to want to use Photoshop design out of custom.  It takes time to develop a new way of doing things and sometimes this can slow down the process.  In the end, it is a web designer’s job to provide their best work and make their customer happy.  In the meantime, try every solution, and narrow your design process down to whatever works best for you and your customer.