With the proliferation of different devices that visitors can use on a site, designing for the Web has become ever more complicated. Why not take advantage of your old friend Adobe Illustrator to design a new site, or to freshen an existing one? Brian Wood, web developer and author of Adobe Illustrator CC 2014 Classroom in a Book, presents some compelling arguments for sticking with this well-known product, including some features you might never have explored.
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, wireframing, 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? Not exactly. Did it make it harder? Yes. But Illustrator has tools and features that we use for a variety of reasons, from creating simple mockups (wireframing) or content, to full-blown responsive designs.
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.
Resolution Independence
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.
