Jeff Croft

I’m a product designer in Seattle, WA. I recently worked at Simply Measured, and previously co-founded Lendle.

Some of my past clients include Facebook, Microsoft, Yahoo, and the University of Washington.

I’ve authored two books on web and interactive design and spoken at dozens of conferences around the world.

I’m currently accepting contract work and considering full-time opportunities.

Blog entry // 06.04.2008 // 5:20 PM // 0 Comments

Why we don’t skip Photoshop

Yesterday, our friends at 37signals started an interesting discussion on their blog with a post entitled Why we skip Photoshop. But the post actually has very little to do with the actual tool (Adobe Photoshop), and is really more related to workflow.

37signals doesn’t do a visual composite phase in the process of developing their products. Instead, they jump directly from rough sketches (on paper or in their heads) to development using HTML and CSS. At Blue Flavor, we go from rough sketches to creating high fidelity visual comps that look as close to the finished product as possible before diving into HTML and CSS.

So who’s right? The answer is simple: we both are.

37 makes great products, so there’s no question this Photoshop-less workflow works well for them. But it’s important to understand that 37signals is in a unique position not shared by many other organizations, and what works for them may not work for you (or us). In Jason Fried’s post, he cites a non-interactive nature, “too many tools”, repeating oneself, lack of a collaborative nature, and overall awkwardness as reasons why they don’t do a visual comp phase and instead prefer to design directly with HTML and CSS.

But there are other reasons Jason doesn’t mention that I believe contribute heavily to 37’s ability to work in this manner, and they are reasons many other organizations (including Blue Flavor) won’t share:

  1. An established visual aesthetic. 37signals has been around for a while, and they’ve already developed several products. All of their products share roughly the same visual treatment. Because of this, there is little to no visual exploration needed. The look and feel are pre-established. They’re not experimenting with new textures, colors, type treatments, UI elements, etc. At Blue Flavor, nearly every project we work on is drastically different from the last one. We’re starting from scratch almost every time. We need tools that let us explore these aspects of the design.

  2. A simple visual aesthetic. That established look and feel 37signals has developed just happens to be rather simplistic in nature. Note that this is not a knock at all. On the contrary, that simple aesthetic is completely appropriate for their products and works extremely well. The simple sort of visual treatments they’re using (flat colors, rectangular shapes, core web fonts, no texture, no depth, and a distinct lack of “effects”) are very easy to produce with CSS. Because we work on many diverse projects at Blue Flavor, we are often working in situations where this kind of simplicity is simply not appropriate. We sometimes need textures, depth, unusual fonts, rounded corners, gradients, and the like. These things are (currently, anyway), not easily produceable in CSS — but they are in Photoshop.

  3. No clients. This is a big one. 37signals is not a client services company. Rather, they build products. 37signals is a small team of people who all understand the web and web development very, very well. It’s easy for them to visualize things and move on — but it’s not so easy for many of our clients. A big reason we do visual comps at Blue Flavor is to facilitate communication and sign-off with our clients. Because we are focused on doing only deliverables that help propel us to the end goal (usually a working website), we don’t comp every single page of a site. Rather, we usually comp just a handful of pages. Our point in so doing is to have something to show to clients and say, “this is roughly what your site is going to look like,” so they can provide feedback and ultimately sign off on the look and feel. This saves us hassle later in the project. If we went straight to HTML and CSS and then had a client not like the direction we were heading, it would take much more work to backtrack and start over than if the same thing happened in the visual comp phase. We need to know the client has approved our direction before we get into heavy development.

There’s another factor at play here, too. Before I joined Blue Flavor, I tried working directly in HTML and CSS and skipping the Photoshop phase. I have a strong command of CSS, so it seemed natural to “cut out the middle man.” For a while, I was quite happy with it. The process was definitely faster, and it was a fun change of pace. But after a while, I started to notice something: all of my designs were very simplistic in nature. I wasn’t exploring the full range of possibilities. Instead, I was sort of subconsciously limiting myself to only those things that can be done easily without an image editing tool like Photoshop. This may not happen to everyone, but it definitely happened to me — so it’s something to watch out for.

For me, what it boils down to is this: there comes a point in every project’s design process where the things you are tweaking become easier to deal with in CSS than they are in Photoshop. In my estimation, this is the logical point at which to drop Photoshop and turn to HTML and CSS. Up to that point, I’ll stick with having an image editing tool.

But there’s no right answer here. 37signals’ process works extremely well for them, and it may work for you, too, if you’re in a similar circumstance. At Blue Flavor, we’re in a very different situation, and that’s why we don’t skip Photoshop.

Recently, I’ve been posting articles over at the Blue Flavor blog. I’ve decided to cross-post some of those articles here. This is one such article. Because this article was originally posted to the Blue Flavor blog, I ask that you direct your comments and discussion over there. Head on over and we’ll talk…


Comments are disabled for this entry.

Tags for this entry
Links in this entry