From Sketch to Website (Hint: Skip Photoshop)

I don’t see how starting off directly in HTML would be very efficient.

When designing a traditionally built site (i.e. not Wordpress), I do all my mockups in Fireworks, then export them as interactive PDFs so that clients can get a feel for how the site will look and function. I don’t bother with things like hover states or click states during the mockup stage (although you can do this in Fireworks if you really want to). I only go to HTML AFTER the site mockup has been approved. It’s much faster and easier to make changes in Fireworks and re-export a new interactive PDF, than to change a bunch of HTML code and CSS each time the client has a change.

Problems I see with your method:

- How do you present multiple look and feel options this way? (We typically do 3 look and feel options, then build out one of them)

- It’s much more time consuming to mock up functioning HTML than to build interactive mockups in Fireworks.

- Browser compatibility problems? Do you keep testing for all browsers through each iteration?

- Do clients get hung up on the fact the site doesn’t look “designed” during your mockup/testing stage?

I have tried something similar to your method when building out Wordpress sites for clients. I start with a bare-bones Wordpress site, loading it up with their content and working on structure and content before graphics. Invariably, the clients are disappointed that they can’t “see” the way their site will look. Back-end work means nothing to them; they would rather see the nice visuals first.

Going straight to HTML is the only way to go. Why waste time in something that will just be tossed aside in the end?

Responses to Amy’s “problems”:

Swap in a different style sheet. It’s actually far more efficient than maintaining multiple layers and documents and whatever.

Definitely not so. Say the client wants the font a bit bigger. In CSS, you just change your base font size from 12px to 14px. In Fireworks, you have to modify every text item on every layer in every file, then adjust how all the objects flow because of the size change. I think speed is actually the #1 BENEFIT of going straight to HTML.

Probably not, but taking a quick look in a naughty browser (IE) will let you know if you’re promising something you can’t possibly pull off.

Why won’t it look designed? CSS is what you’re going to end up using anyway, right?

Oh, Jamie… you gotta get your blockquotes within your comment section to be styled differently. :)

I couldn’t agree more. I have used Fireworks, which is quicker than Photoshop, but it still presents the same fundamental problem: You’re designing a picture rather than a web document.

Personally I jump straight into WordPress — the user only sees HTML, after all, and it saves time converting from flat HTML. Once you’ve used any system for any amount of time it really doesn’t take much longer.

It all obviously depends on the complexity of the design.

I like using www.balsamiq.net which lets me do a quick mock-up and can also export xml to see how the page looks in a browser.

“We have the luxury of not having to do direct client work…”

LOL! That pretty much sums up the validity of this advice to me.

The headline indicates you suggest this to be an end-all-be-all solution to a design process (you didn’t qualify it otherwise), but upon reading the comments, it’s becoming clear that this a solution for a small subset of projects in a small subset of situations. Specifically app-oriented projects (geared purely toward functionality with minimal aesthetics) that, somehow, don’t involve direct communication with clients.

I first remember this method being touted by the folks at 37Signals, and I didn’t buy it then, nor do I buy it now. But one thing they have in common with you is that you both have the “luxury” of being in the same unique situation on both counts mentioned above.

I don’t claim to be the greatest designer, nor do I have the most experience. But I so have about 10 years under my belt designing client sites and hand-coding HTML and CSS. And for me, there is NO WAY designing by hand-coding HTML and CSS is more efficient than using a tool like Fireworks.

Let’s say you are creating a marketing Website for a popular hotel, and want to show a client 3 different design concepts. Are you seriously suggesting that hand-coding 3 different designs using different HTML and CSS files is really more efficient that using a graphics program? And results in less wasted work?

Are you REALLY suggested that we tell our client(s) they can only view our proposed designs in one particular browser throughout the process (rather than the one they have installed on their computers)? I’m sure their IT departments would LOVE that.

The edit-once, change-all advantage (aside from being negated by Fireworks’ support for symbols, styles, master pages, etc.) is good if you know EXACTLY what property and value you want to change something like text to. But designers don’t work like that – we constantly tweak and change until we are happy with the result. It’s easy to have a group of objects selected, change properties, and get instant feedback in a graphics program. Or alternatively we can change code and refresh our browser 30 times until we are satisfied. Yeah, the latter sounds WAY more efficient…

Equally dumfounding is the notion that maintaining a small set of graphics source files with layers is cumbersome, and yet managing a handful of HTML templates, one or more JavaScript files, one or more CSS files with a couple thousand lines of code, and a handful of web-optimized graphical icons, textures, background images, etc. is not. Right.

My aggravation is not that I think the content of the article and subsequent comments are wrong – clearly it is a valid process that works quite well for your unique situation – but that you tout it is as the end-all-be-all of design processes (again, NOWHERE do you disclose otherwise). Then you support it with absurd claims in your comments.

Boys and girls, if you are starting out, carefully assess your situation and how it will affect your clients and your workflow — please don’t ditch Photoshop or Fireworks yet.

start with omnigraffle. it’s cheaper and faster to communicate an idea. :) you can also think about the big picture… which is key for creating an experience.

going straight to CSS/HTML is the signature 37signals process—it works in theory, but can be very expensive if you make substantial changes. you can also get caught up with doing a lot of QA… which takes time.

however, this process works well if you want to prototype a feature quickly.

lastly, photoshop is too high fidelity. reserve it for making specific assets (like a button). it’s foolish to try designing an entire site with photoshop… using all those image assets is just going to make your site load super slow.

It kind of depresses me that there are so many psuedo-designers out there like the author of this article, who have never attended a design school or class and yet assume they know everything there is to know about it.

Very arrogant attitude with very little substance, the line about changing fonts in css quickly being a key point of why it’s faster is ridiculous – what happens when you need to change the color of an image that is sliced across backgrounds and css styles throughout your document?

There are many subtleties to the layout process which are ironed out in good design. There’s also the wireframing process which should be done beforehand in order to get more insight about the requirements of the design before you start.

I think the point here, is that not every website is ‘designed’, or have a sense of brand. So some websites may get away without design at all (like this website), and the author is confused thinking he is actually doing a site design, when really he’s just doing a loosely tweaked set of css styles.

Sorry, you’re entitled to your opinion, but I’m a bit disgusted by the attitude you’ve given in some of your answers.

What a strange post, photoshop is essential part of conceptal design… much quicker than playing around and previewing in html php… should only move to the code when its time to put function into it…

I can’t imagine wasting time in Photoshop. If you’re getting paid to build a website, then start building a website. If you’re getting paid to draw pictures of websites, that’s another story.

“Skipping Photoshop” as a step in technical product design/engineering has been a big elitist trend since 37Signals’ blog post in 2008. I believe the argument is more than short-sighted.

First off, I have done more pure visual design contract jobs (with Photoshop .PSD deliverables) than I have engineering ones (with code deliverables). There is a dense need for skilled UI/UX and visual designers — directors and otherwise — in the San Francisco Bay Area startup market. True, there’s a need for engineers and product people too, but at the same time, I’m not saying “screw scrum meetings; they’re a waste of precious time”, simply because there’s a massive job shortage in the tech industry at the production level. I think what this argument recognizes is the clear lack of designers. If your product people (or engineers… yikes!) are spending their precious time in Photoshop mocking up features… then yes, skip that step by hiring a designer! In many ways, the tech boom has caused a sort of Renaissance period in design, but I still feel that most digital products today are severely lacking in decent design. To say using Photoshop is a useless step when designing a product, is pretty bold. And hey, maybe it is one of the reasons that so many tech companies have horrible, horrible user experiences and design aesthetics in their products.

As I stated above, many of my current and past clients hired me for the specific reason of creating and delivering .PSD file(s). It’s because these companies care about design. That level of detail that some say is a “waste of time” during production is actually the precise element that separates a company like Apple from a company like Amazon.

And what the hell — who says you can’t iterate fast and still achieve level of detail and have a stunning UI? If your designers are any good, then things like level of detail are intrinsic; innate; … going to happen regardless of time frame. I’ve stayed at work until 1 AM to achieve that level of detail on a mockup. If you feel like you’re wasting time on design, maybe more accurately you’re wasting money on inefficient designers who can’t work fast and produce good design on the fly. Additionally, Photoshop files serve as a sort of style guide for user interfaces. They are the organization and the source file for your aesthetic. You simply can’t even entertain details if you’re going from wireframe to HTML.

I won’t even mention the amount of time your designers are going to be spending on revision work, because instead of clicking ‘Drop Shadow’ and checking the effect, they have to type, “box-shadow: 0 0 5px #222;” (don’t forget adding 3-6 more browser extensions to get that drop shadow to work in all browsers by the way). I could argue that it’s much more productive to write CSS for all browsers at once with a reference .PSD than it is to to “mock up” a design with CSS, get approval, then write browser extensions later (going back and locating each CSS3 rule and modifying it accordingly; one by one).

In fact, I’ve more than proven my point at this point. Photoshop is not dead. If anything, as UX becomes more important (thanks to ‘the internet’ not just being a 1024×768 screen anymore), companies are going to be forced to put more and more emphasis on design. Don’t take it from me, take it from the most profitable company on the entire planet.