37signals: Why we scored on Photoshop

This is a translation of the article “ Why we skip Photoshop ” by Jason Fried from 37signals

When developing a UI, we usually move from paper draft to HTML / CSS directly. Development of the layout in Photoshop, we skip.

That's why we do it:

1. Layout is not clickable. This is probably the reason number 1, for which static layouts are not for us. They are not real. The paper sketch, of course, is also not real, but one doesn’t expect it from him. The layout is displayed on the screen. Once it is on the screen, it should work. But the menu cannot be opened, the text cannot be hammered into the field, the link cannot be clicked. And with HTML / CSS, everything is real.
2. In Photoshop, too many tools to work out the details. When you use it, and pulls to do the details. Alignment, the right color, the right shape - little things that are ultimately important, but useless now. In the beginning, the meaning is important, not the details. Details later.
3. Text in Photoshop is not what text is online. In a static photoshop layout, you can’t quickly change the text - you need to open Photoshop, change the text, save the file, export to gif / png / jpg, etc. If you put the sketch online, you won’t tell someone to “update in 5 seconds”, like could be done with HTML. Instead, you have to say "5 minutes ...". And yet, the font in Photoshop in size never coincides with the font in HTML. Never a bit like. Neither line breaks nor distance.
4. Photoshop focuses on production, not productivity. Photoshop does what looks like, not what works. If you only care about appearance, you will spend a lot of time on production. HTML / CSS allows you to be productive. With every change you move on to something more and more real.
5. Photoshop - do one job twice. Well, spent 3 days on the layout, then what? We take on HTML / CSS, repeat all over again. Waste of time. Would start with HTML / CSS, spend extra time on iteration, not on re-creating. If HTML / CSS is also slow, spend a little more time exploring faster HTML / CSS development techniques. This waste of time is not empty.
6. Photoshop is not for collaboration. I already mentioned it, but I will say it again: HTML / CSS allows you to change, save and update. So we build cooperation. “I'll change it here. Update. ”Seconds. “So, there will be a float: left, a not right. Update. ”A couple of seconds. No tool selection, no movement of any pieces, no export, no pouring, no new file names. HTML / CSS is simply made for speedy prototyping. Photoshop is not.
7. Photoshop is complicated. Of course, after 10 years of experience working with him, everything works out on its own, but for me some things are still complicated. With a pen and it is easier to manage than constantly climbing into the toolbar. You can draw anything with a pen, and in Photoshop you need to use the Text tool for text, Shape for shapes, and customize everything through the menu, and so on and on.

We don’t want to say that Photoshop is bad or not worth the money, it’s just that we’ve got to deal with HTML / CSS at once is much more useful for creating a new one and for improving the existing one. HTML / CSS is the real thing Photoshop will never be.

Note Trans .: Thoughts in general are interesting, fully fitting the 37signals proprietary concept called Getting Real . As an experienced coder, I agree with most of the things, however, here and a no-brainer - not in all cases, a similar approach will give, Pirogov, for example, is unlikely to appreciate :). The specifics of 37signals should be taken into account - the development of simple and easy web applications on their own initiative for the current needs of the market. The guys do not make presentation and image sites to order, so Photoshop is really out of work. This is our way :)