I used to be really into hip hop and electronica as a teenager and went to a lot of live shows. A couple times, I even worked up the courage to go talk to the artists. Since I didn’t really know what to say, I’d usually ask them what software they used to produce their music.

This seemed like a great question to me at the time, but later on I overheard some more music-savvy friends talking about this, and making fun of music geeks who can only talk about software…

Tool & Output

I guess this makes sense: what’s important is the work itself, not the tool used to create it. Plus, just because you’re using the same piece of software as a famous DJ won’t make you as good as him.

So from that time on, I stopped asking that question and tried to find different topics of conversation.

My point with this story is to prefix this post with a disclaimer: the tool you use matters far less than the output you create, and obsessing over software is a sure path to flame wars and wasted time.

The Tools of Web Design

Still, tools are important, and people often ask me what I use to design sites and user interfaces. My answer hasn’t changed over the past couple years: Photoshop.

This is not a controversial answer by any means, since I believe Photoshop is still used by the majority of web designers. But I thought it would be interesting to explain the reasons why I’m still using the good old ‘shop, as well as look at the alternatives.

Photoshop

First of all, why are the advantages of using Photoshop? Paradoxically, for me Photoshop’s main advantage compared to its competition is also its biggest drawback: the fact that it’s not web design software at all.

It’s a drawback because it means the user interface is not tailored towards web design use, and the software itself is bloated with tons of useless features.

But it’s also a huge advantage because it means you’ll never be limited by the app itself.

Want to give your button a drop-shadow? You can do that. Want to give it a leopard-print texture? You can do that too!

Using Photoshop gives you the knowledge that whatever you want to do, it’s probably possible without opening a different app. Sure, it might require 15 steps, but you can still do it.

What’s more, with the latest version, Photoshop has actually introduced a couple of major improvements for web and user interface designers.

Fireworks

Fireworks is branded as Adobe’s web design application, and has many useful features for web designers. Or at least, that’s what people tell me, as I must confess I’ve never seriously used it.

So I don’t really feel qualified to talk about it. But I do know you can clearly do great work with Fireworks, as shown by awesome designers such as Benjamin De Cock and Rogie King.

Illustrator

Illustrator seems like another good candidate, and in fact I use is frequently. But I only use it for small elements like icons or shapes, not whole designs.

The reason is that Illustrator is at its heart a vector-based program, and even with features like pixel preview, it doesn’t feel suited to web design.

Then again, Ryan Putnam seems to do just fine with it, as you can see from Amperbranch or VectorMill.

InDesign

Now we’re really swimming in unfamiliar waters, as I must’ve opened InDesign once or twice in my life, and it’s not usually thought of as a web design tool at all.

But Jesse Bennet-Chamberlain thinks different, and uses it as part of his responsive web design process.

Keynote

Yes, I’m talking about Keynote, Apple’s Powerpoint alternative.

According to design agency Eden-Spiekermann, it turns out it’s a great web design tool as well thanks to its interaction prototyping capabilities. Who knew?

Sketch 2

I recently reviewed Sketch 2 and although it clearly has a lot of potential, I wasn’t totally convinced (but people tell me they’ve fixed some bugs since).

Assuming the problems I mentioned go away, Sketch will be a great tool to design icons and individual UI elements. I’m not sure it’s the most appropriate to build whole layouts, though.

HTML/CSS

Another valid option (mainly thanks to the new CSS3 properties) is to go straight to the HTML/CSS stage. This is made even easier by using something like SASS or LESS to alleviate the pain of coding CSS (in fact, add HAML to the mix for an even better experience). In fact that’s what I’ve done myself for The Toolbox as well as the Folyo blog.

But both those designs were modifications of existing themes, and relatively simple designs at that. For more complex work, I find that starting off straight at the HTML/CSS stage doesn’t let me be creative, because I’m too constrained by technical limitations and the sheer time it takes to implement a new idea.

If you know it’ll take you 30 minutes just to code up that nav bar with the nice gradient and glow effect, your subconscious might nudge you towards a simpler solution that doesn’t generate as many headaches.

For example, the Quora team doesn’t use Photoshop. And don’t get me wrong, I love Quora as a site, but their design feels flat and lifeless. Then again, it’s hard to say if this is a direct result of going straight to HTML/CSS, or if it’s a deliberate design choice.

The Future

Some exciting new tools are coming in the future. One of these is CSS Piffle, which despite its stupid name (seriously, what’s a “piffle“?) looks very promising.

So I’m sure we’ll get a real web design application one day. In the meantime, it looks like it’s still Photoshop for me.

So Which One’s the Best?

As you can see, every app in this list is perfectly capable of being used to produce great work.

Some apps (like Keynote or InDesign) are better suited to complex, large-scale designs, while others (like Sketch or Photoshop) are great for focusing on smaller details. But even that’s not a hard-and-fast rule.

And I’m not fooling myself. The main reason why I’ll keep on using Photoshop instead of Fireworks, Illustrator, Keynote, InDesign, 3D Studio Max, or MS Paint for web design is not because it’s better: it’s simply because it’s what I’m used to.

But if you’re starting out fresh, I encourage you to find the app that’s best suited to what you want to do. But in any case remember, what really matters is the outcome, not the tool!