Life Without Photoshop | Hacker News Reader

Life Without Photoshop

quora.com

111 pointsrpsubhub66 comments

To be fair, Quora isn't a very graphically rich site.

I'm not totally sure whether an absence of Photoshop (and other Creative Suite products) is particularly worthy of explanation.

It seems like every "I didn't use Photoshop" article is always showing off a site that... looks like the designer didn't use Photoshop.

As a designer who's in Photoshop all day long, knowing when a layout necessitates using Photoshop or not is second-nature to me now. I'll just stop using it and hop over to my text editor and start writing HTML & CSS. And for sufficiently sparse layouts, I'll just not use Photoshop at all. I assumed everyone knew and did this, but perhaps I was mistaken.

That's a great point. Photoshop has extensive capabilities for visual rearrangement and transformation. Once the core design is created it can be cut up and extended with further XHTML/CSS elements (minimally for consistency).

Quora does not compare with even basic designs found in CSS galleries (http://cssbeauty.com/). Most are graphic heavy and use intelligent slicing for fast, aesthetic experiences.

For rapid design, you can use the 960 grid system (http://960.gs/) to speed up mockups, then implement the layout on top of 960's positional CSS. I tried this for the first time with my new design (http://mjac.co.uk/) and I think it produced a significant improvement in aesthetics and organisation over my previous XHTML/CSS mockups and completely custom Photoshop layouts.

Problem is, Photoshop is the default for many designers. They start with image-rich websites and scale them down if necessary. I think good design should be scaled up from simple to more complex - with each instance of complexity being justified.

Do I really need to watch that video when I go to gm.com? Do I really need to figure out custom Flash-based navigation scheme when I go to a movie or game website?

I think there is an alternative to using Photoshop - especially if you use a Linux based OS.

I've often heard of people stating that GIMP is a valid alternative - I'd argue it isn't. GIMP is fine for performing a lot of everyday editing functions - but it's lacking in quite a few key areas (most notably CMYK support).

I think as an alternative, rather than having Photoshop - which could be conceptually viewed as an 'image IDE' - it's possible to choose to use a number of different command line utilities, plugins, scripts and applications to achieve the feature-set that Photoshop traditionally provides.

Creating and modifying imagery in this way, is arguably less intuitive, as workflows aren't so clearly defined - but there's the chance of matching (or possibly exceeding) what Photoshop makes possible.

Why does everybody care that the GIMP doesn't have CYMK support? The vast majority of printing presses can do their own color separation, trapping, and registering automatically.

Hell... GIMP would be an improvement: about a 20% of all print jobs are submitted in MS Publisher.

I can understand not using GIMP for high-end printing with spot colors, but that's very rare.

Because a lot of people need to produce CMYK output as part of their everyday routine.

> Because a lot of people need to produce CMYK output as part of their everyday routine.

That still doesn't answer the question why do people care so much about CMYK.

The question was why would you care about CMYK if your work isn't to produce graphics for print.

Do you really mean that? It sounds pedantic, verging on illogical.

Why would you care about anything you don't care about?

Why does CMYK matter for websites? Are they printed that often?

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.

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 not to switch from Photoshop. Email me at matt@jmockups.com.

[1] http://www.jmockups.com

PS: New feature you might like: Instantly convert almost any website to a mockup so you can redesign it in minutes: http://www.jmockups.com/websiteconverter

Sounds great, just signed up to try it. Two questions:

1. What's with the "j"? Makes it sound like it was written in Java...

2. Any thoughts of turning the website converter bookmarklet into a Chrome extension? Would be cleaner and seem more secure for users.

1. "j" is for JavaScript. Think jQuery.

2. No need -- the bookmarklet is easier to install and works cross browser. I'd bet that most people competent enough to install a Chrome extension can also install a bookmarklet. Also, seem more secure != more secure.

Appreciate the feedback. Let me know what else I can do to make it better.

Could I make it a Chrome extension? :P Could be official or unofficial, I have my bookmark bar hidden so an extension would fit better with my workflow.

Seems intriguing. How would you compare/contrast with Balsamiq?

Balsamiq is for designing low fidelity mockups (wireframes) whereas jMockups is for designing high fidelity (pixel perfect) mockups. It makes more sense to compare jMockups to Photoshop than Balsamiq.

That being said, I can pretty effortlessly pivot from focusing on high fidelity to low fidelity. Right now I'm considering adding a toggle button that lets you switch back and forth, but am not sure if I want to go down that path yet. Do one thing well, right?

I've played with jMockups demo and as a Balsamiq user I can say that one of its best features is "low fidelity", specifically lines that look hand drawn and comic sans font. That combo is what I consider most important in mockups: when you give that to a client, it's very clear that it's not a product, it's a mockup.

If you can make that kind of low fidelity, I think you would have very good mockup tool. Of course, seeing what you have right now, I can understand your thinking in pursuing high fidelity route.

Thanks for checking it out.

Can you elaborate on your last sentence? Of course, seeing what you have right now, I can understand your thinking in pursuing high fidelity route.

I meant to say I agree with you saying doing one thing well might be a better choice for your product.

I liked what I saw in jMockups, I like how it works, and it's pretty fast. But I wouldn't use it as a tool to create mockups that I have to present to a client (that doesn't mean somebody else has the same kinds of clients or same needs as me), for the reasons it looks too real. Like I said, Balsamiq's greatest feature is that mockups look "hand drawn", what you called "low fidelity", one might call it almost childish.

You said jMockups and Balsamiq are less comparable than jMockups and Photoshop. I agree. So maybe you shouldn't pivot from focusing on high fidelity to low fidelity but excel in what you already do.

Appreciate it -- thanks :)

Very clear explanation, and agreed on doing one thing well. It'll be a lot easier to to leadership in the high-fidelity mockup segment, and then use that as a base to expand if it makes business sense.

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

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.

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

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.

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.

That's why I'm always using LaTeX-Beamer for presentations:

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

Yeah, I've known some PowerPoint wizards who can build decent-size executable prototypes using .ppt files.

I find it odd that people think the web killed HyperCard, when its descendants have been part of every office suite for the last 20 years in the form of scriptable presentation software. You can even make games in Powerpoint if you're willing to kill a few braincells using VBA.

That HyperCard hasn't been resurrected is a crime against humanity. Absolutely brilliant piece of software.

What you describe here is mostly that Powerpoint allows you to do vector graphics (as opposed to raster graphics).

"Real" vector graphics tools like OpenOffice Draw or Inkscape may be even better suited.

You make a valid point. But I've found that while dedicated vector tools are designed to make high fidelity artwork, their workflows are just not as quick for just putting down stuff on the page quickly.

Case in point, I hammered out 37 slides a few weeks ago in about 2 hours that captured a rough site layout, and a simulated workflow via internal hyperlinks. Maybe it's my unfamiliarity with the better vector tools, but I doubt that I could sit down in the morning and hash out a working sketch of a site before a working lunch meeting the same day in Inkscape. (though I'd definitely want to create some of the art assets in those tools for the final design).

> vector tools are designed to make high fidelity artwork

This might be a valid point against Inkscape, but not against OpenOffice Draw.

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.

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.

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.

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.

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.

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 never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups.

First of all, vector graphics tools like Inkscape are a lot better suited for that task.

Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support.

I tend to think that whatever allows the designer to create and communicate their vision the fastest is what's best suited for the task. For many designers, its the tool they've been using for over a decade. It imports and exports a wide range of formats, so even the case against proprietary is a non-issue. And when the project moves from the mock-ups stage to the creation of the graphical assets for the launch, Photoshop is still good for that too!

Without question, Photoshop is the most versatile tool I've used in my professional career as a web developer.

>I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups.

People have been using Photoshop for years (like myself), and personally these people feel that open source equivalents like GIMP are still way off in terms of competing with Photoshop.

>First of all, vector graphics tools like Inkscape are a lot better suited for that task.

I have used both Inkscape and Photoshop for quite a few years. It's unfair to even compare them. And, frankly Photoshop _is_ far more powerful if you want to go for high fidelity mockups.

Why not fireworks over photoshop? Its hybrid vector/imaging toolset make for a good web design experience.

In my experience, Fireworks is far less useful when it comes to the creation of graphics after the initial wireframing. On the other hand, Photoshop [and GIMP] is completely usable throughout the entire design process. For this reason, many designers would rather learn, and pay for, only one product, and that product is Photoshop. As a side note, although GIMP lags in a few areas, notably on the typography side of things, it's the best product for my needs when I weigh cost and features, and only rarely do I find myself wishing I had tossed several hundred dollars for Photoshop.

>> Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support.

I'm not sure that I follow here. Why do they deserve our support? (Not to say that they don't deserve support, but thats a rather imposing claim without support)

> I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups.

When I was younger, I couldn't imagine why people would spend hundreds on Creative Suite, MS Office, etc. I could just use GIMP, Inkscape, OpenOffice, etc. for free, and stick it to the man.

Now, I run a business, and I think anyone who uses substandard tools to save a few hundred bucks is crazy. I also think anyone who really believes that the freebie tools I mentioned are even close to the standard of the professional tools I mentioned is crazy. The cost of these professional tools is relatively small compared to the money they save through increased efficiency alone, but in many cases they get much better results that would justify the cost anyway.

(I could list a numerous objective, widely applicable reasons in each case, and I have done so in other forums on several occasions, but this probably isn't the place. I'm just trying to explain why people do the things you asked about.)

+1 for inkscape. I love it.

-1 for the horrid experience inkscape is on the mac. Great on windows though.

Somedays I think Inkscape on the Mac is only slightly better than having to hand-code my data with a hex editor.

Although your statement is apparently a joke, there's some unexpected truth in it:

You don't even need a hex editor – SVG is an XML format, so a simple text editor will do perfectly fine! This means that in case of some Inkscape issues, you can always fine-tune the vector graphics "by hand".

This also means that generating vector graphics is as easy as generating HTML code in a web application. You don't need any imaging library for that. (For the old-school hackers: yes, this is also possible with Postscript, i.e. EPS) Then, you can use Inkscape to preview the picture and to make some final changes by hand, if desired. (Here, things get tricky if you use EPS instead)

Also, any modern browser understands SVG, so you don't have to do any image conversion. Heck, you don't even need an <img> tag! Just put the SVG code directly into your (X)HTML document.

tl;dr: SVG is really cool, and Inkscape uses it natively.

I'm definitely going to be in the minority here, but I start with Excel.

Here's why:

- It's free

- I have a perfect grid system

- I can color in anything with borders and gradients also

- I can format the text with spacing

- Margin and padding properties are done using cell spacing properties

- You can add pictures anywhere

- I can easily copy the entire worksheet and paste it into Paint

.. and it translates perfectly into a <table> :P

In parallel with this discussion, I'm doing some design work in a Word table. It's funny, I didn't even think of using Excel. Excel's grid-oriented focus gets me out of creative space and into analytical space. Also I used to do a lot of spreadsheeting and would have dreams about being in the grid of the spreadsheet and having to maneuver around, so it doesn't have particularly pleasant associations to me.

Excel is free?

I already have it for other purposes. It is free compared to the mockup tools that I would have to pay for, I don't have to pay extra to use Excel.

I've also used Excel for some mockups. This forces you to keep things in grids and focus on simplicity, functionality and usability rather than the fluff that Photoshop filters bring.

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.

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.

Photoshop is pen and pencil for me.

Exactly. Within 60 seconds I can have screenshotted another site whose template might be vaguely close in structure to that I'm thinking of, delete their text and write in my own.

No way you can get anywhere close to that kind of speed with code.

Well, technically you can, but you’re right about the speed:

    javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Very cool.

I figured there must be some Chrome extensions that make use of this, and it looks like there are. One adds some WYSIWYG-type tools to the current page: http://chrome.google.com/extensions/detail/claldafnnhbflndjb...

Fireworks still suits me best for prototyping and slicing. I'd rather give my money to Pixelmator or an indie though.

Somebody could make a fortune building an OS X app that supports legacy layered PSDs and PNGs.

The irony though would be that they would probably use either Photoshop or Fireworks to do the app.

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.

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! http://blog.swixhq.com/designing-swix-with-keynote/

Very interesting! I've worked with people who did their design in PowerPoint for many of the same reasons.

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.

Starting in code makes it about the coder, not the user. It conflates implementation with design.

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.

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 (http://www.gimpshop.com/), although this hasn't been updated for a while.

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.

I think the article was more about using code to do the design rather than any image tools. You could replace Photoshop with Gimp in the article and the original arguments would hold.

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.

Reply on news.ycombinator.com