Top 10 Reasons Why Illustrator CC Is Great for Web Design
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
)
Figure 1 Save in Scalable Vector Graphics (SVG) format from Illustrator.
Hosted and Icon Fonts
Since Adobe Illustrator is part of the Creative Cloud, subscribers have access to the Typekit library (see Figure 2). This means a whole library of hosted fonts can be used in your Illustrator designs and on your websites.
)
Figure 2 Typekit hosted fonts in Illustrator.
Many of us also use icon fonts for social icons, buttons, and more. Dozens of icon font sites are out there, such as Font Awesome and Genericons. Most of them allow you to download the icon font(s) they offer, which usually includes a desktop font you can install so you can use the icon fonts in Illustrator as you design. In Illustrator, most—if not all—of the icons in the icon fonts can be accessed from the Glyphs panel (Type > Glyphs), as shown in Figure 3.
)
Figure 3 Using Genericon icon fonts in Illustrator.
Pixel Perfection (Working with Grids)
Most of us design to a grid these days, because we start building our sites with something like a framework that contains a fluid grid (CSS). Matching the design to the grid can be very helpful when you’re ready to develop the site from the design content in Illustrator (see Figure 4).
)
Figure 4 An example of a fluid grid (source: ResponsiveGridSystem.com).
Designing to a grid usually means that we also want to achieve pixel perfection. In Illustrator, this means aligning to the built-in pixel grid. When you create a new document (File > New), Illustrator offers you a series of web and device profiles to start your design. This process sets the color space as RGB and the units as pixels, gives you a variety of document sizes, and turns on the setting "Align New Objects to Pixel Grid" (see Figure 5).
)
Figure 5 Setting up a new web document in Illustrator.
With the "Align New Objects to Pixel Grid" option, any new content you create is snapped to the pixel grid that shows up by default when you zoom to at least 600% with View > Pixel Preview turned on. This feature makes the horizontal and vertical edges of objects sharper and crisper. If artwork is not currently aligned to the pixel grid, you can select the artwork, and then select Align to Pixel Grid in the Transform panel (Window > Transform), as shown in Figure 6.
)
Figure 6 Left, horizontal and vertical edges are not snapped to the pixel grid; right, the same edges snapped to the pixel grid.
We also like to set up our Illustrator layout grid to design to 12, 16, or another number of columns. I’m sure AI templates are available on the Web that you can download and use, but you can also create your own grid, as shown in Figure 7. (I show the process in a YouTube video.)
)
Figure 7 A layout grid I created in Illustrator.
Wireframe 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.
)
Figure 8 An example of a responsive layout in Illustrator.
Plays Well with Raster
When we’re designing a site, the vector aspect of Illustrator is great because of its adaptability. But you most likely will also need raster images on your site. Although Illustrator is not the best option for editing raster images, it does place PSD files natively, and it also supports layers and layer comps from Photoshop (see Figure 9).
)
Figure 9 Place PSD into Illustrator.
That content can then be optimized for use on the Web by choosing File > Save for Web. Illustrator doesn’t yet have functionality like Photoshop’s ability to generate assets, but we use what we know.
On a side note, lots of us create retina images these days for our sites. That usually means multiple versions of each image at twice the pixel density (generically). Illustrator doesn’t have any easy way to output multiple versions of each image—and it may not be the best option anyway for raster data. But a super-inexpensive plugin called Smart Layer Export generates multiple versions (think retina) of each layer for you.
Symbols and Other Time-Saving Features
Illustrator has a lot of time-saving features, such as symbols (with 9-slice scaling), text and graphic styles, live shapes, global swatches, dynamic buttons, and more. Let’s take a look.
Symbols (with 9-Slice Scaling)
Symbols offer a great way to reuse artwork and maintain consistency. Artwork saved as a symbol can be used any number of times in your document. If the original symbol is edited, the symbols in your document (called instances) also update (see Figure 10).
)
Figure 10 Working with symbols in Illustrator.
If you turn on the 9-slice scaling option when you create symbols, the artwork is divided into nine sections with a grid-like overlay, and each of the nine areas is scaled independently. The great thing about 9-slice scaling is that when the artwork is resized, the corners are not scaled, while the remaining areas of the image are. If you edit the symbol, the 9-slice guides reappear (see Figure 11).
)
Figure 11 Setting up 9-slice scaling in Illustrator.
Text and Graphic Styles
To maintain consistency and also to work faster, you can employ styles of all kinds in Illustrator. From the typical text styles such as character styles and paragraph styles (see Figure 12) to working with graphic styles (see Figure 13), Illustrator offers a lot of ways for working smarter—not harder.
)
Figure 12 Work with text styles for speed and consistency.
)
Figure 13 Work with graphic styles for easy updates when your clients change their minds for the millionth time.
Live Shapes
The past few versions of Illustrator CC have been able to create and edit rounded corners easily. The corners can either scale along with the artwork, or not. These live shapes have made creating the ubiquitous rounded corner on artwork very easy (see Figure 14). The corners of a live shape can also be edited by the numbers, so to speak, in a variety of places, including in the Transform panel.
)
Figure 14 Easily round the corners of artwork.
Global Swatches
Another marvelous time-saver has to be creating and working with global swatches. If you save a color in Illustrator, you can select Global in the Swatch options (see Figure 15). Then, if you update any of the swatch options (like the color mix), everywhere in the document where you applied the swatch, it will update.
)
Figure 15 Create a global swatch.
Existing Framework Integration
As I mentioned previously, many of us start a web development project with a framework or platform in mind—something that usually has a fluid grid. If you design with larger frameworks like Twitter’s Bootstrap or Zurb Foundation, you can add shared libraries for the components to your design.
Generates Interactive Prototypes
If you are using Illustrator to create a web design mockup, it would be nice to be able to lend some basic interactivity to your design and share it with others (your clients, for instance). That way, you can get a better feel for the UX and make changes to the UI even before creating a line of code. You can choose from a large variety of prototyping tools. Two I’ve used in the past are MarvelApp and Prototyping on Paper (POP). Using MarvelApp, for instance, you can save the AI content as PNG and upload the images to MarvelApp (see Figure 16). You can then add simple interactivity that you and/or your client can "test" (see Figure 17).
)
Figure 16 Adding images to MarvelApp.
)
Figure 17 Adding interactivity to MarvelApp.
In my opinion, one of the sticking points of designing for the Web in an application like Illustrator is that it doesn’t allow you to show the responsive nature of a design easily, and it offers no interactivity. Using a service like MarvelApp or POP can bridge that gap a bit (or at least fake it).
Extracts CSS
One of the features of Illustrator I rarely use (but I still see the possibilities) is the ability to extract CSS. A few versions back, Illustrator added the CSS Properties panel (Window > CSS Properties), which you can use to extract the CSS from text, artwork, and other content (see Figure 18), and then export it as a CSS file or copy/paste it to your favorite editor. This technique could be useful for designers handing off front-end CSS to a developer, or as a starting point for formatting when creating the site.
)
Figure 18 Extracting CSS from Illustrator artwork.
One feature I love about the CSS Properties panel is that it can save PNG files from artwork. If Illustrator deems the artwork too complicated to create with a box or text and formatting (say, a group of objects to make a logo), it will rasterize the artwork, saving it as a PNG when you export the CSS. In the CSS Properties panel, the CSS created will be for a background image (see Figure 19).
)
Figure 19 Save a PNG from the CSS Properties panel.
At the time of writing (April 2015), only PNG is available using this method, but most of the artwork I save out of Illustrator is either PNG or SVG anyway. A CSS file will also be generated, but most of the time all I need is the PNG, so I dump the CSS.
Final Thoughts
With all of these great tools and features at our disposal, I hope that you can see now why I consider Adobe Illustrator CC as part of my web workflow on most occasions. It’s not the perfect web design tool, but it has a lot of features that make it useful to me (and hopefully you).
To learn more about the web features of Illustrator, check out these resources: