I don’t hate Photoshop. I don’t hate Sketch. I don’t hate any other UI design tool that I’ve failed to talk about here. But I do prefer Illustrator. I think it’s the best tool for me and my workflow. My goal is to show you some of the features that I find help me with my day to day tasks, and maybe it can help you streamline your day too.
A Very Brief History of Photoshop
Like I said in Part 1, I used Photoshop for web design once upon a time. I used it because that was what everyone used. I used it because that was what tutorials used at the time (and seem to still be using). I used it because that was how all the freebies were built. I used it because I thought I—a web designer—was supposed to use Photoshop. Let’s take a closer look at Photoshop. Why was it created? Who is it built for? Photoshop was created for exactly what the name implies. It was created to mimic the tools photographers used when developing photos. Burn, dodge, color channel mixer, brightness, contrast, curves, the clone stamp tool, all the transparency options; these features are all meant to manipulate photographs. As UI Designers, most of these tools aren’t necessary.
The Right Tools for the Job
As User Interface (UI)/Web designers (we’ll just say UI Designers from now on) usually don’t use photo manipulation tools on a macro level very often. They might use it to build textures or headers, or backgrounds. But this isn’t what they’re doing a majority of the time.
What kinds of things do UI Designers need their design tools to do?
UI Designers aren’t creating a piece of artwork. UI Designers aren’t designing a brochure or designing a flyer. UI Designers are concerned with displaying data in a coherent way that makes the application simple and intuitive to use. UI Designers need to think about how all of the pages they’re designing work together. UI Designers should be worried about how the user will interact with their application.
What Do We Need Our Design Tool to Do?
What are UI Designers using on a regular basis? As a UI Designer, what features do you need your tools to have? What kinds of things do your design tools need to do?
Here’s What I Look For
- We need to create scalable, vector shapes of different kinds; form fields, buttons, graphs, windows, icons, etc.
- It would be helpful to have non-destructive vector shapes.
- It would be helpful to be able to manipulate multiple shapes at once.
- It would be helpful to be able to reuse these shapes, and save them, to access on different projects.
- We need to manipulate text.
- It would be helpful to be able to create reusable character and paragraph styles.
- We need artboards of varying sizes, because we are designing many different pages of different types.
- We need an easy way to export our designs.
- We need organize all of our design elements.
- We need pixel support. We are designing for screens, after all.
Our Options
If we agree on some or most of those 10 items, we have a lot of options for design tools as UI Designers. What are they?
- There is Sketch, which has been gaining a lot of momentum recently. The major drawback of Sketch is that it’s a Mac only product; I know this might come as a shock to a lot of you, but not everyone uses a Mac.
- There is GIMP, which is free. It’s got a lot of features, but doesn’t offer as many as Photoshop. GIMP’s UI is a little lacking in my opinion.
- There is Affinity Designer which a lot of people really seem to like. Full disclosure, I’ve never used it, so I don’t have an opinion either way.
For the sake of time, I’m going to stick with comparing Adobe products. I know, I know. I’m a sheep. First, I don’t pay for Creative Cloud. My company does, so cost isn’t an issue for me. Secondly, like it or not, Adobe is the industry standard. I realize that not everyone chooses to use Adobe products, but I think my methodology is useful when comparing your own set of design program options. So if you’re not happy with my list, use your own list!
Now that we’ve come up with our list of needs, lets see how well our options stack up. What I’m doing is taking our requirements and comparing each of our options to see what
Our Design Tool Requirements Matrix
[raw]
| PSPhotoshop | INIndesign | FWFireworks | FLFlash | AIIllustrator | |
|---|---|---|---|---|---|
| Shapes |
|
|
|
|
|
| Vectors |
|
|
|
|
|
| Multiple Shapes |
*1
|
|
|
|
|
| Symbols |
*2
|
*3
|
|
|
|
| Text |
|
|
|
|
|
| Text Styles |
*4
|
|
*5
|
|
|
| Artboards |
|
*6
|
|
|
|
| Export |
*7
|
|
*5
|
|
|
| Layers |
|
|
*9
|
|
|
| Pixel Support |
|
|
|
|
|
[/raw]
- *1PS does allow you to edit multiple vector shapes at once, however it requires having the “properties” panel to be open. You can’t do it from the color panel like you can on Illustrator, which I find inconvenient.
- *2Sort of, but not really. PS can import smart objects and reuse them throughout the file. However, PS doesn’t allow linking to external assets, can’t save libraries. Collaboration is difficult.
- *3Sort of. IN has better support than PS, but it’s really geared towards long text documents.
- *4I think it’s worth noting that this wasn’t added to Photoshop until CS6 in 2012.
- *5FW text styles are really graphic styles. It doesn’t seem to save font, font sizes, font styles, etc. To be honest, I’m not as familiar as I should be.
- *6Sort of but not really. Let’s face it, IN is made for designing brochures, books, and other print material. You can sort of “hack” it, but every page has to be the same size. It’s really a stretch to say there is artboard support in IN. We need different artboard sizes.
- *7AI arbitrarily limits the number of artboards you can create to 99.
- *8You can even export CSS, but since this is not a web dev guide, we’ll skip this feature. It’s also weird that FW saves working files in PNG format.
- *9FW can export layers as an image file, which is really nice.
The Results
Now that we’ve laid out our applications and their options, let’s see how they compare to each other.
PhotoShop 8/10 Photoshop does a lot of the things we need our design tool to do. We can overcome some of its shortfalls and still get the job done (obviously, millions of designers love it). But it still falls short.
InDesign 8/10 Let’s face it. InDesign is made for designing large print documents. It scores better than Photoshop, but it’s just not made for UI design.
Fireworks 8/10 Fireworks gets a lot of praise from a relatively small group (of very vocal) UI Designers. But you either love it or you hate it. For better or worse, Adobe decided to deprecate FireWorks. As far as I’m concerned FireWorks isn’t an option for me.
Flash 8/10 PSYCH! Flash is dead. We won’t even talk about Flash. Forget about Flash.
Illustrator 10/10 Illustrator scored perfectly on our matrix of requirements. However, in reality it’s not perfect.
Making the Switch
As you can see, for UI Designers, Illustrator has the most versatile toolset. In the following parts we’ll review the specific features of Illustrator that I find really help me in my workflow, and we’ll compare and contrast them to Photoshop.