Life Without Photoshop

To be fair, Quora isn't a very graphically rich site.<p>I'm not totally sure whether an absence of Photoshop (and other Creative Suite products) is particularly worthy of explanation.

Plug: I'm building a web-based mockup tool called jMockups [1], which my long term goal is to supplant Photoshop as the high fidelity mockup tool of choice.<p>If you have qualms with Photoshop and can entertain the possibility of a better tool coming along, I'd really, really, really love to hear your thoughts on jMockups, what I can do to improve it, and how it can become a tool so phenomenal that it wouldn't make sense for you <i>not</i> to switch from Photoshop. Email me at matt@jmockups.com.<p>[1] <a href="http://www.jmockups.com" rel="nofollow">http://www.jmockups.com</a><p>PS: New feature you might like: Instantly convert almost any website to a mockup so you can redesign it in minutes: <a href="http://www.jmockups.com/websiteconverter" rel="nofollow">http://www.jmockups.com/websiteconverter</a>

Along the same lines, here's why I skip Photoshop when working on designs at 37signals: <a href="http://37signals.com/svn/posts/1061-why-we-skip-photoshop" rel="nofollow">http://37signals.com/svn/posts/1061-why-we-skip-photoshop</a>

Context is important. A no-Photoshop approach makes sense for Quora since their product is text-heavy. For a product that requires, say, rich data visualizations like Google Analytics, some design ideas need to be mocked in a graphics package (Googlers often use Fireworks instead of Photoshop) first, then prototyped in code.<p>Context is also important in terms of what stage of the development process the designer is at. If a product design is already well defined (e.g. "top nav is global, 2 columns in the core content space, right column is contextual nav, left column is the content stream, here's the style guide ..."), then going directly to code makes sense. As Joel suggests, going directly to code is great for day to day new feature iterations.<p>But if your product is completely undefined, Photoshop or Fireworks can be excellent tools for mocking up design variations and sets of use cases or states within those variations.<p>Hats-off to Quora for going straight to code when it comes to design. It works for them but it's not going to work for everyone in every case.

I'm definitely going to be in the minority here, but I start with Excel.<p>Here's why:<p>- It's free<p>- I have a perfect grid system<p>- I can color in anything with borders and gradients also<p>- I can format the text with spacing<p>- Margin and padding properties are done using cell spacing properties<p>- You can add pictures anywhere<p>- I can easily copy the entire worksheet and paste it into Paint

I love starting in photoshop because I can play with an idea visually without taking my eyes off of what I'm working on.<p>For me photoshop is a really fast way to develop ideas and sell people on my dreams. I can mock something up that looks real and get feedback very, very quickly. Then once I know what I want to build I move to the text editor.<p>Photoshop is pen and pencil for me.

Fireworks still suits me best for prototyping and slicing. I'd rather give my money to Pixelmator or an indie though.<p>Somebody could make a fortune building an OS X app that supports legacy layered PSDs and PNGs.

I've stopped designing with code for all but the most trivial elements because I realized it's too easy to get sucked into the details too early on in the process. Designing via coded prototype means that mockups are high fidelity, and there were a lot of things going on at the same time: trying to write good copy, getting each element to align correctly, finding the perfect icon, and coding good HTML/CSS/JS. Iterations then starting feeling pretty expensive.<p>For the same reason people use lorem ipsum, I would recommend lower resolution tools (paper, whiteboard, wireframes, etc.) to keep details out of focus until it's time. I try to avoid Photoshop when doing early design work, but it's valuable for creating proofs for clients or as a spec for engineers.

Oddly enough, we don't use photoshop either. We use Keynote! <a href="http://blog.swixhq.com/designing-swix-with-keynote/" rel="nofollow">http://blog.swixhq.com/designing-swix-with-keynote/</a>

And you see it in the Quora design. It is centered on the content, and not on fancy graphics that distract from what the user came to find on the site.

This is exactly backwards. One needs to start with the needs of the user, which means mocking up the user experience without regard for implementation. The tool might vary, but the concept of starting with the user is essential.<p>Starting in code makes it about the coder, not the user. It conflates implementation with design.<p>I am a coder, and will do mockups in code -- only when I know a real design won't be available. I would much rather be directed by a good UX person. Better for the user, and faster for me as an implementor.

I'm not a designer by any stretch of the imagination, but I do like fiddling around with pictures and occasionally make posters and design T-Shirts. I haven't used photoshop in about 5 years or so, I haven't needed to.<p>The Gimp is one of those tools that covers 80% of your design requirements. Having said that it's not particularly friendly for Photoshop users. An easier version for the transition is GimpShop (<a href="http://www.gimpshop.com/" rel="nofollow">http://www.gimpshop.com/</a>), although this hasn't been updated for a while.<p>For designers I can understand why living without Photoshop is strange, especially if it's the tool you're used to. For most people Gimpshop and The Gimp are more than capable enough, Free software and free to use.

Everyone should convert - Photoshop is still a necessary evil for image editing and sprites - but with grid layout frameworks, it's really never been easier to mockup a layout or three in pure HTML greatness. Add the flair after.