Illustrator for Web Design: Wireframing

Illustrator for Web Design: Wireframing

Timothy Kaldis NetCom Learning www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

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@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

Choosing a Color Scheme

1. 2. 3. 4.

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

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

Creating a Layer Structure

1. Use Layers to Organize Logical Content • • • •

Wireframe items Labels Menu Items Buttons

2. Use Sublayers for sub-content

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

Targeting Specific Devices

1. Use Create New option 2. Use Sub-options in New Document Screen • Mobile • Web • Print

3. Use Presets available in Sub-options categories 4. If no preset available customize in Preset Details

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

Building a Wireframe Library

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

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

Adding UI Placeholders

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

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

Assembling Your Wireframe

1. Use Text and Frame Tool Placeholders 2. Recommended Workflow â&#x20AC;˘ Sketch > Wireframe > Visual > Code

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

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@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

Recorded Webinar Video

To watch the recorded webinar video for live demos, please access the link: https://goo.gl/ZNdQmo

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

About NetCom Learning

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

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@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

• • • • • • •

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@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

Promotions

It’s 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@netcomlearning.com | (888) 563 8266

©1998-2019 NetCom Learning

Follow Us On:

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

ÂŠ1998-2019 NetCom Learning

THANK YOU !!!

www.netcomlearning.com | info@netcomlearning.com | (888) 563 8266

Â©1998-2019 NetCom Learning

Turn static files into dynamic content formats.

Create a flipbook

Illustrator for Web Design: Wireframing

Published on Mar 22, 2019

Netcom Learning

Summary Have you ever been asked to design a mobile app, website, or desktop software that is intuitive and easy to use, but had no idea how to start? Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. Click on the link to watch the full recorded session of this Adobe Webinar: http://bit.ly/2UOkg9b Illustrator's libraries and symbols make it a great program for developing detailed wireframes for your design ideas! In this session we will walk through everything to know about creating, using, and saving wireframes in Illustrator. From color scheme, to wireframe in layers, to develop templates for different devices, to create a library of ready-to-use UI elements. We will cover it all!

Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.