Photoshop is a hack

  •   Joshua Buckwalter

By Joshua Buckwalter

Photoshop is like the Swiss Army Knife of the design profession. Should it be?

It’s the go-to application when a designer wants to accurately prescribe the style and layout of a website before diving into code or handing it off to a front-end developer. Its use is nearly uniform in the industry; however, this is only for lack of robust alternatives. Adobe has over the years added more and more features to assist designers, but perhaps it’s time we started demanding less out of the application and demanded a full-featured application driven by the news of the medium.

A remedial review of the suite.

I began my design career in print, and so I view the Adobe Creative Suite through those eyes. For each area of the job there is a corresponding application with tools to suit it. When crafting artifacts for print it’s not uncommon to be working across a number of applications for a single piece.

Illustrator

For graphics, illustrations and simple layouts there is Illustrator. Its tools and palette set are geared specifically toward producing vector graphics. It lends itself to page layout quite nicely, but can quickly become unwieldy when the page gets complex or spills over to multiple pages.

InDesign

Enter InDesign. It offers tools similar to that of Illustrator, but its palette set and canvas are oriented to page layout and pagination.

Photoshop

Then we have Photoshop. Whenever you have an image, you will inevitably need to edit, color correct or mask it. This is the purpose of Photoshop. Over the past few years, it’s been given some tools aimed specifically at web designers. However, there is no escaping the fact that the application is oriented specifically for image manipulation.

Each of these three applications have enough parity in feature sets, so it is possible to use any of them for a given graphic task. This can also be said about a pair of pliers and vice grips. The tool is much more effective when used for the its intended task.

Photoshop for the Web

It’s not worth diving into how Photoshop ended up being used so ubiquitously for web design. It will suffice to acknowledge that it is. I would assert that this is due largely to the lack of dedicated tools for web design. Somewhere, someone is screaming something about Fireworks and I acknowledge this. But since Adobe is killing it off, I’m not going to tackle the merits of this particular application.

Designers lack a robust piece of software specifically oriented to web design. During the early days of web design (for reference I’m referring to the early 2000s) we gravitated toward a tool that had the feature sets we required, and that offered enough flexibility for us to create the things we needed. PS should be recognized for its power to lend itself to such a wide variety of tasks. And even with the myriad of other apps out there, PS still reigns as the go-to for many designers. Partially because of familiarity, but mostly due to lack of alternatives.

If Adobe chose to unify the features sets found across Edge and Muse and gave it the level of polish found in their flagship apps, I’d be first in line to adopt.

New Contenders

A few software firms have stepped up to fill the void and have created interesting, albeit lightweight alternatives.

Sketch App

Sketch App

Sketch is by far the most far along in solving the problem and in gaining a following of users. Unlike Photoshop, this is a vector based app. It prioritizes vector editing and provides context for how these graphics will break down to raster. 

This app’s method for generating styles based on conventions that exist in CSS lends itself to creating layouts and style that will translate well to the browser, and does so using a UI that takes its cue from popular Apple apps like Keynote and Pages. It comes chock-a-block with features that web designers crave (grids, pages and artboards, iOS mirroring, and character and object styles that work). I’m not certain how successful the faux Apple style interface is, but it might be a lack of familiarity driving my complaint here.

A more in-depth review can be found here: http://blog.mengto.com/sketch-vs-photoshop/

Check out the app itself here: http://www.bohemiancoding.com/sketch/

Macaw 

Macaw

Macaw hasn’t hit the scene quite yet, but its proposed feature set is intriguing. Without being able to tool around with the app it’s hard to give it a fair shake but I think there are a few things worth calling out.

Alchemy: This app intends to generate usable code. And its patent-pending algorithm aims to create code that wouldn’t make a developer want to wretch upon viewing. This is a tall order given similar solutions that have come before, but I’ll be interested to give it a shot and see how our front-end devs review it. As nifty as this promises to be, I have major doubts that it’ll ever be useful for the kind of work we do here at Inovāt, but solo designers may find it to be a god-send.

Responsive Layouts: This is clutch. Designing mobile first inevitably means a mess of rigid Photoshop documents that represent multiple breakpoints unless you want to design in the browser, which I’ll get to later.

Preview Macaw: http://macaw.co/

Myriad Adobe Apps

Adobe Edge Reflow

Adobe has been tossing out apps left and right that offer variations on a similar theme. Most recently, these have included the Edge suite: Code, Reflow, Inspect and Animate. Each stand alone app attempts to provide itss own solution to the problem. Code is, you guessed it, a code editor. It’s nice, but I haven’t found anyone who’s been willing to throw aside Coda or Text-Mate to adopt this full-time. Reflow is interesting, it’s a WYSIWIG editor with breakpoints and potentially nice for prototyping. Inspect offers the ability to live preview your responsive design right on your phone by pairing an iOS app and Chrome Plugin. It’s an excellent utility to have in your dev. toolkit. Animate is a replacement for Flash animations that generates HTML5 and JS. Animated banners will never die.

Adobe Muse is an interesting experiment. This could most easily be described as InDesign for the web. You have full control of your site's pagination and you can design an entire site within the confines of a single file. It proposes designing at predetermined break points for Mobile, Tablet and Desktop. The rest of it feels like your typical Adobe app. It generates working code as well but it is atrocious, and I wouldn't recommend using it for anything past a prototype.

Designing in the browser.

The movement to ditch layout tools all together and skip right to HTML and CSS. There are dozes of articles out there enumerating the reasons to adopt this approach and I’ll let you google that for yourselves. This article is long enough without getting into the debate on how much code a designer should or shouldn’t be doing. : )

Sigh…

Alternatives will continue to pop up and evolve. In my estimation, nothing has quite hit the mark, and I’m sure I’ll be pushing pixels in Photoshop for the forceable future. But, I look forward to putting these new production tools through their paces as time goes on. I will say that if Adobe chose to unify the feature sets found across Edge and Muse and gave it the level of polish found in their flagship apps, I’d be first in line to adopt. Here’s hoping they push these side projects forward.

Featured article image by Marco Papale



  • Jeff

    As an early backer of Macaw, and a now user, I have to say THIS tool might be the tool all of us front-end web designers have been looking for. It's still clunky in areas, but it's very easy to prototype in. Oh, and the code it spits out is clean enough that my more savvy developers haven't laughed at me yet.

    Reply