Why Illustrator is my tool of choice when it comes to web design.
A big part of the time we spend in front of a screen is (should?) be using the tools of our trade: text editors, design programs, and others.
So a web designer's tool belt is one of the most important facets of their work. We get comfortable with our tools, but if switching to a new one means higher productivity, quicker work, and more flexibility, wouldn't the change be worth it? Why use a screwdriver when you can use a drill?
Even though Photoshop was created to edit photos, back in the day designers found that it was a relatively good tool to create mockups for their print designs. During the transition from print to web, the tool stuck.
Turns out this was a somewhat flawed process, but since the rise of responsive web design that has come into particularly clear focus. Responsive sites are fluid and flex or shrink according to their containers. And thousands of different devices can produce different results even on the same screen size.
So, Photoshop as a pixel–bound, hacked design tool is lacking some increasingly important functionality.
Understand – I have nothing against Photoshop. I think it's a great tool, especially for editing photos. And it's even a good tool for web design. I just think Illustrator is much better at the web design part of things.
What's Illustrator Got That Photoshop Doesn't?
Illustrator itself is lighter, faster, and simpler. Vector images use less data than rasterized images. That means file sizes are smaller and working in Illustrator is less CPU-intensive than Photoshop. Illustrator has simpler graphic options than Photoshop, probably because its purpose is to create graphics. Simplicity allows you to focus on sound design principles and stop wasting time on unnecessary frills. If your designs are simple and clean, you can work faster and more efficiently in Illustrator. And if you really do need complex and texturized graphics, you can accomplish that in Illustrator, too.
Raster Vector. There are three problems with bitmap images.
First is that anything designed in bitmap has to be pixel perfect not only as you create it, but also when it's placed in its final environment. Pixel perfection = longer work time.
Second, bitmap images simply do not work with the resizing that occurs in a responsive website. In other words, they have no flexibility. Contrast this with SVG's – vector images that retain crispness and flexibility in any responsive situation.
Third, bitmaps and retina displays are not friends. Retina screens have twice as many pixels as normal screens, which means any pixel–based image is just blown up twice as big, leading to lower quality. This is part of the reason for the "flat design" trend, which allows the use of CSS to get the browser to render things instead of relying on bitmap objects. This problem is another problem that is solved by using SVG's – vector images are just as sharp on retina displays as they are on normal displays.
Incidentally, Illustrator is purely vector–goodness but if you have to use a bitmap image (like a photograph), it's as easy as dragging and dropping onto the artboard.
Speaking of art boards... As opposed to the sometimes–irritating layers system, Illustrator employs an artboard system which means you can select and manipulate any object on the screen with one click. It's more intuitive and corresponds to less clicks, making your work faster and more fluid.
Better functionality and workflow. Here's some examples:
Size adjustment is never a problem in Illustrator. It can get pretty vexing in Photoshop.
Using the symbols panel in Illustrator, you can create a library of icons and form elements that can be reused and manipulated many times over. Photoshop has the "Custom Shapes" feature which is similar but has major limitations: you can't define a precise size for elements, you can't change the dimensions of the element once it's been created, and there isn't a specific panel to manage all your "custom shapes."
You can apply non–destructive rounded corners to pretty much any object (not just rectangles, like in Photoshop).
Working with text is much easier and more intuitive. You can easily float text around images and objects (a big gripe with Photoshop users). And just like CSS, you can employ character and paragraph styles to typographic elements. When you make changes they take effect across the whole document.
For me, switching from Photoshop to Illustrator has made a huge difference in my work. I feel lighter, faster, more agile, more focused, and more capable of doing good work. And I'm not the only one.
Seems like there's an Illustrator renaissance happening. More and more web designers are defecting from Blue to Orange. And why wouldn't they if the tool fits the job better?
What about Fireworks, you say? I've never really felt comfortable in that program yet. Maybe that'll change in the future. If you're interested in Fireworks though, here are some good articles about it: