Comments on: Wireframing Part II: Illustrator Basics

By: Brian Collins

Brian Collins — Tue, 09 Sep 2008 19:27:10 +0000

Thanks for the symbols, this is great!

Does anyone know how to KEEP the symbols library in Illustrator for the next time you start up? I have to manually go an open it each time. It’s really annoying.

By: Todd Zaki Warfel

Todd Zaki Warfel — Tue, 24 Jun 2008 16:14:35 +0000

Yup, I’ll have to contact them to update that list. And I’ll have to get that final article out :).

By: Matt Gardner

Matt Gardner — Tue, 24 Jun 2008 15:41:12 +0000

Bob, no problem at all, am in the process of producing a specification now. Though I’m going after pixel-perfect comps rather than wireframes, the document linkage, scaling, cropping, and auto-updating is amazing to see in action.

Todd, though you’re likely aware of it, you have a list of planned articles over on UXMatters that may need to be updated: http://www.uxmatters.com/MT/archives/000161.php

By: Bob Gutter

Bob Gutter — Thu, 12 Jun 2008 13:26:43 +0000

Matt, If Todd Doesn’t beat you to it. I’am very much intererested in your results of a cross-linked indesign and Illustrator wireframe deck.

By: Todd Zaki Warfel

Todd Zaki Warfel — Tue, 03 Jun 2008 22:19:09 +0000

The final article is going to be on using InDesign and how to pull it together. I hope to get it out in the near future, but my book writing has kind of taken priority :).

By: Matt Gardner

Matt Gardner — Tue, 03 Jun 2008 21:49:00 +0000

Todd, having recently discovered illustrator as a wireframing tool (and it’s lack of features to produce a deck) I was excited to see your article series. I’ve been working on massive illustrator canvas (a grid of 8 by 7 wireframes, often encapsulating entire projects) and am now exploring solutions to automate the break down for more traditional specifications.

For those interested, here’s a summary from Todd’s two articles (on the use of InDesign and Illustrator together for wireframes). Please forgive me if I’ve misquoted, is a list I compiled from the articles and comments to serve as a foundation for exploring Todd’s masterful technique.

Software
Illustrator CS3 for patterns
InDesign CS3 for behavoir

Basic Concept
InDesign file containing zoomed/cropped Illustrator files (similar to web assets)

Illustrator Document Layout
Underlying grid system
5400×1800 art board (5 screens, as described in article)
3600×1224 art board (3 screens, as found in sample file)

InDesign Document Layout
InDesign, 11×17, landscape mode?
Left column: Screen design
Right column: Behavior / notes

InDesign Page naming convention
Figure reference number / functional area / page description.
Fig 6.0 My Account - Landing Screen

InDesign Table of Contents
Created by hand (”InDesign’s TOC won’t cut it”)

File Sizes
5-15mb InDesign working files
1-3mb Output PDF

Will post any additional findings after I put a deck together.

Thanks again Todd for showing a way to get out of Illustrator’s walled garden. Any chance you’d consider creating and attaching a quick, light-weight archive of a cross-linked InDesign and Illustrator file in this thread so we can see the scaling and pattern overlay techniques?

By: Grzegorz

Grzegorz — Fri, 22 Feb 2008 11:03:34 +0000

Hey, Todd. Thanks for sharing your workflow.

I wonder how do you fit Illustrator files into InDesign document? AFAIK InDesing document’s size is fixed, and while for width it’s not an issue, how do you handle differences in the height? Also, how do you produce a clickable prototype (what you wrote about in the first article)? And the last question: where do you place text - in Illustrator or InDesign?

Perhaps those questions would find answers in next articles in the series, which I look forward to!

By: Stratton

Stratton — Mon, 14 Jan 2008 20:05:39 +0000

Hey, Todd - Thanks for an excellent resource. Just wondering if there’s a reason behind the column setup you use now… do you find 17 columns more useful than another divisible or is this more or less an arbitrary decision for you?

Thanks again… it’s always interesting to see how other people work.

- Stratton

By: Thomas

Thomas — Tue, 01 Jan 2008 19:28:35 +0000

Hi Todd,
I have enjoyed your piece very much but am wondering when the follow up to this article will be available?

Keep up the good stuff!

Thanks,
Thomas

By: Michael R

Michael R — Tue, 11 Dec 2007 12:22:54 +0000

Todd - Thanks for this wealth of information! It’s incredibly generous of you to share this, knowing you have spent a considerable amount of time developing this framework. Great insight. I am patiently awaiting the remainder of the articles to see the entire picture and adopt this framework myself. Kudos and thanks again!