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:
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.
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.
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.
I totally agree. In reading most of the comments in the original post, this seems to be the piece most people are overlooking. I don’t think Jason Fried ever meant to suggest that everyone should skip photoshop, but simply to make a bold statement that would cause people to examine their own workflow.
For those of us that do client work, it generally doesn’t make sense to skip from sketches to working code. But in certain situations, like an established aesthetic (argument #1), it might indeed be a misuse of time.
You know, when I read your comment on the 37s article, I knew right away that you were going to end up writing more about it. Which I’m glad of, because it echoes exactly what I was thinking when I read their take on the workflow. Thank you for taking this the direction that it needed to go.
Very well said, jeff. Use what works. At ciku, we also use wiki to complement visual-mockup, to show client suggested IA.
I like this counterpoint just as much as I enjoyed Jason’s original post (counterpoint seems too proper a word, as both come off as informative, rather than preachy). Both simply say to me “let the project dictate your workflow”, or “don’t worry about skipping Photoshop altogether” for some utilitarian application, or “don’t sweat the extra hours in Photoshop” for something demanding more stylistic adornment.
Nicely said Jeff. I followed your comments over at SvN and definitely agreed — along with a ton of others apparently. I’m glad to see them expanded upon here.
My sentiments exactly, for the same reasons you’ve outlined here. I also tried the “straight to CSS” route before with a past project and I felt decidedly TOO constrained. But with anything on the web, YMMV.
The answer is as always: it depends. I dive directly into the code when building our own CMS, while Photoshop is usually first when working for clients (well, after sketching).
Thanks for responding to that post, so we don’t end up in millions of websites looking 37signals projects ;-). XHTML mock-ups are great to play with interactions, but usually clients want appealing designs. I’m in between these points, building interactive mock-ups without design (for the sake of testing usability and a basic layout, and showing the fancy interactions to the client), building the design in a parallel process.
Another reason that it works for 37 Signals is that they are more focused on designing workflow and user interaction than visual aesthetics. Photoshop isn’t the best tool for designing workflow so it makes more sense to work directly with CSS/HTML/JS to work that out.
I worked on a comp of a homepage redesign yesterday focusing on the user’s interaction with the page, but I constantly felt like I could have saved more time just working in code. But it was also much easier to create visual flourishes solely in Photoshop rather than having to export file, add to the page etc.
I am new to web design with not a lot of projects behind my back. When I worked on a site for a client of mine i started working directly in css and html. When i sent the pages i had been working on and the client didn’t like what he was seeing it was a big hastle to go back and start designing again from scratch. I guess that when working with clients, and ones which don’t exactly know what they want their websites to look like especially, it is better to start designing in Photoshop.
We shouldn’t underestimate the size of the role traditional mediums (pen, paper, pastel etc) can play in developing a design. With creative and technical drawing skill you can go far into the process of designing and producing a website design. It may be that you can still provide the depth you seek whilst not having a heavy reliance on Photoshop mock-ups. Although, clients no doubt like a preview that closely resembles a finished product.
Very well said Jeff. This is something I have grappled with myself and am coming down on the same side as you right now. I would much rather have the flexibility of an image editing tool during the design phase. I do have a question for you or any of your readers: any thoughts on using Illustrator as a mock up platform rather than Photoshop. I have heard of folks doing this but have not myself. Just wondering if it might add a finer level of design control. Thanks for a thoughtful piece as always.
I definitely agree that the Photoshop comp phase is a requirement, especially when dealing with client services, but the piece that a lot of people are missing is the “roughly.” I’ve had clients complain about pixel precision across browsers too many times, so it feels like the more exact details you provided the more problems you’re going to have in the end.
Honestly I prefer a wireframe stage in there at some point to focus the client on how it works before they get too caught up on how it looks. It can be very frustrating to try and talk about the way a site works when the client is much more interested in how it looks, even though how it works is probably worth a lot more in the long run.
+1 for not skipping photoshop. :)
But nice write up Jeff.. you’re right.. for some applications and situations it is possible to skip photoshop.. and 37signals are a good example of that.
Glad you wrote about this, Jeff. After reading the 37signals article, I was of the same opinion and quickly realized the main points of why this method works for them, but likely won’t work for most others.
Personally, I’ve never even thought of skipping Photoshop, or the mocking stage. But I have noticed that I’m a little more eager to jump out of it and into HTML/CSS earlier in recent projects. I’ve come to the realization that once the overall aesthetic is established and an example of each element is mocked, that’s really all you need. I’ve actually denied a client recently who asked for every bit of content to be mocked, along with each different page. That’s just completely unnecessary, and even if I’m being paid by the hour, I still wouldn’t go that route.
Well said; I had a similar reaction. 37signals has such influence over so many in the design community, so it’s good that counterpoints get made. One size does not fit all.
Yep, this needed to be said. The blueflavor approach is the one that most of us need to be using, I’m sure. Even for a company like mine that does client work as well as our own software, it befits us to start with a comp in photoshop/illustrator/inkscape/gimp and work from there. The extra time spent on it is negligible, so I would say that even 37signals could benefit from it to make their designs more interesting.
Bravo Jeff, bravo. This is exactly the type of dialog that our tribe needs more of, tempered with reason and balanced. You have effectively captured both sides of the topic without offending or alienating either. Sometimes this is not easily attainable and some things just need to be said, and you do an effective job with both.
Due to any one person’s, or organization’s, apparent logic, knowledge and success it is easy sometimes to consume what they are saying without hesitation. And I believe that happens often with our friends at 37S; I myself have been guilty of that.
Anyway, I appreciate your insight and writing style and agree that you have definitely nailed both sides of this particular point.
great article! I’d add to this that I’ve noticed one of the items mentioned by the folks @37signals is the lack of easy collaboration in PS, but it just doesn’t ring true to me
having all photoshop files in SVN is an integral part of our process, so updating and collaborating is actually quite transparent
and before anyone asks: since commits are incremental, and we’re working with webdesign and not 80MB hi-res files, it DOES work - not to mention the advantadge of one remote, secure repository, available on the internet and with a 3rd party caring about all backups
Thanks for taking the time to write this article.
I’m currently a sophomore in college, and until college, I’ve never used photoshop as a tool to ‘design’ a site. I’ve gone from rough sketches to html/css. I thought it was weird when I was asked to create a PSD of my website, but I can see where it helps.
Again, thanks =)
@Felipe Vaz: Interesting, I’ve never thought of putting Photoshop comps in SVN. I’m guess I’m more of a control freak and wouldn’t want others going into my files and making changes without consulting with me.
By the way: if only ‘Save for web’ was a bit faster, live mocking up would be so much more pleasant.
@Kevin
Ryan Singer (Singer? 37 Signal Design Dude) gave a presentation at RailsConf actually and explained that they throw their .psd’s on a svn server (or git, which is another versioning system).
People can mess with your files in a branch and not affect the work your doing. If they make a change you like you can reincorporate the branch into your main filesystem.
I think it’s a really great idea. You don’t have to put up Mockup_v2… instead you have it versioned, backed up, on a server organized by commits. So essentially you have a long running history like Time Machine of your Photoshop file.
People can then download it, do some modifications, make a branch, take it elsewhere and you can bring it back in.
@Kenny
nice to know they’re using this — and thus it’s really nonsense having someone else from 37s write in a blog that PS is worse for collaboration than CSS/HTML
I think what’s really great also is the message logging ability in SVN, e.g. a log message like “header slightly darker as requested by John” instead of a file named header_b_08600212.psd from which you can’t tell anything just by looking at it
“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.”
Which is exactly why you should skip Photoshop, it’s not the medium you’ll be working in and it makes things seem easy that aren’t leading to the enevidable pain of realizing you can’t make your actual site look just like your mockup and you just wasted a ton of time trying.
Rather than fight the medium, why not work with it and recognize that CSS is the design medium and the best way to master it is working from within it’s constraints. By doing so, you’ll never waste all that effort trying to achieve something that cant’ be done.
Poets don’t first write short stories and then trim out all the stuff that won’t fit in the form they choose, they accept the constraints from the outset and realize that those constraints make them more creative.
37signals is right, designing web pages in Photoshop is just a huge waste of time and effort. CSS can’t do everything Photoshop can do so using Photoshop to design without constraints is just asking for trouble.
@Felipe
It was a one-off answer. Don’t quote me on this, but the way they work is the designer takes care of the “View” system at 37, so developers rarely touch the view code.
They may not use .psds in their process, but the designers may use it to get an idea… which is fair. I believe, from what I read, they were saying they don’t use mockups… so .psds are still fair game.
Ramon, perhaps I wasn’t clear. I’m not talking about doing stuff in Photoshop that can’t be done directly in CSS and then stripping it out when I get to the implementation phase. I’m talking about doing things in Photoshop that can’t be done in CSS and then slicing and dicing those images into something that can be done in CSS.
For example: you can’t create a gradient or texture in CSS (-webkit extensions not withstanding). But you can create one in Photoshop, and then save it as an image and use it. Same for something like rounded corners: you can’t really do rounded corners in CSS (again, you can, but it’s not cross-browser compatible), but you can easily slice and dice rounded corners from Photoshop into bits you can use as CSS background images to make rounded corners.
What happened to me when I tried the straight-to-HTML/CSS route was that I subconsciously avoided doing any textured, rounded corners, or other similar things because I knew it was going to mess up my workflow (I had decided to skip Photoshop, and I’d have to reverse that decision if I wanted these things).
Now, you can easily make an argument that things like gradients, textures, and rounded corners aren’t “necessary,” but anyone who says that has never done any commercial design — at least not with the sort of clients we deal with at Blue Flavor.
As Doug Bowman says, HTML and CSS are not design tools, they’re tools for implementing a design.
I could not agree more. When hearing 37 signals interviewed about that issue I remembered thinking they are using Rails to create apps… many of us do not get to do that all the time..
Designers use mockups to gain client approval and to gain client trust during the process.
Rails developers skip this to work in an agile manner. They gain the same trust and approval by creating the bare bones of applications faster than any client could previously imagine.
I have had success using both methods. I wish all my clients were suited for Rails based sites.. they are just fun to create. When I do get the pleasure of creating a rails app I can usually have the initial idea of the app working before the clients eyes long before I could have finished designing anything. The effect of this is equally as powerful as creating a full design mockup in photoshop.
There is no right and wrong.. just different situations where different solutions and methods apply.
I agree with both of you guys in numerous ways. You point out the most important difference (in my opinion) between the two companies - clients. I am primarily a developer and my sense of aesthetic is pretty crappy. My business partner typically does the mockups in Photoshop and I will take those and code them out. Our process is a nice blend of these two articles. We start with the paper/pen approach and design the structure. Once completed, he goes to photoshop to design and I go to my text editor to code. I get the XHTML and core CSS attributes ready and once the design is complete I tweak the XHTML/CSS accordingly. It works really well for us.
For those who are designing and developing, is there an issue here on choice of workflow having an impact on increasing your CSS skills?
As others have mentioned here, designing within the constraints of CSS can stifle the aesthetic. I have found that skipping straight from sketches to HTML/CSS invariably produces staid results, possibly because I’m using ‘safe’ CSS techniques I already know.
Working from a polished PSD that a client has approved will force me to tackle more complex CSS techniques that I might otherwise avoid.
The first thing I though of when I read that 37signals post was “yeah, but you are your own clients”. Your workflow at Blue Flavor sounds very similar to ours at Clearleft - once a visual direction is decided upon, we do a few mockups of key pages or interactions which inform the design of the rest of the site, which for the most part can then be ‘designed’ during the build process.
I agree with them that it would be inefficient to design every page. It would also be impractical to seek client sign-off on design details which may ultimately change during the build, or as design patterns start forming later in the process, and I’m not suggesting that. But their way works for them, and not for everyone at all.
I think they said that in their blog post though, but a lot of people seem to have misread it as gospel that they think we should all follow.
I agree: it depends on every situation. In my personal case, I tend to make more visual mockups for clients, since that is what almost all of them want to see.
Visual mockups help create the visual texture and dynamic of a web space. I think the visual aspect is easier for the client to communicate with. If they have visual perception it helps them become involved before the fact. Getting the client to become involved in “project ownership” is critical.
It’s when the photoshop guys mention the slicing of images that I give up taking them as even read worthy. How do their sliced graphics resize with the browser / font size / screen resolution. They are just print media designers who have elbowed their way into the wrong field. I do not know why we have tolerated it. They are the same guys who used front page ten years ago. I have no objection to anyone sketching out their ideas for themselves in any medium they choose. But it is not contributing a single line of content or markup to the project and it should not be billable. IMHO GUI can not be built, developed or designed on paper. Sketch pad and pencil possibly. Then into code for usability studies.
@root Yeah, image slicing sucks. However, using a visual medium to communicate boundries is critical. This is often a declarative decision based on the spatial aspects of the subject.
37s designs with respect to information asthetic. User driven, focused, and very right angle.
The aesthetics of selling the aroma of fresh baked bread and handcrafted baked goodness is another story. Here textures, colors, and shapes all convey the values of the product.
Keep in mind that asthetic and aesthetics are not the samething.
One size does not fit all.
Well, I follow you all the way - but just had to say sweet design here on your own blog….while still waiting for a comprehensible CSS WYSIWYG editor.
I think the part a lot of people are missing is that web design is (at least in part) a visual medium. If you’re truly serious about designing compelling web sites, it seems at some point you’d need some sort of visual tool.
@Root Your comment sounds exactly like the stuff people were spouting about 10 years ago.
Jason’s (37 Signals) post was well written rant by a non-designer that eloquently gives him an excuse to be mediocre at another profession.
At the risk of turning this conversation nasty, if you look at Jason’s post matter-of-factly, and when you put workflow, clients, and whatnot aside, the simple fact of the matter is:
If you’ve been using Photoshop for 10 years and you still find it awkward, you must really effin’ suck.
Just a comment on the above snippet. Actually, a lot of poets do write a longer treatment of a poem, to guide content and structure, to write down what the poem is about, what the structure might be, and so on. Call it a wireframe if you like, and it’s usually much longer than the poem. Then you condense the idea you’ve written down into a poem.
The point is that you have to plan before you design and you have to design before you build. That’s the essence of the design-build process. You can only skip steps when a particular design-build project is simplified in some way, as is the case with much of 37signals work.
Why I skip Photoshop:
I use Fireworks.
I can’t tell you how useful I found this post. Thanks for giving designer’s a valid rebuttal to the 37 Signals post.
Jeff, at no point do you suggest that HTML/CSS isn’t integral to your workflow. You just happen to visualize it while in Photoshop. Kinda like playing chess without a board.
I think you are doing a disservice by not acknowledging that you truly do skip Photoshop. I understand that you like to play Devil’s Advocate, but you are just being irresponsible, here.
The only way you can find that “logical” point is if you are already making those very same HTML/CSS calculations ahead of time.
What you are really doing is using Photoshop as a device to shake up your assumptions. Kinda like blind contour exercises for life drawing. You are playing chess without a board, Jeff, not without the rules.
Perhaps 37 Signals decided they want to take another look at this Photoshop thing.
Check it:
http://authenticjobs.com/jobs/2418/
Nice. Real nice ;-)
Doug Bowman says a lot of things. But if you alter your font size his site blows up immediately. He is a prime example of a print designer let loose on the web. In PS I bet it looks fabulous. As a bit of web development it doesn’t cut it. And the design is what? 4 years old. You need to get out more. Now he makes his money by public speaking ie pontificating on something he clearly cares or knows very little about.
Well said. couldn’t agree more. it was strange to see all the attention made around the 37Signals post.
Actually it also has alot to do with decision making here at spinbits.com we sometimes skip photoshop when its an internal project of ours being developed for beta. this falls down to your 3rd point.
No clients has to be the biggest one here. The look and feel you can achieve without photoshop would simply not be enough for most clients.
I totally agree: simple design, small organization, no clients.. really no need for high fidelity compositions. A lot of the process and coding advice coming out of 37 Signals is like this. Not that it doesn’t have value, just that it doesn’t completely apply to most designers or programmers that work with clients.
Stop agonizing over mockups, sliceups, workflow and just DO it!
Who is the masochist that first decided to do Photoshop mockups anyhoo??
There’s no doubt in my mind that blueflavor’s designs are stunning. And I know firsthand that 37signals makes great online software.
Whether the online application has a unique look and feel, or is simple, I have seen little or no evidence that suggests that a unique-looking site performs better, from a traffic standpoint, than a site with simple design.
While it’s very difficult, if not impossible, to fully dissect the reasons for one site outperforming another (usability, performance/download speeds, look and feel, speed of task, etc.), I have never seen “unique design” as a reason for success.
From my experience, the only thing unique and beautiful designs seems to achieve is the ability raise eyebrows, and make the client feel good about their investment. That’s no small task, and deserves praise.
But, when all is said and done, “beauty” doesn’t make the user any more likely to continue using a web application than a site with a minimalist design.
In which case, including Photoshop in a design workflow can be a waste of time and money for
There is one reason why Photoshop stage may be dangerous: It leads us directly to complexity. Instead of building complexity over a simple base to allow lower-powered devices (mobile phones, PDAs, etc) to cope with the complex design. When you enter the photoshop phase, your mind would be oriented to complex layouts which simpler devices can’t handle, and sometimes you might forgot to start from the simple base and heads off directly to the complexity. If you’ve started with XHTML/CSS directly instead, your mind starts with simplicity in mind, then slowly you introduce complexities.
Thank you for your website :-) I made with photoshop backgrounds for myspace and youtube and whatever my backgrounds:http://tinyurl.com/6exhae take care and thank you again!