Note: this post is from 2011. 🤷♂️ Happy to say I design in Figma nowadays (more on that here). But if you’re curious why I was so adamant about designing in Illustrator a decade ago, read on:
When I started at Fuzzco in June of last year, I was thrown into the mix as a designer and front-end developer. In the past, I worked under folks that used standard, tried-and-true methods of designing comps in Photoshop, saving out screens, getting approval, then moving to development—which is totally cool. Fuzzco operated very much like this, except for the not-so-minor detail that we designed websites in Illustrator. Cue uproar. Hear me out, I kicked and screamed for a while at first too.
Beginnings in Illustrator
First, I should say Illustrator was my first love in design software. I enjoy and prefer working in Illustrator for its freeform object-based (as opposed to layer-based) method of layout. It feels more like real life to me—moving blocks around, putting things behind other things. I was not by a long shot an Illustrator hater when I showed up for work. But Illustrator is a vector drawing program, and, well, websites are made of pixels. Photoshop deals in pixels; it just made sense to translate pixels to pixels. That’s where the idea of designing for web in Illustrator broke down for me. Everyone is a pixel-perfectionist these days. It’s the standard, and it’s not that hard if you have a mind for details, but how could anyone even come close to being pixel-precise while wrangling vectors? Plus I totally designed my first few websites in Illustrator and that was when I was, like, a novice and stuff.
If you ever go hang out at Fuzzco HQ for a bit, you’ll realize the way business goes down is akin to a fast-moving train with no end in sight. Designing websites in Photoshop just won’t fly. They work hard and fast and that calls for small incremental change rather than complete reversal of platforms in one day. No matter what I said about pixels to pixels and vectors to vectors, I had no choice but to design for web in Illustrator. It was a dilemma for me until I realized it was the best way to design for web in the crop of design tools that exist today.
Stick with me
Pixel Preview
In order to design successfully in Illustrator, you must keep Pixel Preview turned on most of the time. If you don’t, you will end up with 1 pixel #000 lines that turn into 2 pixel fuzzy #999 lines and objects that hang around 200.358 pixels instead of 200 pixels. Precisely positioning objects is better off controlled with X and Y coordinates.
Workflow
Illustrator’s beautiful object-based workflow is a godsend. Unlike Photoshop’s shoot-me-in-the-face layer-based workflow, Illustrator allows for experimentation in the pasteboard (the area outside artboards), easy shape-making, and simple text box creation and manipulation. In fact, the most I use layers in Illustrator is to put backgrounds and other fixed elements in place and lock them.
Artboards
About artboards—they’re incredible. Artboards were introduced in CS4 and are essentially multiple pages in a single document. When you save your file as a PDF, each artboard is saved as a separate page. Websites are made of pages, Illustrator allows for multiple artboards, which allows a designer to layout a whole website in one Illustrator file. Unlike Layer Comps in Photoshop (the most confusing feature ever), artboards are both easy to use and absolutely functional.
Infinite Scalability
When working on more holistic projects infinite scalability is invaluable. Since my work is not exclusively web-based, I tend to use parts of the website in future print materials. Say you’ve labored over a little ornamental detail on some part of a design that you want to make bigger at some point. In Photoshop, you’d import an object as a scalable vector, be able to re-size it and apply layer styles to it, but not much else. Heaven forbid you redraw it in pixels. This leaves you moving back and forth between two programs. Working in Illustrator, you’re able to take anything you’ve got going on and scale it, move it, rotate it, change it, and never worry about it becoming a blurry, scaled-up, steaming pile of crap.
Future Proof
Finally, using Illustrator on the web is future proof. Let’s face it: 72 DPI resolutions are going to be an archaic aspect of the web in 10 years. Probably less, I’m not well-versed on screen resolutions. We already cater to the 326 DPI, better-than-print resolution of the iPhone 4. I know that making a 27-inch retina display iMac would cost a small fortune right now, but remember when calculators were the size of city blocks and had million dollar price tags? Me neither, but I hear that was the way it was once.
Point is, we’ll all be designing without any care for “pixel precision” some day in the future. Pixels will be a moot point. Designing for the screen will be just like designing for print. And thank God for that too. I can’t wait for the day that web design becomes more about design and less about how precise you can make your pixels look. All you designers touting pixel perfection, that ain’t what it’s about.
Alright, let’s bring it home
I know practically every web designer works in Photoshop, but let’s be real: Illustrator has a superior workflow, caters to page-based designing, and stands up against scale and time. With interesting discussions of what the best tool is for designing for the web (Shouts to Meagan Fisher’s article, Jason Santa Maria’s plea for a real web design application, and Andy Clarke’s decision to forego design altogether and go straight to code), this point of view needed to be heard and considered seriously. So try it. It works. It converted a committed PSD-head to a full-time Illustrator junkie, and I’m confident it can do the same for you.