Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Top 10 Reasons Why Illustrator CC Is Great for Web Design

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.
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

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

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

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

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

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

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

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

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

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

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

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

Figure 12 Work with text styles for speed and consistency.

Figure 13

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

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

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

Figure 16 Adding images to MarvelApp.

Figure 17

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

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

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:

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020