5 ms·

Why I never design a site in Photoshop

35 points by christeso 16y ago

wccrawford 16y ago
Actually, it seems to me that this post means we're missing something. Photoshop isn't doing every thing it could be for web designers. Any time I've used Photoshop or another image app, I've been frustrated by the need to save my layered image, and then manually also export the final image into place to see it in the design. There should be something in place for that. Of course, I could write a script that uses imagemajick or something, I suppose... If I did much design work. Actually, I'm already thinking about it now, even though I rarely do design. Could be a fun project.
- Silhouette 16y ago
  Isn't that sort of thing more in the realm of Fireworks? Photoshop has never really been designed to support web graphics. It just happens that many people are familiar enough with it to get decent results anyway.
  - wccrawford 16y ago
    Thanks. I'll have to look into Fireworks. I think I actually bought it in a bundle a while back, but haven't tried using it. (I'm not really a designer, so...)
- jinushaun 16y ago
  Sounds like you want Fireworks, which was designed for web design and prototyping. As someone who is actually in the web design industry and uses Photoshop everyday, I know quite well that Photoshop was never intended to do web design, even though my colleagues and I try. Certainly better than web designing (i.e., creating exportable assets) in Illustrator...
endtwist 16y ago
These constant articles and discussions about why not to use Photoshop for web design is starting to remind me of this Onion article: http://www.theonion.com/articles/area-man-constantly-mentioning-he-doesnt-own-a-tel,429/ http://www.theonion.com/articles/area-man-constantly-mention... But in all seriousness…while Photoshop may not be the best tool for the job, mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks, or whatever your visual weapon-of-choice is, is invaluable. You learn a lot more about what works and what doesn't when you're not worrying about whether or not that "float" you just put in to your third <section> column will properly align the element with the first two. There is a real reason UX/UI and designers exist; please don't crap all over these professions just because you know your code better than you know design fundamentals.
- christeso 16y ago
  I'm not crapping on anyone. I came up as a designer, with fundamentals. Actually I was a print designer. Even more fundamental. I don't know code better than design. Nor do I know design better than code. I wrote the post to relay the method I use to design, highlight it's efficiencies, express opinions on process, and hopefully inspire more to try it out.
usejoy 16y ago
Photoshop is so lame:))) Draw your ux logic, than illustrate gui. Coding is not the way to think about design. Use prototyping tools. Cleat flow ideas. Than implement them in html/css. Use any graphic editor to illustrate. For gui stuff i prefer Fireworks. For illustration-painting, accent use sketchbook pro/artrage/pixelmator.
- christeso 16y ago
  I use omnigraffle for initial flows. I should have put that in the post. I don't think Photoshop is lame. I love it for what I use it for.
kodisha 16y ago
Quora? Really? I mean, look at this page, it has almost no graphic elements http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop The whole site is one color header and bunch of comments. Good luck designing one of those cssmania.com like sites (when your client ask you to) without Photoshop.
- kodisha 16y ago
  Here is random example i found on cssmania: http://www.hungarianwinesociety.co.uk/ http://www.hungarianwinesociety.co.uk/ I would like to hear how would you design this kind of site without PS?
  - Silhouette 16y ago
    > I would like to hear how would you design this kind of site without PS? Not speaking for anyone else, but my usual design process goes something like this: 1. Identify the structure, in pure information terms. 2. Get a basic idea of the layout, often using just a pencil and paper, or a quick mock-up tool like Balsamiq. 3. Implement the basic structure using HTML, typically as a set of divs nested in some reasonable way. 4. Implement the basic layout using CSS, just enough to position the divs in the right sort of places. 5. Add a bit of placeholder text/images and start styling the details as necessary. The answer to your exact question, however, is "I wouldn't". I think the page you cited is horrible on just about every level, and if that's the kind of result you are looking for from using PS, you're welcome to it.
    - ThomPete 16y ago
      That is not really answering the question. Are you also going to design your iPhone or iPad apps in objective-c? It's easy to use code for structure and basic skinning but if you need details you are simply going to have to take it through some editor
      - Silhouette 16y ago
alsomike 16y ago
I write all my PDFs directly in PostScript instead of using InDesign or Illustrator, because that way it's breathing instead of catatonic or whatever.
feverishaaron 16y ago
I get kind of annoyed with these smug, pseudo-contrarian articles about, what boils down to personal preference. The right answer is: Use the right tool for the right job. * If it's a simple brochureware template, you might be able to knock it out in HTML from the start. * If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet. * If it is an application with numerous cases and a potentially complicated interface, starting with a clickable modeling tool, like Axure, might be the wisest approach. * Roll your own approach for a particular interface problem. Axure sucks for modeling mobile application interfaces, but hey, some dude figured out how to make a usable wireframing model with Keynote. I've used all three methods, and each has their advantages and tradeoffs. Personal preference often dictates how we work, but the project requirements may force us to re-evaluate these preferences in favor of a more efficient means of completing the project.
acabal 16y ago
I agree, and I do the same. I'm not a professional designer (or a very good one at all), and CSS is great over Photoshop because I don't know--and don't have the time to learn--how to use Photoshop's vast library of features. It's easier to just use a CSS reset, open up Firebug, adjust elements until I get to something that looks alright, and take it from there. And if I want to adjust something later, it's a simple matter of changing a property in Firebug and the entire site changes instantly. No messing with layers or what have you. For super serious designers with lots of non-CSS-able elements, Photoshop is great. But for someone like me who wants something presentable done in a way that I'm already familiar with, HTML and CSS iteration is the way to go. Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.
petercooper 16y ago
There was a big discussion about this on HN a couple of years ago when 37signals weighed in on the topic: http://news.ycombinator.com/item?id=828544 http://news.ycombinator.com/item?id=828544 (worth reading)
deleted 16y ago
[deleted]
kneath 16y ago
If you've spent 14 years designing and never even tried to design a site in Photoshop I can't possibly fathom how you could have an opinion of the process. Agree or not, try new things. Try old things. Make an informed decision.
- christeso 16y ago
  I've tried. I just never finished. This is informed.
stcredzero 16y ago
I'm not sure how refactoring, as I understand it as a programmer, applies to a UX/UI design. Are you making changes to your design that have zero effect on your design's semantics? That's what it would mean for code refactoring -- a change that has no visible effect! CSS/HTML/Javascript can be refactored in this sense, but I'm not sure refactoring a design can mean anything quite like what it means to refactor a program.
- strager 16y ago
  I think the author intended to say "iterating" instead, for example.
  - stcredzero 16y ago
    Well, it's not as if I stick with the academic definition of refactoring myself.
bmelton 16y ago
To those of us that know Photoshop really well, the process is more advanced than what the author suggests. For me, Photoshop is equivalent to pencil and paper -- I can see where things ought to be, how they actually might look on screen, and whether or not it is visually appealing. I don't fault the author for having his own process, as it seems to be working for him, but having never done it the other way, I can't imagine how he can condemn it. The argument seems, at a glance, akin to a lifelong vegetarian railing against steak. I don't work too dissimilarly, in that I will start a layout in Photoshop, start coding, then drop back into Photoshop when I need a new visual element, but when I need to plop a logo or button onto the page, I generally have it at least roughed out in Photoshop. My process works for me, generally, and I've done it both ways, but without prototyping the page in some way, I have a harder time envisioning what to code.
- christeso 16y ago
  Good thoughtful response. And, we actually use the same process. I do use Photoshop for elements, buttons, logos etc as you do. To be clear, what I stated in the post is I don't do ui or ux or layout in PS.
  - bmelton 16y ago
    Do you draw out your UI/UX first? Do you use paper? Balsamiq? Anything like that? All I'm saying is that if you're comfortable in Photoshop, it makes a pretty good mockup tool. I forego pen and paper, and jump straight into Photoshop, and that's what works for me. Squares on a paper just doesn't give me a good picture of what I'm doing. I'm impressed that you can visualize a site layout in code, but it doesn't work as well for me. To each their own.
dkersten 16y ago
I like Balsamiq to mockup site UIs.

35 points by christeso 16y ago

Actually, it seems to me that this post means we're missing something. Photoshop isn't doing every thing it could be for web designers. Any time I've used Photoshop or another image app, I've been frustrated by the need to save my layered image, and then manually also export the final image into place to see it in the design. There should be something in place for that. Of course, I could write a script that uses imagemajick or something, I suppose... If I did much design work. Actually, I'm already thinking about it now, even though I rarely do design. Could be a fun project.

Silhouette 16y ago
Isn't that sort of thing more in the realm of Fireworks? Photoshop has never really been designed to support web graphics. It just happens that many people are familiar enough with it to get decent results anyway.
- wccrawford 16y ago
  Thanks. I'll have to look into Fireworks. I think I actually bought it in a bundle a while back, but haven't tried using it. (I'm not really a designer, so...)
jinushaun 16y ago
Sounds like you want Fireworks, which was designed for web design and prototyping. As someone who is actually in the web design industry and uses Photoshop everyday, I know quite well that Photoshop was never intended to do web design, even though my colleagues and I try. Certainly better than web designing (i.e., creating exportable assets) in Illustrator...

endtwist 16y ago

These constant articles and discussions about why not to use Photoshop for web design is starting to remind me of this Onion article: http://www.theonion.com/articles/area-man-constantly-mentioning-he-doesnt-own-a-tel,429/ http://www.theonion.com/articles/area-man-constantly-mention... But in all seriousness…while Photoshop may not be the best tool for the job, mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks, or whatever your visual weapon-of-choice is, is invaluable. You learn a lot more about what works and what doesn't when you're not worrying about whether or not that "float" you just put in to your third <section> column will properly align the element with the first two. There is a real reason UX/UI and designers exist; please don't crap all over these professions just because you know your code better than you know design fundamentals.

christeso 16y ago
I'm not crapping on anyone. I came up as a designer, with fundamentals. Actually I was a print designer. Even more fundamental. I don't know code better than design. Nor do I know design better than code. I wrote the post to relay the method I use to design, highlight it's efficiencies, express opinions on process, and hopefully inspire more to try it out.

usejoy 16y ago

Photoshop is so lame:))) Draw your ux logic, than illustrate gui. Coding is not the way to think about design. Use prototyping tools. Cleat flow ideas. Than implement them in html/css. Use any graphic editor to illustrate. For gui stuff i prefer Fireworks. For illustration-painting, accent use sketchbook pro/artrage/pixelmator.

christeso 16y ago
I use omnigraffle for initial flows. I should have put that in the post. I don't think Photoshop is lame. I love it for what I use it for.

kodisha 16y ago

Quora? Really? I mean, look at this page, it has almost no graphic elements http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop The whole site is one color header and bunch of comments. Good luck designing one of those cssmania.com like sites (when your client ask you to) without Photoshop.

kodisha 16y ago
Here is random example i found on cssmania: http://www.hungarianwinesociety.co.uk/ http://www.hungarianwinesociety.co.uk/ I would like to hear how would you design this kind of site without PS?
- Silhouette 16y ago
  > I would like to hear how would you design this kind of site without PS? Not speaking for anyone else, but my usual design process goes something like this: 1. Identify the structure, in pure information terms. 2. Get a basic idea of the layout, often using just a pencil and paper, or a quick mock-up tool like Balsamiq. 3. Implement the basic structure using HTML, typically as a set of divs nested in some reasonable way. 4. Implement the basic layout using CSS, just enough to position the divs in the right sort of places. 5. Add a bit of placeholder text/images and start styling the details as necessary. The answer to your exact question, however, is "I wouldn't". I think the page you cited is horrible on just about every level, and if that's the kind of result you are looking for from using PS, you're welcome to it.
  - ThomPete 16y ago
    That is not really answering the question. Are you also going to design your iPhone or iPad apps in objective-c? It's easy to use code for structure and basic skinning but if you need details you are simply going to have to take it through some editor
    - Silhouette 16y ago

alsomike 16y ago

I write all my PDFs directly in PostScript instead of using InDesign or Illustrator, because that way it's breathing instead of catatonic or whatever.

feverishaaron 16y ago

I get kind of annoyed with these smug, pseudo-contrarian articles about, what boils down to personal preference. The right answer is: Use the right tool for the right job. * If it's a simple brochureware template, you might be able to knock it out in HTML from the start. * If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet. * If it is an application with numerous cases and a potentially complicated interface, starting with a clickable modeling tool, like Axure, might be the wisest approach. * Roll your own approach for a particular interface problem. Axure sucks for modeling mobile application interfaces, but hey, some dude figured out how to make a usable wireframing model with Keynote. I've used all three methods, and each has their advantages and tradeoffs. Personal preference often dictates how we work, but the project requirements may force us to re-evaluate these preferences in favor of a more efficient means of completing the project.

acabal 16y ago

I agree, and I do the same. I'm not a professional designer (or a very good one at all), and CSS is great over Photoshop because I don't know--and don't have the time to learn--how to use Photoshop's vast library of features. It's easier to just use a CSS reset, open up Firebug, adjust elements until I get to something that looks alright, and take it from there. And if I want to adjust something later, it's a simple matter of changing a property in Firebug and the entire site changes instantly. No messing with layers or what have you. For super serious designers with lots of non-CSS-able elements, Photoshop is great. But for someone like me who wants something presentable done in a way that I'm already familiar with, HTML and CSS iteration is the way to go. Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.

petercooper 16y ago

There was a big discussion about this on HN a couple of years ago when 37signals weighed in on the topic: http://news.ycombinator.com/item?id=828544 http://news.ycombinator.com/item?id=828544 (worth reading)

deleted 16y ago

[deleted]

kneath 16y ago

If you've spent 14 years designing and never even tried to design a site in Photoshop I can't possibly fathom how you could have an opinion of the process. Agree or not, try new things. Try old things. Make an informed decision.

christeso 16y ago
I've tried. I just never finished. This is informed.

stcredzero 16y ago

I'm not sure how refactoring, as I understand it as a programmer, applies to a UX/UI design. Are you making changes to your design that have zero effect on your design's semantics? That's what it would mean for code refactoring -- a change that has no visible effect! CSS/HTML/Javascript can be refactored in this sense, but I'm not sure refactoring a design can mean anything quite like what it means to refactor a program.

strager 16y ago
I think the author intended to say "iterating" instead, for example.
- stcredzero 16y ago
  Well, it's not as if I stick with the academic definition of refactoring myself.

bmelton 16y ago

To those of us that know Photoshop really well, the process is more advanced than what the author suggests. For me, Photoshop is equivalent to pencil and paper -- I can see where things ought to be, how they actually might look on screen, and whether or not it is visually appealing. I don't fault the author for having his own process, as it seems to be working for him, but having never done it the other way, I can't imagine how he can condemn it. The argument seems, at a glance, akin to a lifelong vegetarian railing against steak. I don't work too dissimilarly, in that I will start a layout in Photoshop, start coding, then drop back into Photoshop when I need a new visual element, but when I need to plop a logo or button onto the page, I generally have it at least roughed out in Photoshop. My process works for me, generally, and I've done it both ways, but without prototyping the page in some way, I have a harder time envisioning what to code.

christeso 16y ago
Good thoughtful response. And, we actually use the same process. I do use Photoshop for elements, buttons, logos etc as you do. To be clear, what I stated in the post is I don't do ui or ux or layout in PS.
- bmelton 16y ago
  Do you draw out your UI/UX first? Do you use paper? Balsamiq? Anything like that? All I'm saying is that if you're comfortable in Photoshop, it makes a pretty good mockup tool. I forego pen and paper, and jump straight into Photoshop, and that's what works for me. Squares on a paper just doesn't give me a good picture of what I'm doing. I'm impressed that you can visualize a site layout in code, but it doesn't work as well for me. To each their own.

dkersten 16y ago

I like Balsamiq to mockup site UIs.