Using InDesign to create website layouts

In recent months, I have started using Adobe InDesign to create page layouts for websites. No, not to create the actual layout in a Dreamweaver or in a hand-coding sense, but as a tool for sharing design concepts and creative ideas with clients. InDesign offers effective design control (in an Illustrator-sense) to make it a nifty tool for laying out visuals to show clients. Through InDesign, I can create layout concepts which can then be exported as a PDF to share with clients.

I have found this particularly helpful when designing large, database-driven websites. By using the character styles in InDesign, it’s possible to set up styles that are easily transferable to CSS during the production stages. And like CSS, when the client reviews the visuals and, for example, decides that she wants the primary navigation to a slightly larger and for the font to be red — click, click, type, type, type and whammo! Visuals updated.

Yet InDesign still has its benefits when used to layout small websites. Its image control saves time by eliminating the need to crop or resize images for mock-ups. InDesign’s colour palette can be switched to RGB and there is even a swatch book for web safe colours. Of course, you can always use Kuler to produce your RGB colour palette and then import it into InDesign.

If then, as a designer, you don’t actually hand-code the database-driven websites yourself (or even if you don’t build static sites yourself), it is very easy to annotate a PDF document for your web developer, giving specific measurements or directions to aid in the production process. Annotations can either be handled in Acrobat, using comments, or can be handled in InDesign.