Lately I’ve been creating a lot of wireframes in Illustrator and outputting them as PDFs to share with others as well as to send to my iPad for portable viewing. Even though Adobe is the publisher of Illustrator as well as the originator of the PDF format, there is nothing about this process that’s elegant, to say the least.
So last week I wondered aloud on Twitter whether anyone might already have figured out a way to automate this process. (To clarify, I accidentally typed “currently visible files” in that tweet when I mean “current visible layers.”) I didn’t get any replies until today, when my friend Matt Ericson told me that my tweet had inspired him to clean up some Illustrator actions that he’d created to do something similar to what I was looking for. His script Export Illustrator Layers as PNGs doesn’t output PDFs, but a stack of PNGs can be easily enough converted to PDFs, so close enough.
Correction: Matt informs me that this script is in fact capable of outputting PDFs as well as PNGs.
Actually, I realized that what I’m really looking for is not just a way of automating the output of various layers as files, but also a feature that (I think) is missing from Illustrator altogether: layer comps — similar to what’s available in Adobe Photoshop. That handy feature lets me combine multiple layers to create specific views representing different states of an interface, without having to duplicate persistent U.I. elements (e.g., navigation buttons or a footer) across several layers. Why it is that after so many years and so many expensive upgrades that Illustrator’s layers features Photoshop’s layers feature don’t act more or less exactly like one another is a mystery to me.
Anyway, I guess I just wanted to share Matt’s terrific script, which you can download here, and also add some more gripes to the inexhaustible supply of user complaints about gaps and inconsistencies in Adobe’s Creative Suite products. Carry on.
Jump to this link
+
Isn’t the solution to “not duplicating elements across UI states” heavy usage of symbols? Especially in CS5 where nested symbols work properly, this is a life-saver for me.
What you’re describing seems like it may be more easily done in Fireworks? Or am I missing something here?
Erin: I must admit that my Illustrator knowledge remains frozen in time around the release of Illustrator, um, well an old version of Illustrator anyway. I don’t even know how to use symbols.
Royal: I tried Fireworks once many years ago. It was indeed better for this kind of thing, but I’m so comfortable in Illustrator that I still prefer it over Fireworks. Plus, at the time, Fireworks became painfully slow with large files.
This video is an ugly, but relatively straight forward intro to symbols. Think Smart Objects in photoshop, except really good, and easily externalized to libraries that can be shared across documents, or computers.
Unsure about the painfully-slow issue with large files in Fireworks, but our entire design team at Methodologie has made a sometimes bumpy but generally happy transition to Fireworks CS5 for the start of all our interactive work. And we’re all die-hard Photoshop / Illustrator / InDesign users, so this was not an easy transition. The software, while far from perfect, has definitely come a long way from it’s full-beta-as-release-software days. You might want to give it another chance!
I use the color options in the layers pallet to keep them together:
Link
Why are you using a vector tool to do wireframes for a pixel oriented media? As other already stated Fireworks was exactly tailored for the comps and wireframes business. I never understood why so many designers are using PS or AI for interface designs.
Illustrator doesn’t have layer comps but ‘saved views’ is very close. Just turn on whatever layers you want to view together and go to the View menu and save.
I too would highly suggest moving your workflow from Illustrator to Fireworks for your mockups. Fireworks is not as refined as some other Adobe tools but is definitely the right software tool for web UI design. You can export as PDF directly from Fireworks as well.
@bernard – he mentioned he’s doing wireframes, which by their nature are not meant to be pixel perfect.
@khoi – thanks for the tip on the script, sounds like it could be very useful!
I still love using Illustrator for wireframe and even most visual design work. It feels more intuitive to me to click on a shape I want to edit rather than a layer of pixels.
I would love to layer group in Illustrator. If designing in a raster program like Photoshop or Fireworks, it’s hard for me to remember which elements belong to which layer.
Khoi, have you tried using OmniGraffle Pro for wireframes. I recently switched and really like it. They also have a version for the iPad.
@kyle fireworks is a bridge between raster and vector. You can entirely work with vectors only, and FW was designed as THE prototyping tool: there is a library with UI shapes available within fireworks.
It was said before: Fireworks is good for this!
I found photoshop layer comps ugly to work with, because you always have to save a comp after editing the layers.
Fireworks has a different concept, it works with “Frames”. In every frame the layer folder structure is the same, but you can choose which layers will be the same in all frames (eg. good for background or the navigation of a website) or different in every frame. Then you export your “Frames to Files” and you’re done!
Unfortunately I still work with Fireworks CS3 because CS4 was to buggy to work with. Adobe managed to prevent me from even giving CS5 a try…
@ploink in CS5 you can organise your layers and frames now in pages. This enables you to work on multiple page types of a site in a single document. You can select layers to be shared in certain pages, e.g. the header or footer layer groups are all shared between every page. Afterwards you can export your pages into multiple formats. IMO CS5 is quite a step forward compared to CS3.
If you get a copy of Illustrator CS5 you can create multiple art boards and they’ll come out as multiple pages when you save as PDF.
Otherwise it’s not too difficult to change layer visibility and just use “Save a copy”.
i can answer a little bit about the cross-application inconsistencies. su and i do a press junket with adobe each year.
during the launch of cs4 i asked why the type tools and layer tools were so inconsistent between illustrator, indesign, and photoshop (these being some of my favorite axes to grind). the answer was basically, “different product teams.”
i asked if it wouldn’t make more sense to recreate the CS apps as a series of modular pieces with tools which could be duplicated from app to app, perhaps as plugins.
the response i got from one of the photoshop team leaders was a somewhat snotty, “would you rather have your entire team fail because all your teammates are running down the playing field holding hands, or would you rather have one member of your team fall on their own, leaving the rest to score?” which is one of the stupidest sports analogies i’ve ever heard.
translation: at least some people in Adobe see no reason to make their applications consistent because they see other portions of the CS apps as inferior engineering—even though the message of CS4 was interface consistency.
Illustrator CS5 has matured as a web design tool so much even since CS4. I have been using Illustrator exclusively for UI design for the last two years and have found so many little nuggets that have significantly sped up my workflow. It’s wicked fast compared to Photoshop, much more user-friendly than Fireworks, and can do just about anything either can do. Designers just need to get past the notion that AI is only for illustrations or logos.
I am in the process of starting to document all this stuff.
More to come.
For folks who have suggested Fireworks: thanks for the recommendation. Maybe I’ll try and give it another shot, though I feel like Illustrator does most of what I want and I’m very familiar with the way it works, so I’d rather not have to invest in another software package.
Patric: That’s really enlightening and rather unfortunate. I don’t envy Adobe’s challenge, though; they have to move not just a huge ship but a small fleet of huge ships all in tandem. No matter what choices they make, people (like me) will complain. Still, there’s just so much to complain about.
Rick: it’s a great point that CS5 has made big strides forward and here I’ll admit that I just haven’t done the work of trying to learn its new tools and methods. Some might argue that that’s my fault then, that I shouldn’t blame Adobe for something I haven’t bothered to RTFM for. There’s a legitimate charge there, I would say, but I also think that it would be great if new features were more intuitive for older users. To be honest, sometimes I upgrade my Adobe products purely so I can see improvements in stability; I don’t feel it’s fair that, in addition to the monetary cost of the upgrade, I should also have to undertake additional training.
Have you thought about transitioning you’re wireframing to InDesign?
It could bring in a lot the benefits your seeking (with superior PDF support, even interactive PDFs!). InDesign can handle pretty much all the basics of vector shape editing similar to Illustrator (obviously none of the fancy stuff, and there’s different methods for creating some shape effects). But for boxes, words and arrows it’s similarly capable. And probably play’s the nicest with copying & pasting vector shapes over from Illustrator.
At my office the there’s a set UX professionals that devised a solid work flow and methodology for wireframing in InDesign. They wireframe full-time in InDesign keeping quality and pace with anything executed in Visio.
You can link external InDesign documents (eg. the primary nav and footer) as master pages to achieve the layer comps effect by designing new iterations on separate pages. They have some other tricks and UI libraries they use as well.
I curse Adobe daily, but I will say, if you’re imaginative enough you’ll find you can achieve a lot stuff like this that you think the tool won’t do. No one app does everything you want, but you can make different apps bend to work for a task not conventionally expected of them.
i personally haven’t had much luck with fireworks; the interface is still pretty buggy and feels a bit gummy or slow (i’m on CS5.5 on a mac pro tower).
as for using INDD for web design on any level: i like the notion of doing this, but i don’t like actually doing it. its PDF output is great, but its editing gets slow on my system.
i tried to do a treesaver project for roger black in INDD earlier this year since the format is basically a print piece moved online. the app became so slow as i added pages and layers that it eventually just stopped.
so i moved back to illustrator. i’ve been doing tons of web work in AI since i don’t know when; love it.
@patric king
I was only advocating the use of INDD as a tool for creating wireframes, not for full fledged UI design.
INDD certainly isn’t equipped to handle the heavy intricacies of creating a fully fleshed out page comp at the fidelity of photoshop, illustrator or fireworks. Adding 5-10 pages at the level of layer complexity similar to say a typical photoshop file would certainly bring the app to a halt.
Wireframes on the other hand can be much lighter and drawn with vector shapes easily handled in great numbers in INDD. I’ve seen plenty of 50-100+ page INDD docs full of annotated wireframes humming along like any ole standard INDD doc, no performance problems that I’ve heard of.
@Joshua Bisch
i know — i was taking what you said a bit further, i could have been clearer there.
with the CS5.5 release, adobe is actually advocating INDD as a design tool for the web and mobile devices.
@patric king
ah, I see.
Seriously!? I had not heard Adobe was marketing INDD as such till now. Wow. I haven’t looked much into 5.5, but that sounds like a terrible idea for INDD. Well at least from my experience with INDD to date I wouldn’t want to use it for that.
Joshua: Actually right now I’m working on a tablet app (not a Web site) so InDesign would work great for that. Previously, my objection to wireframing with InDesign had always been that Web site pages alost always vary in height, which is tough to accommodate in InDesign, but of course with a tablet interface it’s a fixed height, which makes InDesign much more suitable for it. Great idea.
This is exact reason is why I use inDesign for most of my design work with the iPad and iPhone. I can create several UI designs, export to PDF, drop it into Dropbox and it’s on my iPad or iPhone. I like to use a free reader program for iOS called CloudReaders that presents PDFs with no UI getting in the way like the Photo app so I can see a better sense of what the app will look like.
@Khoi
What version of InDesign are you running? InDesign CS5 has a “Page Tool” that allows you to set different master page sizes. I haven’t used it much. But I can imagine at a certain point to many master pages would become a bit cumbersome.
Adobe Help article on multiple page size in CS5:
http://help.adobe.com/en_US/indesign/cs/using/WS9293e1fb3b977c5c-55b0e29e123ddfd2508-7fff.html
To echo a previous post, discovering artboards in Illustrator was a lifesaver! We’re an AI/INDD house, but working with multipage wires in Illustrator was a pain (no layer comps…). Now the combination of artboards and symbols has really refined and sped up our workflow. One of the weaknesses in CS4 was the ability to reorganize and rename the artboards, but the new palette in CS5 has corrected that. Whew!
Yep, artboards and symbols all the way. Save as editable PDF and Preview and the like read the artboards as pages.
Now if only there was a way to make symbols link between artboards…
The biggest issue with using illustrator for any sort of digital design work is exactly this sort of documentation difficulty. They removed any genuine concept of pages around the same time they really started pushing indesign.