I once worked for a guy who constantly moaned that using a computer would never be as good as paste-up for layout. As ridiculous as his attitude sounded to me, it worked for him. I learned how to assemble my first graphic compositions natively in Photoshop and inDesign while he was seasoned in the art of phototypesetting. His hand-crafted layouts were exquisite, flawless and just as professional as those created using a computer. Using a Mac saves designers time and energy, and makes the process much more streamlined, but for someone who was fluent in conceptualizing his visions through traditional methods the computer was the wrong tool for the job. The final product of his process yielded designs that won awards and exceeded client expectations even after the mac became an industry standard.
After 2 posts on the well respected site 24Ways a few designers in the community have been publicly voicing their concern for the methods expressed in the following articles both on twitter and in the comments:
Andy Clarke‘s Ignorance is Bliss
Meagan Fisher‘s Make your Mockup in Markup
Both articles suggest that rather than creating comps in Photoshop and then pixel by pixel recreating them in CSS & HTML that designers should just design directly in their browser. I was pretty excited to see this method being explored and successfully executed (37 signals wrote a similar post but they were not able to back it up with an example as visually rich as Megan’s), because there have been numerous times in my career where it has felt more natural to tackle a specific problem directly in the browser. Additionally with the introduction of font-as-service providers such as Typekit, designing in the browser allows you to use fonts that you may not necessarily need to pay the full fee for but “rent” online for a monthly fee.
I am not sure if it was the method or the language used that struck such a chord, but some folks get a little riled up about it. I can see how the subhead “That process is whack, yo!” possibly reading as a bit of an attack to some Photoshop lovers, but the site is called “24 Ways to Impress your Friends” not “24 Holy Commandments of the Web Industry”. I definitely don’t think any one designer should give specific absolute advice to only use one method to compose a website, but if Megan had said “Try not using Pohotoshop, it works for me!” would it have gotten your attention the way “Die Photoshop, die” did?
Shifts in the design industry will continue to happen and every-time they do there will be plenty of designers who insist that the new way will obstruct creativity and be detrimental to their creativity, and every time designers overcome the challenges to be even more innovative. This debate is not a new one in the history of graphic design. History repeats itself. When computers were first introduced designers were paired with production artists to transfer their concepts from paper to pixel in a very similar fashion to how designers are paired with front-end developers to create websites in many agencies. There was fear that “the software learning curve would stifle the creative process” (site: Wikipedia) then and that seems to be the argument now with designers who are reluctant to learn markup. You would be hard pressed to find a designer today coming out of school without knowing how to use a computer, will the designers of the future graduate without being fluent in HTML & CSS?
I personally see the benefits of designing directly in the browser, I understand how it can save time in the process for those who are fluent in markup. Does it work for me? Not currently, because I am far more fluent in Photoshop than I am in CSS and HTML for constructing my visions for the web. My first priority as an individual designer is to meet the goals of my clients. It is the responsibility of the collective design community to pioneer new processes and pave the way for it to be rock-solid method used for clients.. While I don’t think any one designer should give advice in the form of absolute language, I do think that the content within the 24 Ways articles provides a new option in process that hopefully will seed more experimentation using that method. Every designer needs to prioritize their goals and use the best tools for them to help advance them to meeting those goals. Looking back on the design industry and the evolution of its process I think it is a futile effort to advise students of web design against trying and evolving a new process.
14 Comments
Good write-up of what is a very interesting issue. I don’t think there’s ever going to be “the right way” to design for the web; we’re just going to have to settle with what we feel comfortable doing.
My proficiency in Photoshop starts and ends with photo editing, so I’ve always been designing in the browser. Not because it’s the better way, but because it makes sense for me. You use the technique that best suits your skills.
— January 7, 2010
Great write-up here Samantha. I personally can’t get my head around why there’s so much fuss about all this. If I’m a gardener, I don’t hail the rake as the tool tantamount to all other tools. Each particular part of gardening requires a specific tool. In my case Photoshop works best for most of the detailed designs I produce. However, I find massive limitations in it, because it doesn’t render anything close to standardized html/css/js, or fonts as browsers treat them for that matter.
Why the division? Like the best CMS’, there’s plenty of reasons for one over the other. This is not just about “right” this is about productivity and efficiency leading to profit amidst standardized best practices. As Zeldman has preached, like web standards, this too ought to be a continuum.
— January 7, 2010
You just wrote the blog post that has been bouncing around in my head the last few weeks.
On personal projects I’ve been splitting time with the browser and Photoshop but for client work designing in browser just isn’t practical for me. When I could pull off what Megan and Andy can that may change but for now Photoshop is what’s going to give me the best end results.
— January 7, 2010
I am much more a developer than a designer but I really found this interesting. Sometimes I will do a comp in Fireworks, but more often than not I do build/design in the browser and find that I make far more adjustments and tweaks that way. Although that is only on personal projects as usually designers provide me with PSD’s. I seem to be more comfortable designing as I go. Very nice article.
— January 7, 2010
I must quote Cameron Moll - “Do what works best for you, not them” http://cameronmoll.com/archives/2010/01/do_what_works_best_for_you/
— January 7, 2010
After reading your post and Megan’s, I gotta say I love the idea of changing the font in my mock-up without fiddling as much as I do now. I can see how there would be lots of advantageous shortcuts and quick revisions to be had. That being said, there are a lot of “happy design accidents” that wouldn’t happen if I wasn’t playing around in photoshop, and this is apart from the layout and content issues which I carefully consider before having my fun in the art department. I don’t enjoy hearing that there’s only one way to do stuff, and I totally agree that without pioneers taking on new techniques and approaches, we’d be in a sorry state. If others want to skip the ‘shop, go right ahead :)
— January 7, 2010
I think the right solution is…. (drum roll)
it depends.
It depends on the project, the client, the budget, the deadline and various other factors.
I’ve done both methods. I find points I love & hate with each one.
Photoshop allows (forces) me to be pixel perfect with my design. I take my time picking the right color, subtle gradient, icon, alignment, etc. At the same time it does take longer. Larger budget, bigger project or working within a team - this is my go to.
Doing the design in the browser allows me to discover problems with the design quicker & resolve them faster. Smaller budget, quicker deadline or fast prototype - this is my go to.
My suggestion is learn them both, they’re both awesome.
Just my 2cents.
Kick-ass article Samantha and really nice site
-Mike
— January 7, 2010
Very nice Samantha, thanks. This is actually a topic I have talked about a lot with designers. There is a coders approach and a graphic approach. I personally find the coders approach more difficult because it involves designing based on an understanding of pre-defined limitations. On the other hand, the graphic approach (photoshop) allows me to think outside the box, but then i have to go back and actually make it work. I use both but prefer the graphic approach. Really its all project dependent. Institutional genre sites = coders approach, portfolio sites = graphics approach.
— January 7, 2010
i have been designing in css/xhtml for a few years now. i am not adept at photoshop and i can get an instant working model of what i want to do. i usually sketch it out on paper and fire up notepad++ and get to work.
.mike
— January 7, 2010
Great post!
I’d agree with commenters who already said: each project is different, and we need room for happy accidents.
There are design challenges that really benefit from designing in Photoshop, specifically when more flowing, non-linear layouts are called for and experimentation is key.
Some projects really benefit from going straight to the markup, specifically stuff like UI for web apps. It all depends.
Re: happy accidents, I definitely think there is much room for improvisation in design, just like in music. The stuff I’m proudest of has been spontaneous and probably couldn’t have happened without a Photoshop canvas to dabble in. No matter how specific the contract and strict the wireframes, some design decisions just happen in the moment.
— January 7, 2010
Samantha, Great post!
In the end Photoshop, HTML/CSS, or whatever you use is just a tool for visual communication. No different than a paint brush. It would be silly to debate pencils versus ink wash as the “definitive” method of creating “artwork”. Just as saying PhotoShop is the “only way” to create “mock ups”.
In the last few years I’ve found PhotoShop to be quite bloated with features I don’t need, .psd files with insane file sizes, and inflexible at showing multiple versions of a design within the same file. As a result I’ve been experimenting with other like Illustrator and Fireworks. Then it hit me… I’m doing page layout. So I gave InDesign a shot. Since then InDesign has been my go to application for “layout”. I still use PhotoShop for treating images and graphic creation but I’ve found a nice harmony in using InDesign for my layout process. Especially for type. Is it the right way? Who the hell cares, it just happens to be my favorite pencil right now.
— January 8, 2010
Love it. Great summary of what’s going on. I was surprised to see the fuss around these two articles, too. I think you’re right about the titles being an issue. And of course, any writer would want to pick the more daring title.
It seems our industry has a thing for drama and pitching one thing against the other lately. A little debate is fun, but, like you pointed out, techniques and technologies evolve. Absolutes rarely hold up because of that.
It’s not about which method is right or wrong, it’s about having more options and picking which one works for you for the project at hand.
— January 8, 2010
Great article, my preference is using Photoshop, only because as you I know it better and can work faster. I also feel that it allows me to try different design directions quickly, while allowing me the ability to flip back to review old ones.
I have been trying to convert print rooted designers in my company to using Photoshop to design web mockups instead of inDesign, that is proving a lot harder than I thought, the fight goes on…
Keep posting killer content. Thx.
— January 8, 2010
I hadn’t given it much thought before. I just thought I had to design in Photoshop first. I’m not a designer first though so I really should be looking at the design in browser approach. Good post.
— January 8, 2010