Table Of Contents
- UI Design with Adobe Illustrator: An Overview
- Tools and Panels
- The Illustrator Workspace
- UI Design Building Blocks
- Getting Stylish with Graphics
- Finishing Touches
- Working Smarter
UI Design with Adobe Illustrator: An Overview
In the first chapter, Rick provides an overview of some of Illustrator's features that makes it a great tool for creating high-fidelity mock-ups for your sites and apps. First and foremost, there is its vector-based environment, but also its excellent color & typography, plus its powerful tools that help you keep your design consistent such as the usage of Graphic Styles. Rick only scratches the surface in this chapter. This is more like a warming up for what comes next…
Tools and Panels
In this chapter, Rick leads you through the Tools panel and shows you the tools that are useful for your UI design tasks. This chapter covers the basics of the application. You'll get to learn how to use the Pen tool, and the other drawing tools such as the Line Segment Tool, Rectangle Tool, Ellipse Tool, and Polygon and Star Tool. You'll get to learn how the Gradient Tool works, learn about Illustrator's different Drawing Modes, Screen Modes,… This felt like a recapitulation of what I already know, but it makes this book really complete as it's certainly all very well explained for Ai newbies, or the less advanced user of this application. He also shows you how you can configure and use Illustrator's many panels, and how you can set custom workspaces to tailor Illustrator's UI that works best for you.
The Illustrator Workspace
Next you'll learn about choosing the right measurement units, selecting the optimal color space, creating & using artboards and the Artboards panel, how you can organize your artboards and navigate through them. Here you'll really see the difference between working in Photoshop versus working in Illustrator. The canvas in Illustrator also goes beyond the document's dimensions, which is one of the many things I really like about working in this application.
UI Design Building Blocks
From this chapter on, you'll learn features by creating a screen for a web application for some fictional project. You learn how to use guides, Smart Guides, how to work with paths, how to use the alignment tools, how to create page grids, and how you can apply them to multiple artboards, how you can achieve pixel precision, how you begin a layout, and how you set type starting with some typesetting basics. While learning all this, you create the different components of the mockup: the main content, a sidebar, a search field, the navigation,… Things don't look polished yet at this stage, as this is only setting the basic layer. The refining comes in the next chapter.
Page about 'Smart Guides': Alignment Guides, Anchor/Path Labels, Object Highlighting, Measurement Labels, Transform Tools, and Construction Guides.
Getting Stylish with Graphics
After having created a grid, and the basic elements that defines the UI structure and some type, you'll get to know Illustrator's true power of vector-based features and effects. In other words, you learn about the features that can make your workflow truly efficient. In this chapter Rick explains you three features, or tools if you like, that helps you in creating and reusing your UI elements to save you a lot of time: the Appearance panel, Graphic Styles, and Symbols. You discover Illustrator's true potential with these in-dept exercise of these three powerful features while also learning a lot of basic techniques along the way.
By now you've learned the basics, and got a taste of Illustrator's true potential as a UI design application. In this chapter you'll get to learn how you can use a few more advanced features to give your design an extra polished finishing by taking the Appearance panel to a next level. You'll also get to know a few additional type techniques, and different ways of how you can import images.
This chapter focusses on using Illustrator in a smart way so it can improve your workflow. First you'll get to know more about UI planning, such as creating a sitemap, wireframes,… followed by how you can communicate your design intentions, such as visualising a storyboard, or creating different states of UI elements, adding notes… Rick also shows you how you can create a style library, a swatch library, and templates. Last but not least you'll learn about how you can export your design to other file formats such as PDF, Photoshop, and JPEG or PNG, and a full explanation of the 'Save for web' export feature.
A chapter overview page, showing chapter 7, 'Working Smarter'
This book gives you the full story on how you can use Illustrator to your advantage for all your UI designs. It shows its true potential and power to use this application for this purpose. Some of its powerful features shows that it can beat Photoshop on certain areas. The book also gives you the complete tour on all the tools and features, which makes it an excellent read for people who are just starting out with Illustrator as well. Even if you still decide to stick with Photoshop for these kind of designs, I still can recommend this book as it shows you a lot of nice techniques that you can use even for other purposes and it also shows you ways of how you can use Illustrator in a meaningful way. For instance, one of the features I found very interesting, and which I should try to use more often, is setting up a set of default Templates files, or the creation of Style Libraries.
Photoshop vs Illustrator
While I still use Photoshop these days for all my UI designs for the web, and iPhone & iPad app designs, I believe Illustrator has a lot of flexibility that I really love. I sometimes wonder, definitely after having read this book, if it wouldn't be better to switch to Illustrator instead. Somehow it never got to this as I find combining both apps works best for me. In general, I've always preferred Illustrator over Photoshop if possible if I look for the most flexible solution in terms of scalability, as Illustrator gives me resolution independency. Especially for print, there is no question really, Illustrator wins for me.
Still, when I know I have to hand over my files to a developer, I never consider Illustrator because I know upfront it will be a problem. This is generally the case for me today, so that's definitely one of the reasons why I stick to Photoshop for UI design work. Also, to me it (still) feels a bit awkward to work on pixel perfect designs in Illustrator. Even though, I totally love the Pixel Preview mode and the much approved pixel snapping and all, I couldn't help noticing a slight difference in the way Illustrator renders the edges of rounded shapes such as rounded corners or small circles, compared to Photoshop, when exporting via Save for Web. At the moment of this writing, the work I mostly do in Illustrator is either print related work, illustrations, or logo designs. As far as UI design work is concerned, I only use Illustrator for the creations of icons or illustrations. Only very basic icons are directly drawn in Photoshop using the Pen Tool or some of the Vector Shapes, because Photoshop simply can't beat Illustrator in this area. Then I copy & paste (or drag) these into my Photoshop document.
Whether you choose Photoshop or Illustrator for your UI designs is really up to you. You don't even have to use one of these two, just use an application you feel most comfortable working in. If you choose Photoshop, than my advice would be to keep your designs as flexible as possible, which means scalable or resizable. This can be only be done if you use Shape Layers or Illustrator Smart Objects for everything that isn't a photo. This is also how I currently work, starting with the (non-Retina) 1× document size for my iPhone/iPad designs.