Design Tools Are Broken

by Gordon. 13 Comments

Spending lots of time both coding and designing has given me an acute awareness of how poor design tools are. Design itself has come a long way, but the design process has not. As a disclaimer, most of what is about to be said applies to user interface and graphic design, as opposed to illustration and the creative process.

The culture around design is primarily focused on the end product and not the process behind it. Photoshop, the industry standard for user interface design, is pixel-centric (limited vector support being a later addition). Trivial things such as rounding corners or changing resolutions are often non-trivial to accomplish. Re-usable assets, such as those found on Smashing Magazine, often consist of static images, hopefully in multiple resolutions. Cascading stylesheets, the lifeblood of web design, are exceedingly repetitive and usually degrade into an unmaintainable soup.

For comparison, the culture of software development largely evolves around getting things done cleanly, efficiently, and maintainably. Entire programming frameworks and communities arise around the idea of making the process of doing something developers are already able to do (e.g build websites) simpler. Existing bodies of code are re-factored entirely to be cleaner, despite having less features. New languages emerge with the goal of making software easier to develop. Re-usable libraries exist for almost every language and programming task imaginable.

The stereotypical developer is horrible at graphic design, but much of this is due to an impedance mismatch between software development and design practices. From the perspective of a good developer, many of the techniques that are required to create good design are appalling and contrary to their core philosophy.

Massive Violation of DRY

From Wikipedia:

Don’t Repeat Yourself (DRY) or Duplication is Evil (DIE) is a principle of software development aimed at reducing repetition of information of all kinds…

A rule of thumb for this is if you find yourself doing the same thing often, there is probably/should be a better way to do it. Whether I am writing CSS or creating layouts and graphics in Fireworks or Photoshop, I repeat myself all the time. As a response to this for CSS, developers have created tools such as SASS and LESS. The elephant in the room, however, is graphic design. Accomplishing commonplace visual effects such as curved drop shadows and glossy buttons usually requires following multi-step rote processes every time they are needed.

Poor Extensibility and Reusability

Perhaps causally related with the violation of DRY principles is the lack of ways to extend graphics design tools and reuse existing graphical designs.

In the case of software development, common design patterns and features can easily be modularized and re-used in various projects and components. Existing frameworks are also designed with plugin architecture’s in mind. The prevalence of rails extensions, for example, has made creating web applications with Ruby on Rails amazingly easy, far beyond what the original framework intended.

Graphic design tools are quite the opposite. One could imagine things like glossy buttons, advanced shadows, and other effects being easily scripted or packaged into custom filters, but it’s not so in reality. Despite having limited scripting support, the really useful plugins for tools like Photoshop and Fireworks were all built years ago in native code. These tools are used by thousands of programmers and designers, but the ecosystem around extending and contributing to these products is almost non-existant. I have personally put immense amounts of effort towards scripting Adobe Fireworks, but this has simply made the limitations more apparent.

CSS3 has actually made great strides in this area, but it will never be a complete substitute for graphics design. I can imagine a future ecosystem consisting of a robust open source graphics editing program(s) accompanied by a plethora of plugins, filters and assets freely distributed and written in a modern scripting language.

Immutability

Finished designs are often immutable and hard to change (and this has nothing to do with the good type of immutability). Source .psd files often consist of layers of flattened pixels, the exact combination of actions which created the layer lost forever. In many cases, this starkly contrasts with the underlying software being designed, which is in a constant state of flux and improvement.

The software equivalent of this would be software development tools which produce raw binaries without source code, the only possibility of change through a finite number of parameters. The natural solution would be to have graphics software which preserves the entire process by which an image was created. For this reason, I personally tend towards Adobe Fireworks, which is slightly better at this, dealing with items at the object level rather than the layer level.

Another solution would be to have the underlying format for the source of an image be an imperative graphics description language, e.g. Degrafa. SVG is theoretically nice, but is poorly implemented and monolithic, but still might ultimately be the answer.

Lack of Version Control

Binary source files don’t mesh well with version control. Merging conflicts is near impossible. Viewing and understanding the history of a file is not easy. I have seen workflows where all the design assets are passed around in shared folders with no version control at all. In the developer world, this would be almost unheard of. This also translates to the web, where design assets are clumsily distributed and the techniques used to create the asset are usually lost.

Reliance on Proprietary Tools

Almost no one would argue with the fact that Adobe Photoshop is the industry standard for graphic design, supplemented by Illustrator and sometimes Fireworks. Other open source tools such as GIMP and Inkscape are slightly sub par and suffer from the same lack of innovation. This state of affairs has been relatively the same for the last decade or more.

Not only does this restrict innovation, but it also restricts the platforms able to do graphics design. This prevents many developers and designers from using operating systems like Ubuntu as their primary OS. Moreover, I would argue that this has contributed to poor design in many OSS applications. Witnessing open-source software transforming the landscape of software development, one can only hope that the same will eventually happen to design.

  • http://twitter.com/mungdiboo senor dingdong

    Agreed. Suggestions on mitigating this clusterfuck at a personal level would be appreciated.

    Sounds like there’s a business proposition in there somewhere.

  • Anonymous

    I think that these are the reasons I became a developer rather than a designer. When I discovered Degrafa, I nearly exploded at the chance to actually create scalable, pixel-perfect designs in a non-baked way. 

  • Codebrief Com

    I don’t know, I would argue that if Photoshop is your primary design tool, you’re doing it wrong. I know many designers do use it as their primary tool, but most I know use Illustrator.

    • Andy Baker

      How does that alter the basic argument being presented here?

  • Andy Baker

    I’ve been thinking on these lines for years. Tools for instancing are usually weak and sometimes broken. (Try using nested Smart Objects in Photoshop for example).

    The interesting thing is that there ARE graphics applications that support instancing, inheritance, parameterization and they have done for many years.

    However they are usually designed for working in 3D. 3D Studio Max has had a very clever system involving base objects with modifier stacks that you can choose to instance at any point. I don’t know Maya as well but I know it has a similar system.

    Back in 2D land, even After Effects is light-years ahead of Photoshop/Illustrator for this kind of thing. It’s even sometimes worth using it for static layouts simply because of it’s architecture.

    • http://codebrief.com Gordon Hempton

      Totally agree with this. I used to play around with Maya a lot and I was always inspired by it’s Hypershade editor. I sometimes think that the ideal 2D design application would use curve meshes with textures/materials.

  • Axilmar

    One of the fundamental problems with computers today is that they suck at information management: computer don’t have information in them, they have binary data. And that’s bad, and it affects everything, including graphics design.

    • Champagne

      Yes the conversation was getting very heavy. I like your “not-of-this-world” approach to humour.

  • http://gabrielross.myopenid.com/ Gabriel Ross

    Yes, that’s precisely the problem I am trying to solve with http://www.grsites.com

  • pianopaul

    This conversation seems to be strictly from a developer POV; if you had spent half as many hours learning and working in graphic design as you do on coding, you wouldn’t presuppose that the industry standard graphic design tools (Adobe) don’t have the capability to create and re-use components.  Exactly the opposite.  It is certainly easy (once you’ve taken the time to learn how) to create custom re-usable Actions, Styles, and Filters within Photoshop and Illustrator.  They can be saved within the work files.  Many of the best current corporate and commercial styles and actions are available from user groups free and plug ins like Eye Candy can give more pre-made options. I think you just need to put in the time to learn the tools, and some more about best practices in UI / UX / graphics. 

    • http://codebrief.com Gordon Hempton

      I have been using Adobe products for eleven years. I understand that you can save layer filter effects and blending modes as a reusable style and that you can save and reuse a series of manual actions. Not sure which “custom filters” you are referring to, but I am guessing that you are talking about custom kernel filters, which are only useful for things such as sharpening etc. These things are hardly sufficient and are some of the reasons why I think design tools are broken.

      I am speaking from the perspective of someone who designs and develops, and I am assuming you are speaking purely as a designer. User groups are hardly comparable to things like open source software on github. I think its hard for many designers to grok the beauty of many developer workflows and organizations because they have never been exposed to them.

      • pianopaul

        Try this for custom filter creation and a user group with many pre-made filters: http://www.filterforge.com/ probably a better selection than you’ll find on github.

  • Alex Wording

    FilterForge is nifty, yet a great workflow it does not make.. That is just not really what is being discussed here. Make a rectangle with rounded corners. Now resize it horizontally while keeping the corners at the same 9 pixel radius. In Photoshop you can’t, in Illustrator you can’t – you’ll have to make a new rectangle of the size you want in order to be able to set the corner radius to 9 pixels.. You can do it in Indesign, but then try to get that out of Indesign into Photoshop or Illustrator with a transparent background, and without introducing any antialiasing on any of the four straigt lines of the rectangle. I guess you can probably do this in Fireworks too, but then there are dozens of other things you can not do very easily in Fireworks so you may need to take you image into Photoshop and you’ll lose the editability of your Fireworks based objects as soon as you do, and if you go back into Fireworks from Photoshop you’ll lose some of your Photoshop effects unless you flatten them and if you have a complex layered PSD don’t be surprised if things don’t look quite right in Fireworks unless you flatten some things.. It is all rather convoluted and you end up repeating yourself all the time, no matter how well you are able to leverage styles, actions, batch processing, saved setting and a few nifty add-ons like FilterForge. 

    I have been using photoshop since the first version (actually since before it was even called photoshop), and sadly, to this day, some excellent features which I enjoyed in programs such as MacDraw Pro, and DeluxePaint before Photoshop even existed still don’t exist in any Adobe products.

    It is true that almost every dialogue in Photoshop allows you to save the settings (though this was implemented across far more dialogues in a more consistent manner in older versions). Custom swatch libraries, styles, dialogue settings of many features, actions can all be saved as external files and re-used. Of course these features are very useful but also extremely limited. Just the other day I was setting up an action to export several hundred PNGs which each needed to be cropped in a specific way so that pairs of graphics of different sizes would line up perfectly when layered without requiring additional code in the app to adjust placement. Easy enough to do. Even easy enough to create an action to automate 98% of the procedure but as is usually the case with Photoshop there is some final tweaking that requires manual fussing. So in the end I have to sit here and run the action several hundred times and each time I have to make a couple minor adjustments which I should have been able to automate. And even Illustrator which does offer a slightly more object oriented approach still lacks a million common sense features to improve workflow, instead it seems bent on making workflow more convoluted as it adds more resource intensive effects. If it improved workflow it would not need these not very compatible, CPU choking effects because with improved workflow we could create the same effects just through clever use of basic components and then we could consistently recreate those uses of those components.

    What is even worse, and I think ridiculous, is that in these most recent versions of the creative suite some of the lowest level functions, the foundations upon which all graphics are built, have become sloppy and inaccurate. CS5 has given me lots of great features which are great time savers for some of the more time consuming things I have to do in Illustrator, Photoshop, and Indesign. But at the same time, if I setup a grid in Indesign and take painstaking care to be sure that everything is lined up perfectly to whole pixel divisions so that no anti-aliasing occurs on any straight lines, then I try to get this into Photoshop I always end up with one horizontal line which gets antialiased as if it is between pixels. I delete that element, recreat it from another element without this problem and without moving this element vertically so the horizontal line should be at the same heigth as the element without problems and I still get a blurred line, on a different element that wasn’t blurred before. Sure I can fix the line after the fact, but the idea here is to let someone else have the file so they can make any changes, export to photoshop and save for web – but I can’t expect this person to be able to grasp the finer points of resolution, pixel grids, and antialiasing. This person can’t tell the difference between an antialiased line and a perfectly sharp line. So after endlessly tweaking the export setting for PDF and for EPS and going to Illustrator with the exact same grid setup and resolution, and then from AI to Photoshop I finally give up and accept the fact that Adobe doesn’t really do pixel perfect any more, not without requiring me to go and fix its sloppiness by hand. Or a perfectly horizontal line in Illustrator between two points who’s positions have been set numerically, checked and double checked, but Illustrator still must antalias that line hlafway along its length as if it was not perfectly flat. Nothing will fix it – snapped to grid, snapped to pixel grid, snapped to points of a constrained square. I run into these kinds of issues when doing precision work all the time with Adobe’s apps – and often end up manually touching up pixels of final flattened layers. Also, if I setup a grid in Illustrator or Indesign, and turn on snap to grid, the snapping behavior is erratic and unreliable, requiring a great deal of painstaking babysitting to make sure it does not start snapping to some arbitrary point between grid points (instead of 2px 4px 6px, it starts snapping to 3.873px, 5.873px, 6.873px = consistently 1.873px off) – when it starts doing this I have to enter transformation positions numerically to be sure that everything gets back on track – of course this has caused me to become paranoid so now for precision work I really have to manually check the positions of every point numerically and I inevitably find a few which are inexplicably not where they should be. Then when I create PDFs from vector based art, or even export raster graphics from vectors, Illustrator or Indesign will use the transparency flattener which creates grids of its own, and it actually creates visible seams between its grid blocks. I guess I can just overlook these seams because they are mostly only visible on screen due to the way these apps render on screen. Yet this problem is two fold – first, many times these graphics are meant to be viewed on screen so these seams can be a major issue, and two, while the seams are mostly only visible on screen, they are actually visible in print as well. They are much less visible in print, and depending on your printing method and device they may be completely invisible but the fact is they are there, and if you require absolutely perfect prints at very high resolution you will see these seams even in print, with a good eye. Then recently I ran into a problem where I had a pure black layer with different levels of transparency, and when I export it as a PNG I find white in my image. This was about to drive me insane because there is only one color in my document – pure black, and a layer mask defining transparency, so where the * does white blurring around some soft edges come from? I finaly found that the problem was with resizing the image in the ‘save for web’ dialogue and using bicubic interpolation – using bilinear eliminated the inexplicable white misting and luckily due to the nature of these particular images bilinear wouldn’t cause any noticable image quality issues. But why would bicubic resizing add white pixels into an image that contained 0 white pixels, an image that contained only pure black pixels of varying transparency – I have an understanding of how these different interpolation methods work and this just seems arbitrary and not in line with the way bicubic interpolation works at all. I didn’t test further but I’d guess, I’d hope, that this only effects resizing the image from within the ‘save for web’ dialogue, but this dialogue is shared between a few apps, and is a pretty important one.. These things are inexcusable for industry standard graphics and design tools. These are essentials that a pro-level graphics tool must get right to be taken seriously, so the fact that Adobe is getting away with these apps being built on a foundation as sloppy as this, for a few versions now, is really sad.

    On top of those essentials becoming sloppy, Illustrator threw out all its great snapping settings so now I can only snap to points, guides or grid, and if I want to snap to other things my only choice is to turn on smart guides which can be a useful time saver but it can also be very sloppy and unpredictable. Photoshop dropped Imageready and a great deal of slicing functionality along with it. The slice tools in CS5 are still very rudimentary compared to what was available in Imageready. Snapshots can be useful in Photoshop, but they can not be saved with a document which drastically and needlessly limits their usefulness. The actions in Photoshop are still very limited and lots of simple things can not really be recorded properly. Like making all layers visible/hidden (seems like a no brainer – especially when navigating up and down the layers with commands is only possible with visible layers). It seems the only way to do this is to make ‘all except current layer’ visible/invisble but there is no way to record or insert that without it being tied to a specific named layer which drastically limits the applications of an action (there may be a way to script that in but here again the older versions made scripting in the actions far more accessible so that even a total non-coder like me could work out a little scripting to make my actions do what I needed them to, but in more recent versions that is no longer the case) – that is just one example, I inevitably must work out overly complicated ways of getting around dozens of stupid limitations of actions any time I have to create a complex action. I seldom keep actions to be used later except for use with a few very specific templates because in most cases, due to the specificity of actions they aren’t going to be much use on other images without serious tweaking and tweaking them would be more time consuming than making new ones due to the convoluted methods needed to work around all those limitations.. But hey, at least in photoshop, actions essentially work – try recording an action in Illustrator, hah, it is a joke… Illustrator can maybe successfully record about 10% of its features if even that, and of that 10% most of the those features will not record their settings properly. No, the actions in Illustrator are essentially useless. And here this is called a creative suite – we should be able to record scripts that actually run between all of these apps seamlessly. Also in the past few versions documentation has been dismal – theri help system goes online and searches their forums now like they aren’t even going to try anymore, we can write the docs for them for free on their forums, because what they did build into the help system is mostly outdated info from earlier versions..

    So yeah. I used to love Adobe, even if they could have helped facilitate better workflows – I figured that would be done in the not to distant future. But that was long ago.. Now I think Adobe sucks – they have swallowed their competition and now their baseline standards have slipped drastically. Sure we got some nifty new features – but really nothing that we shouldn’t have had ages ago – and the trade off is hardly worth it, because apps that deal with vectors, pixels, and grids should, most importantly, before doing anything else at all, handle vectors, pixels, and grids accurately…

    I hope to see inkscape and gimp merged and then brought up to par with their feature sets and useability in the coming years. In some ways these apps are more powerful than Adobe’s offerings – but to get the full power out of them requires a great deal of tinkering and in the end they don’t have the ease of use needed to even match the problematic workflow of the Adobe offerings. Though lately, for speed and accuracy, I have taken to laying down basic vector shapes in Xara, and bringing them into Illustrator only for final tweaking. And more and more I am considering the feasability of using 3DSMax and other 3D tools even for 2D work…