Judging by the amount of love it gets in all the design media, it seems like Photoshop is the perfect design tool. Designers and Photoshop go together like Peanut Butter and Jelly, it’s the holy grail of design productivity, you can use it to build anything your heart desires, and it will slice, dice, and make you a sandwich while walking your dog and waxing your car.

All kidding aside, a program that was once initially built as a photo editor and image manipulator (and a great one, at that) has slowly evolved into a bloated, sluggish, and overstuffed Swiss Army Knife sort of tool that tries to be everything to everyone. But the thing about Swiss Army Knives is that, while they are good knives, I don’t know anyone that would prefer to use them for cutting, sawing, unscrewing, scissoring, or bottle opening instead of a tool that was specifically designed for the job.

What’s so bad about using Photoshop to design websites?

1. Doesn’t translate to the language of the web

   Websites have a lot of dynamic elements: states, pages, dropdowns, transitions, animations… the list goes on and on. So what do we get in Photoshop? Layers, Folders, Groups, and Smart Objects. Which one do I use for a state change? What about a dropdown? Do I build all my pages in one file or as separate files? Do I use a group, a Smart Object, or a folder for this button? What about the header image? The language used in Photoshop does not translate to the language used in building a website, and this causes inconsistency and confusion between projects.

2. Terrible vector management

   Creating vector images is a necessary skill that designers need to learn to create scalable elements, like graphics and logos. And once you have experienced a real vector workflow (using a tool like Adobe Illustrator) you will wonder how you ever put up with the counter-intuitive vector tools inside of Photoshop. Standard vector elements are styled and controlled using entirely different sub-menus and dialog boxes, and you have extremely limited control over what you can do with them without using Layer Styles. Want to draw something custom with the pen tool? It’s another multi-step process or special option to make your pen tool convert to a vector shape instead of a path or selection.

3. Terrible Typography management

   Much like learning a real vector workflow highlights Photoshop’s vector shortcomings, working with good typography tools like Adobe InDesign (which supports a CSS-like paragraph and character style panel for modular editing) makes the flaws in Photoshop’s type management extremely apparent. It’s gotten better over the years, but there is still no way to sample/duplicate specific typography settings, link text fields, or re-use text styles.

4. Terrible color management

   Noticing a theme here? A good design program makes it easy to see which (Hex) color has been used on which element, and extrapolate that easily to CSS for building the actual site. Photoshop’s color management is all over the place depending on what you’re using (Standard layer? Vector layer? Text? Smart Object? Gradient?) and all of it is hidden under separate dialogue boxes, disrupting workflow at best, and forcing people to use alternative, less accurate color-sampling methods (like the eyedropper tool) at worst. And that’s not even including the Layer Styles options for color and border overlays!

5. Terrible slice/asset management

   While this has gotten a little better with the latest Creative Cloud update (assuming you have decided to switch over to the monthly licensing model to get the latest updates), asset management in Photoshop has been lacking for quite some time. Even something as simple as slicing an image for the web involves visiting multiple secondary dialogue boxes to control the name of the slice, the type of file it will save as, and how it will render upon export. A good web design program would enable you to see and edit this inline.

6. Inefficient workarounds for multiple linked instances of single element

   Much like good CSS aims to be modular and reusable, so that minimal edits are required to make changes, a good web design program would enable you to reuse elements in multiple places, where editing one element would result in changes to all of them. Photoshop can do this (sort of) using the Smart Objects feature, but this requires you to open the object in a new tab (or even a different Adobe program) which disrupts your workflow because your changes are not made inline.

7. Practically non-existent prototyping abilities

   A good web design program would enable you to quickly prototype a working version of your design, whether by providing some sort of interactive panel, or exporting your design directly into HTML/CSS for previewing in the browser. A great web design program would even export optimized, intelligent, and standards-compliant HTML/CSS (including typography, colors, buttons, etc.) for use on a production site. Photoshop does none of this. It can’t export HTML at all, not even a table-based layout with inline styles. All you get are (poorly managed) slices of static images.

8. Doesn’t translate to responsive or agile design

   The entire concept of a literal, pixel-perfect mockup is being challenged in the era of multiple devices sizes and constant design iteration. Photoshop does not contain any native flexibility tools that enable you to resize and reflow content on the fly (unless you integrate it externally with Adobe Reflow). But even if you are not concerned with creating a fully responsive mockup inside your design program, the fact that it’s a multi-step process to export usable content out of Photoshop makes it lousy for any sort of rapid or agile design process.

So what are some possible alternatives to the program everyone loves to hate?

(Update January 2016 to provide some newer alternatives)

Sketch

A mac-only application, this newer app is specifically design for web and digital UI interfaces. It is being adopted rapidly by the digital design community due to its ability to produce anything from quick wireframes to full mockups. Like some of the programs that preceded it, it combines the best of vector management with raster graphics, and comes with a ton of tools specific to web design (like excellent filler content for mockups). It does a good job of combining the language of the web with the language you’d expect in a design tool, and the learning curve isn’t too steep if you’ve worked with something like Fireworks or Illustrator before. If you’re on a mac, I highly recommend checking them out.

Adobe Fireworks

A former Macromedia acquisition, this web prototyping program was the gold standard in web design for several years. It had practically everything you could need – excellent vector and typography controls, inline management of slices, the ability to add States and Pages in addition to layers, reusable Symbols and Master Elements for modular design, the ability to preview your interactive elements as well as export to (table-based) HTML for prototyping. Unfortunately, Adobe never prioritized Fireworks in their development cycles, so it remained stagnant (not to mention a bit buggy) until earlier this year, when they announced they were ceasing further development of the program altogether. That being said, it’s still the most comprehensive alternative to Photoshop at the time of this writing. (Update: I’d argue Sketch replaced this now)

Macaw

Update: Macaw just got acquired by InVision, a company who makes some pretty great prototyping tools)
An upcoming tool (currently in development) that promises to take the best parts of the Photoshop and Fireworks GUI, and reimagine them as a semantic web design and prototyping program with a fully responsive canvas. Why is this exciting? Two reasons: encouraging a semantic approach to web design asset organization (the layer and group names become the CSS class names), and the ability for the program to make increasingly intelligent CSS decisions as it learns more about your project. Want to learn more? Go check them out! Or go back them on Kickstarter!

Google Web Designer

This just-launched beta by Google (unveiled earlier this week) is an HTML5 app that has a similar Photoshop-esque GUI, where what you design is converted to output code. This app seems to be specially designed for building animations and ad creation, including banners, interstitials, and expandable ads.

What about you? Do you use alternate design tools, or will be be prying those PSDs out of your cold, dead hands?