6 ms·

Along the same lines, here's why I skip Photoshop when working on designs at 37signals: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signa

Along the same lines, here's why I skip Photoshop when working on designs at 37signals: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop

jdp23 16y ago
Jason, I wonder if a "direct to code" approach tends to correlate with design styles like 37signals and Quora's that favor clean sparse text-oriented designs. Conversely a Photoshop-oriented approach is likely to lead to image-oriented designs, with a lot more visual richness, appealing more to the emotions.
lwhi 16y ago
I don't think Photoshop has ever been a good application for creating website mock-ups. There are a lot of custom applications that have been created specifically for the job - from simple apps like Mockingbird, and Balsamiq; to more advanced applications like Visio and OmniGraffle. I think these applications are best for carrying out the grunt-work involved in UI design. I think the process of creating HTML mockups adds a layer of complexity that isn't necessary in the initial stages. Being able to concentrate on the purpose of design (rather than implementation) is liberating. However, I think there are times when a client needs to be able to visualise a potential aethetic near the beginning of a project. Perhaps Photoshop has a place here - because a basic wireframe produced in one of the former apps often requires too great a leap of imagination to effectively communicate the intended result. However - I think, a lot of the time, a vector package like Illustrator (or Xara or Inkscape) allows greater freedom (on the part of the designer) and makes the process of modifying a design less cumbersome.
bane 16y ago
Laugh if you will, but I've found sketching out mockups in PowerPoint to work surprisingly well and about as fast (or faster) than paper since I don't have to redraw the whole thing after too many changes are made. And to your point: 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. You can hyperlink in PowerPoint to other slides, so you can mockup the workflow a bit too. I agree that being able to click and move around a mockup is incredibly important.
- nswanberg 16y ago
  That's a clever idea, and if it works for you, great. In fact I think it's a much better use than PowerPoint's intended purpose of crushing your soul bullet point by bullet point: http://norvig.com/Gettysburg/sld001.htm http://norvig.com/Gettysburg/sld001.htm It looks like you can sort of do this in Google Presentation too, though you have to figure out the URL to link to other slides.
  - bane 16y ago
    Yeah, I have a feeling most presentation tools (Keynote, Impress, Google Presentation, etc.) would work well for this. In fact the only pain point I've ever had was the occasional desire to change the slide size. I've found that most of the basic effects in PP have a CSS equivalent as well, a surprising number of the things mocked up in PP can be recreated entirely in CSS without images. Most of the actual graphics I use in the mockup I've made in Photoshop anyways, and just put them in the mockup, so those are reusable art assets on the final page. (plus you can even mockup smaller gui details like drop-down menus if you are clever enough, though it's usually more work than it's worth) I've found that most of the MS-Office tools can be abused to do a pretty good job in roles far removed from their original intent.
  - vog 16y ago
    That's why I'm always using LaTeX-Beamer for presentations: http://en.wikipedia.org/wiki/Beamer_%28LaTeX%29 http://en.wikipedia.org/wiki/Beamer_%28LaTeX%29 If you aren't already familiar with LaTeX, it takes some time to get into it. But it's definitely worth the effort! I know a lot of people who, once they started to use LaTeX-Beamer, never touched Powerpoint again. To get a feeling of what LaTeX-Beamer is all about, you might want to have a look at the following tutorial (PDF): http://www.tug.org/pracjourn/2005-4/mertz/mertz.pdf http://www.tug.org/pracjourn/2005-4/mertz/mertz.pdf
- jdp23 16y ago
  Yeah, I've known some PowerPoint wizards who can build decent-size executable prototypes using .ppt files.
- 16y ago

jdp23 16y ago

Jason, I wonder if a "direct to code" approach tends to correlate with design styles like 37signals and Quora's that favor clean sparse text-oriented designs. Conversely a Photoshop-oriented approach is likely to lead to image-oriented designs, with a lot more visual richness, appealing more to the emotions.

lwhi 16y ago

I don't think Photoshop has ever been a good application for creating website mock-ups. There are a lot of custom applications that have been created specifically for the job - from simple apps like Mockingbird, and Balsamiq; to more advanced applications like Visio and OmniGraffle. I think these applications are best for carrying out the grunt-work involved in UI design. I think the process of creating HTML mockups adds a layer of complexity that isn't necessary in the initial stages. Being able to concentrate on the purpose of design (rather than implementation) is liberating. However, I think there are times when a client needs to be able to visualise a potential aethetic near the beginning of a project. Perhaps Photoshop has a place here - because a basic wireframe produced in one of the former apps often requires too great a leap of imagination to effectively communicate the intended result. However - I think, a lot of the time, a vector package like Illustrator (or Xara or Inkscape) allows greater freedom (on the part of the designer) and makes the process of modifying a design less cumbersome.

bane 16y ago

Laugh if you will, but I've found sketching out mockups in PowerPoint to work surprisingly well and about as fast (or faster) than paper since I don't have to redraw the whole thing after too many changes are made. And to your point: 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. You can hyperlink in PowerPoint to other slides, so you can mockup the workflow a bit too. I agree that being able to click and move around a mockup is incredibly important.

nswanberg 16y ago
That's a clever idea, and if it works for you, great. In fact I think it's a much better use than PowerPoint's intended purpose of crushing your soul bullet point by bullet point: http://norvig.com/Gettysburg/sld001.htm http://norvig.com/Gettysburg/sld001.htm It looks like you can sort of do this in Google Presentation too, though you have to figure out the URL to link to other slides.
- bane 16y ago
  Yeah, I have a feeling most presentation tools (Keynote, Impress, Google Presentation, etc.) would work well for this. In fact the only pain point I've ever had was the occasional desire to change the slide size. I've found that most of the basic effects in PP have a CSS equivalent as well, a surprising number of the things mocked up in PP can be recreated entirely in CSS without images. Most of the actual graphics I use in the mockup I've made in Photoshop anyways, and just put them in the mockup, so those are reusable art assets on the final page. (plus you can even mockup smaller gui details like drop-down menus if you are clever enough, though it's usually more work than it's worth) I've found that most of the MS-Office tools can be abused to do a pretty good job in roles far removed from their original intent.
- vog 16y ago
  That's why I'm always using LaTeX-Beamer for presentations: http://en.wikipedia.org/wiki/Beamer_%28LaTeX%29 http://en.wikipedia.org/wiki/Beamer_%28LaTeX%29 If you aren't already familiar with LaTeX, it takes some time to get into it. But it's definitely worth the effort! I know a lot of people who, once they started to use LaTeX-Beamer, never touched Powerpoint again. To get a feeling of what LaTeX-Beamer is all about, you might want to have a look at the following tutorial (PDF): http://www.tug.org/pracjourn/2005-4/mertz/mertz.pdf http://www.tug.org/pracjourn/2005-4/mertz/mertz.pdf
jdp23 16y ago
Yeah, I've known some PowerPoint wizards who can build decent-size executable prototypes using .ppt files.
16y ago