Article overview

From Sketch to Website (Hint: Skip Photoshop)

· By · 25 comments ·

Go directly from sketch to HTML.

The purpose of sketching is to quickly try out many different solutions to the same problem. In web design, this means that the purpose of your sketch is to figure out what the page should communicate and how the different elements should play together.

But how do you then take your sketches and turn them into a page on your website? We suggest going straight to HTML as soon as you have a few sketches with solutions you like.

Most people typically take the sketch and turn it into a high-fidelity design in some graphics software such as Photoshop. However, this is a time-consuming process and you end up with an inaccurate result, because any design will behave differently once it’s actual HTML, loaded in a browser.

Designing your page in a tool like Photoshop is problematic because it’s a different environment, causing the feedback to be inaccurate too – the page will look and feel different in a browser. Going straight to HTML allows you to design specifically for the browser, the final destination of your design. (Spend a few days learning HTML and CSS if you don’t already know it.)

Here’s 3 benefits of going straight from low-resolution sketch to HTML in the browser:

  1. More interactivity – when you design your site in a tool like Photoshop, it’s easy to forget hover-states and other interactive features, because you’re essentially drawing a picture, not building a website. This means interactive features become last-minute additions – an afterthought. But when you design directly in the browser, interactive features become an integrated part of the design process. You naturally start implementing them along the way, discovering new and better ways to implement these interactive features.
  2. Instant and more accurate feedback – when testing your design in HTML, you’re designing for the browser – the actual environment the finished design will live in. This gives you the most accurate experience of your design while you’re working on it. It’s not a representation of how your site will look and feel – it’s the real thing.
  3. Many iterations – by side-stepping Photoshop you get more time to try out different designs and iterate over the best ones. You get instant feedback on what parts of your design that works well in a browser and what needs to be changed.

Don’t waste your time on representations, when it’s so easy to work with the “real deal” (HTML). By working with and evolving your web designs directly in their true environment (the browser), important things like interactivity don’t end up as an afterthought.

The instant and more accurate feedback during development allows you to constantly focus (and refocus) your design, and you end up designing the full experience of your website – not just the way it looks.

Agree? Disagree? Let us know what you think in a comment.

Update: you might also want to take a look at Meagan Fisher’s article that visualize an example of the designers workflow when going “straight to HTML”.

Amy Stewart October 5, 2010 Reply to this comment

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.

Jamie, Baymard Institute October 5, 2010 Reply to this comment

Hi Amy,

Thanks for your comment – you definitely bring up some valid points. I’ve tried to address each of your points below.

We have the luxury of not having to do direct client work, making this approach more suited for us. Working directly with clients definitely adds complexity and can distract one. Too often focus is moved on getting things approved (so you get paid) instead of designing the best and most user-friendly experience possible.

“How do you present multiple look and feel options this way?”

We just create different HTML and CSS files for each new design we try out. This is no different than creating a new file / page in an application.

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

This varies greatly, and depends a lot on the person implementing it. Most people who spend as much time honing their HTML & CSS skills as the majority of graphic designers spend on video tutorials and books about Photoshop, can produce HTML & CSS incredibly fast. The HTML is a mockup, so the features don’t necessarily need to be hooked up to the actual back-end.

When making a change to general styling of elements, CSS is much faster than software because the change is applied to all pages immediately – and has the added bonus of also giving you true feedback of how it looks in the browser.

The two results are very different. Even if you should happen to need a bit more time to do the HTML mockup as opposed to an interactive mockup in Fireworks, the difference in quality easily makes up for this I think. An “interactive” pdf-export of a website can’t be compared to a real HTML mockup.

“Browser compatibility problems?”

When dealing with clients this could of course be a problem. In that case I’d probably suggest the client to always see the mock-up in IE8 or Firefox or whatever browser you prefer developing in.

We don’t deal directly with clients so we can just develop the mockups in our favorite browser without worrying about cross-browser compatibility.

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

Couldn’t say since – as mentioned earlier – we don’t deal directly with clients.

“I start with a bare-bones Wordpress site, loading it up with their content and working on structure and content before graphics.”

Our suggestion is to do an HTML mockup. You shouldn’t hook it up to the back-end, but rather nail the design in HTML. This way changing the HTML and CSS is fast and inexpensive.

Adam Darowski October 5, 2010 Reply to this comment

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”:

<blockquote>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)</blockquote>

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

<blockquote>It’s much more time consuming to mock up functioning HTML than to build interactive mockups in Fireworks.</blockquote>

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.

<blockquote>Browser compatibility problems? Do you keep testing for all browsers through each iteration?</blockquote>

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.

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

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

Jamie, Baymard Institute October 5, 2010 Reply to this comment

Hi Adam,

You of course managed to express most of my thoughts in a much more concise manner!

Adam Darowski October 5, 2010 Reply to this comment

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

Jamie, Baymard Institute October 5, 2010 Reply to this comment

Done and deployed.

Not completely satisfied with the look yet, but it definitely beats nothing ;)

Thanks for the hat tip!

Leon October 6, 2010 Reply to this comment

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.

Christian, Baymard Institute October 8, 2010 Reply to this comment

If you are comfortable enough with wordpress then that is an option as well and of course the biggest timesaver. The potential pitfall here is getting hung up in coding background processes when you should be designing the user experience.

wqeqe October 7, 2010 Reply to this comment

It all obviously depends on the complexity of the design.

Boozi October 7, 2010 Reply to this comment

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.

Christian, Baymard Institute October 8, 2010 Reply to this comment

Balsamiq is a fine product. Personally I prefer sketching the the initial concepts in hand as it is much faster – but if you need to digitally distribute, or virtually collaborate on the design mock-ups I see its advantage.

Brian October 8, 2010 Reply to this comment

“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.

Jamie, Baymard Institute October 9, 2010 Reply to this comment

Hi Brian, thanks for your comment. This post was intended to spark discussion, so I appreciate your input – even though I respectfully disagree.

You fail to address the core argument of this article: the quality your designs increase greatly with this approach because you’re working on a real interactive webpage, not an image of it. When working on a representation, you feedback is inaccurate and you forget the interactive nature of the web.

I’ve tried both approaches and done direct client work before, and after a handful of those client projects with each approach (with Photoshop and without) I can say that yes, I do believe this to be an “end-all-be-all of design processes” for any web designer striving for high quality.

But hey, if you’ve genuinely tried this approach for 3 months and it doesn’t work for you, then obviously you shouldn’t use it. But if you’ve ever only done projects the other way, surely you should at least try this approach. This is like all other advice – if you try it out and it doesn’t work, then surely don’t stick with it. But I do believe it will work much better for the vast majority of designers out there – otherwise I wouldn’t say it in this uncertain terms.

Specifically app-oriented projects (geared purely toward functionality with minimal aesthetics)

This advice is not geared specifically towards app-oriented projects – it apply to any kind of web design. Re: aesthetics, that’s a matter of your taste vs mine, let’s not get into that discussion.

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?

Yes, that’s exactly what I’m suggesting. You shouldn’t be doing 3 more or less fully completed designs in this case, that would be a waste of time – Photoshop or not. When sketching you should find the general structure of the site, and if we’re just talking about 3 different versions of the same design then surely this is as easy to replicate in HTML & CSS because you can reuse so many of the structural elements.

Are you REALLY suggested that we tell our client(s) they can only view our proposed designs in one particular browser throughout the process

During my client work it’s never been a problem for me to ask a client to install Firefox or a more recent version of Internet Explorer – you just have to explain the benefit. Tell them that they’re getting more value for their money because you can produce a higher quality design for the same amount of money.

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…

Surely you do have a pretty good idea of what it is you want to change when actually making the change? I’d say “designers” do work like that, they don’t just randomly make changes and hope things look better, they use past experience, design guidelines, user testing, a/b test results, etc. to figure out what changes to make next.

If you have to change code and refresh 30 times in order to make a change then I find it hard to believe you’ve been handing coding HTML & CSS for 10 years. You start out by create a rough version, see if it is better, and if it is, then you use something like Firebug to make the minor modifications live in the browser, no refreshing here. When you’re happy, you then copy/paste that code over once and you’re set.

Jeff Wong October 19, 2010 Reply to this comment

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.

Rob November 1, 2010 Reply to this comment

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.

Jamie, Baymard Institute November 3, 2010 Reply to this comment

Let me address each of your points.

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.

Are you suggesting that the only way to learn design is to attend school or class? The entire educational system was never meant to teach creative skills and have proven horribly inefficient at doing so.

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?

It’s exactly when I’m changing CSS styles throughout the document that HTML+CSS is faster. You just change a style and all pages are instantly updated.

I do admit that when I “need to change the color of an image that is sliced across backgrounds” things go faster in Photoshop, but then again, the last time I was slicing images across backgrounds was in 1999 when that was all the rage.. I’m sorry, but websites shouldn’t have sliced images across backgrounds.

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 agree with your general sentiment here: there are a lot of details and a good layout and design isn’t achieved overnight. I don’t agree on the process of getting there, however – to me, wireframes aren’t the only way to gain insight into the requirements of a design.

And let me reiterate the most crucial point in the article: it’s not only about speed (although in my experience going straight to CSS is faster too), it’s also about quality. It’s exactly because of the subtleties in design that I can’t come to terms with using an inaccurate representation in Photoshop, but rather want “the real thing” in a browser.

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.

Don’t confuse decoration with design. And don’t mistake simplicity, usability and accessibility, with 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.

I’m not disgusted by your attitude or opinion, but I respectfully disagree.

Andrey November 5, 2010 Reply to this comment

You imply that each and every designer should work the same way and produce the same kind of results you are producing, which can’t be true. Every article that implies this makes me laugh, authors seem to focus on their work type and niche and don’t see anything else.

There’s no way graphically heavy designs can be designed the way you propose, and I know about the difference between decoration and design. It is possible to make beautiful design usable and accessible, and if you are not doing it, it doesn’t mean that nobody is.

Or, at the very least, there always will be a demand for a more graphical designs and other way of designing things.

Jamie, Baymard Institute November 9, 2010 Reply to this comment

Hi Andrey, and thanks for your comment.

I never said every designer should work this way. If you read this article, you’ll notice that it’s based on our experiences and that “We suggest going straight to HTML as soon as you have a few sketches with solutions you like”.

We’ve tried doing projects “the Photoshop way” but found that going back and forth directly between sketch and HTML is much faster and more accurate, resulting in higher quality designs.

If something else works better for you, then by all means, go down that road. Whatever works :)

Andrey November 5, 2010 Reply to this comment

Talking about the great usability, how about the ability to get a reply to email here?

Jamie, Baymard Institute November 9, 2010 Reply to this comment

Thanks for the suggestion.

We were actually talking about this just the other day.

Rob November 7, 2010 Reply to this comment

I agree with your points about schooling, completely actually. What I meant wasn’t necessarily schooling but just a study of the design process in general.

When you learn an instrument for example, no matter how good you think you are naturally, you will encounter mistakes that will hinder your progress that you won’t even realise without some guidance or looking at how others are doing things. A design class helps you to learn WHY the things you’re looking at look good. WHY your haphazard css styles seem to ‘work’ sometimes and not others. Thinking you can learn something professionally without guidance is just pure arrogance.

You have made the assumption I am talking about graphically heavy sites. I am NOT. You can do a minimalistic site within any layout tool, but layout software in general is important. I suggest you read some articles on layout and space, composition, ux design, and (a step before, but..) information architecture. You won’t hear people saying “spit out your final product then hack around with css to make it pretty!”

I like that you linked one of your own articles as justification for your thoughts. I agree that decoration is not design. You’re doing decoration.

Just the act of separating your layout out into a new medium (even if it’s pencil) will give you a different perspective and iron out a lot of layout bugs and information flow problems you won’t get in code.

The projects that don’t require this (and I admit there are a few), either don’t have the budget (which is fine) or don’t have the audience (purely functional driven audience where there is no revenue per conversion, etc).

As for the speed issue, well… I’m not going to bother arguing that. I think it’s fairly obvious. You’re probably thinking it’s faster because you enjoy it.

I just am kind of annoyed that a site professing some kind of knowledge in interface design would post an article like this.

Jamie, Baymard Institute November 9, 2010 Reply to this comment

Hi again Rob.

First off, thanks for your input. While we don’t agree on everything, I do appreciate your comments.

What I meant wasn’t necessarily schooling but just a study of the design process in general. […] Thinking you can learn something professionally without guidance is just pure arrogance.

I think we completely agree here. Hundreds of years of insights and theories from people much smarter than you and me (well, me at least) shouldn’t be ignored. It should be studied closely and brought into one’s work.

I’m not sure why you jumped to the conclusion that we haven’t studied design, however.

Just the act of separating your layout out into a new medium (even if it’s pencil) will give you a different perspective and iron out a lot of layout bugs and information flow problems you won’t get in code.

We do say you should sketch everything first, preferably in many different versions.

Since code is the final destination of your website, any problem can be discovered (and fixed) at this stage – however, it may not be time efficient and you make focus too much on the details.

That’s why we’re huge fans of sketching. It definitely gives you insights you’re likely to miss in the full-resolution HTML version.

I just am kind of annoyed that a site professing some kind of knowledge in interface design would post an article like this.

This article was based on our experiences. We’ve found an approach works better for us, and so, we’re sharing that for others to try out.

If this approach doesn’t work for you, don’t stick with it. If it doesn’t appeal to you, don’t even try it out.

ni November 3, 2010 Reply to this comment

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…

Dylan Smith November 4, 2010 Reply to this comment

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.

Benny March 30, 2012 Reply to this comment

“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.

Post a comment!

Close overlay