8 Reasons to Stop Using Photoshop For Web Design

Back to Blog

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?

Leave a Reply

9 Responses to “8 Reasons to Stop Using Photoshop For Web Design”

  1. Marc Fishman

    Perhaps I’m showing my age already, but yes, you’ll have to pry my PSD’s from my cold dead hands. The fact is everything you’ve discussed here is indeed valid, but you’re offering NO viable solutions. I’ve long found that our creative industry is such that designers are being forced into hybrid development roles that ultimately make the end product suffer. I’ve been a stalwart believer that a company / a client should not pay a designer to be a developer, nor vice versa. In my humble opinion, the marriage of the two is what creates the best sites.

    Using tools like Balsamiq, HotGloo, or Cacoo allow for basic wireframing to be developed… Such that when it comes time to make mockups (even in the dreaded Photoshop), it should be done with the designer knowing full well what needs to be built, and how to build it. Simply put, any GUI solution (like fireworks, etc.) end up churning out bloated code that develops have long told me were worthless to them in the long run.

    When push comes to shove, sure, there will be times when a client will force a designer into a front-end development role, and as such, I think it should be on the designer to know how to use the tools that exist in their toolbox in order to make the best product. And for me, that’s a combination of Illustrator and Photoshop, followed closely by Dreamweaver. Essentially projects should be built from the ground up in a friendly WYSIWYG editor, where the Creative Suite is used to build ELEMENTS of the final website, instead of attempting to built an entire mockup site in a single PSD, and spend time from there carving it up for production.

    Ultimately Photoshop offers a seasoned designer an unlimited canvas of creativity… and all the other tools thus far tend to squash that for me.

    Reply
    • Marktime Media

      Even ignoring the development aspect of it (like you said, and I agree, Fireworks cranked out really crappy code) and focusing only on design (mockups, concepts, etc), the workflow aspect of Photoshop is completely frustrating compared to something like Fireworks because of the limitations of a photo-manipulation tool trying to lay out things it wasn’t built for (what I alluded to in most of my points about bad element management). This isn’t even a “build in browser vs. build in GUI” argument at all, just a “this is a lousy GUI” argument.

      That being said, I am getting pretty excited about tools like Macaw that seem to be a great next step for designing visually but exporting workable starter code that doesn’t suck.

      Reply
  2. Rick

    Thanks for posting. I had no idea about Google Web Designer (another Lynda.com tutorial to look forwards to) and I am happy to say I am a Fireworks convert. Hope all is well with the Marktimers. take care.

    Reply
  3. Owen

    Another great resource that I came across. I’ve been using photoshop for a long time but I am young and still flexible so learning new tools and workflow is still an exciting part of the game for me. I like working on client sites and I’m more artistic I will definitely be backing Macaw but while that’s in the kitchen I’ll also be trying out Google’s new tools. Let’s hope they don’t deep six it after I get a good workflow going but knowing Google that’s always something to be aware of. Thanks again for the great resources.

    Reply
  4. Devin

    I didn’t realize Google Web Designer was a thing. After messing around with it for an hour, I’m convinced it’s 99% ad creation and 1% web design, but maybe that’s just me (I’m rather inexperienced).

    However, I am excited to see Macaw. Do you know if you’ll be able to use that to make a dynamic website, and then just publish to your hosting provider? Are they really eliminating all the code that designers like myself tend to fear?

    Reply
  5. Chris

    I believe Photoshop is the best even though much of what the article says is true. If I want to impress a client with a design I’m going to make it pretty in Photoshop even if it takes me a little longer and requires more planning to use effectively than a simpler tool.

    One can do amazing things with Photoshop, things that Fireworks and the likes couldn’t dream of.
    If you are just starting out or plan to make simpler less graphical sites the other tools are fine but when it comes to making sites that make you go WOW theres still no alternative to Photoshop IMO.

    Reply
  6. Joan Cam

    Have you guys tried Export Kit? It converts your PSD to HTML5 and CSS3 perfectly – no tables! You only need to press a button and you get PSD to HTML.

    Reply
  7. Joe Simmonds

    Photoshop is what I’ve always used and the designers and coders I work with are all comfortable with it. Sounds like it’d be a good more to get familiar with some other programs.

    Reply
  8. Bruce Chantler

    Photoshop is considered to be one of the best tools to design a website. But there are so many other innovative web designing tools that can help web designers build impressive websites easily and quickly.

    Reply