Illustrator for Web Design: Wireframing

1
Illustrator for Web Design Wireframing
Timothy Kaldis NetCom Learning
www.netcomlearning.com info_at_netcomlearning.com
[phone]
2

• Agenda
• Choosing a color scheme
• Creating a layer structure
• Targeting specific devices
• Building a wireframe library
• Adding UI placeholders
• Assembling your wireframe
• Saving and versioning a wireframe

www.netcomlearning.com info_at_netcomlearning.com
[phone]
3
1. Choose a Base Color
Choosing a Color Scheme

1. Choose a Color Group from your Base Color
2. Choose from many options in Harmony Rules
3. Consider Grey Scale while building wireframe

www.netcomlearning.com info_at_netcomlearning.com
[phone]
4
1. Use Layers to Organize Logical Content
Creating a Layer Structure

• Wireframe items
• Labels
• Menu Items
• Buttons
• 2. Use Sublayers for sub-content

www.netcomlearning.com info_at_netcomlearning.com
[phone]
5
1. Use Create New option
Targeting Specific Devices

• Use Sub-options in New Document Screen
• Mobile
• Web
• Print
• Use Presets available in Sub-options categories
• If no preset available customize in Preset Details

www.netcomlearning.com info_at_netcomlearning.com
[phone]
6
Building a Wireframe Library

1. Grouping Wireframe Elements
2. How to save existing Wireframe Elements

www.netcomlearning.com info_at_netcomlearning.com
[phone]
7
1. Use Graphic Styles for Menu items
Adding UI Placeholders

1. Use Text Frame objects for Menu Labels
2. Use Symbols for reusable and updateable items

www.netcomlearning.com info_at_netcomlearning.com
[phone]
8
1. Use Text and Frame Tool Placeholders
Assembling Your Wireframe

• Recommended Workflow
• Sketch gt Wireframe gt Visual gt Code

www.netcomlearning.com info_at_netcomlearning.com
[phone]
9
Saving and Versioning a Wireframe

1. Use Logical naming structure for items
2. Use Version numbers for item development
3. Use Logical Document Version naming system

www.netcomlearning.com info_at_netcomlearning.com
[phone]
10
Recorded Webinar Video
To watch the recorded webinar video for live
demos, please access the link https//goo.gl/ZNdQ
mo
www.netcomlearning.com info_at_netcomlearning.com
[phone]
11
About NetCom Learning
www.netcomlearning.com info_at_netcomlearning.com
[phone]
12
Recommended Courses Marketing Assets
Courses Adobe Illustrator CC Combo Class
scheduled on Apr 15 Adobe Illustrator
Fundamentals An Introduction to Illustrator CC
Class scheduled on Apr 15 Adobe Illustrator CC
Advanced Class scheduled on Apr 18

• Marketing Assets
• Free On-Demand Training - Adobe Illustrator l
  Create 3D in Illustrator
• Free On-Demand Training - Adobe Illustrator l
  Illustrator CC Power Shortcuts

www.netcomlearning.com info_at_netcomlearning.com
[phone]
13

• AWS What's New in Amazon EC2
• Microsoft Word Essentials Tips and Tricks for
  Better Productivity
• IT Pros What's New in Windows Server 2019
• Angular Architecture Planning, Organizing and
  Structuring
• Ethical Hacking Enumeration
• Introduction to Data Analysis Using Microsoft
  Excel
• Machine Learning AI Foundations A Guide to
  Predictive Modeling
• More

www.netcomlearning.com info_at_netcomlearning.com
[phone]
14
Promotions
Its time for a SALEbration! NetCom Learning is
headed for its next milestone 21 years of
nonstop training and learning. To commemorate, we
will kick off the best SALEbration of the year
Design Multimedia Courses at 21 OFF! Learn More
www.netcomlearning.com info_at_netcomlearning.com
[phone]
15
Follow Us On
www.netcomlearning.com info_at_netcomlearning.com
[phone]
16
www.netcomlearning.com info_at_netcomlearning.com
[phone]
17
THANK YOU !!!
www.netcomlearning.com info_at_netcomlearning.com
[phone]