InDesign We Trust

Adobe InDesignThe past two days, I’ve been spending more time than usual in Adobe InDesign. While I’m still no fan of designing for print (or the process of it, anyway), I’m really finding that I enjoy using InDesign as a tool. Maybe it’s because I kind of grew up using QuarkXPress, but I find the mode of thinking that a layout program like InDesign uses to be very intuitive. The program’s style sheets feature is a good example; defining and using these text-styling rules is exceedingly simple and logical. It makes we wish that there was a way of manipulating Cascading Style Sheets similarly. Of course, CSS is far more powerful a medium than InDesign’s style sheets, but there must be a way to balance its raw power with InDesign’s brand of plainspoken logic.

And I’m not quite talking about a program like CSSEdit either — it’s a smart little app, but it falls short of what I’m hinting at. What I want is an InDesign for comping Web pages, a layout program that doesn’t force me to push pixels one hundred percent of the time the way I must in Photoshop. I haven’t come within a yard of Macromedia Dreamweaver or Adobe GoLive in years, so recent versions may approximate what I’m talking about. Just to be clear, though, I don’t want a production tool (and I realize that InDesign is a production tool), really, but a comping tool, something that will let me focus entirely on the composition of a Web page design, while still addressing the layout components as objects, in the manner of InDesign or XPress. I guess the point I’m trying to make is that Photoshop is a pain in the ass.



  1. I totally agree with you. I normally don’t do layout comps because I never learned how and also I find it hard to do in Photoshop or Fireworks. If Adobe or even Macromedia would make something like InDesign but for website comps.

  2. You should look at Macromedia Fireworks. This is exactly how I use it. I never let it generate code. I use it to comp websites. Everything is on an object level which makes it much easier to manipulate than in Photoshop layers. Once I have something I like I send a PNG or JPG to the client for approval. When they sign off, I start hacking into the Fireworks file, slicing off what is needed for the site without destroying the original layout while I code the site in Dreamweaver.

  3. Yup, Fireworks is awsome for this. I’ve played with PS and ImageReady, and they just don’t do the “vector” thing that makes Fireworks so powerful.

    Each component (box, text, line, image etc) is an “object”, and has a separate entry in the layers palette, meaning that you can move and re-order everything at any point after its creation.

    It takes both best bits from the Flash editor (without the inherent annoyances), combines it with the vector powers of Illustrator/Freehand and then renders it all in Photoshop-style pixel glory.

    And if you don’t want to use the code generation features (trust me – you don’t) then you don’t have to touch ‘em.

    I’ve tried Freeway, but not Layout Master – will give them a go.

  4. I had a feeling that one of Adobe or Macromedia’s packages had matured in a manner similar to what I’ve been talking about, but I had completely forgotten about Fireworks. I’ll try and get my hands on a copy and give it a try, thanks, Jonathan and Judi.

    Stephane, I’ll have a look at Freeway, though it seems not quite as precise as I’m accustomed to in Photoshop. I was familiar with Westciv’s Style Master, but not Layout Master — because it looks like a Windows only app, right? That kind of rules it out for me.

  5. I’ve recently mentioned something similar to a colleague. I wish that Photoshop would integrate with a HTML rendering engine in their next version (maybe Firefox for Windows, WebKit for Mac) so that I won’t have to “fake” HTML text elements when comping. Being able to apply CSS-style formatting wouldn’t hurt either (that is, objects could use the CSS box-model).

  6. We’ve switched our whole print design departments to InDesign — if anyone is a print designer, they know that Quark is the IE for print design. They didn’t update their program for over five years because of their dominance in the market — InDesign comes along, and by the time it matured to CS, it does some fantastic things Quark should have done long ago.

    That being said, I haven’t tried GoLive (built off Opera’s browser engine), but I would imagine it has similarities. Remember, you can also export your InDesign layouts as XML data for database work:), or export some SVG graphics, same as illustrator

    Quark has web features but 1) they suck 2) can only do one page at a time 3)code is horrendous

    I’ve done a little in Fireworks, and I think it’s compression is better, and that it can handle 32bit PNG’s; but I was a print designer first, so I’m comfortable in photoshop — it takes me next to nothing to build it — then I trim everything out in photoshop and save for web – I find that faster and much more controlled than imageready now adays.

    But, back to InDesign, alot of the big fortune companies have switched to it, so I see that as becoming a great application that challenged Quark’s lame and stagnant monopoly. If only we can get Firefox to do the same in the other industry:)

  7. It’s unfortunate that there isn’t one app (or even two, for that matter) which works well for all comps. I also use InDesign from time to time, as it works with text and text blocks and styles much more easily than, say Illustrator or Photoshop.

    GoLive, btw, is an excellent comping tool, especially because it creates a comp which can more or less work in a webbrowser and allows you to very quickly prototype several site architectures and apply design elements to various components/sections of a site.

    My last project, a fairly complex web-based MMI, had me in OmniGraffle. It’s probably not mature enough yet to consider it a viable web-comping tool (its lack of pixels as a unit is perhaps a dead giveaway, although points work just as effectively), but it handled the task quite well (albeit a bit clumsily…the finished comp has over 800 elements).

    I agree with you for the most part, though, Khoi. Page layout programs are the best way I’ve found to visualize multiple designs quickly.