When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup.
Here are a few reasons why we skip photoshop:
- You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience.
- Photoshop gives you too many tools to focus on the details. When you use Photoshop you can’t help but pay attention to the details. The alignment, the specific colors, the exact shapes, the little details that may matter eventually but they certainly don’t matter now. The start is about the substance, not about the details. Details are for later.
- The text in Photoshop is not the text on the web. Once you’re looking at a static Photoshop mockup you can’t quickly change the text without going back into Photoshop, changing the text, saving the file, exporting it as a gif/png/jpg, etc. You can’t post it online and tell someone to “reload in 5 seconds” like you can when you quickly edit HTML. You have to say “Give me a few minutes…”. Also, type in Photoshop never seems to be the right size as type in HTML. It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.
- Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at, but about building something you can use. When you’re just worried about how it’s going to look, you spend too much time on production value. HTML/CSS lets you be productive. You’re constantly moving forward towards something more and more real with every change.
- Photoshop is repeating yourself. Ok, so you’ve spent 3 days on a mockup in Photoshop. Now what? Now I have to make it all over again in HTML/CSS. Wasted time. Just build it in HTML/CSS and spend that extra time iterating, not rebuilding. If you’re not fast enough in HTML/CSS, then spend the time learning how to create in HTML/CSS faster. It’s time well spent.
- Photoshop isn’t collaboration friendly. I sorta touched on this before, but let me hit this point again: HTML/CSS lets you make a change, save, and reload. That’s our collaboration flow. “Here, let me change this. Reload.” These changes take seconds. “Here, let me float this left instead of right. Reload.” Seconds. No selecting a tool, changing a few items around manually, saving, exporting, uploading, giving people the new file name, etc. HTML/CSS is build for rapid iterative prototyping while Photoshop… isn’t.
- Photoshop is awkward. You can’t help but know your way around Photoshop after working in it for 10 years, but I still find it awkward to get simple things done. Working with a pen feels so much more natural to me than going back to the toolbar over and over. A pen can draw anything, but in Photoshop you need to use the text tool to type, the shape tool to draw a shape, the menu bar to adjust this or that, etc.
None of this is to say we think Photoshop is bad or a waste of money or time, but for us we’ve found that going straight into HTML/CSS affords us the best iterative and creative experience. HTML/CSS is real in a way Photoshop will never be.
GeeIWonder
on 03 Jun 08Couldn’t agree more, especially the repeated stuff and the ‘details’ points. The great thing about using e.g. a sharpie on a small pad is you can layout the important stuff without spending too much time on the stuff that matters less and is quick to change with CSS anyways. Photoshop also tends to lead to a lack of negative space, in my experience anyways.
Quick question re:”The text on the web” (sorry if this is off-topic)—is the way some of your fonts (e.g. the SvN ones) look in Opera a conscious design decision?
Robert Gaal
on 03 Jun 08So I just wonder, how do you create little graphical elements like shades or rounded corners? In paint? ;)
John
on 03 Jun 08I skip the paper sketch and go straight to Photoshop. It’s much better suited to the task at hand in my opinion. I do, however, treat the Photoshop mockup as a sketch and do not expect the final outcome to resemble it in any meaningful way.
Walker Hamilton
on 03 Jun 08Then why bother?
Henry Balanon
on 03 Jun 08How do you share paper sketches with the people outside of Chicago?
Eric Epps
on 03 Jun 08I totally agree—I’ve always seen this step as a waste of time; but I may be biased, too, because coding for me is much easier than using Photoshop for a web layout.
Anonymous Coward
on 03 Jun 08For the same reason why you’d start with pen and paper.
cubiclegrrl
on 03 Jun 08I agree with you about the overwhelming nature of PhotoShop (or even Gimp). But I would offer the caveat of context. Specifically, I would never, ever show an interactive interface to a typical client. Once they have the eye- and mouse-candy to play with, clients have a dismaying tendency to assume that the mockup is the application. Storyboards with screeshots of mockups in a PDF, on the other hand, are “just mockups” in their minds.
Mind you, my clients are relatively non-technical. HTML/CSS mockups work splendidly when you’re demo’ing with people who understand how much “plumbing” is actually missing. In fact, I just whacked one out last week for an internal client who is savvy enough to roll her own CSS/HTML. But for a general audience? No way in Grethor. [shudder]
No question that PDF mockups are waaaaay more work. But you only have to have your toes curl at the customers’ “Oh, so you’re almost done!” once to learn that lesson… Now, If you’ve been through several projects with a client-enough to earn their trust in your ability to estimate project time and pitfalls-you might get away with this. But to a brand-new customer, you run a significant risk of coming off like you’re sand-bagging. And losing the job (and probably the client’s good opinion) is just not worth the time-savings, IMO.
Jeff Croft
on 03 Jun 08All of these are good and valid reason why skipping Photoshop seems to work well for you guys (and it does). I can’t help but wonder, though:
1. Do you think the aesthetic you guys have developed for your products makes this no-Photoshop workflow easier for you than it might for others? This is in no way a criticism, but the reality of your design aesthetic is that it contains very little texture, very little imagery, and very little depth. In my opinion, that’s 100% appropriate for your products—but it’s not appropriate for everything. Is the no-Photoshop workflow still as effective for situations that require these elements?
Which leads me to wonder…
2. Is it possible that your no-Photoshop workflow has actually influenced your design style? I tried going Photoshop-less for a while, and what I found was that I would iavoid texture, depth, shapes that can’t be created with CSS, and imagery in order to facilitate my new workflow. Ultimately, I felt it was harming my creativity. Because CSS is more limited than Photoshop in what it can do visually, I was placing those restrictions on my designs (albeit inadvertently—of course I could have gone in to Photoshop just to create a little image here and there, but doing so seemed like a chore, and I had decided I was skipping Photoshop, so it felt counter-productive to use it, even if it really wasn’t). I guess I just wonder if your minimalist, simple, flat, aesthetic is inspired by the tools you use (or in this case, don’t use).
Ultimately, I found that for me, the best workflow was to go through the Photoshop step, but to jump out of it and into HTML/CSS as soon as possible. Once I have the basic look and feel accomplished, I start working with HTML and CSS.
But everyone is different, and the Photoshop-less workflow definitely seems to work well for you guys.
Jeremy Olson
on 03 Jun 08A month or so ago I would have disagreed with you but a week ago, I tried it. I started developing a moderately complex planning app for my mom to use to plan her homeschool year. I had to get it done fast. So I did some quick planning and sketched out the various screens and now I’m building the app with Rails. I can’t believe how fast I’m going: I’m almost half way through alpha development after a week and a half. And amazingly, the interface has a beautiful simplicity, a product of my skipping the photoshop phase.
I’m not sure if I will always skip photoshop from now on–for example, projects where the interface requires a highly stylized look, but I certainly am getting a lot done a lot faster without it.
nik harron
on 03 Jun 08While I agree that sketching is faster, that part of the process is one that I only use for internal presentations. I always mock up the designs in Photoshop for presentation to clients.
The reasons for this are that I’m fast at Photoshop, I can create multiple layouts from the same file, it simplifies the approval loop with clients and it gives the developers that code my designs a pixel-perfect proof to slice up.
If you have a clear understanding of the way HTML/CSS works you might be able to code the design faster, but you are assuming that the person who designs the site and the person who codes it are the same person.
I find the number one spot where delays occur in web projects is the initial creative loop with the client – getting buy in – and giving them a pixel perfect proof helps to speed up that process and avoids costly changes down the road when the website they see does not match their expectations.
It’s a lot quicker to make changes on a static layout than later on after the site has been coded in my experience, irrespective of what it says in the blog above, if you structure your Photoshop document in a non-destructive fashion using vector shapes as the basis for the layout allowing for quick colour changes.
Also, it is possible to create type in Photoshop that looks exactly like the web type by using integer pixel type sizes and turning off anti-aliasing. Of course, that’s keeping in mind that many operating systems now will anti-alias type on the fly quite well especially on LCD monitors by using sub-pixel techniques, so any differences between the Photoshop layout and the comp are minimal or non-existant.
One thing to keep in mind is that a talented coder can create a near-perfect rendering of a PSD comp, but they need the comp to slice up in the first place.
That’s my two cents’. Cheers.
Eric Epps
on 03 Jun 08@cubiclegrrl
You make an excellent point, I’ve run into that problem time and again—I think I’ll switch to developing in HTML/CSS and then presenting a screenshot of the page instead of the rough page itself.
Parand
on 03 Jun 08Going straight to HTML/CSS requires a level of skill that many (or is it just me?) don’t have. The amount of effort I have to put into getting CSS to display the way I’d like it to is orders of magnitude more than that of getting illustrator or Inkscape to do what I want.
At the end it’s a matter of which tool gets you visualizing your design fastest/easiest. If you get there faster with HTML/CSS then more power to you, but Photoshop/Illustrator is the right tool for many.
someone
on 03 Jun 08I imagine it in my head and then go straight to HTML/CSS. Hah!
It’s still better than most enterprise IT departments, which spend months on UML diagrams, specs, and other bullshit, then database stuff, then control/web services/etc stuff, and then try to autogenerate the user interface from their data model. Magic!
Marcos Kuhns
on 03 Jun 08I think OmniGraffle is an excellent medium-ground. First off, you can make the mockup clickable, which is a big plus. Also “stencils” speeds up the creation process because you can drag & drop styled elements into place. This way you can have some of the nice details to inform the final design without sacrificing much time. While it’s not a perfect solution (you still have to export unless you client has OmniGraffle too) I think it’s a wonderful tool for the job.
RS
on 03 Jun 08The plumbing doesn’t have to be missing. The lag between templates and plumbing is a function of how productive your programmers are and how much work you choose to bite off at a time. The first template you create doesn’t need to include all of the features that might eventually exist at launch. Part of being a good designer is leaving yourself space to add things later, while still delivering something that looks good today.
80% of the time paper sketches are a tool used by one designer to quickly visualize his ideas and evaluate the possibilities. The few times that we do share sketches with each other, it’s almost always in person. We have occasionally dropped sketches into Campfire, but if you’re early enough in a project to be sketching on paper, it’s worthwhile to have some face time.
cubiclegrrl
on 03 Jun 08@Marcos Kuhns: Thanks for the OmniGraffle tip—I’ll check that out.
James Collins
on 03 Jun 08For me, using Photoshop after a sketch is a great way to explore my concept and present proofs to clients. I’d hate to code from the outset and have sweeping changes come my way.
Micheal Morgan
on 03 Jun 08Completely agree. Photoshop is terrible for mockups.
Fireworks is better suited and yields higher productivity.
I can’t image the amount of wasted code you would write without a concrete mockup. I would rather spend quality time in a graphical editor than countless hours rewriting CSS. It is very easy to get absolutely lost without a solid visual. Of course details are refined during production; though, you can create micro images to illustrate hovers, dropdowns, etc.
When working with clients a mockup is absolutely necessary.
In regards to collaboration, isn’t that what I pay you $50 a month for? :-P
George Varz
on 03 Jun 08I still wonder when a web designer mentions talking about PhotoShop and quick mockups in one paragraph. This is the least productive tool for doing prototyping ever. The best is HTML/CSS and second comes Adobe’s Fireworks. Fireworks is great for text, and marvelous for quick rearangements of objects on screen – just to try how it will look the other way. Sometimes it’s quicker that changing your CSS.
Everyone – try Fireworks.
Ryan
on 03 Jun 08I couldn’t agree more. I can’t get myself to go straight into Photoshop for a mockup. Each time I’ve been asked to mockup something for a customer, it has been in a browser.
Photoshop is part of my daily activity, however, but not at all for mockups. As you’ve stated, it’s wasted time completely.
cubiclegrrl
on 03 Jun 08RS: Again, context is everything, IMO. My principal client used to be notorious for not wanting to see the handiwork until it was all the way out to Beta. At which point they nitpicked over the tiniest gnat's $$ details. The worst of both worlds, in other words.
Then there was the time I tried a semi-functional mockup that fell into the wrong hands while I and the person who knew it was “just a mockup” were both out of the office during the same week. I came home to a firestorm that started with someone sticking her nose into something she didn’t understand and escalating that misunderstanding all the way up to a VP.
Thankfully, I’ve since managed to train them, somewhat. Actually, for the last project, they sent me the paper mockup. But I’ve been working with them for nearly three years and they were an established client when I took over the account.
Bottom line (to my mind): The design process is entirely dependent on the temperament of the customer and the strength of your relationship with them. Possibly 37 Signals has enough of a fan-base to cherry-pick your customers. Right now I can’t claim that luxury, either at the day-job or for moonlighting.
Dan Boland
on 03 Jun 08Terrific post, as it describes the way I work and why I work this way.
Also, type in Photoshop never seems to be the right size as type in HTML. It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.
This is always an issue when working from someone else’s comps, because the size is usually wrong. And when a graphic designer who doesn’t work with the web lays out a design based in part by the dummy type being “that size”, it kind of throws the whole thing out of whack. Related—there aren’t many fonts to choose from for the web, yet other designers’ comps NEVER seem to use them.
John Athayde
on 03 Jun 08I agree 100% on the paper first mentatlity. I do all my design work on 12” architectural trace rolls. However, I find working directly in HTML can be limiting to a fault in some cases. Sometimes it works well, but sometimes, a design idea won’t come out without figuring it out in Photoshop/Fireworks (some kind of image editor).
As far as sharing, I did work for one of the largest investment banks in the world. I sat with the client and drew it out on paper. When I was remote, I’d scan and email.
Jonathan Christopher
on 03 Jun 08I’d like to echo the sentiment of Jeff Croft above. I think that method probably works very well for 37signals, but I couldn’t imagine it working out for my team. I think a key difference to keep in mind is the difference between 37signals products and web design/development for clients. The 37signals team knows when they’ve got it right, and making quick changes via markup/style may be the fastest way to get things done, but in my experience leaving out a flat comp approval stage would be quite detrimental to our process. One thing we’ve accustomed ourselves to is presenting a flat comp within a web browser by applying the proper background elements (which repeat if need be) and including the comp within that. It seems to help when clients are presented a design in a pseudo-natural environment. Either way, thanks for the insight!
bryanl
on 03 Jun 08old 37 signals article
Kris Khaira
on 03 Jun 08I tried mocking up with HTML/CSS some time ago and, like Jeff Croft, eventually switched back to Photoshop. It just hampers your creativity too much. Maybe you need 2 steps – mock up once for development in HTML/CSS and then reiterate again for the frontend?
FredS
on 03 Jun 08I typically lay a site out in HTML/CSS – then go into photoshop and create background images, and buttons if I need to.
That said, I’ve gotten very used to creating HTML pages out of other peoples photoshop files and I find pages created that way tend to have more interesting layouts. But I’d never suggest opening photoshop to design an app. Yikes.
Steve McDonald
on 03 Jun 08I’d like to here a few comments about the following statement:
Gathering requirements is doing the same work twice. Why gather requirements if I can just mock up my assumptions in HTML/CSS?
This is the next progression in the above statement for me. The truth is that shooting from the hip on stuff ends up getting me about 10% of the way there, with the devil in the remaining 90% of details. Mind you, if you are the sponsor of your own project (or in-house project) then you will likely have less hoops to jump through in the course of your work. But in the world where people want (1) eye-candy, (2) aesthetically elegant web presentations, and (3) well-defined user experiences, I am certain you will waste time writing “HTML/CSS” again and again for picky external clients.
Here is another reality. Economies of scale. Larger businesses understand the difference between code-creative and art-creative and so hire different people to perform that work. Sadly people invest in projects because of the art-creative depiction of the works outcomes in the form of a mock-up, even if the project spends most of the budget on the code-production end of things. So, in short, graphic artists get paid less, hence it is less costly to have a GA that understands usability do a mock up based on defined requirements, rather than to let a coder churn out 33% code-complete examples on a project that might get rejected because you are still in the proposal or early stages of work.
If you live and work in a vacuum, then maybe you can choose to mock up work and invest in coding earlier on. But for many of us who have to mock-up something to simply get the job, it is far faster to use tools like PhotoShop to simluate various pages and states of a web app.
For those of you who disagree, I would love some feedback about where you are drawing your aesthetically creative UI resources? Do you create your own wholistic branding-color scheme-UI standards-feedback mechanisms from graphics pilfered off of “free web 2.0 graphic generators” sites, or when/where do you take the time to address that end of the project?
Chris Griffin
on 03 Jun 08For web applications, I think this approach works initially to get something functional for testing or even beta testing for a small group. But, after all the bugs and wrinkles are pressed out, a visual design is usually in order (meaning Photoshop).
A visual design phase in our projects usually comes towards the end. We want to get the interaction/flow/interface of the web application down before we start adding the style layer, otherwise, the visual design just gets in the way.
FTR, We generally start with sketches -> wireframes -> HTML/CSS and completely skip Photoshop at the beginning, but I usually end up in Photoshop at some point.
Peter Urban
on 03 Jun 08We like to do quick drafts in Illustrator and the go right to HTML/CSS. The Illustrator first approach allows us to draft out a scenario and play with it very quickly and we already get a good idea how things ‘interact’ (once you’ve got your layers set up smartly it’s easy to flip between screens and versions). The next step involves coding HTML, CSS and some JS which is slower but confirms our ideas before we polish the final screen. This works very well for us but our talents are also a little more seperated between design and coding.
Nathan Bowers
on 03 Jun 08Paper prototyping is the best. In the early stage of application design you need immediacy and rapid iterations. Photoshop takes too long, you get too invested in your prototype, so you have fewer ideas.
My workflow is: paper prototype > basic structural HTML/CSS > plumbing > make everything shiny with images last.
The HTML/CSS phase is important because you can do a lot of early heavy lifting with basic typography and layout, then easily add the “sheen” later.
Paper bonus: it looks “unfinished”, but is more personal and engaging. Check out these hand drawn slides from Leah Buley of Adaptive Path.
Megan
on 03 Jun 08I think the answer to this question really depends on what you’re doing. When you are creating highly interactive applictions, like 37 signals does, then it would make sense to skip the static mock-up. What you’re designing something that’s meant to be interactive then it doesn’t make sense to prototype in a static medium.
However, if you were designing something that was meant to be more of a static site then maybe it does make sense to do a graphic mock-up. (I’m not using “Photoshop” here because really any graphic design program is useful for this purpose. I personally prefer vector programs most of the time).
Like others I’ve found that working directly in HTML tends to limit my creativity. I find that it’s easier to drag boxes around in Illustrator than fussing with CSS. Faster in the initial stages. I also agree with Michael Morgan in that you could easily get totally lost without a proof. I wouldn’t know where to start half the time. There’s no vision.
Jeff Croft (above) talked about your graphic style and I think this is another thing that comes into play – if you already have a defined style that you’re working with there aren’t as many benefits in creating a graphic mock-up.
Finally, I also think that beginning designers can gain a lot from working in a graphics program rather than directly in HTML/CSS (I recently published tutorial on creating graphic mock-ups for beginners). This way they can work on developing a coherent design style without being hampered by logistics or limits in their knowledge.
Tor Løvskogen Bollingmo
on 03 Jun 08This is why almost all webapps I see lack a beautiful design – it’s just CSS. Sure it’s effective, but it’s ugly like a Windows ‘95. I love details and beautiful design.
Mike
on 03 Jun 08“So I just wonder, how do you create little graphical elements like shades or rounded corners?”
As a coder, I’m happy to see them go. Photoshop is a photo editing and drawing program, and I’m sorry, but a website is NOT A DRAWING.
sj
on 03 Jun 08Similar to Croft, we tried doing this for a while (after reading about it here.) We ended up going back, for many of the reasons others have outlined above.
What we’ve done is create a standard PSD template that includes standard form elements (buttons, form fields, etc.), some standard grids at different sizes, examples of AJAX effects (tooltips, notifications, etc.) etc. in their own folders. It helps us get things up to speed very quickly, without sacrificing the creativity that Photoshop allows. We just save jpgs of the different states on a particular page, showing internal teams how it will work when done. This speeds everything up for us considerably…
Michael
on 03 Jun 08“Also, type in Photoshop never seems to be the right size as type in HTML . It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.”
AND, Photoshop defaults documents to 72dpi, so when the designer says: that type is 12 pt, it’s actually not. Nowadays most screens are 92 dpi, so Photoshop made the wrong calculation. I don’t know a lot of designers that actually understand this, let alone know to change their default document settings.
Brian Dillard
on 03 Jun 08Another advantage for skipping straight to HTML/CSS: Photoshop encourages all sorts of little design details that are easy to achieve in a static bitmap but difficult to achieve and/or maintain in CSS. I’ve had tiny little design details handed to me in a PSD file that caused huge nightmares on the CSS, JavaScript or JSP front. If you work in an iterative, collaborative environment, that isn’t as much of a problem. But if you’re a UI person and work in an agency/shared-resource environment where the visual mockup if your Bible, then having that visual mockup written in the actual language of the production code helps head off these mismatches.
yohami
on 03 Jun 08So thats why your designs stink! lol
It´d be a good idea to go to photoshop after the very functional CSS site is working, so it doesnt interfer with your process.
Margins, fonts, pixel perfection, adds to usability.
Andrew Vit
on 03 Jun 08It’s really not as simple as this post makes it sound. The correct answer-as always-is, “it depends”. Are we talking about functional design or visual design? Yes, you can definitely sketch out a prototype in HTML/CSS very quickly, but I find that it’s very limited for graphic design without using a visual graphics tool first to arrive at a well-thought out “look”.
I also find that the steps & tools that you use in the process really define how the final product will look. If I start with HTML/CSS, I naturally tend to go with a more spare (let’s call it “modern”) look by deferring to simple background-color and border styling. Adding graphics for embellishment post-facto sounds dumb. You just can’t do without something like Photoshop (or Illustrator, or Fireworks, etc…) in order to end up with a rich and well-integrated visual appearance in the end.
Besides, I never find that my Photoshop “mockup” goes to waste: it’s the source for all of the stylesheet elements like colour schemes and background images which just get plucked and saved for web. Pencil mockups don’t know pixels, so I rarely start there because I found that those are a total throwaway, unlike digital mockups which I can (and often do) come back to—sometimes much later after launch to make changes.
Philip Zaengle
on 03 Jun 08So the last 6 hours of my day are a waste? :)
Steve McDonald
on 03 Jun 08Something worthy of note about UI trends:
When the web first came to be, it was about HTML, which resulted in a lot of blinking text and an assorted rainbow of colors on a single webpage. Content was not king and having a page up meant you were a geek at best or surfer riding a limited version of the web via AOL (or something.)
A few years later, the grassroots of the web passed along to business and now it is a massive advertising pool, mostly pimping products or productivity. But as technology grows, the pattern goes something like this:
1. A new technique is born and the technically proficient focus on new functionally rich features (features are the focus.) 2. Later, less technically proficient people want access to those features but the interface has to be re-addressed or “dressed” to accomodate and attract a larger audience. This is typically the first thing that changes when one web company aquires another. (usability and user experience become the focus.)
The majority of Web 2.0 is currently in stage #1 above. People want features… online features. But even Microsoft is figuring this point out and producing tools that move web “features” into a more aesthetically beautiful and usable realm (toward stage #2.) The world is moving toward stage 2: which will be web 2.0 in the form of rich internet applications that don’t all look like big plastic reflective gel-like buttons that a kid could use.
In that world, once again like stage #2 in Web 1.0, we will not differentiate between requirements about functionality and the experience around those requirements (as typically presented and designed by UX people using Mock-up tools that do not focus on the programmatic.)
Gregor
on 03 Jun 08Fireworks is able do add clickable areas and then export as image with HTML, looks like this. Really helps to get a fealing how to navigate trough the finished site without coding one line of HTML.
I don’t know if photoshop also has a function like that
Mat Atkinson
on 03 Jun 08If you need to share design ideas (scanned sketch, PDF, PSD) you can drop them straight into ProofHQ and collaborate real time.
You can even manage multiple versions, one after the other, so can progress from sketches to Photoshop to web pages in a single series of proofs.
And we’ll have some news on Basecamp integration shortly!!
John
on 03 Jun 08We use Adobe Illustrator for the initial mock-ups. However, I don’t think it’s necessary to mock-up every view in Illustrator, just the broad strokes. Once we’ve decided on a direction, we proceed directly into the css/html.
If you’re really spending three days on a photoshop mock-up, you either need training or more work.
I mean really … three days?
David
on 03 Jun 08I use Illustrator for mockups. Its a step up from Paper and down in detail from something like photoshop
Wolf
on 03 Jun 08Just a quick reminder, since some people don’t really get it. This is about application design.
Catoosha
on 03 Jun 08I’ve been told to use Fireworks as the merge of a designery look and feel and interactive elements. I haven’t made a set of wireframes using it, yet.
In my latest, I tried to convince our client that the PSD mockups were to show just the aesthetics. The wireframes showed the functionality.
This all simple approach never seems to work though, does it? The client is having me change names of things in the wireframes, as it stands, now, that could be easily done by the developers, at the final build.
nhoj samoht
on 03 Jun 08I usually scribble some notes as I think of them on scratch paper. Then hit the html and css. Couple hours later with some PHP spaghetti code I have a working site. Granted it may not be awesome jaw dropping design, but, I am not a designer either.
Weixi Yen
on 03 Jun 08Seconded
James Yu
on 03 Jun 08I actually have to disagree with you here. I typically use Illustrator to mock things up before going into CSS/HTML.
The reason I do this is that when I’m in CSS/HTML mode, I feel like I’m more limited in what I can actually design. When I’m in Illustrator, I have the freedom to explore different design elements that I might have overlooked in CSS. I’ve solved many hard design issues in Illustrator that would have taken me many back and forth tweaks in HTML and CSS.
The one thing I agree on is that Photoshop is a bit awkward for mockups. I only go into Photoshop before rendering design elements into pixels.
Scott Dividers
on 03 Jun 08I’ve been torn. I’m decent with CSS/HTML, but sometimes if the application requires, a more graphical approach is necessary.
One thing I just noticed today, was Yahoo released a bunch of YUI stencils that one can use to speed up the prototype.
http://developer.yahoo.com/ypatterns/wireframes/
Grant
on 03 Jun 08On some level, I agree with Jeff Croft’s analysis – but I wonder, depending on the design style you are trying to achieve with a site, if this still isn’t an excellent tactic for more ongoing sites. If you want a richer, more textured design, start with Photoshop, but flesh-out what amounts to a style-guide for the site, not every little detail.
For example, I’m currently working on a project where we based the initial design off of the designer’s photoshop mock-ups, but as we’ve gotten deeper into the project and added more features or screens, we can skip photoshop. We know the basic design of the brand and it’s definitely easier to code/design in a way that’s almost simultaneous, instead of stopping to mock something up (beyond paper) before starting the task. And in this type of situation, the client rarely asks for design changes because we’re adhering to the basic design tenets of the site.
c3o
on 03 Jun 08Things that work badly in Photoshop: - Tweaking anything with multiple instances: “Let’s make the links green”, “Try Trebuchet for the headlines” etc - Changing the flow: “Let’s try this box left-aligned”, “How would it look if there’s a picture in the middle of this text there?”, etc. is much easier to do in CSS than by manually moving pixels around. - Handling multiple pages: “On this sub page, the sidebar has item X on the top, the rest of the content is the same” - you don’t want to create a duplicate of the sidebar just to insert something new, in case you need to make subsequent changes - there’s really no good solution to mock this up. - Obviously anything interactive, as mentioned.
When I’ve used Photoshop for a design, I’ve often found myself spending way too much time trying to get around these quirks. Still a graphical editor is often indispensable (depending on the project’s goal) for initial stylistic mockups (after paper mockups): What kind of style are we going to go with for this site? But there’s no point in spending all the time to make the PSD pixel perfect: As soon as further tweaks are easier in CSS, I drop to that.
Shawn Ramey
on 03 Jun 08I would like to see some of your prototype sketches :)
Mike Rundle
on 03 Jun 08Andrew, I agree here. When I start with XHTML/CSS it’s for sites that are cleaner in nature and only have a few embellishments. However, I keep these design details up in my head and know that I have to hop into Photoshop to make them happen. I never just “add detail” at the end.
(Also, JF and others, I commented about an hour or so ago but it hasn’t shown up yet. Perhaps because I had 3+ links in the comment it got sent to spam? Thanks.)
brandon
on 03 Jun 08haha, no one ever said 37signals was a design shop
spanatko
on 03 Jun 08maybe we´re missing the point here, each and every application i´ve touched comming from adobe just didn´t make it to become the tool to run to when something needs to be done. I mean look at acrobat reader, I could make a dinner party faster than opening it up or editing something in it – just too bulky and the updates? I always wanted to hand my pc over for say 20 minute upades of a reader? Or what about in-design? Soo much fluff and nothing in. Photoshop is the same. I skip adobe completely – thanks, but no thanks.
SirGeekelot
on 03 Jun 08One more: Photoshop isn’t Fireworks.
Anonymous Coward
on 03 Jun 08@brandon haha, no one ever said 37signals was a design shop
Thats what 37S started as…
Kavalier
on 03 Jun 08I use Photoshop to help design major elements. For instance: a two or three column layout, buttons, gradients, rounded corners and all the fun creative pieces. For functionality, user interactions, and everything else I use OmniGraffle or Visio. For larger web applications it’s a great way to annotate the overall experience and the visuals make a great addition to the functional spec your downstream developers are going to need to finish the project. Photoshop has its place and using it appropriately can benefit any project.
James Thomas
on 03 Jun 08Ok… now present a few different options to a client.
Annnnd go.
Brandon Durham
on 03 Jun 08It’s uncanny. Just about every single design/development/business-related post you guys make here is something I already practice on a daily basis. It’s always good to hear it reiterated by a well-respected company, though. Then I can just say “See, I’m not crazy for doing things this way!”.
I far prefer doing the design in the browser (that is unless it’s a graphics-heavy piece, which I don’t really do anyway). Then there is no guessing game about whether or not something will actually work, or hours wasted trying to make it work in various browsers.
So, thanks for backing me up 37signals!
Matt Radel
on 03 Jun 08Just as Wolf said above, the realm of context is application design. Skipping PS makes total sense when working within an application with an established aesthetic – as a matter of fact, I’d say it’s preferred, as it keeps you from drifting too far away from the look and feel. Also, the distance from A to B is shortened, and you get to quickly interact with a living, breathing screen.
But this does fall apart when mocking up a full site (which I don’t think 37s is advocating). Linked static mockups have worked the best for me to communicate the look and feel to a client – without confusing them.
Also, why on Earth are people using Illustrator to mock up sites (I’m not trying to be an ass, I’m really curious)? Do yourself a favor and try Photoshop or Fireworks for an extended period of time. I’m betting you’ll save yourself plenty of time (and your sanity), or it will at least make a little more sense.
Amy
on 03 Jun 08People love my design work. I don’t skip Photoshop.
Sites designed in the browser look and act like sites designed in the browser. If you want to build an experience, not a web page, letting the browser dictate how it looks and feels is probably not the way to go.
That said, I don’t start in Photoshop. Except when I do.
Tyson Evans
on 03 Jun 08I’ve found InDesign to be useful for sketching (admitted bias: it’s a familiar tool from my days in print design). I often start there for basic structure and then quickly leap to HTML/CSS.
It’s better suited for typography than Photoshop—particularly when creating and tweaking stylesheets (you can emulate a lot of CSS via paragraph and character styles and experiments with color/typeface/leading/etc. are instant).
Also: Grid systems are easy to work with via columns; libraries can contain frequently-used elements; there are basic tools for shadows, rounded-corners, gradients, et al.; and it imports a ton of native file formats and creates clean PDFs for distribution.
Vance Lowe
on 03 Jun 08This is pretty much why I skip the photoshop phase as well.
It’s just time wasted and I usually decide against certain aspects after photoshop anyway.
Joshua Emmons
on 03 Jun 08Just had a project completely derailed by a manager’s insistence on comps. We had a working app written from the ground up in a month that we were making iterative improvements on. Lots of momentum. Building lots of steam.
All of a sudden it was decided that we needed to jump ahead and design several different “final” interfaces in photoshop. Comps were requested. Pictures were drawn. Three weeks and counting and not a bit of progress has been made on the app itself. There’s so little energy behind it that it may die on the table — all because someone wanted carts before their horses.
Chris Jones
on 03 Jun 08i am going to try this the next time I have to do any screen design (which will be soon)
Amy
on 03 Jun 08To some commentors:
If you’re avoiding Photoshop comps because of your clients’ reactions and assumptions to something that looks “finished”, that’s a different situation altogether than avoiding it because it harms your design process itself.
Wrangling clients is a necessary (if sometimes unpleasant) skill. These two books have really helped me: “The Secrets of Consulting” (Weinberg) and “Management of the Absurd” (Farson).
Florent V.
on 03 Jun 08It’s funny to see that most people here do both the design and the code themselves, and so get to chose between designing with some graphics tool or directly in HTML/CSS. I don’t. I work from the design of other people and do the HTML and CSS (and occasional JS). I’m not sure what the English name is for that activity.
Most graphic designers I know either don’t want to code or don’t want to do it. So I, as a HTML-CSS gury, get to work on their designs. And let me tell you one thing: designs crafted in Fireworks are much more web-ready than those crafted in Photoshop. Fireworks uses pixels for rendering a lot of things. Adding a 1px border in Fireworks means you actually get a 1px-wide line, while in Photoshop you may get a blurry 2px-wide line. Of course, I guess when you’re a web-aware Photoshop guru, you’re able to produce great designs that don’t have blurry lines, but Photoshop is still made for 300dpi rather than 72dpi.
To all webdesigners who want to hire someone to do the code: Fireworks is great. Other tools might be appropriate too, but those directed at the print world… not really.
nate
on 03 Jun 08HAHAHAHA.
No wonder your sites look ugly. Well… perhaps not ugly, but definitely boring.
Compare this to apple.com, which has an excellent, iterative and photoshop-based design process.
Anonymous Coward
on 03 Jun 08It amazes me how many people call themselves web designers but their sites don’t work, or just fall apart in the most commonly used browser.
G.C.
on 03 Jun 08CSS/HTML can only be used if the person doing the design is skilled at it, and I am sorry but the developers I have worked with may know CSS/HTML but have no idea about design.
I am surprised nobody mentions tools like Axure, iRise or even Visio as they are suited for interface design than the over complex Photoshop.
How about this scenario; start with paper, document using Axure and get a quote to get the software developed?
Kinimat
on 03 Jun 08For web apps I wouldn’t use anything but Illuatrator for quick mockups. Well.. paper first and then into Ilustrator.
Now that I think about it.. every single design job I do starts in Illustrator.
Dennis
on 03 Jun 08When it comes to web design and development, I can’t help but use designing and building a house as an analogy, especially when that question first comes up “How much?” – Well, how many rooms? Stainless kitchen? You get the picture …
From my experience, it is much easier to sell a “house” based on artist’s impressions and 3D fly-throughs as well as floor plans. How excited can clients get about seeing a timber frame on a building site if they can’t imagine living in it?
My opinion is, if Photoshop or “design” gets in the way of your process, you are more of a web developer than a web designer. Some can do both and some simply work best in a team where these tasks are broken up according to skillset.
Repo
on 03 Jun 08You skip Photoshop? Just checked out your sites … and it shows. [And not in a good way].
beto
on 03 Jun 08During the many years I worked on web design, I was the sort of one-man-band doing both the design and coding on sites (and still do at times). As such, I usually begin comping in Fireworks, but since I already know from experience what can be accomplished simpler using HTML and CSS design-wise, I don’t waste time emulating every link and font out there – what interests me the most during the comping phase is to solve the overall aesthetical concerns of the design. I try not to think on CSS/HTML terms at this time, as it tends to stifle my creativity during the process (that will come later). I however always try to come up with a design that can be adapted as quickly and painlessly as possible when it’s time to start coding.
Problem is, as some others point out, designers who are at least a tad curious about site code and how it works are few and far between. Hardly a problem with your typical garage startup (where most members are one-man bands out of neccesity), but try finding those qualities on a design shop with dozens of people on charge – it’s like herding cats.
Barry
on 03 Jun 08For me it depends on what problems you are trying to solve. If you’re trying to map the functionality of your site/application, you should maybe consider starting on paper and include some aspect of user testing – paper prototypes, card sorting etc. If you’re looking to solve visual design problems an image editing application ducks Photoshop vs Fireworks debate is surely the quickest and best tool. If you are trying to arrange text on the page as it will appear in the final product, sure, throw down some html and css. A successful project should probably include all of these.
Tom
on 03 Jun 08You should realy try AXURE RP. Its the best link between paper and HTML/CSS. Actualy it is functional HTML.
Noel Jackson
on 03 Jun 08But, your products resemble HTML interfaces. You build products.
So, your workflow works well for you.
But, what if you were actually trying to use some graphic design techniques that required more than lines and square corners?
It’s an interesting methodology, but I think it works for your particular design niche – application design.
I’ll waste some time in Photoshop to find a beautiful and elegant solution, if that is what makes sense.
It’s like saying “cars suck, don’t buy or use them ever,” when you live in NYC. Try living in Detroit without a car, it’s next to impossible.
“Different strokes for different folks,” as they say.
Umut
on 03 Jun 08Every time skipping Photoshop seems easier but at the end I don’t like my Html design and re-design it in Photoshop then html-xhtml :)
Daniel
on 03 Jun 08I find 37signals apps mostly clean and noise free. There’s a focus on the design being pleasantly usable. I can see how jumping straight to markup would help this.
Most web work comes down to selling something and client X usually wants to show off that something. The results can end up being design for designs sake, or worth > 1000 words.
Personally I reckon text will always be king. Everything else should be understated, just enough to enhance usability and add a little elegance to user experience.
But I mostly write code, so $myOpinion += this->takeGrain(‘salt’);
agi
on 03 Jun 08How can you actually go through the design process without any actual design. How is this solution expected to work in a team environment?
its fine not having to mock up every single template after an initial look and feel is completed if your a one man band, but this would be ridiculous in a project team, let alone leaving most coder’s to interpret a “design sketch” would be disastrous to say the least.
No matter if all ur sites is just a plain headline/text site, it still needs to follow some sort of design process(actual design mocks) if its going to be successful.
Jeff Croft
on 03 Jun 08It’s actually not like that at all, because all Jason said in the original post was that they use this methodology and it was for them. He ever tried to suggest it would work for everyone.
Wow, did I just defend the way Jason Friend worded something?
Weird.
Jack Hughes
on 03 Jun 08Using Photoshop to design a mockup is like using a Caterpiller Back-Hoe to work in your garden.
I swear by Fireworks. Adobe really has positioned FW as a prototype tool.
With their pages feature you can layout master elements that span all web pages and then create layouts for each webpage that you want to demo with the client. Slice to taste then FW will convert slices and HTML for all the pages so clients can click from page to page. Obviously this approach is not for anything beyond prototyping and it really does nothing for those working with a CMS (which is the case for me).
Besides I use Fireworks because I can’t sketch to save my life. It’s the coffee. I just know it.
Jeff Croft
on 03 Jun 08Err, Jason Fried. Sorry about that. Typo. Muscle memory and all…
designer
on 04 Jun 08It’s obvious you guys skip photoshop, all of your products look like they were designed by programmers, ie. plain and simple. So I really don’t think this article was necessary from your standpoint.
Noel Jackson
on 04 Jun 08@JeffCroft said: “He ever [sic] tried to suggest it would work for everyone.”
He also didn’t suggest it wouldn’t work for everyone.
37signals is very strong with their opinions and I was extrapolating. I stand by what I said.
Perhaps the post resonated differently with me than with you.
iDesign
on 04 Jun 08“Why we skip Photoshop”
Because you are programmers, not designers!
Brade
on 04 Jun 08Jeff Croft hit the nail on the head. Your design patterns are so simplistic, it’s no surprise to find out you don’t use photoshop. This simple, clean approach seems to work well enough for you (as it does for Google, for instance), but the best-looking sites out there are no doubt born from a Photoshop file.
Iain Fraser
on 04 Jun 08I have to say I agree with Jeff Croft. The Photoshopless workflow might work well if you’re on a small team or your design aesthetic does not require it – and you have a bunch of gun developers. But when you’re in a corporate environment with developers of different skill levels and different ideas of “what looks good” a sketch just doesn’t cut it. Somewhere in the process, someone needs to say “this is what it’s going to look like” and that someone should be the graphic designer/creative director. Preliminary sketches are fine, but eventually you’ll need a blueprint.
If you have a mockup of EXACTLY what you are expecting, developers are not going to come and harass you every five minutes asking you to explain yourself.
I think the question of clients seeing photoshop mockups is really one of education. If your clients think you’re almost done when you show them the mockup, then it’s because they haven’t understood your process properly. Teach them before you start work.
The other good thing about presenting a phockup (to coin the phrase) to an educated client is that they have something to sign off on, so there’s no nasty surprises when the job’s almost complete and the client doesn’t like what you’ve done. I guess the alternative to this is an iterative process where the client is heavily involved throughout the project. I don’t know about you, but my clients have businesses to run and simply don’t have time for that level of involvement.
Personally, I’m glad it works for you, but having tried it both ways, I find sketch-then-phockup is far easier.
Don Schenck
on 04 Jun 08Paper -> web -> refine.
That’s my method. I spin in “refine” until the customer says “Stop” or runs out of money.
Works for me.
Adam Fox
on 04 Jun 08Skipping the ‘PhotoShop’ phase is all well and good if you have an initial design to work from. But if you’re coming up with the original visual design you’d have to be a complete fruitcake to try and do it with HTML/CSS. I’m quite happy to design new pages based on an existing theme, in fact it’s a fast way of working, but when you’re starting from scratch or an initial sketch then you’d better be firing up PhotoShop before launching into actual coding.
MT Heart
on 04 Jun 08I can see it coming now – “Design eye for the Getting Real guys”
http://designeye.org/
Ashley
on 04 Jun 08Cannot disagree more, maybe its because I’m not a designer, but I find a Photoshop mock-up to be the KEY to getting my limited design skills working best.
Eric Ferraiuolo
on 04 Jun 08I do agree with this this article in certain situations, and especially in the situation I’m in at my current position. I work on the Frontend team whom get’s designs from Marketing (yeah it sucks) where the Marketing team is made-up of non-web and print backgrounded-people (I bet some feel my pain). Dealing with this dynamic leaves incomplete designs (in Photoshop of course) that are suppose to be specs. which don’t clearly define the different states that occur when people interact with web applications.
Although when I’m working on my own projects, and since I understand the dynamic nature of web interactions; I can use <strike>Photoshop</strike>Fireworks to realize my GUI with a toolbox visually describing the different states of the UI components. Also with a having a great understanding and experience with the “limitations” of XHTML and CSS (plus JavaScript) I know what GUI design path and patterns to take that make implementation reasonable [and semantic, content is king right?]
pete k
on 04 Jun 08Kinda shocked to read some of these claims/complaints. To be honest this might explain some of the usabiltiy complaints I’ve had with Basecamp over the last few years.
I would highly suggest considering InDesign as an alternative to Photoshop for mockups. It erases all of your complaints against Photoshop and allows for a more thoughtful apporach rather than jumping right into HTML/CSS.
I would say your suggested approach is borderline reckless and extremely limiting for 99% of UI designers. Really this solution is like rushing to the finish line without the baton.
Stefan
on 04 Jun 08Best mockup tool I’ve found is Excel. We can email it around to clients, put in comments, simulate interactions by hyperlinking to other tabs in the sheet. Works like a charm.
Just start with a blank sheet and size the cells square like a graph paper, and start drawing in text and boxes. Duplicate the tab and build the next state and hyperlink it to make it all work.
some guy
on 04 Jun 08@Stefan: those who do not study Joseph Muller-Brockmann and grid-based design are doomed to reinvent it, poorly.
Brandon
on 04 Jun 08Holy tamale…do you guys philosophize this much about everything??!! Doesn’t sometimes the “less is more” involve making some philosophies/issues less complicated?
Neurofaux
on 04 Jun 08Why create a mock up in photoshop in the first place? Use photoshop for designing “elements” of a mockup, but not for the entire mockup! like buttons, ads, header/footer graphics, etc.
Loic
on 04 Jun 08I have been designing websites for a long time and I find quicker to get the look of a site right in Fireworks. Much easier than Photoshop or HTML/CSS.
Mathew Patterson
on 04 Jun 08Seems like a lot of people didn’t notice the blog post is called “Why we skip Photoshop”.
Jeff Croft has posted some excellent reasons it might not make sense for you to skip Photoshop. He even posted them in a non-confrontational way — you can’t ask for more than that.
daus
on 04 Jun 08well, it’s a mockup anyway.
Tyler Kremberg
on 04 Jun 08I’ve found JumpChart to be pretty handy to build out interactions… It lets you export as well, which basically generates a Rails view directory to get things going.
Alex
on 04 Jun 08Nothing in this list convinced me to “skip” photoshop.
I used to actually go straight into the coding stage myself but realized how wasteful it was to do that… as any images needed to be created and mocked up in photoshop anyway- the extra few minutes to create the rest of the layout wouldn’t slow me down much and in fact help me get a better idea of different variations of the layout itself (without having to edit 5 – 10 classes).
Going from a sketch into coding is the same as going from photoshop into coding… what time is wasted?
And theres not much akward with photoshop… almost all simple tasks can be done with keyboard shortcuts.
Well I’ll stop there. I’m not one to post comments usually but i really could not disagree more with this post! Not your point of view but the points you put across are totally wrong! Maybe you should spend more time with photoshop…
drawcode
on 04 Jun 08I think a major problem with Photoshop for we comps is some people use it for wireframes/reality.
When most comps are really supposed to be sketches, because it is on their screen clients dont’ understand when some tet areas don’t exactly fit the areas. Or when navs are larger than the comps had.
Photoshop is a great tool. It was also very good for magazine comps because it was a straight translation. But it does not do textual based layouts well.
And lots of Photoshop designers have never put a site in production so they do things you would never do in a document based system.
Photoshop comps when viewed as sketches work, when viewed as what the final site will look like exactly is a bit troublesome, always. It is always better when prototyping in code/style/css/XHTML.
Sam Figueroa
on 04 Jun 08I totally can see why you don’t use it. But if you aren’t working on web-apps and look over to the ‘hello Mr. Business guy I’ll build your corporate website for you’ type of jobs then you usually don’t ge around it.
These people are not familiar enough with creating websites to see what the paper mock would turn out to be in code. And since they often want (and make ‘em pay for it) a few designs to choose from I find it easier to whip some of them up in Photoshop.
I guess you could say the same thing about Photoshop usage as in point 5. If you’re not fast enough to shell out a few designs in a day then work on being faster in Photoshop.
And you can substitute Photoshop for Fireworks or etc. All I’m saying is with clients that have a hard time imagining what they want and what to expect from a paper mock it might be better to use more visual tools.
But as said, I totally relate to your claims based on web-app development.
Jagan Ram
on 04 Jun 08I think one can fairly achieve the look and feel and able to feel the user experience to an extent If you skip photoshop or illustrator what you will see is a deadly boring page :)
inboulder
on 04 Jun 08Sorry guys, but after seeing many of your designs I’m surprised y’all do any upfront design work at all…
wenbert
on 04 Jun 08i think it totally depends on what kind of website you are making. if it is simple enough to do directly in HTML/CSS, then why not… but it would be crazy do go directly to HTML/CSS with a design that is complicated (lots of images, gfx stuff, etc)... the 37signals site, i would directly HTML it… then put a bunch of images and gradients while i am at it…
kpitonak
on 04 Jun 08Not sure if everything is OK at 32signals.
elmer fudd
on 04 Jun 08I hand-code css and html, but my preferred mock-up to final software is Illustrator. I favour boxed layouts and Illustrator CS3 is ideal to first mock-up a pixel-accurate wire-frame, then layer it up slowly with colour areas, icons, fades, shadows reflections, pictures etc… Illustrator has a nifty crop tool ideal for boxed layouts that can overlap. The crop tool has improved a lot since CS2, but it could be better. The best feature is the fine layer control that helps you build a well organised document, then exporting different views as jpg, png, pdf etc…
Lachlan
on 04 Jun 08I’m glad this is titled “Why We Skip Photoshop”, not “Why You Should Skip Photoshop”, as I find the reasons listed above weak and very poorly justified.
robert
on 04 Jun 08I have to disagree. I can root out pretty much all interface design problems with photoshop mockups only. i can make much more detailed interfaces much faster with photoshop. To try achieve the same thing in CSS would take forever.
If your detailed orientated.. where everything from the font-weight TO white spacing TO color TO images used.. are part of the user experience… then photoshop is essential for efficiency.
Personally my design process is 1: text list of possible modules 2: grey box wireframes in photoshop 3: mockup in photoshop (iterative) 4: html
I think the stuff you do is so super simple / light on functionality… maybe you dont need photoshop so much. Also you seem to be from the useit.com school of design… ultra low detail. It works if youve got the rep to back it up! Us commoners need a helping hand from photoshop to sell our stuff
Will
on 04 Jun 08I disagree with this. Being a web designer I find it essential to create a mock-up in Photoshop for a few reasons.
1) To make sure the client is happy with the design. 2) For myself to see exactly how the design will/should look and potentially function.
I think it would be near impossible to create great looking websites that look unique and have a touch of creative flair if you jump straight into the coding.
Its like having desert before your starter!
Joshua
on 04 Jun 08I think this is a good approach, and after reading threw the comments, I think some of you are isolating the concepts. I don’t think he is saying to not use photoshop at all, but to use pencil and paper and HTML and CSS to get the functionality and basic layout done, after all that is what matters. after that is done then you can go back with photoshop and create all of the visual elements that cant be created with CSS, and you know exactly what space is going to be required for each space. you are also going to be able to design with the applications unique functionality in mind, i.e. you will know what elements need to have extensions, alterations or various version to accommodate the functionality. Yes Design is important, but when I start in photoshop and I end up with something I love, I often want to sacrifice functionality because it does not fit the design., Ultimately the functionality takes precedence and you end up reworking the psd. which is a waste of time. hence the point of the article.
Lensco
on 04 Jun 08Pretty heated debate here. I never understood why so much people mock up in Photoshop. I’m an Illustrator man, although I rarely make more than one mockup, and go straight to html/css after that.
Illustrator gives you great control over pixels and bitmaps, plus the delight of vectors. There’s barely anything I can’t do in Illustrator. Photoshop to me is for editing pictures, not for designing.
Samo
on 04 Jun 08Seriously, people are using InDesign and Excel for mocking up websites? Wow.
James
on 04 Jun 08Some very good points made here. As a designer I love the details, and use Photoshop right up until the typography phase of the design, where I will typically play around with CSS typography against the right coloured background and then ‘print-screen’ back into photoshop to complete the mockup.
There’s really no point in showing a client a full photoshop mockup complete with beautifully rendered fonts when that’s not how it will finally look.
Stephen Carr
on 04 Jun 08Like many other I find it hard to believe that people in the business of making web pages still think PhotoShop is the tool for rapid prototyping. The answer is not just go straight to HTML/CSS (fuck it we’ll do it live!). The answer is to use FIREWORKS!
I am astounded that still so few people give this product a chance. It is designed for “rapid website prototyping”. PhotoShop is designed for editing photos. What is wrong with everyone. Of all people I would have thought that 37signals would have at least given Fireworks some recognition, but no you chaps are just as single minded as anyone else. HTML/CSS or Photoshop, what a stupid way to look at the problem.
You know, you can edit the Fireworks PNG and then just click save and upload it to your server, no need to export. Anyone who doesn’t have Fireworks will just see the visible layers in their preview application. No fuss, just save and deploy. Granted FW PNGs can get kind of large but the speed you can work far outstrips fiddling around with HTML and CSS no matter how good you are.
I won’t go into detail about all the other whizzy prototyping things FW does, like clickable areas and quick HTML exports and slicing etc. etc. I think I have said enough (tough day in the office).
yahnyinlondon
on 04 Jun 08My normal workflow is quick sketches > omnigraffle for wireframes > prototype from omnigraffle for testing (if needed) > fireworks for visual design (if needed) > hand off to developers to produce code.
I find it quicker to replicate wireframes than code straightaway although mainly because it’s not my strong point (coding).
I still can’t believe that people use Photoshop for doing web design work. It may have other features but it’s still a photo editing software at its core! I used to use it myself, until a boss made me switch and I haven’t looked back for years. I guess I’m biased ;)
Sin Trenton
on 04 Jun 08Interesting debate, though I think I can see a pattern, the classical camps that have been at it since umm.. at least when I started with Web back in 95.
Camp D: “You don’t care about the ‘look and feel’. Your stuff may work, but it is ugly”. Camp F: “You only care about pretty pictures. Your stuff may look good, but it doesn’t work”.
Camp D: “Visual design is important, just because it is good design, it doesn’t have to mean it doesn’t work!”
Camp F: “Functionality is important, just because it is usable services, it doesn’t have to mean it is ugly!”
Most cases, I have seen this because they fight for the same (limited) project budget.
But if there is one thing I agree with, it is cubiclegirl’s experience. Showing delicious, Photoshopped screenshots too early in the project to some customers can be lethal. “Wow! It looks great. So we will launch next week, then? You guys are almost finished”.
Of course when too early is, is context based, but I have seen more than one web project where they start with the AD doing some “look and feel” weeks before anyone with more advanced knowledge of XHTML/CSS is even involved in the project.
Botsky
on 04 Jun 08What is the point of this article?
One thing is a wireframe or UE document made by UxA/IxDA/IAs and the other is a design mock up made by designers for the evaluation of graphical ideas. SO if you are telling me there are people using Photoshop for IA deliverables, I say “so? good luck then”.
Photoshop is not even a natural choice compared to the more streamlined although still slower to use InDesign or, God forbid, Illustrator.
What is the next article: why we skip olive oil to quench our thirst?
Peter Robinett
on 04 Jun 08As HTML/CSS documents, as text files, are much easier to version control, track changes, etc.
Martin Ringlein
on 04 Jun 08That is a pretty easy and bold statement for a company whose products all resemble one another in aesthetic look/feel/structure—were any of the 37signal products ever designed in Photoshop first?
When uniqueness is not a desired trait, then yes—who the hell needs Photoshop!
Dimitrios Gianninas
on 04 Jun 08Good points, but Adobe is working on that and with the emergence of Flex as a tech to use to build web apps, soon you’ll be able to use Thermo (http://labs.adobe.com/wiki/index.php/Thermo), to take those Photoshop mock ups and make them usable and then create Flex apps. Of course it is useful for anyone doing HTML but for those using the latest technology, it improves the design-developer workflow.
Martin Ringlein
on 04 Jun 08The title of the post should have been … “how we created a product UI design template that put us in a position to not need Photoshop ANYMORE”.
Andri Sigurðsson
on 04 Jun 08Who uses Photoshop anyway? Pfft! Fireworks is so much better.
Matt Radel
on 04 Jun 08@samo: And I was concerned about folks using Illustrator…holy crap. To each his own I guess. :)
@Martin Ringlein: Good call. It’s not like they’re saying “why we’ve never even opened Photoshop”. Some folks might be taking the title a shade too literally.
Andrew Brown
on 04 Jun 08Why waste time on a mockup that isn’t functional? Good to know I’m not the only one who doesn’t bother with these.
Ben Whitehouse
on 04 Jun 08I think the real message here is do your sketches first. I couldn’t agree more.
Photoshop I will agree is not what I enjoy comping website design with, but I’ll be honest – not having a clear, agreed upon, details worked out design as you enter coding is a dangerous undertaking. I, personally, would never start to code without signed approval from my clients on a design and I find most clients need something more substantial than a sketch to sign off on.
I use Illustrator to flesh out the basic design, and get the look and feel (colors, typography, alignment) down for a client’s sign off. I am much faster moving a column in Illustrator than I am in CSS. I do however follow all the same rules in Illustrator as I would on the web. I create columns and create style sheets to control typography – which means I’ve done my work before I head to CSSEdit to code.
Yes I have to do my work twice, but I only code once.
Jason Grant
on 04 Jun 08Excellent! Very well put together. Agree with you 110%! So glad you wrote this. I believe in exactly the same things for exactly the same reasons. I find this IS the way to develop proper web sites.
Ryan
on 04 Jun 08Do what suits you and your practices best, Jason is wrong but at the same time he is right… for himself.
Martin Ringlein
on 04 Jun 08My last rant on this, I promise. As a designer, posts like this just really bother me because of what Jason is implying.
Again, my issue isn’t with the post or its content (both very good), it is with the implied meaning behind it that will mislead and misguide designers, developers and naïve upper-management.
Alix
on 04 Jun 08I’ve been doing website/web app templates/mock-ups for a looong time (since 1997). For almost all websites, you need a Photoshop mockup, period. For web apps, on the other hand, it’s a huge waste of time.
A note for Photoshop design gurus: I don’t care how beautiful your design is, you can NOT be a good web template designer without thoroughly understanding the capabilities and severe limitations of HTML/CSS. Designers are taught to think statically, for print. Web designers must be a different breed, willing the get their hands dirty with some code. Stop being lazy, and buy a book. Or stop calling yourself a “web designer.”
A note for web app developers: Photoshop is for logos, icons, and background patterns. Everything else should be scratched out on paper (or a nice big whiteboard).
One of my team members and I sketched out every single view for a huge social networking app in two days (~60 views total). We then built all the HTML/CSS mock-ups in another two days. If we built them all in PS first, it woulda taken months!
If you allow yourself to get bogged down in a project, you will begin the resent the project. Once you resent a project, you lose the will for it to succeed. Don’t let that happen.
Juan
on 04 Jun 08This is revolution! Thanks for share your point of view about this emblematic issue!
keyrocks
on 04 Jun 08The article at the top is more about two things than one, with the first not necessarily required for some website templates.
1) The Creative Step – starting with a static design image generated in any image design application (Photoshop being one). This gives you the overall design when you want to achieve a layout that goes beyond simple division-based background images and colors.
2) The Application Step – converting the static image – slicing it into parts – to fit into the CSS/HTML elements of your template file.
Some projects don’t require the first step but there are times when it is required to achieve a desired outcome.
Jay Gilmore (smashingred)
on 04 Jun 08After reading the number of comments here disputing the point of the article, lets not forget that 37 Signals are primarily developing applications not websites (yes they’re web apps but just because it is online doesn’t make it a website per se).
Developing a project to be useful, especially the 37Signals way of faster iteration and less feature it IS an aesthetic design choice that may not ever require visual design beyond gravy like rounded corners and gradients.
I design websites not web apps so I can’t rightfully say that what makes sense for me makes sense for an application dev.
On the flipside we shouldn’t be complacent about our workflows. Maybe PS is not ideal but we have just fallen into a rut. Try other methods, try to improve productivity in other ways, maybe working in PS is perfect but maybe it is just what you’re used to.
Hey, many people are still used to visually creating web sites in Dreamweaver with tables spacing text with countless .
Challenge your methods, question your faith. Then know that you are doing it the right way for your team—for your project. Otherwise you may miss finding a better way.
Jay Harlow
on 04 Jun 08I use Illustrator, which obviates points 2,3, and 4. It’s quick, it’s not exact, and its type tools are much better to work with.
Of course, it’s important to recognize the limitations of a static mockup. However, I couldn’t agree less that “details are for later.” The devil is always in the details. It may be just “skin” to a developer, but that is what the user sees, and reacts to. It is not an afterthought—to the user, it IS the product.
Steven Woods
on 04 Jun 08Photoshop – not least because I can make changes to the information architecture easily without having to redraw the whole thing (as with pen and paper).
Then I develop it.
The design / IA for me is the thinking phase, the development phase is the finalisation of the product.
Pen and paper is all fine and dandy until you need to display things with pixel precision. You cannot plan properly (sure you can get a rough idea) because you cannot SEE that perhaps a column in a specific place is a bad idea due to restricting content size. You need precision, because you’re building a precise interface.
I notice this article is entitled “why we skip photoshop”. Well, who cares? You don’t have a need for Photoshop as your products are very basic interfaces – which is cool… that doesn’t make it right for anyone else who has to come up with more challenging or attractive layouts.
Sometimes I wonder why you guys post this kind of stuff because your process doesn’t fit with the majority of people and I’m starting to feel like you’re forgetting what design and development outside of your own products is actually like.
Brent
on 04 Jun 08We usually do more than one comp for a client. So this might not work because of this reason:
The time you might waste in photoshop where you have to “rebuild” it in css/xhtml is equivalent to the time you might be wasting in css/xhtml trying to make it work cross browser.
Also, sometimes the person designing it is not the person developing it.
Al Abut
on 04 Jun 08I just picked up an excellent book that applies the “rapid paper sketches to clarify problems” approach even further – to business problems and other general issues. It’s called The Back of the Napkin: Solving Problems and Selling Ideas with Pictures (Amazon) and specifically calls out how the constraints of drawing with a thick sharpie on a small canvas helps rather than hinders the process. It even has a similar section on why trying to do the same thing in the computer has drawbacks related to speed and the temptation to diddle with the asthetics instead of simply expressing the idea.
I’m pretty damn ninja with Fireworks and for years I used to think that I could comp up greybox wireframes in FW or Omnigraffle quicker than anyone else could sketch them up on paper or a whiteboard. I was wrong.
PS Guy
on 04 Jun 08NEVER SKIP PHOTOSHOP
Piyush Goel
on 04 Jun 08Thanks for your views Jason.
I find it easier to mock up the very first template or the overall theme (with color schemes, buttons, gradients, backgrounds, etc) to be designed in Inkscape and then each page/detail that is added to the website, I iterate in HTML/CSS to make it interactive.
Inkscape has the simplicity of Paint but the strength of Photoshop, almost like a ‘37signals version’ of Photoshop!
This makes me save time.
Alen Ribic
on 04 Jun 08IMHO, there is only one good reason to have non-interactive mockups and thats if you have clients that associate clickable == functional.
JY
on 04 Jun 08I realize this article is about how you guys work. but i still find most points are extremely weak.
seeing how plain your interface looks, why even bother with pencil&paper? just go straight to html/css, follow the same logic why you skip PS.
“Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at, but about building something you can use. When you’re just worried about how it’s going to look, you spend too much time on production value. “
your value of productivity is rather skewed. function&form is what makes Apple successful.
Tor Løvskogen Bollingmo
on 04 Jun 08Alix: Can you point me to your huge social networking app? I wanna see it to believe it.
john herr
on 04 Jun 08screw photoshop for even backgrounds and logos. I use on-the-fly single-pixel divs with a background color for all my production graphics.
max ivory
on 04 Jun 08On the whole I disagree Jason.
If I was designing my own site I might jump straight into to HTML/CSS, and yes Photoshop wouldnt really be that necessary perhaps.
However, it is still very useful from a business perspective for the client to be able to visualise something that looks highly polished. Generally I think they understand the concept of a static mockup – also the great disadvantage of going straight to HTML is that the client says “why doesnt it work when I click on X Y Z?” Very annoying!!
The trick is to nail the photoshop 85 or 90%, only do one or two drafts, and then tell the client you can make further alterations later during production.
What you want to avoid is spending weeks making photoshop alterations, as it is certainly true that this is tedious and not particularly efficient!
David Pirek
on 04 Jun 08I have come to the same conclusion. Although sometimes I get criticized for having my sites not finished.. this works really well for me. I think the primary target for this approach is web apps and perhaps social networking sites, that require rapid dev.
io
on 04 Jun 08...
As posted earlier, BAM:
Repo 03 Jun 08
You skip Photoshop? Just checked out your sites … and it shows. [And not in a good way].
Yup. PWND.
...
James
on 04 Jun 08My team starts with sketches and discussions – real-time collaboration either in-person or using tablets/screensharing/voice, then we move to INTERACTIVE WIREFRAMES that we create with Axure or similar(http://www.axure.com/) and then begin Photoshop “skinning and styling” towards the end of the wireframing process, in parrallel. Works great.
Jason J
on 04 Jun 08On topics like this, I’m against setting hard and fast rules like this. It always boils down to the needs of the client.
Photoshop can be used very usefully if what the client wants to see is the graphical part of it. Then, the next step can be the HTML/CSS mockup. Sometimes, you might want to see the details of the graphics that cannot be solely done in HTML/CSS.
If what the client wants is just the basic tone and layout of the site and the functionalities as part of the wireframe, then HTML/CSS is the way to go.
Paul
on 04 Jun 08This could also be why your css file for HighRise is over 100 k for such a simple design. I’m guessing there are lots of overlapping styles, or repeated styles. Not having a clear guideline can lead to bloated CSS and HTML (which is also pretty large from what I remember)
Morning Toast
on 04 Jun 08“Photoshop is repeating yourself.”
I’m sure I’m not alone in that I design/create most of my web graphics in Photoshop. So if I have to use Photoshop to make the graphics, how is it wasting time? Where are the images supposed to come from if I go from sketch to HTML?
Photoshop actually makes the coding period faster and easier because all the positioning has been done in Photoshop. I just take the Photoshop numbers and add them to my CSS, make my DIVs, and done.
Plus I’m a fiddler. I always sit on a design for at least 24-hours before I act on it. And Photoshop lets me design and ponder before I do put work into the raw HTML. I’ve had many, many designs that look good after I’ve been staring at it for 8 hours but the next morning look horrible. Had I spent time HTMLing and then had to basically restart…now that’s wasting time.
Everything else…I basically agree. I guess it can be said that Photoshop (and the likes) is for disciplined designers that can see past all the extra tools and worry and actually make it an valuable tool.
Vic Carter
on 04 Jun 08Creating generic starting templates for your CSS, HTML and PSD’s is the best way that I have found to speed up production. For me the Photoshop mockup is an essential part of the process. I have gotten into the habit of organizing my PSD files in much the same way I do my sites, creating separate group folders for page elements, allowing for not only easy cutting of the initial design, but also enabling me to make tweaks to navigation and page graphics without having to alter my CSS or HTML layout after the fact. Point being, no matter what your process, a little pre-planning and standardization wherever possible can go a long way.
Cormac Kelly
on 04 Jun 08I’m happy to see there are others using Illustrator for mockups, I use it for all my initial layouts (after a quick sketch or two) and find it much easier than PS to make changes, flip columns etc.
I’ve used Axure RP for larger projects before but found it a bit of a waste of time because it’s too easy to get sucked in and specify the interactions for every single page in the site, which isn’t necessary. Plus, in my experience, clients don’t really care about how it will WORK – they just want to see how it will LOOK, so for my sites a mock up is essential.
That said, I mostly design and build web-sites, and only sometimes web-apps, so for app developers working within frameworks I can see how it could be more efficient.
The other thing is that the time spent working on a design mockup isn’t wasted – far from it in my case – because this is when the ideas start popping out and improving the site.
jive
on 04 Jun 08I like to do several small drawings until I get something I like. Then I go into Fireworks and put the basic idea together rather fast and move things around and see how it looks. If I need really nice graphical stuff, I’ll build it in Photoshop and bring it into Fireworks. But I never completely finish the mockup in Fireworks, I just get to a point where I think its good enough and then start the HTML and CSS and make all the minor details in that. Once you know what you want its not worth building it pixel perfect in Fireworks/Photoshop.
Peldi
on 04 Jun 08I’m working on a tool called Balsamiq Mockups which you guys might like: http://www.balsamiq.com/products/mockups – it hasn’t officially shipped yet (I’m shooting for june 19th) but it might address some of the pain of using Photoshop for mockups you mention. Balsamiq Mockups is intended to be faster, easier to use, less detail-prone and collaborative (through your existing wiki system). Let me know what you think!
qwerty
on 04 Jun 08Has anyone used Apple’s Interface Builder application for sketching web pages? I find it a great tool for web applications that share a lot of similarities with “real” applications. All the UI elements are there and can be even tried out interactively in the Interface Builder: lists, buttons, tabs, texts, groups.
One drawback I found so far is that lists cannot be tuned to show items I want but use hard coded items. The mockup thus requires some imagination. I tried OmniGraffle as someone suggested but found that the UI elements don’t scale well as they do in Interface Builder.
Aaron
on 04 Jun 08I’m sorry, but this is close to one of the most retarded things I’ve read in a while. This is explains a lot.
Liz
on 04 Jun 08AS A VISUAL LEARNER PHOTOSHOP IS AN ESSENTIAL PROBLEM SOLVING TOOL. IT IS A MANDATORY INTERMEDIARY STEP BETWEEN IDEA AND SITE.
You have a point but it’s definitely something that’s personal. The style of 37signals visually reflects your preferences. It’s low graphic high text, low in colour, high in compartment. It serves the function.
Some people are visual learners. Personally I design everything in photoshop with only very basic hand sketches. Photoshop is for graphical elements only. Any text in my layouts, or other elements that are prone to change, are used only as a guide. I have a feeling of how it will work once coded, 14 pt arial is going to look much different on screen but I’ll adjust the code to fit what the 14 pt looks like visually in photoshop, or vise versa.
IT’S ALSO AN EXCELLENT PLATFORM WHEN DEALING WITH CLIENTS. BASIC IDEA/SKETCH TO FINAL PRODUCT IS A HUGE JUMP AND CLIENTS OFTEN HAVE DIFFICULTY VISUALIZING OUTCOME.
Personally, coding a site (enough for a client to understand whats going to happen) is a much lengthier process than sketching/photoshopping.
If the function of a website dictates html/css can be nice and flexible. This isn’t always the case. A site that functions around visual elements doesn’t make much sense without the photoshopped graphics. And very few sites can function without graphics at all.
Jumping straight to code can confuse clients, especially when a client isn’t exactly sure what they want both functionally and formally.
Constantly keeping clients updated with how their website is evolving is a crucial communication step. When conferencing with distance clients pre-design I scan them various hand-drawn layout sketches then send them screenshots of our choices as they develop in photoshop. My photoshop mocks include visual representations of interactive elements with cursor icons over changing highlighted areas etc…).
The idea of jumping directly to html/css fills me with anxiety both because photoshop is my right hand and because if my code-prominent friends designed all their projects the interwebs would be a scary looking place.
Very provocative article querty.
Michael Blix
on 04 Jun 08What does everyone have against using MS Paint? It’s free, it comes pre-installed (so no wasted installation configuration hassle), it has pixel perfect accuracy, and it can save losslessly. Give it a try.
Kurt
on 04 Jun 08As a PC user, I find that the vector program Xara Xtreme works best for me for mockups. The new version has added a lot more web-functionality to the package which allows one to export a clickable HTML version of the site. From the sound of Fireworks, Xara seems very similar but probably at a much lower price. Unfortunately, Mac users will have to continue to wait for this excellent program to be made available to them.
Jeff Croft
on 04 Jun 08That Interface Builder suggestion is an interesting one—I’m definitely going to try that next time I have to work on a web application.
That having been said, I believe Jason’s point wasn’t so much about using Photoshop versus other similar tools (Fireworks/Gimp/Axure/Illustrator, etc.) but rather about taking the visual design composite process out of the workflow completely.
Chris
on 04 Jun 08This post seems link/comment-”baity” to me. This is how one shop (of course, a great one, but still) does their business. I’d rather make clickable protos and wireframes in OmniGraffle first.
GaryM
on 04 Jun 08We use Axure. It has literally revolutionized our process. It’s pretty easy to learn (think interactive Visio), and can quickly mockup a WORKING PROTOTYPE of web pages to get user flow down. Add annotations, alternative case flows, etc. and you have pretty much everything needed to define a site from scratch. The microsoft word export is not that useful, and the HTML it creates is an absolute horror, but this doesn’t really matter as the HTML prototype works to show the concept and get flow down. I’ve recently been using it to define client based apps—kind of a stretch, but it still works good. Our development team takes the prototype, creates a more detailed specification document, and then builds it. Highly recommended to get buy off from all stakeholders with MUCH less change requests, and quick change request turn-arounds when needed.
Egor Kloos
on 04 Jun 08Simply a bizarre post. The comments reflect this. I personally don’t believe in absolutes and tend to take the never say never approach. I have in the past used most of the techniques mentioned above. I’m a bit of an old fart by now and tend to use a limited tool set for getting my designs done.
When aesthetics are important, like for marketing and advertising driven sites you’ll have to use a visual tool like fireworks or Photoshop. Web applications tend to have a focus on functionality and so OmniGraffle seem much better suited. In any case my designs always seem to start in pencil and paper and are finalised in CSS with the mock-up phase (Photoshop / OmniGraffle) in the middle. I almost never build prototypes and usually build production models. Throughout the process I always leave room for the client to tweak the design.
In the end if the client has a smile on his/her face I’m happy and couldn’t give a flying something or other which tools where used.
Rémi
on 04 Jun 08Poor argumentation… you can’t skip Photoshop in a website project.
Tim Jahn
on 05 Jun 08I think this process would definitely work for web application projects (such as the work 37 signals does) but I’m not sure about traditional websites. For projects that require advanced design work (beyond simple shapes and colors), I think Photoshop is a useful tool and improves efficiency of the product.
I do completely agree with the point of having to rebuild the design during the CSS/HTML space.
hitthosekeys
on 05 Jun 08Curious post. My experience is with design websites, not application UIs, but I find that you can’t have one without the other-you need the code and you need to know how to make it and how it works, AND you need the graphics tool (I prefer Fireworks). My graphics source files rarely look like a mockup of a whole page-there’s a texture here, a gradient there, a rule over there, a row of thumbnails, etc.
I also find that the chicken and the egg are inseparable when it comes to form and content. Its very hard to create an environment for content without knowing what it is going to be. And it’s hard to write the copy without knowing how it will be placed. You kind of have to work on all of it, simultaneously. And be prepared to flexibly respond when the client catches fire and makes really good suggestions for both content and design changes after they see the first or second iteration.
Omtza
on 05 Jun 08Once I designed a website for my school, and I was showing the prototype to some people, and the first thing they did was to take the mouse and start clicking on things. This is a static page, can’t you just enjoy its design and stop clicking on stuff?
Keith Veleba
on 05 Jun 08I use Illustrator over Photoshop, except for the simplest sites where an HTML/CSS approach saves time.
I really enjoy using Illustrator, as things are easier to change on the fly and get a draft back to an impatient client.
I can generate all my graphics from Illustrator, or push it over to Photoshop for finishing.
Otherwise, good thread!
Tom G.
on 05 Jun 08It depends on the application and audience. Sometimes a quick functional prototype first is best; other times getting the inventory of UI elements, their arrangement and aesthetics helps nail down what the end user really needs/wants.
Its arrogant to presume that the programmer always knows someone else’s business presses best.
Using Photoshop or other wysiwyg graphical crutch can allow you to focus on the ideal user interface as opposed to what is the path of least resistance in HTML and CSS.
Bobby D
on 05 Jun 08I haven’t read all the comments here yet, so perhaps someone else brought this up and discussed it:
From a sales perspective: without some kind of proof-of-concept or comp… what do you show clients to get them excited and persuade them to actually sign the contract… and not your competitor’s? From a production perspective: what does the customer sign-off on… so that we (designers/coders) can avoid costly rework/redesign later? I do understand the importance of interface/content over design/frilly bits… but one of the big reasons we do comps (I thought) is to avoid costly rework/recoding.
Jason
on 05 Jun 08you’re a freaking loon. I’m not a great designer – I’m a great developer. Part of my task as a developer is to cut a design into valid XHTML, before building any back-end.
If you hand me a pencil sketch and say ‘here, build this’, I’m going to laugh in your face!
Let’s assume I’m not a fantastic developer – who knows WHAT you’re going to get back from me, if you hand me a pencil sketch without color swatches, logos, graphic elements.
Seriously, just learn photoshop. Deliver a comp with a valid client logo, and a valid color swatch. Don’t ask your developer to guess at anything.
Design is, and SHOULD be an integral part of web and application development. Even a simple deisgn like you have here still has some design.
If you want to take your pencil sketch then develop a comp in photoshop, fireworks, illustrator, gimp, paint.net or whatever, the please do so. You need to get your ideas out there, in front of you, so you can look at them and make alterations. Your second step should still be a pixel-perfect comp.
I’m a fantastic developer. Give me a good comp and I’ll make it work. That’s my job. Give me a piece of paper and I’ll give it right back – you’re showing no respect to your developers, testers or clients.
You’re a designer. Get over yourself and do your job.
Andy
on 05 Jun 08I think it’s mostly a matter of skills and time. Many designers have excellent photoshop skills but don’t necessarily have good HTML/CSS skills. Even if they have good HTML skills they may not work necessarily as efficiently nor fully understand the back end machinations that occur on the server side.
Ultimately, the finished product is a web page so the more you make it look and act like the original, the further you are going to get down the path of getting feedback and agreement on what is the finished product. And the article is right on about the whole other aspect of interaction—it’s really hard to imagine what the interaction is with a flat graphic. When you have an HTML, you also move further down the path of not only testing the initial look but also how you interact with it.
So if you have a designer who works quickly and efficiently on putting together an HTML/CSS, then give them a raise. It’s great to have that type of person with that type of skill on the team. If you have a designer who isn’t as skilled with HTML and you have to have a translation process, then it will take longer, some expectations may not be met, etc. as is typical with any handoff.
Felipe Vaz
on 05 Jun 08great article, but #6 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
Ismael Sobek
on 05 Jun 08This is actually how I always have, and probably always will design web pages. I started designing before I was even in my teens, so I had to choose: Mac or Photoshop. I chose Mac (and thank god I did), so I’ve always been confined to what happens in HTML and CSS. This works out very well for me, because I have a very simple, minimalist aesthetic that focuses on color and type and needs very little images or flash.
I think that whether or not you use Photoshop mainly relies on the kind of website you are making. If, like me, your clients mainly want very simple sites that showcase their content, HTML and CSS design is perfectly possible, and, in fact, a very smart approach. However, if you are, say, Chan Karunamuni, you may feel differently about Photoshop.
io
on 05 Jun 08Troll? I was just reiterating BAM’s post. So you don’t like people’s opinions and you call people out to be trolls, delete their posts because you disagree and are criticized for it? Hey, I suppose it’s your blog, but um, OK.
Wow.
...
Alright, since you don’t think I was contributing: if you don’t sketch out things to some idealized form, then your end result will look like an engineer’s drawings (boring and limited).
The form should bend to the presentation. Otherwise, the world would still look like a black and white, steam-powered, 17th century universe.
io
on 05 Jun 08I meant Repo. OK, I just pwnd myself. Dish it, taking it.
Jon
on 06 Jun 08The HTML should inform the design not the other way around. It’s the web designer’s job to style data. Did we forget about the separation of content and presentation?
DK
on 06 Jun 08Obviously, this is the kind of blog post that has but a simple goal – to see how many fans tend to instantly agree
I love 37signals, respect 37signals for what they have done, but the only thing I can say iis… yes, you skip photoshop and it shows. but it’s ok, photoshop is not for everyone.
Dawn
on 06 Jun 08I tried an HTML mock-up with a client recently, just to show how the site navigation might work (because the site was massive and had very specific ways in which the user was to navigate it), and upon seeing it, all the client seemed to care about was that it wasn’t pretty, never mind the fact that the purpose was to sort out his navigation. I ended up spending more time explaining that to him than I would have spend had I thrown together an intial comp in photoshop before even broaching the subject of navigation with him.
And also? Sketching on paper only works if you can draw. I couldnt draw a straight line if my life depended on it, and I find it nearly impossible to get my ideas out of my head with a pen. But give me a mouse and a blank photoshop file, and I can create anything. Moving elements around in the design isn’t terribly difficult if you create your file with that in mind from the beginning, and keep your layers separate and labelled well.
Thomas Maas
on 06 Jun 08What’s really missing from paper and image editors alike is a way to quickly design dynamic transitions. Paper and image editors are nice tools for sketching/designing states, but are rather awkward for getting a grip on what happens between them.
Adam
on 06 Jun 08After reading your article, you claim that photoshop useless. There is many reason why people use photoshop, and there are fewer reason why people dont use it.
Perhaps you just simply don’t know how to use photoshop, therefore neglect it. I for one, can do both photoshop and html/css, along with other languages, and very well. I have never had the problem with giving updates to people on a certain thing, html/css or an image.
What you guys need to know is that, simple html/css layouts, look really flat and boring. There is no realism in the layout. Adding images that have been created in photoshop, if done properly, will give the user a whole different experience.
Photoshop’s typography might not be the same as on the web, but you can get it quite accurate. But then again, you wouldn’t really know.
Maybe you should try it using photoshop in one project and see the difference, because if you don’t you’ll eventually not use photoshop at all, and miss out a whole lot of things, and you’ll be producing the same things all over again.
brandon
on 06 Jun 08Photoshop was never built for interface design, it was built for print design and editing photos- hence its name and most likely why there is a disconnect when it comes to using it for comps.
Fireworks was designed for interface design, give it a spin.
http://www.adobe.com/devnet/fireworks/articles/enterprise_it.html
Craig Henry
on 06 Jun 08Wow…Photoshopless, huh? User interaction depends on alot more than buttons, lines and text – it IS textures, colors, format weight, and much much more. It explains why Apple is so successful. Anyways, a pencil sketch is fine, but it should be nothing more than evolving inspiration.
Jason
on 06 Jun 08We deliver a look and feel before we build anything. But, we’re a design studio and not a web studio. I’m the only web designer/developer which means that I code everything, but may only be responsible for 1/3 of the designs.
I think skipping photoshop means you can visualize your design really well, or that you can make it up as you go and still make your clients happy.
I guess I’m just used to dealing with clients that have lived with poor design for so long that they’re more impressed by the visuals than the functions.
Nick
on 07 Jun 08All great design is in the details—setting up your grid, choosing your font-family, font-size, choosing your line height, selecting a colour scheme, background images etc aiming for a pixel perfect site in a perfect grid system. I’m sorry you can’t do that from scratch in html.
“You skip Photoshop? Just checked out your sites … and it shows. [And not in a good way]”
I’m afraid Repo hit the nail on the head fellas.
photoshop user
on 07 Jun 08I do all text in the browser and take a screenshot then paste that into photoshop. If it needs to be against a colored background just set the layer to multiply. If it’s against a pattern then use the inverted image as it’s own mask.
If there’s going to be a lot of text editing in during the mock up stage I might have the photoshop image as a background image and all text absolutely positioned on a web page.
Marc Truitt
on 07 Jun 08I would agree in regards to Photoshop not being the best tool for web design. We use Fireworks; I can’t imagine going directly from paper sketches to HTML. We use Fireworks to mock up all of our sites from there we can create a clickable mockup that allows the user to see what they are going to get. When we have final approval from the client we then can export the graphical images out of Fireworks and then start the process of crafting the HTML. We use Fireworks for designing everything not only web sites but FLEX applications and even SharePoint sites. It sounds like a lot of work but we have found that having a clear design before we begin coding speeds up development and helps to reduce the amount of changes we have to make later. It may not work for everyone but it works for us.
Midget Jones
on 08 Jun 08You guys are in a good position though… for my clients I often need to create a few contrasting mockups. Which often have, unlike your sites, actual images as the foundation. At least in Photoshop I can use the same core elements and quickly make a few totally different layouts. If it’s at the stage where they’re quibbling about fonts then it means that the design’s been approved so I’m working on the HTML/CSS already…
There’s also the factor that if you sit there and create a full html/css mockup then they can just take it and run wild. So limiting it to an imagined view is often a much safer option.
I’m glad you can get away with it, I’d love to work the way you do but in the real world way down below you it’s not easy to do.
Root
on 08 Jun 08A great post. I have been doing this for years. As to most of the comments – I am almost speechless. Most agencies would profit mightily if they ditched their photoshop designers altogether along with all their paraphenalia of expensive and completely unproductive proprietary software and code generators. Any one who can not apply a CSS style sheet and commission/produce the necessary graphics for pages which are rich in content, with high functionality and semantic mark up simply won’t get through the door in our agency. Graphic designers are just that. Graphic designers. No more than that – and they are functionally useless in most web builds. Many of them are actually a huge hindrance. And do not get me started on sliced graphics. Designers? Grrrrrrrrrrrrrrrrrrrrrrrrr. LOL.
Jason Powell
on 08 Jun 08Jason,
First off, thanks for SEED. I was the guy in the blue golf shirt who made a point about “physical vs. virtual” during the Q&A. Second, I wont call you a “freakin loon” because I agree with the final points that were being made about my comment… everyone has their own way of doing things. Although I may not agree 100% I think you are far from a loon. Your philosophies and ideas inspire so many of our projects.
I didnt get the opportunity to finish my point because of the collaborative excitement around the room, but what I was saying was that “I have always struggled with your methods of not mocking up pages”. Ironic that I visit the blog today and see a few recent posts related to just this topic.
First, it obviously makes sense for what you do, your products are based on screens that are based on simple elegance. Your screens dont need the flashy fancy brand integration because your screens are the brand. You have the luxury of being able to jump from the paper to the code because it makes sense.
I dont have that luxury because the client will come back and say the CEO’s wife doesnt like the colors. We have to make graphical interface changes on the fly, which is what FIREWORKS is good for (what the hell are so many web designers still using photoshop for? Its such a pain in the ass. Its first a photo tool, then maybe a web design tool.)
Second, I continued to struggle because no matter what the end result, you are absolutely right about the feel of the page. My point at SEED was that a page is a physical thing because its a usable thing. A mocked up web form is not usable, therefore you can’t tell how its going to physically “feel”.
The part that I didnt get to interject was that I have realized (for me and our team) the best process is / will be to continue doing our static mockups, get preliminary approval so the CEO’s wife doesnt come back and change everything, and then build some pages to verify that that “feel” is right. To many times I’ve handed the designs off to the production designer and seen the end result “feeling” a lot different than I expected.
Thanks for your great ideas. I’m really glad you talked about UI design. That is what I/my peers have always been most interested in about 37 signals.
Great conference. I hope to attend next year. thanks!
Jason Powell
bjornredemption
on 09 Jun 08You skip Photoshop? Just checked out your sites … and it shows. [And not in a good way].
Well not the politest way of saying it but its true. Tried browsing through the 150+ comments on this post and its not that readable.
Jeroen Visser
on 09 Jun 08The risk of sharing an outspoken opinion about process on a company’s blog is just what is shown here: the real point is snowed under by the pro versus con comments.
And what, then, is the real issue? If the result of a design project is to fulfill its requirements and expectations (set by the design team, company strategy and societal concerns such as sustainability), the process and tools of choice should strengthen the team’s ability to succesfully solve this ‘design puzzle’.
For 37signals, this obviously means that they opt for a fast, iterative process using ‘hands-on’ tools that are fit for such a process.
If you’re developing a large website for a Fortune 500 company, presenting the site’s look and feel through Photoshop mock-ups would be a more logical choice given the corporate climate and web savviness of the management involved.
Every project has its own demands. Advocating pro or contra Photoshop is beside the point. Skipping PSDs works for 37signals. It may or may not work for your projects.
Andy Taylor
on 09 Jun 08For a relative web noobie such as myself, Photoshop gives me the chance to be creative, to turn the idea in my head into a reality on the screen. I suppose it’s because I’ve worked with Photoshop for many years, that I can quickly work my ideas. CSS/HTML is more recent for me, so I get lost in it’s complexity (and cross-browser frustrations). I suppose it’s down to what you’re more experienced and comfortable using.
CJ Curtis
on 10 Jun 08Coming in late on this one, but it struck me as funny.
Have you ever SEEN your web sites? Or even your products for that matter? I’m not speaking to whether or not your sites or products are “good.”
But why would the hell would you need Photoshop do design things this basic? If I were building a site for you, I would probably save time by skipping the sketches, too. Afterall, what would I be sketching?
Just like the “designers need to do their own CSS”...
It depends on what you’re doing and who you’re doing it for.
You making the argument that Photoshop is awkward or unnecessary somewhat likens you to a Jacob Nielsen follower, who could possibly be the biggest douchebag racketeer in the history of the internet.
Root
on 10 Jun 08How people can be referred to as fantastic designers when they do not have the basic skill set to produce anything of any value in a web build defeats me. I just do not understand it. A photoshop wiz is a print designer. Not a web designer. Photoshop mockups are a complete waste of time and money. A lot of people who use them would be far better off getting into substantive dialogue with their clients about the functionality, the interaction and the the content of the site. What we call black shiney things derail that whole process. The client who insists on visuals before content or worse – spec design – is going to be a lot of trouble any way. That is the road to hell. Furthermore the ludicrous preferential treatment these faux designers get including salary in many agencies is laughable. They should be waaaaayy down the pecking order. A style sheet is only a style sheet. No more than that. And why are people who are gifted in usability, accessibility, SEO, cross platform compatability and a lot of other stuff get described as code monkeys ? Graphics designers are two a penny. Our local uni churns them out by the hundred annually.
Anonymous Coward
on 10 Jun 08root sounds like a code monkey.
nobosh.com
on 10 Jun 08The use of photoshop depends on the ability, and interests of the team. Not to mention timelines.
colbay
on 10 Jun 08You skip Photoshop? Just checked out your sites … and it shows. [And not in a good way].
I must agree.
Paper sketches are also not enough to go on. Basing your UI designs on carefully thought-out foundations (doesn’t mean this has to take forever) pays off in the end, time and otherwise.
Many times I’ve found that going from quick sketches on paper to (sometimes just as quick) sketches in Photoshop illuminate issues that one wouldn’t have seen without being forced to deal with real-scale and a certain level of detail.
The big payoff with more realistic static mocks is that you can explore a vision that you might not have time to invest in building yet. But it gives you a direction, and iterations are quick.
I would never jump straight into code without having that vision.
This discussion is closed.