Guest Post: Photoshop is not a page layout tool

The following is a guest post, written by Ben Dansby, with his point of view on using photoshop to design and layout apps. You can follow ben on twitter @bendansby.

Photoshop is not a page layout app

I recently presented Antetype to a group of coworkers who have been using Photoshop exclusively for our web site and app designs. After they had picked their jaws up off the floor, one of them came to me and said that after seeing Antetype, and hearing me liken it to a UI design equivalent of Adobe’s InDesign, designing a web site in Photoshop seemed as crazy as laying out a book in Photoshop.

Really, who would do that? Make a book in Photoshop, it’s insane! You use InDesign for that. It’s got multiple pages, and master pages, and table of content generation, and a million other things that are either absolutely necessary or really helpful for making a book. Actually, you could make a book in Photoshop with layer comps and text areas. And then when your editor deletes a paragraph from your prologue, you could re-do every subsequent block of text in each layer comp. And you could change every single page number in every layer comp when you decide to add a quote to the beginning of the book. But that would be insane. Instead, you use a tool like InDesign specifically made for page layout.

And yet, so many designers find themselves using Photoshop for UI and web design, instead of an app made specifically for those tasks. It’s easy to understand why. Photoshop is ubiquitous, it’s reliable, and most importantly, there simply haven’t been any good apps for screen design (Before you say Fireworks, note that I said “good” screen design apps).

Antetype changes that, in a big way. It’s been specifically created for UI and web design, and it features a radically different approach to design and layout than a graphics app like Photoshop. Despite all the “smart” features that Adobe has crammed into its flagship app over the years, the contents of a PSD are still essentially dumb. Objects in a Photoshop document don’t have any awareness of what they are beyond pixels at certain coordinates. Which makes perfect sense, given Photoshop’s origins as a photo editing app.

But user interfaces are dynamic, contextual, and most definitely not photographs, so they need to be designed in an app that allows objects to be aware of themselves and each other, to behave as they would when they’re real live apps and sites. That’s what Antetype offers, and I want to give you four examples of common frustrations in Photoshop that result from its “pixels on a screen” graphics app approach, and how Antetype addresses each. I’ll start small then work my way up.

Rounded corners

When I draw a rounded rectangle in Photoshop, I’m merely laying down a series of vector points that happen to form a rounded rectangle. The path has no semantic information about being a rectangle or having corners. This means that I cannot change the radius of its corners after the fact, nor can I set the radius on a corner-by-corner basis. Instead I have to manually edit vector points to achieve the result I want. Even worse, if I squash or stretch the rectangle, its corners squash and stretch as well. In Antetype, any of a rectangle’s corners can be any radius at any time, because Antetype knows what a rectangle is and what a corner is. And if I make my rectangle wider, Antetype knows to increase just the width of the rectilinear parts, and leave the corners as is.

Images

In Photoshop, an image is just a floating block of pixels. If I want to replace an image with another image, I have to paste in the new image, move it to the same place in the hierarchy, move it to the same location on the canvas, resize it, apply any layer styles that were applied to the original image, and then delete the old image. In contrast, Antetype treats images as properties of an object. So by simply pointing a rectangle to reference a different image, I can swap out one image for another and Antetype preserves the same location and attributes as the previous image. Even better, I can instantly replace an old version of an image with a new one, wherever that image exists in my document, because Antetype knows about and keeps track of the image file, and uses it to fill my rectangles with the image.

Styles

Unless you’re making a Geocities page, your design has a consistent theme, with elements styled a certain way across multiple pages. Photoshop lets you save a set of attributes to apply them to objects, so that you can more quickly carry the theme across your design. Except, in keeping with our thesis of Photoshop not being smart, applying a style is essentially a script or macro. It will apply the attributes you have saved, but your object bears no connection to the style you applied. Two buttons with the same style applied just happen to be two rounded rectangle vector paths that have the same styling attributes. If you want to change the color of all your buttons with that style, you have to create a new style and apply it to all your buttons all over again. This is a nightmare.

In contrast, Antetype’s widget system allows you to use the same style button throughout your design, and then change the style of every instance of that button whenever you like. All instances of a widget maintain a connection to each other, so that if one changes, Antetype knows about it, and lets you perpetuate those changes to the other instances or keep the change confined to a single button.

Layout

This is the big daddy for me. The first thing you learn if you take a web development course is to not absolutely position things. It’s such a tempting prospect, just drag things where you want them (as Dreamweaver originally presented absolute positioning, even calling AP divs “layers”), and you’ve got your web site! Except that it’s almost always a mistake to absolutely position things, because web pages are constantly changing, bound by web engine rendering rules, and variable in width. By designing in Photoshop, you’re essentially positioning everything this way. Not only is this unrealistic for development, it’s horrendous for the designer as well!

Let’s say you have a lengthy form composed of dozens of fields stretching down several page lengths. Your client calls you and says that they need to add a Middle Initial field right after First Name. You now have to select every single field below First Name, move it down the exact height of another field, its label, and the margin between two fields, grab the footer and move it down, and then manually select the vector points comprising the bottom of your content container object and move them down, before duplicating the First Name field, and moving it down, all the while making sure you’re keeping those margins consistent. I know you’ve had to do something like this many times. To Photoshop, it’s all just layers on a page. The fact that several objects occur in vertical sequence does not concern Photoshop one bit. Such are the follies of using a graphics application to do interface design. To accomplish the same task in Antetype I would select my First Name field and label container object, and hit command-D. That’s it.

I could go on for several more pages about the wonders of using Antetype’s dynamic layout tools (really, don’t get me started on margin and padding), but suffice it to say they will save you a lot of time and frustration. If Antetype had all its other features except the layout tools, it would still be a great app. But the layout tools elevate it to “heavens parting, trumpets sounding” territory.

Time for a Change

Those are just four features of Antetype, and I’ve really only touched on facets of those four features. But hopefully I’ve given you a taste of the difference between doing screen design with an app that understands only pixels and doing screen design with an app that understands interfaces. Just as you wouldn’t use Word to make a spreadsheet, or use Illustrator to edit a photo, it doesn’t make a whole lot of sense to use Photoshop to design an interface. Up until Antetype, our other options were limited or fraught with downsides. But take it from me, a former fellow frustrated screen designer, there is now a better way.

What is your opinion?

Would you be interested to write a guest post on a subject related to Antetype? – please contact us at info@antetype.com if you would.

5 Responses to Guest Post: Photoshop is not a page layout tool

  • Pingback: Quora

  • Almost all the features you listed above… appear in Adobe Fireworks, as well! :-)

    Fireworks was built from the ground up (by Macromedia) as a screen design tool. Yes, Adobe neglected Fireworks for years (and that’s why it is in the sad state where it is today) but it is still a much better tool for screen design than Photoshop:

    – Fireworks has styles
    – Fireworks has proper rounded rectangles
    – Fireworks has pages/layers/states
    – Fireworks has Symbols and Rich Symbols
    – Fireworks has a perfect export engine + export preview to PNG8/24/32, JPG, GIF, SVG
    – Fireworks allows the user to interact easily with objects on the canvas (no need to dig through layers)
    – Fireworks can create and export interactive HTML prototypes (and even live iOS prototypes!)
    – Fireworks has special vector auto shapes
    – Fireworks does only one thing, and well: screen/UI design
    – and much, much more!

    It is a pity that Adobe did not develop this great tool properly… :-(

    • Fireworks would have been a great tool if it wasn’t atrociously buggy and poorly designed. It was still much better than Photoshop for screen design, but I couldn’t really recommend it to anyone due to how bad of shape it was in. And Antetype’s layout tools make Fireworks or any other graphics program look even more clunky and primitive than they already are.

  • Pingback: The Present And Future Of Adobe Fireworks | Smashing Fireworks

  • Yep Fireworks was good 5 years ago, right now it is outdated. I worked in it for a 3 year, I love it very mutch, but stability is so bad it is just not real to use it in real hard production. Render engine is so bad, I just can’t generate nice PDF. It is shame when you draw everything inside FW in vector but as a result you will get raster in PDF.

Leave a Reply