2015
Lynda
Justin Seeley
2:00
English
Illustrator's libraries and symbols make it a great program for developing detailed wireframes for your design ideas. In this installment of Illustrator CC for Web Design, Justin Seeley walks through everything to know about creating, using, and saving wireframes in Illustrator. Starting with a carefully chosen color scheme, Justin shows how to structure a wireframe in layers, develop templates for different devices, and create a library of ready-to-use UI elements, including multistate buttons and placeholders for media and forms. He then combines these elements in an example wireframe, and shows how to save versions of your file as the design evolves.
Introduction
Welcome
How to use exercise files
Understanding challenges
How to send feedback
1. Setting Up Your Wireframe
Choosing a color scheme for your wireframes
Creating a layer structure for your wireframe
Developing a screen template for specific devices
Defining a grid for your artboards
2. Building a Wireframe Library
Using symbols vs. libraries
Creating common UI placeholders
Building flexible buttons
Building form and media elements
Creating a lorem ipsum library
Building a wireframe library
3. Assembling Your Wireframe
Laying out your UI placeholders
Adding behavior indicators to your wireframe
Adding labels and comments to your wireframe
Using arrowhead strokes for emphasis
Challenge: Assemble your wireframe
Solution: Assemble your wireframe
4. Saving and Versioning Your Wireframe
Developing a file-naming convention
Versioning your projects
Presenting your wireframes to clients
Conclusion
Where to go from here
lynda.com
Download File Size:223.6 MB