Illustrator for UI design?

over 7 years ago from

Wondering how many designers prefer Illustrator for UI (specifically web) design, over Photoshop, Sketch, or even Fireworks.

I have in the past for projects that don't require a lot of visual complexity, mostly because I'm able to work so quickly in it.

Would love the community's thoughts — advantages, disadvantages, tips?


  • Marc EdwardsMarc Edwards, over 7 years ago

    For wireframes? Yes!

    For complex shapes that need Illustrator's amazing vector tools? Yes!

    For creating SVGs? Yes!

    For use as companion to Photoshop? Yes! Yes! Yes!

    For artwork that is to be output as bitmap images? No way. Not a chance. Here's why:

    • Gradients can't be dithered, so they're far lower quality. • The antialiasing isn't as good as Photoshop. • The masking isn't as good as Photoshop (Illustrator render clipping groups as well as Photoshop can).

    If you're using Illustrator to create PNGs for use in web or app design, the quality of your artwork is suffering because of your choice. It's as simple as that. And while we're on the topic, I don't think anything is as high quality as Photoshop, in terms of rendering quality.

    Further reading: http://bjango.com/articles/illustratorandappdesign/http://dankando.tumblr.com/post/22703358918/cs6-graphics-quality

    11 points
    • Marc EdwardsMarc Edwards, over 7 years ago

      Just in case it wasn't clear from my answer: I use, love and recommend Illustrator, just not for jobs that require bitmap images as output.

      2 points
    • Nicholas HendrickxNicholas Hendrickx, 7 years ago

      So what if you need any of the benefits you mentioned at first but you still need a bitmap output?

      0 points
  • Leigh HibellLeigh Hibell, over 7 years ago

    Nokia N9 UI was designed all in Illustrator and exported as .svg

    The complete toolkit is available for download as AI files here.. http://harmattan-dev.nokia.com/docs/ux/downloads/NokiaN9_CoreUI_Toolkit_1.6.zip

    2 points
  • charlie burgercharlie burger, over 7 years ago

    I know from a good source that everything at Area 17 is made with illustrator ... and that it helps for retina exports. Just by changing the settings of export

    Check their amazingly neat work area17.com

    1 point
  • Andrew LiebchenAndrew Liebchen, over 7 years ago

    I use Illustrator mostly. I use the program as a kind of "CSS simulator" in that I am to only draw things that I can recreate with HTML/CSS.

    I rarely need to create image assets but when I do, I choose Photoshop (mostly).

    1 point
  • Andres AcostaAndres Acosta, over 7 years ago

    I use all of the above when designing a UI. Illustrator has a special place in the early phases of my UI design workflow because of my comfort with its vector tools, stage and color management.

    One tip, use the keyboard shortcut SHIFT-O to activate artboards. Duplicate them, sort them, have fun....they are huge time savers. The artboard performance in my opinion is faster than Sketch (at least for now). This is a real time saver for keeping your concepts organized and iterating.

    I also use illustrator objects the same way I'd use sprites and any repeating UI element. And lastly, never rely on one tool. If you find yourself stuck, export elements as an SVG and test in Sketch or another program. I'd also suggest you add InDeisgn to the list because it's no longer focused on print. The type control and new adaptive design features really give you new ways to work with web and mobile.

    1 point
  • Nathan ManousosNathan Manousos, over 7 years ago

    I had a coworker who used it for everythig and got really good results. I think the infinite canvas is nice. If it works for you, go for it! I found it hard to cut up assets, and get pixel perfection in small graphics. Quickly designing complex things like buttons with lots of shadows and gradients and such is difficult in my experience.

    But Sketch pretty much blows it out of the water for UI work.

    1 point
  • Michael Choe, over 7 years ago

    I usually create the base shapes in Illustrator and then copy and paste them into Photoshop as Smart Objects to add shadowing and other effects. I'm so stuck on the Pen and Pathfinder tools in Illustrator that I rarely use the shape tools in Photoshop.

    Especially apropos to DN folks though is that I've been playing around with the flat aesthetic and have been using Illustrator for the bulk of my drafts It's been great for that, but I still import into Photoshop to put on finishing touches.

    0 points
  • Jon GoldJon Gold, over 7 years ago

    I was always more of an Illustrator/InDesign-y designer than a Photoshopper (I think most people who come to the web from graphic design backgrounds rather than self-taught are?) — but it's just really difficult to get good results for digital design I find.

    Sketch is lightyears better other than the typography controls (which don't actually matter so much doing web design)

    0 points