Why InDesign is Better for Wireframing than Illustrator
UPDATE: I have put a PDF howto for wireframing in InDesign here:
Wireframing Using InDesign
Since April 2008 I have been working part time as peer coach to Interaction Design students here at the HRO. For next year’s program I am developing a wireframe workshop, since this is something that is lacking severely at our course. Having done my first internship at LBi Lost Boys I was introduced to InDesign as a tool for making wireframes. Since then I have relied on InDesign for almost all my wireframing needs and it has served me very well. However, I am aware that InDesign might not be such a widely used tool within the Interaction Design community and it was therefor decided to use Illustrator for the wireframing workshop. Having now worked in both these packages, here are my thoughts on why I prefer InDesign to Illustrator.
![]()
Pages
First and foremost, pagination. Interaction Design documents tend to be large, especially those for big platforms. Being able to have Word-like pages makes it a lot easier to organise your frames. Illustrator lacks this functionality, in this sense it is much more like Photoshop. You are forced to paste your wireframes into an InDesign document after creation.
One Package
This issue refers partly to the pagination problem. Essentially, you are using the same functionality in Illustrator to draw the wireframes than in InDesign. It is possible to draw all you need right within Indesign but it is impossible to make a proper document Indesign-style in Illustrator. This means that you are using two applications in stead of one to get the same job done.
Styles
Illustrator isn’t as good with paragraph styles, compared to InDesign. Although it is possible to define paragraph styles in Illustrator, it simply is not as robust as InDesign. I have the feeling that paragraph styles are an afterthought in Illustrations, whereas in InDesign it forms a major part of the functionality. Then there is also the fact that it is impossible to underline text in Illustrator, something that is vital.
EDIT: as Eric pointed out in the comments, it is actually possible to underline in Illustrator. Thanks!
Masters
Masters are a powerful tool in InDesign. It allows you to create templates that repeat themselves throughout your entire site. Indicating where the fold is, for instance, can be done on a master page. Recurring elements such as a header can be designed and placed in a master and simply applied when needed.
General Document Design
Using and knowing InDesign teaches basic document design skills, but more importantly, it teaches typography and like Information Architects Japan, I am a firm believer that Web Design is 95% Typography.
So, to conclude: Whilst Illustrator is a far more advanced illustration tool (as the name suggest) than InDesign, the drawing functionality found in InDesign is more than sufficient to develop high quality wireframes.
Eric Peacock Says:
You can underline in Illustrator – it’s at the base of the fully open Character palette next to the underscore. This is new to CS3 I think, so it’s probably still sinking into the creative workforce.
Peter Says:
Thanks Eric, I found it!
Guy Says:
One problem is, however, that unlike Illustrator, you cannot set InDesign to use pixels for measurements.
This creates quite a few problems when trying to wireframe for anything digital. You can’t even type measurements like 90px and have InDesign automatically transform them to whatever it’s currently using.
Does anyone know a workaround / solution for that?
Sacha Heck Says:
Hi,
@ Eric: In Illustrator CS2, it is also possible to underline. There is a button in the character-palette.
@ Guy: You could set the ruler units in the preferences to points. You can right-click in the rulers to do that very quickly. 1 point with 72 ppi = 1 pixel. So you work with points but you think, like it being pixels. For example you set up the document to 600 x 800 points = 600 x 800 px.
Regards from Luxembourg,
Sacha
Guy Says:
Hi Sacha,
That sounds like a decent solution, I’ll go ahead and try that.
Thanks.
peterpixel writings » Blog Archive » Pixels to Points conversion in InDesign CS4 Says:
[...] figure it out completely but today I managed to do so and since I use InDesign almost exclusively (here’s why) I thought I might share this. Then again, it might be that I am the last person on earth to [...]
Super User Studio Says:
We couldn’t agree more. InDesign saves you loads of time.
David van Ballegooijen Says:
Illustrator CS4 does support multiple pages, with the benefit of being able to zoom out and see all pages created. Here is an example i’m working on: http://img.skitch.com/20091228-jcwhgc4tbnskn3ipsdmrb51t8c.png
Chris Says:
Even with Illustrator CS4′s multiple ‘artboards’, InDesign’s various typographic aides (e.g. baseline grid, columns, etc) make it far more suitable to web design.
Ant Says:
There are some trade-offs, however:
To few people have InDesign, so it may not be suitable if you design and other folks converting InDD ? HTML. It’s not issue when you design and code.
Also you cannot integrate InDD into Photoshop as smart object (you can do this with Illustrator).
And this seems novel for many people to use InDesign for web. But I wanna try it, because loved text capabilities of InDesign, that something Photoshop lacks.