As a web developer, I work with a designer to create awesome (we think) sites for our clients. We use a variety of tools for concepting, wire framing, content creation, code generation—which is essentially our web workflow. We always seem to come back to the same tools, and Adobe Illustrator is one of them. Why? Didn’t responsive design kill the static design process?
I’m not trying to convince you to switch tools. Your workflow may be the best for you. Maybe better than mine, but the way content is evolving on the Web—mobile optimized, leaner, cooler—we have all been taking a long hard look at the tools we use, to see whether they are the best choices for what we need to do.
Illustrator is part of our web workflow for these major reasons:
- Resolution independence
- SVG, PNG, GIF, JPG—no problem
- Hosted and icon fonts
- Pixel perfection (working with grids)
- Wireframe or full-blown design—you decide
- Plays well with raster
- Symbols and other time-saving features
- Existing framework integration
- Generates interactive prototypes
- Extracts CSS
Let’s explore each of these 10 reasons in a little more depth.
When you start working in the print world, one of the first things you learn about is “raster vs. vector.” For a long time, that issue didn’t really apply to the Web. It was pretty much either raster or type content, and vector didn’t really have a place on most websites. (Yes, I know about video, audio, etc.) That situation has definitely changed with the advent of icon fonts, scalable vector graphics (SVG), and more.
Illustrator is inherently vector-oriented, or based on “points and math,” as I like to say. It lets you create artwork that can be scaled infinitely and still look great. On the Web, we have to contend with different device sizes, and content needs to be optimized for every size—that is, the content must look its best at any size (or at least the generic sizes—phone, tablet, and desktop).
SVG, PNG, GIF, JPG—No Problem
Since Illustrator is a vector tool, it can generate optimized web content in the form of SVG, PNG, GIF, or JPG graphics formats. SVG is easy to create (File > Save As) and has a whole series of save options for you to fine-tune the output.
The Web constantly evolves, and scalable vector graphics content is being used on more and more sites. SVG is vector for the Web. In Illustrator, File > Save As offers most of the default settings we need (see Figure 1). As with most file formats, if the content on your artboard is supported by SVG, it will work; otherwise, it won’t. This easy creation process can be amazing for designing a responsive site and its content.
Wire frame or Full-Blown Design—You Decide
For some web projects, I may only use Illustrator for concepting—creating simple wireframes or creating content such as page elements, icons, and so on. But if the project lends itself to the process, we use Illustrator to lay out a pixel-perfect rendition of the responsive pages (see Figure 8). For me, that’s one of the best things about Illustrator: its versatility. Sometimes it fits great, sometimes it doesn’t. Is it a web tool first? No, but it does have some nice adaptations.