Rick Moore - UI Design with Adobe Illustrator: Discover the ease and power of using Illustrator to design Web sites and apps

UI Design with Adobe Illustrator

Rick Moore

UI Design with Adobe Illustrator
Rick Moore

Adobe Press books are published by:

Peachpit
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
800/283-9444

Peachpit is a division of Pearson Education.
For the latest on Adobe Press books, go to
www.adobepress.com.
To report errors, please send a note to .
Copyright 2013 by Rick Moore

Adobe Press Editor: Victor Gavenda
Project Editor: Nancy Peterson
Development Editor: Stephen Nathans-Kelly
Technical Editor: Tom Johnson
Copyeditor: Darren Meiss
Production Editor and Compositor: Danielle Foster
Indexer: Joy Dean Lee
Cover design: Aren Howell Straiger
Interior design: Mimi Heft

Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact .

Notice of Liability
The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author, Adobe Systems, Inc., nor the publisher shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.

Trademarks
Adobe, Illustrator, and Photoshop are registered trademarks of Adobe Systems, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

ISBN 13: 978-0-321-83385-3
ISBN 10: 0-321-83385-6

987654321

Printed and bound in the United States of America

Acknowledgments

Writing a technical book is crazy hard, and this adventure would not have been possible without the help of so many people. First, thanks to my wife, Shelley, for her encouragement, support, understanding, and love as I undertook this wild endeavor. I could never have done this without you. Thanks to my daughters, Cali and Carice, for being patient while Dad was holed up in his office banging away at a keyboard for six months. Lets go play now!

Huge thanks go to Denise Jacobs for tons of helpful advice and for putting me in touch with the right people to make this a reality. I never could have gotten it started without your help. Thanks to Victor Gavenda who got the ball rolling. Thanks to my superstar editor, Nancy Peterson, and her team, Stephen Nathans-Kelly and Darren Meiss, for all the time and effort spent bringing my words to life and making me sound like I know what the heck Im talking about. Thanks to my tech editor, Tom Johnson, for methodically checking and questioning my instructions so that they make sense to you, the reader. Finally, thanks to Mimi Heft, Danielle Foster, and all the other production people working behind the scenes to make this book look great.

Thanks to all of my coworkers, friends, and professionals who provided ideas, feedback, and support before, during, and after the process: Colt Pini, Nic Johnson, Kaleb Tracy, Juna Duncan, Albert Candari, Jared Lewandowski, Ty Hatch, Michelle Barber, Clifton Labrum, David Lindes, Cameron Moll, and Khoi Vinh.

Thanks to my mentors who helped me immensely as I started my journey into the world of user experience: Gilbert Lee, John Dilworth, Rob Thomas, Todd Ericksen, and the entire NorthTemple team. You guys rock. I miss the old days.

Contents

Introduction

UI Design with Adobe Illustrator

I realize right off the bat that I am going to date myself here. I began my career as a graphic designer when the web was still in its infancy. I learned paste-up techniques and created marker comps before I ever knew that same stuff could be done faster on a computer. Once I got out of school, it became apparent very quickly that those skills, while useful, were pretty much obsolete. To get with the times, I bought myself the only computer I could afford at the time, a shiny new Wintel PC, added a copy of CorelDraw, and started down the path of digital graphic design. Little did I know that many years later my print skills would rarely be put into use. Right around that same time, I got an Earthlink account and started a web page on Geocities as a playground for learning HTML, which at the time was nothing more than a curiosity.

A Web Start

I bought my first Mac in 1998, then designed and built my first client website that same year (). I used Photoshop to mock up the pages and slice up the graphics for a (gasp) table-based layout. Dreamweaver was utilized to write the markup. I remember the joy I experienced watching that first site come to life, as crude and unrefined as it was compared to what is possible today. In the many years since that first site, I have tried to hone my workflow to be the most efficient it could be, but have always struggled in finding a way that felt as fast as it was creative.

I.A. My very first client website courtesy of the Wayback Machine ( www.archive.org/web/web.php ). There used to be images there...really.

In recent years, my career has shifted into the field of interaction design and user interface design. All the skills I learned as a graphic and web designer were taken to a whole new level while creating UIs for web applications and mobile devices. Like many in my profession, I used Photoshop daily to complete my design tasks. I loved the program for its ability to create pixel-perfect mockups. The thing I liked least about it was its lack of flexibility in performing said task. I did have another tool in my design quiver that I used often, but mostly as a supplement to Photoshop. That application was Adobe Illustrator, which I loved for its speed and its vector-drawing chops. I tried through several versions to use it for mocking up web pages and application UIs, only to end up getting no further than wireframes and ultimately reverting back to Photoshop to finish the job.

Then something marvelous happened. In early 2010, Adobe released Illustrator CS5 with some pretty spiffy pixel-related features. Despite the problems Id had previously and after some hesitation in upgrading, I decided to give it a go. And wouldnt you know it, the stars aligned and I was able to move my workflow to this tool without looking back. With the latest version, CS6, I have been able to become even faster and more efficient without ever hampering my creativity.

Who Needs This Book?

You might be a seasoned veteran and a Photoshop ninja, a budding designer fresh out of school, or someone with a good eye that needs help realizing their artistic vision. Whatever your background, this book aims to show you how to produce high-fidelity mockups in an extremely fast and efficient way. Although it covers some drawing techniques and tips for UI element creation, this is not a book that goes into great depth on how to create illustrative design. Its more focused on how to fit the pieces of your design together into a cohesive structure in order to craft the experience. Readers of any experience level will be able to find useful information.