Productive Web Design With… Adobe Illustrator?

Advertisement

Admittedly, Adobe Illustrator is often most certainly not the first choice that comes to mind when it comes to Web design. Fireworks and Photoshop are used much more often, and there are some good reasons1 for that. Still, although Illustrator has traditionally been used for drawing illustrations and logos, you can use it to design layouts and user interfaces, too.

In fact, in my opinion, you can utilize Illustrator to solve some regular design tasks better and more easily than you would do with other tools. With the techniques and tips I’d like to present in this article, I am certain that you will be able to build modular, flexible websites in less time and with less work.

Reasons To Use Illustrator For Web Design

Design Faster

Unlike the layers paradigm in Photoshop (i.e. first select the layer, and then work on it), Illustrator employs an “artboard” paradigm: every object is selectable directly on the canvas. With just one click, you can manipulate any object on the artboard (by resizing, moving, rescaling, etc.) and make it pixel-precise with the Transform panel (available only in Illustrator CS5). It’s more intuitive and requires fewer mouse clicks, making your work more fluid.

You will also save time with two helpful functions that are unique in Illustrator:

  • Create modular Web designs with the Symbols panel and
  • Quickly format text with the Paragraph and Text Style panels.

Precise edition & dimensions in Illustrator2

Think Modular

Using the Symbols panel, you can create reusable components that will save you time when updating your designs or starting from scratch. This technique is especially useful for recurring elements, such as buttons, navigation bars, pagination elements, footers, etc.

How to create reusable components?:

  1. Create a master component (a button, navigation bar, etc), and save it as a ‘Symbol’ in the Symbols panel.
  2. Drag your newly created component from the Symbols panel and drop it into your design.
  3. Now, when you modify your master button in the Symbols library, every linked occurrence of the symbol will update as well.

Screenshot3

Quick Tool for Creating Wireframes

Illustrator is useful for wireframing, enabling you to quickly show the basic layout and navigation to clients. I usually begin by drawing a mock-up in black and white, using simple boxes, lines and typography. After I presented the wireframe to the client for approval, I create a more sophisticated design, with colors and effects based on the wireframe (we will cover this part in more detail later in the article).

Here are the advantages of preparing the wireframe in Illustrator:

  • Illustrator is fast for drawing wireframes because of its vector nature. You can create boxes, lines and text quickly and easily.
  • You can use libraries of commons elements, such as buttons and icons, and drop them easily into the wireframe.
  • Once the basic wireframe has been approved, you will save time creating the final design because the layout and content are already in place. Sometimes getting the final design is as easy as formatting text with style sheets and applying some graphic styles.

Screenshot4

Format Text Quickly and Easily

If you use CSS or InDesign, then you will already be familiar with “Character” and “Paragraph” styles and how powerful they are for quickly modifying and controlling the layout of text. You can do the same with Illustrator. The good thing is that Illustrator shares a lot of InDesign’s advanced typographic functionality.

For example, use a paragraph style for all of the body text on your website that you wish to style. Then, when you make a modification (say, change the font from Arial to Verdana), the body text on every page of your design will adjust right away.

In addition to Paragraph styles, you can use the Eyedropper tool to quickly apply text styles to various bits of text:

  1. Select the text whose style you want to replicate and
  2. Click on the text you want to style, and …Voila! The style is instantly applied.

Screenshot5

Become an Agile Designer

Being able to quickly change your layout without a lot of effort is the key to designing in today’s rapidly evolving profession. After years of using Adobe’s Photoshop for Web design, I began to feel like a “pixel tailor,” using dull scissors and chalk.

I feel that the bitmap nature of the application is not optimized for performing basic Web design processes. For example, suppose I want to round a shape. I would need to follow these steps: select the area, use the “Round the selection” function, invert the selection and then cut the selected area so that the preserved area will appear rounded.

With Illustrator, I just apply a rounded effect to my selection. Additionally, I can save this graphic style and apply it to other elements. In this way Illustrator helps you respond quickly to your customer’s needs.

Screenshot6

Focus on Simple, Clean Design

Illustrator offers simpler graphic options than Photoshop, which can help you to focus on sound design principles and stop wasting time on unnecessary effects and filters. Photoshop remains indisputably the best option if you want complex interfaces with a lot of graphic effects, such as textured backgrounds and complex lighting effects. But if your designs are simple and clean, then I am confident that you would complete your work faster and more efficiently with Illustrator. And if you really do need complex and texturized graphics, you can accomplish this with Illustrator, too, but it takes some know-how. Later on, we will discuss how to improve your designs by avoiding the overly clean “vector” look, as seen in the textured buttons below.

Screenshot7

Work Lighter and Faster

Vector images are smaller than rasterized images. Thus, Illustrator will help you create designs that are lighter and less CPU-intensive than those made with Photoshop. This enables you to group a lot of interface screens into the same Illustrator file, avoiding the inconvenience of having to open multiple files when designing.

Over my career, I have designed up to 30 screens all within the same Illustrator file while keeping the size under 5 MB (excluding bitmap images). Because Illustrator is not as demanding on your CPU and requires less memory, you can keep several applications open at the same time without slowing down your computer. You also don’t need the most powerful (and thus more expensive) machine to create, adjust and export your designs.

How To Create Modular Designs

To make the discussion more interesting in terms of how exactly one can use Illustrator for regular design tasks, let’s look at the ultimate Illustrator technique for Web designers: creating a modular design with vector symbols.

Save Time With Symbols Libraries

The Symbols library enables you to reuse and modify elements across an entire website. Not only does it save you time, but it helps you build a library of items that can be used over and over again.

Illustrator previews all of your symbols in the Symbols panel, and you can create as many panels as you need. You can organize your work by creating panels specific to each kind of common GUI element: arrows, icons, buttons, etc. In this way, you simply browse through your symbols, select the one you want, and drop it into the design on your artboard.

Screenshot8

Keep Your Design Consistent

Symbol components help you maintain the look of a design throughout the entire website. By centralizing component design with master symbols, you are able to view all of your elements at once and make sure that the style you are working towards is consistent. No more will you need to check every screen to see whether you have forgotten to update one element.

Screenshot9

Build Up a Components Library for Future Projects

Because the components reside in the Symbols panel, they are separate from the design layout. By continually adding components to your library, you will build up a collection of items that can be reused or modified in other projects. The increase in efficiency quickly becomes exponential. This is the first step to building your own interface framework.

My humble advice to help you organize your work is to also use different panels for each group of GUI elements. Over the years, I found out that it’s better to have one panel for arrows, one for icons and one for basic GUI elements (buttons, forms elements, etc.). You can see an example of a GUI components library by downloading my free GUI design framework10.

To create your own Symbols panel, first, add a vector shape to the Symbol panel by dropping it inside. Next, save this symbol library as an AI file by selecting “Save symbol library” in the Symbol panel options:

Screenshot11

You can add as many Symbol panels to the artboard as you want by going to Window → Symbols Libraries.

Screenshot12

Modular Design Limitations With Photoshop

Photoshop has the option “Customs shapes,” which are similar to the “Symbols” in Illustrator but has three major limitations:

  1. You can’t define a precise size for the elements you create. Let’s say you draw an area for a custom shape without knowing the exact size you want. There is no editable field that allows you to adjust the dimensions to the exact size you require.
  2. You cannot change the dimensions of the “custom shape” once it’s been created. This makes your designs inflexible and labor-intensive. These custom shapes behave more like a vector brush than reusable components for Web design.
  3. There isn’t a specific panel to manage your custom shapes. Adding a custom shape to the repository requires many clicks every single time: click the custom shape icon, activate the drop-down panel to see the customs shapes, click to select the shape. Then finally, click on the layout and define the size of the shape by dragging it to the desired dimensions. That’s a tedious process. Illustrator’s definable Symbols panels is far easier to use and is the main reason why I sincerely believe Illustrator is the superior Web design tool.

Create Professional Designs

You can design professional, sophisticated interfaces with Illustrator. Look at the buttons below. Notice that they have a textured appearance and various visual effects (drop-shadow, inner glow, etc). With a little practice and a good eye, you can achieve the same graphic designs that you would with Photoshop. The clear advantage, however, is that these elements will be completely editable, resizable and reusable.

Add Visual Effects

Although it has fewer built-in graphic effects filters than Photoshop, Illustrator includes the most useful ones: drop-shadow, textures, noise, rounded corners, and inner and outer glow. By focusing your creativity on fewer effects, you will work more efficiently and spend less time playing around with effects.

All the filter settings are located in the Appearance panel and you can save every combination of effects as a graphic style, making it easy to reuse or to modify your designs. Remember, with Illustrator you have the power of modular design: when you update a graphic style, every occurrence of the element using that style gets updated as well.

Another powerful feature of Illustrator is the infinite number of outlines that can be placed around vector elements and the unlimited number of background fills that can be added to any object. Experiment with these, and you can create some complex layered styles.

Screenshot13

Texturize Your Design

It’s usually better to avoid the sterile “vector” look in your designs by adding some texture to the elements in the layout.

Here are three main methods of texturizing in Illustrator:

  • Use seamless and repetitive bitmaps. For large backgrounds, import a texture by selecting File → Place, and then add it as a swatch in the Swatch panel. Then, you can use it to fill any shape.
  • Use the Stylize filters (Effects → Stylize) to add some noise or texture to a background.
  • Use the texture swatches included with Illustrator, and put them on top of a background fill. Change the texture fill to an Opacity mode such as Multiply, and adjust the opacity to somewhere between 15 and 20% to give it a subtle fused affect.

Again, you can save all of these texturing and noise effects as a graphic style and reuse or modify them later.

Screenshot14

Screenshot15

Create Perfect Gradients

The latest version of Illustrator (CS5) is packed with some sophisticated gradients, including opacity settings for each color point and elliptical gradients. You can click directly on a object to customize the filling gradient with different preferences: angle, location, colors sliders, focal point, origin, etc. The process is very efficient and is a bit superior to that of Photoshop, in which the workflow is hindered by an intermediate gradient editing window.

Currently, Illustrator still lacks some gradient dithering options (found in other applications such as Fireworks), which can sometimes lead to the “band effect.” An effective workaround is to add some texture and/or noise to your gradients, as explained in the previous section.

Notice that Fireworks offers more type of gradients. All versions (including CS3, CS4, CS5) have Linear, Radial, Rectangle, Cone, Contour, Ellipse, Bars, Ripples and some more gradient types. Fireworks has many more types of gradients, and those gradients are also “live editable” on the canvas, just like in the latest version of Illustrator.

Screenshot16

Rounding Effects

Adding rounded corners to any shape, including typography, is very simple in Illustrator. Simply click any object on the artboard to select it. Then, choose Effect → Stylize → Rounded Corners from the main menu, and define the radius for the curve. Later on, you can modify the radius using the Appearance panel. Photoshop, on the other hand, allows you to add only rounded corners to rectangles, and once the radius is set, it cannot be altered.

Screenshot17

Smart Resizing With “9 Slices” Scaling Tools

With Illustrator CS5, you can resize an object without distorting it. You define some zones to extend and some zones to preserve (rounded corners, for example). Save this object as a symbol, and you now have a reusable GUI component.

The 9-slice scaling feature is not new to the Adobe line of products. It first appeared in Adobe Fireworks CS3 (it applied to Symbols only in version CS3). In Fireworks CS4, the feature became a new “9-slice Scaling” tool, and now it can be used on any object on the canvas. Photoshop does not have this option at all.

Screenshot18

Advanced Options for Text

In Illustrator, you can wrap text around images — the text will automatically adjust to changes in image size — and define outside margins, just as you would in full-strength text-layout programs such as InDesign and QuarkXPress.

Screenshot19

Inserting Bitmap Pictures

Using photos in your layout, such as photos of products, illustrations or artwork, is as easy as dragging and dropping the image files onto the canvas. This works with PNG, GIF and JPG files. You can also paste directly from the clipboard.

If you need images that are transparent, use the “Place image” function to insert the image and then link to the source file (File → Place). As an bonus, every time you update the original file in another image editing program, the image in Illustrator will reflect these changes. This will increase your efficiency and save you the headache of having to re-import images.

You can also use a clipping mask with gradients for fading opacity, although Photoshop might win out on this one for ease of use. You can learn all these techniques with this useful tutorial by VectorTuts20.

Screenshot21

Gradients for Typography and Stroke

You can use gradients on editable text and strokes of all elements. You might want to check this tutorial for these gradients strokes22 to learn more about it. With a little practice, you will master this technique and be able to combine textures and effects.

What’s more, no matter how complex the typography and text in your designs become, they will always be editable in Illustrator. One thing to keep in mind, though, is that this method can be processor-intensive and should be reserved for titles and important elements.

Screenshot23

Creating a Grid in Illustrator

In my opinion, it’s always a good idea to start your project by designing the grid and defining foundational design settings first. This will save time later and help you create a structured and consistent design.

How to create a grid in Illustrator?

  1. Create an artboard that is either 950 or 960 pixels wide. These are the common grid sizes I use for building websites that fit the 1024-pixel–wide displays. Note: the artboard area is used for the layout of content. Feel free to design larger backgrounds if necessary.
  2. Set the grid based on your artboard size. For example, with a 950-pixel artboard, you will have 19 blocks of 50 pixels each. Each of these blocks can be further sub-divided into 5 blocks, resulting in blocks that are 10 × 10 pixels in size. Or you could use the de facto standard 960 Grid System24. Choose the grid size that you are most comfortable or familiar with.
  3. From the main menu, select View → Snap to Grid. This makes the grid act like a magnet, forcing each element to lock precisely to one of the grid lines.
  4. From the main menu, select Units → Preferences, and set the units to “Pixels” and the keyboard increment to 0.5 pixels (yes, 0.5 pixels, that’s a pixel-precise tip — please read the details below).

Screenshot25

Adjust Illustrator to Fit Your Needs

Since you are using Illustrator for Web design, a few adjustments are required to keep your designs optimized for your workflow. You can change the default font setting from Myriad to the font used in your current project. Learn how to do it with this complete tutorial on changing the default font settings in Illustrator26.

You can also define a few other preferences, such as text style sheets, default artboard size (950 pixels), graphic styles, and symbols to optimize your Illustrator environment for Web design.

12-default-settings in Productive Web Design With... Adobe Illustrator?27

Don’t Start From Scratch: Customize Your Templates

You don’t have to redo this process every time you start a new design. By creating and re-using templates you can increase your efficiency without much effort. You can create your own template by going to File → Save as Template. Set it up with a standard 950-pixel artboard width, your grid settings, customized preferences and your favorite symbols and graphic styles.

Create a Pixel-Precise Web Design

One of my pet peeves with previous versions of Illustrator was the “blurry effect” present in some line strokes or texts, as well as the absence of pixel-precise tools. You can avoid these problems with some of the new tools introduced in Illustrator CS5.

Property Inspector

Use the “Property Inspector” to quickly check and edit the exact position and dimension of objects right down to the pixel. This will help you reduce the time you spend positioning elements. In addition, by giving precise values to pixel dimensions, you avoid the blurry effect because the strokes will be aligned to the pixel grid.

Other useful tools in Illustrator CS5 are “Align to Pixel Grid” and “Pixel Preview” (View → Pixel Preview), which helps to avoid the blurry effect.

There are two options to align to the pixel grid (only in Illustrator CS5):

  • When you create a new document, check the “Align to Pixel Grid” option at the bottom of the window.
  • In the Transform panel, check “Align to the Pixel Grid” at the bottom of the panel.

Screenshot28

Clean Outlines

The article Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes29 shows you how to eliminate the blurry effect for outlines. I suggest that you read it carefully, but for those who want to jump right in, here is a quick summary:

  1. Use the Outline and Inside stroke default option, instead of the Center stroke.
  2. Position elements with whole values, and give them whole dimensions. Avoid fractions (2 instead of 1.9, for example).
  3. Move lines and strokes in 0.5-pixel increments when they are blurry.

Also turn on the “Snap to grid” or “Snap to pixel“ option under the View menu, because it keeps the strokes locked to the nearest pixel and avoids the blurry anti-aliasing. The “Snap to pixel” option appears only if you are in the Pixel Preview mode: View → Pixel Preview.

Screenshot30

Two last tips:

  • To quickly position lines, set a 0.5-pixel keyboard increment in the Preferences (Preferences → General). This way, when lines are blurry, you can simply use the keyboard arrow keys to move them by 0.5-pixel increments until the blur disappears.
  • If you have tried everything and the element is still blurry, use a 0.999-pixel size for the stroke (hack courtesy of Benjamin McDonnell).

Why Not Fireworks?

Fireworks is supposed to be the Adobe CS suite’s dedicated application for Web design. It offers some powerful functions: Symbols library, Pages panel (I would love to have this in Illustrator), pixel-precise rendering, vector and bitmap editing, gradient dithering, etc. All the tools that any Web designer would want in a single package.

So, why don’t I use it? Well, I have tried Fireworks every time a new version is released. I still prefer Illustrator, and here are some reasons why:

  • First and foremost, it’s a question of taste. I find the Fireworks interface not as easy to use as Illustrator’s. Fireworks was originally developed by Macromedia (the same folks who brought Flash to the Web world), and its look and feel retain some of those roots.
  • Secondly, the modular design is not as well developed in Fireworks as it is in Illustrator. For example, the Fireworks’s Symbols panel allows you to preview only one item, making it difficult and time-consuming to find the symbol you want and to browse the symbols in your library.
  • In CS3 and earlier versions, I experienced a lot of bugs and crashes. CS4 was much improved but is still prone to some bugs. Admittedly, now these problems seem to be addressed: CS5 is one of the most stable versions of Fireworks to date, as Michel Bozgounov explains in “Adobe Fireworks: Is It Worth Switching to CS5?31.” But if you are using an older version, you may still experience some crash problems.
  • Fireworks does not provide a way to format text by applying styles to paragraphs, which is a serious deficiency because Web design is to a large extent about typography.

UPDATE (24.01.2011): As some readers have taken notice of the Text Styles in Adobe Fireworks, they can indeed be edited/created, re-applied globally, and much more. You can use the relevant sections in the Properties panel or directly within the Styles panel. See the illustrations below for more details. A big ‘Thank You’ to Michel32, our Fireworks expert,  who has prepared these explantory screenshots!

33

Conclusion

The perfect tool for Web design does not yet exist. In my opinion, little has been done over the past few years to really meet the needs of Web designers. Still, I have developed a good working relationship with Illustrator. Over the years I have had developed some effective methods and tricks to optimize Illustrator for Web design. It’s the application that I find myself often recommending for modular design. I have developed my own User Interface Design Framework for Illustrator, resulting in improved productivity and consistency (via the Symbols libraries and vector GUI elements).

After more than 10 years of working as a Web designer, I’m no longer interested in producing the fanciest design. Experience has taught me to focus on productivity and flexibility. Work faster, and deliver the work on time: that is my priority. And Illustrator is a solid option for that. The next generation of Fireworks may wind up being closer to what I’m looking for in a Web design suite. Until then, I’m sticking with Illustrator.

Further Reading

Resources for Web design and wireframing in Illustrator:

  • User Interface Design framework34
    My free Illustrator GUI framework, loaded with a ton of GUI elements (buttons, tabs, navigation elements, etc.), vector icons, graphic styles and swatches for Web designers.
  • Free Sketching and Wireframing Kit35, by Janko
    A free set of elements for sketching and wireframing with form elements, icons, indicators, feedback messages, tooltips, navigation elements and more.
  • Sketchy Illustrator Wireframes36, by Matthew Rea
    “In the past, I’ve dabbled with various tools to create screen mockups and designs; however, I keep coming back to Illustrator; partly because it’s what I’m most comfortable with, but it also fits well into my workflow.”
  • iPhone Sketch Elements AI37, by Teehan + Lax
    A collection of common iPhone elements in a sketch–like style, allowing you to easily and quickly mock up custom wireframe screen flows. For their wireframing needs, they switched from Photoshop to Illustrator: the PSD version “proved a little too high-fidelity. For rapid prototyping we found we needed a more malleable approach. This is when we turned to the iPhone Sketch Elements AI.”
  • iPhone UI Vector Elements38, by Rusty Mitchell
    A complete and well-crafted library of iPhone GUI elements.
  • iPad Vector GUI Elements39, by Iconshock
    This set contains almost all of the iPad’s UI elements, including buttons, tabs, menus, keyboard and more.

Recommended websites for Illustrator tips and tutorials:

  • Vectips40
    I learned a lot from the insights of Ryan Putnam.
  • Vector Tuts +41
    Fresh tutorials and tips to improve your Illustrator skills.
  • BitBox42
    Some interesting tutorials… unfortunately, just four new articles in 2010.

Why you might also use Fireworks instead of Photoshop for Web design:

What applications do you use primarily for Web design (for the visual part)?


(al) (ik) (vf)

Footnotes

  1. 1 http://www.isfireworksbetterthanphotoshop.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/01/1-edition-illustrator.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/01/3-symbols-illustrator.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/01/4-wireframes.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/01/5-stylesheets-illustrator.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/01/6-effects-illustrator.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/01/7-illustrator-texture-illustrator.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/01/9-symbols-library.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/01/8-master-elements-illustrator.png
  10. 10 http://www.webalys.com/design-interface-application-framework.php
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/01/25-save-library-illustrator.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2011/01/26-load-symbols1.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2011/01/15-appearance.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2011/01/13-texture-illustrator.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2011/01/16-swatch-texture.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2011/01/18-gradient-illustrator.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2011/01/17-rounded-illustrator.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2011/01/19-scales-illustrator.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2011/01/20-text-wrapping.png
  20. 20
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/01/22-image-illustrator.png
  22. 22 http://vectips.com/tutorials/quick-tutorial-gradient-stroke
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2011/01/14-gradients-stroke-illustrator.png
  24. 24 http://960.gs/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2011/01/10-start-settings-illustrator.png
  26. 26 http://vectips.com/tutorials/change-default-fonts-for-new-documents/#more-1232
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2011/01/12-default-settings.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2011/01/24-property.png
  29. 29 http://vibr8bros.com/tutorials/illustrator-trick-how-to-avoid-blurred-pixel-fonts-shapes
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2011/01/23-outlines-illustrator.jpg
  31. 31 http://www.smashingmagazine.com/2010/05/22/adobe-fireworks-is-it-worth-switching-to-cs5/
  32. 32 http://www.smashingmagazine.com/author/michel-bozgounov/
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2011/01/adobe-fireworks-text-styles-large.png
  34. 34 http://www.webalys.com/design-interface-application-framework.php
  35. 35 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  36. 36 http://matthewrea.com/07.21.09/Sketchy-Illustrator-wireframes/41.php
  37. 37 http://www.teehanlax.com/blog/2010/11/28/ipad-sketch-elements-ai/
  38. 38 http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
  39. 39 http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
  40. 40 http://vectips.com
  41. 41 http://vector.tutsplus.com
  42. 42 http://www.bittbox.com/category/illustrator
  43. 43 http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
  44. 44 http://www.adobe.com/newsletters/edge/january2011/articles/article6/index.html
  45. 45 http://polldaddy.com/poll/4403243/
  46. 46 http://polldaddy.com/features-surveys/

↑ Back to top Tweet itShare on Facebook

Advertising
  1. 1

    Great article! I always start with illustrator to rapidly prototype a design. Then I move into photoshop for the finishing touches.

    3
  2. 52

    Great article!! Fully agree with the autor! PS is for editing PHOTOS and AI is for DRAWING. And the best thing is – you can import PSD file into AI and keep all layers and so on, while if you import AI file to PS you just get one flat pixelized layer. D’oh!

    2
    • 103

      Yes, this is my workflow as well. The majority of the page design is done vector in Illustrator. Any sections that require more texture or photographic work I do in Photoshop and then import into Illustrator.

      0
  3. 154

    Well this certainly is a hot topic! I personally use both Photoshop and Illustrator for my design work. Working with vector shape layers in Photoshop gives me all the flexibility I need and moving custom shapes made in illustrator into Photoshop is as easy as copy/paste.

    The ideal situation would be if Photoshop and Illustrator would merge into a single product. Honestly if there would be a way to edit shapes in Photoshop the same way as in Illustrator I wouldn’t even need a stand alone vector application.

    Who else would like to see a Photoshop and Illustrator (Photoillustrator?) designer friendly hybrid app?

    3
    • 205

      One of the things that was a deciding factor in using Illustrator for this kind of thing, is the way photoshop asks you if you want to commit your changes, after every tiny thing you do. It’s way too time consuming. And then there’s the obvious of rasterizing after every size change.

      2
    • 256

      I see it every day. People often call it Fireworks

      1
    • 307

      I see it every day. People often call it Fireworks.

      1
    • 358

      The 1st time I’ve used illustrator I had the same thought. Why the hell are they separate apps? (I know… why sell 1 app, when you can have a whole suite)

      0
  4. 409

    i use photoshop the most at my design but this post made me think to learn illustrator more ^_^)> great post.

    1
  5. 460

    I use AI for almost all my web graphics (I have CS3 and CS4 but for some reason still love CS3)

    0
  6. 511

    Another good thing about using AI for design comps is that you can embed them in a PDF UI Spec without the design becoming pixelated. Great for zooming in on parts of the UI when presenting to clients.

    I really want to love Fireworks…I really do. It has by far the best features for web design…but the interface is SO clunky I give up every time I try to switch. Plus you can’t export as a vector PDF even though it is a part vector tool (which rules it out for wireframing for me).

    1
  7. 562

    You make a very compelling argument in regards to layout benefits vs photoshop. I’m tempted to try it, but like others have mentioned, I think I’d get hung up in the end workflow.

    It’s be great if someone could make a slicing workflow tutorial for AI.

    0
    • 613

      “It’s be great if someone could make a slicing workflow tutorial for AI.”

      Actually, i’m thinking of doing it :-)
      Like I said in my comment above :
      • A recommandation document for designers : How to prepare Illustrator layout for HTML conversion
      • A tutorial for developers to explain how to convert Illustrator files to HTML

      4
  8. 664

    Interesting article – it all comes down to the tool that you prefer using.

    2
  9. 715

    Steffi - Web Courses Bangkok

    January 17, 2011 8:40 pm

    Interesting article. Well, everybody has his/her own way of designing, but definitely lots of good tips

    1
  10. 766

    Thanks for this Introduction to use Illustrator for WebDesign Layouts. I allready use Photoshop for this part. But I think I will give Illustrator a try. Thanks a lot!

    If anybody speaking German, feel free to read my blog on afrobirdy.de!

    -4
  11. 817

    Good article,I like it.

    1
  12. 868

    Nicholas van der Walle

    January 18, 2011 12:56 am

    Wonderfully comprehensive article. I use Ai daily and had completely forgotten/ignored the 9 slice feature. Good to re-visit existing tools. Thanks!

    0
  13. 919

    A great article. I typically use PS for most designs. I can see why AI is such a good tool for creating modular designs.

    0
  14. 970

    Nice to read you here Vincent. Great article!

    Hope to talk you soon.

    0
  15. 1021

    Maybe Smashing Magazine should use some of their advice in regards to ‘Productive Web Design’ and rethink some of their redesign decisions…

    1
  16. 1072

    Awesome article! Designing website UI’s in Illustrator has always been my favourite!

    0
  17. 1123

    Love Illustrator for drawing but for serious webdesign there’s just one good choice;
    Fireworks!
    Neither Illustrator or Photoshop where designed to work with pixels. Adobe tries hard to get them to work well for screen design but Fireworks was born to do so. It will always feel more naturally at home with screen design.

    1
  18. 1174

    Fireworks has improved a lot. It is a less “heavy” that Illustrator (at startup and at runtime). I recently tried opacity and I fell in love with it.

    1
  19. 1225

    i am impressed by the fact that most people here use photoshop for prototyping. i use fireworks and if you work some months with it you will know why it’s made for webdesigning.

    0
  20. 1276

    Great article. It’s strange though, my first choice for laying out designs has always been Illustrator – it suits my design style better. I only really use Photoshop when I absolutely have to, eg. specific effects.

    0
  21. 1327

    Interesting article!
    Especially 9slices and paragraph styling parts are usable.
    But it’s strange that nobody mentioned “Layer comps” and “Smart Object” in PS – two extremely usable features in PS that can shine over all other mentioned products ;)

    0
  22. 1378

    Yes! Finally, I use (and always have) Illustrator for my designs and have since long stopped trying to explain this for Photoshop users. Now I can just link this. Thank you. Good work!

    0
  23. 1429

    nice admin keep up

    0
  24. 1480

    Very nice article. I have to say that I’m relieved to see that’s I’m not the only designer using illustrator to create full websites. I usually prefer illustrator when it comes to websites that tend to be web-application for instance, when you have lots of gui elements that you repeat, the symbols are a great tool. I also use it a lot for mobile applications. Illustrator is also awsome for creating great buttons.
    You make a good point about cpu ressources. The main reason why I first used Illustrator to create a website (actually a wireframe which became a website afterwards with some modifications) was because photoshop was too slow on my aged computer.

    4
  25. 1531

    I’m really surprised how low the percentage of designers that design in the browser is. I open Photoshop when I want to create some elements, but I create the main lay-out in my editor.

    0
  26. 1582

    It’s good to find an article that backs up all of the reasons I’ve had for using AI in web design. I even think exporting is easier due to creating layer styles for a ‘slices’ layer. I wouldn’t consider starting a design in PS as it’s not geared towards layouts.

    1
  27. 1633
  28. 1684

    Just use Fireworks

    0
  29. 1735

    In Photoshop we can create a button, for example, croping the button and “save for web”. Can i do something like this in Illustrator? I think is impossible to work only with IIlustrator.

    -1
    • 1786

      Draw a slice around it, name the slice, ‘save for web’.

      0
    • 1888

      I often use the crop area tool in Illustrator for quickly saving a graphic for web- inCS3. For SOME REASON they’ve completely changed it in CS4+!!!
      But in CS3: It works a bit differently than Photoshop: In Illustrator, you create a box around your item, and this box acts as the crop area. Go to Object>Crop Area>Make. I LOVE it because you never change the artboard, just the crop area, so you can redo as often as you like, quickly and easily.

      0
  30. 1939

    I’ve found it easiest to stick to Illustrator for the mockup stage as my designs are often used in print presentations to clients.

    0
  31. 1990

    a great article indeed. helps a lot to understand the gravity of illustrator for design UI projects.

    Thanks a lot for sharing.

    0
  32. 2041

    I have to respectfully disagree.

    Photoshop is the industry standard for a multitude of reasons not mentioned here. If the site is to be worked on by more than one person you MUST use Photoshop!

    If you go into an agency and start designing a site in Illustrator, they will tell you to stop and do it in Photoshop. If you don’t, you will not be hired back.

    Sure, Illustrator is better for text, wire framing etc. but it should be used in support of Photoshop, not in place of it.

    I thought this was common knowledge?

    -9
    • 2092

      I work for an agency and have started every design in AI. Granted you do need to know how to work with PS in web too, but I’ve never been told I MUST use PS..

      2
      • 2143

        What if another designer has to pick up the project if you’re unavailable?

        -1
        • 2194

          One would hope that other designer would already know how to use Illustrator, as much as an industry standard as Photoshop.

          3
    • 2245

      Totally disagree, I worked in an agency for a number of years, and we used Illustrator for mockups all the time. Much easier to print high res copies for client approval (yes, sometimes you need paper proofs for web design). If you know what you’re doing, AI saves a lot of time, especially when extensive changes are required.

      2
    • 2296

      I know some agencies that work with both Adobe Fireworks and Photoshop; and some actually work with Fireworks only!

      So no, this is not “common knowledge”. Many designers simply stick with Photoshop just because “everyone does that”. Seems time has come to stop this practice and broaden the horizon a bit… :-)

      So I applaud the article — for once someone to recommend a different tool than Photoshop, for Web work! In fact, both Illustrator (as of version CS5) and Fireworks (as of version CS3 onwards) are much better tools for Web design than Photoshop!

      3
      • 2347

        At my agency(kavamediagh.com), we use Fireworks and I’d more than glad to share tips or tutorials on designing sites and the work flows. Could you point me in the right direction Michel, Thanks.

        0
    • 2398

      What?

      So… everyone has to use iphone as their smarphone of choice just because “most of the people use it” too? And the rest of the smart phone aren’t smart phone then?

      0
  33. 2449

    Interesting article, definitely agree that illustrator is faster to design for web than Photoshop. Right now I am designing in InDesign (which I have only used for print stuff before) and it is proving surprisingly easy!
    Using masterpages makes it really quick to make changes to elements that appear on every page, and the paragraph/character styles panel is easy to use. Also InDesign has a great paste in place function/keyboard shortcut so the elements are in exactly the same place. The more complex graphics (vector based) I have created in Illustrator and placed into the masterpages. You could also use object styles if necessary.

    0
  34. 2500

    This article is pure gold for every webdesigner. Everybody should design in Adobe Illustrator! It’s so flexible!

    1
  35. 2551

    I’ve been doing the same, using illustrator for most of my work. From wireframes to final design, and I’m using photoshop for the fancy bits. If you never tried, give it a shot. I’m sure you will see very quickly how one can produce the same quality work in less time.

    0
  36. 2602

    I’ve been thinking about switching from PS for a while. Definitely going to give it a try. Thanks for that.

    0
  37. 2653

    Great article, I’ve been using Illustrator as my main web design app for quite a few years now. There are a few things that are more awkward than Photoshop (slicing, and advanced layer effects), but once you get used to it, it’s a much better workflow.

    Since most objects are vector based, you can resize large site elements quickly and painlessly. Also, a big plus, which I don’t think you mentioned is the ability to print high resolution copies of your mockup for clients. Try doing that with your 72dpi Photoshop mockup, and still keep your file size low!

    0
    • 2704

      You should be sending your clients comment-enabled PDFs, not printing “high-res” copies of something that will only be viewable on screen or a mobile device. If you use printouts and the client approves them, then you go into development without the client ever seeing an onscreen version, you are going to be in a world of hurt. The colors will ALWAYS be off on the printed version. They have no idea of the width of the site or the length, or anything really. You are just lucky if you haven’t had problems with this already.

      2
  38. 2755

    a thing is really important and is missing here is the autocreation of grids using a simple box ( object / path / split into grid), this one is the best tool for creating grids inside Illustrator. i have also coded a plugin for photoshop for creating the same grids inside that one so you can replicate easily your concept designs in photoshop later

    ;)

    0
  39. 2806

    I’ve been waiting for someone to agree with me on this!!! I make 99% of all web and UI mockup’s in Illustrator. It’s so much easier now in CS5 with the export to png using art boards feature!

    1
  40. 2857

    Inkscape

    0
  41. 2908
  42. 2959

    In the real world they are deadlines, I once had one employee wasting hours in illustrator and Photoshop when another did virtually the same design in fireworks : 4 times faster, cleaner and fast cutting

    Remember Adobe make all three applications and they themselves encourage web designers to use Fireworks!

    It also doubles as a remarkable prototyping tool also, when doing your next presentation to a client, get a good laptop and fireworks, to present your ideas beets the pants off hard to understand wireframes (from a clients point of view)

    The tool is designed purely for web design nuff said!!

    I be in a few weeks we will have a post on the benefits of designing a web site in Quark Express.

    1
  43. 3010

    “Fireworks does not provide a way to format text by applying styles to paragraphs, which is a serious deficiency because Web design is to a large extent about typography.”

    Passe you SEO guides, (pay attention on using graphic text)

    Unless your are a flash designer than you don’t really care about Seo ;)

    0
  44. 3112

    Best… web… design… article… ever.

    -1
  45. 3163

    Been using AI for web design for years! Glad to see an article on it.

    0
  46. 3214

    This article is all about, as you said, preference. I have used PS for years, and have tried Illustrator as well as Fireworks, and just don’t care for the tools as much as PS. I’ve tried using IL more, but still find the tools a bit odd to use. Good overview nonetheless.

    1
  47. 3265

    Even seeing your article and all comments, I prefer to continue using Fireworks I think it’s still faster.

    0
  48. 3316

    Illustrator should be every designers “go to” program, and I have been in this industry since 1988. I can tell you 90% of our projects start in Illustrator. That’s over 4400 projects since 2002. This includes print and web projects. If you are serious about design, you need to have the modular ability Illustrator is based on. Never do we do a web project, that sure enough, require a print project to support it. It may be a display, a package, a billboard, a name tag, or what ever. If you can’t turn that brilliant web design into branding objects for other projects… you are wasting your time. We only use Photoshop for photos. :-)

    4
  49. 3367

    I was actually mulling this over lately. AI seems a better candidate for doing website mockups that PS (PS still king for doing raster art), but alas, I simply don’t know AI as well as I do PS (but I want to change that as well)

    AI CS5 really looks like a solid candidate for website mockups since it does excel in many areas of modularity. I’m finding modularity to be a great thing, especially when it comes to coding a site. I’m absent-minded, so having something be naturally organized and systematic really makes finding it and altering it so much easier.

    I’m sure if you need to place a raster image that won’t scale well in AI, it can do it, and will do it’s best to resample it on the fly as a smart object, but aside from that, yeah, I’d say AI is a better candidate than PS to that extent. It’s not that PS isn’t better suited to do other things more than AI, which it is…

    0
  50. 3418

    I recently read an article on SM about why Fireworks was so great for web design. And I read another at one point about why PS was better. After reading this one, I am confused.

    With all due respect, I find a lot of the articles on SM to be long winded and sometimes contradictory. These aren’t blogs, they are opinionated whitepapers.

    My advice – pick one program, learn it well, and do your job.

    2

↑ Back to top