The thoughts, work and ideas of Liam Dempsey

Liam Dempsey

An Ongoing Worksite

This happy little website serves as a testing ground and play area for me. While the content is always 'real', the design and functionality vary from time to time as I often play with ideas here. I do so on a 'live' site so as to encourage myself to make the changes quickly.

Using InDesign to create website layouts

76 Responses | Posted by Liam Dempsey

Screenshot of the Character Styles palette in InDesignIn 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.

Posted: 29 November 2007

Categories: Web design

76 Responses


  1. Gerald Ekosso // 24 May 2011 at 5:26 am

    Ariel #49. You can, but it is a pain in the back side if you are used to Photoshop. I compare it to typing a letter in Excel instead of Word. It works but you could do it better elsewhere. Photoshop has tools that help you convert whole layers to slices, optimise your graphics for web, generate HTML (if you’re a novice), save scores of images in one process, grab text style that matches your CSS, work in RGB, fantastic layering and so much more. Basically, it is web-developer-ready while inDesign is very printer-ready. There is a point in them being separate programs

  2. AjEG // 24 May 2011 at 11:04 am

    Ariel, it would indeed be very nice if InDesign included slicing and web-optimization, unfortunately as of CS5 it does not (to the best of my knowledge).
    For me, InDesign is still much preferred for web page layout, where I find Photoshop to be clumsy and not well suited to the task. My workflow is InDesign for layout (either tweaking existing print layouts or creating from scratch) to Fireworks for slicing/optimizing to Espresso for coding. If InDesign would support slicing/optimizing, I could cut Fireworks out of my workflow. Until then this workflow works great for those cross-media people that do print-web-iPad design/development. It works slick and has many advantages over Photoshop in my opinion.
    Thankfully, while I do work with a lot of designers/developers, I don’t work with any people like Gerald who prefer to threaten defecation instead of work collaboratively.

  3. vFragosop // 6 Jun 2011 at 3:45 am

    Guess what: Photoshop is a photo manipulation software and not a web design software. Photoshop is not suitable for typography control, it requires a lot of rework if you simply need to change one menu color (specially if you care about sending anything else than only the home page for your client to approve). Photoshop is not pixel-perfect either, try to put a square at x=0.5 and you will see. Photoshop won’t generate even acceptable html markup that will soon become junky and (x)HTML and CSS files are extremely larger than hand conded ones. I can spend a few more paragraphs on this subject.

    Do you need a photo manipulated as background for your site? Photoshop.
    Do you need vector artwork for these icons and rounded corners? Illustrator.
    Do you need quick prototyping, combining them all and simulating how they would behave at your browser? Fireworks.
    Do you need fine tuned layouts ready for deploy to client approval with anything else than just the home page and with different layout options as a professional should do? InDesign.

    Do you need to code all of that? Don’t you ever generate software markup.

  4. wagster // 6 Jun 2011 at 6:20 am

    You forgot Balsamiq :)

  5. Jerome // 6 Jun 2011 at 6:35 am

    @vFragosop: I’m sure Photoshop is pixel perfect, isn’t it? To be honest I’m not what ‘putting a square at x=0.5’ means. 0.5 what? You can change the settings so that Photoshop expresses all measurements in pixels, that helps. When you say ‘Don’t you ever generate software markup.’ I hope you mean ‘Don’t you ever generate software markup!’, rather than ‘Don’t you ever generate software markup?’

  6. vFragosop // 6 Jun 2011 at 12:10 pm

    When you resize something using transform control, or even move it, its possible to achieve out of pixel grid positions and sizes. That means, its possible to draw a square on photoshop with 302.3 pixels width and positioned at 97.72 pixels on the X axis. So, its not a pixel perfect software.

    Fireworks, on the other hand, won’t even allow you to put decimal numbers on x, y, width and height boxes, and if you try to move/transform manually, it will round these numbers and won’t draw anything out of the pixel grid. That makes it perfect for layout positioning.

    And I actually meant “Don’t you ever dare clicking Export to HTML, button on your software”. Adobe should rip that off from any software.

  7. Sean From Chicago // 6 Jun 2011 at 12:29 pm

    I still just want to push the desire to be able to make simple web pages from within Indesign and ask that it makes the HTML not me. Call me lazy or a novice I don’t care. If you desire is to take print docs and quickly reformat them for the web or an iPad (app or HTML5) I do not want to do the heavy lifting. So I don’t get the comment about “not exporting to HTML” it’s that exactly what someone wants?

  8. vFragosop // 6 Jun 2011 at 1:07 pm

    When you export HTML from Fireworks, Photoshop, or even design a website using Dreamweaver’s Design View, you are generating either a table based layout or a bunch of absolutely positioned divs.

    That makes that HTML and CSS extremely larger and problematic, specially when you are dealing with 2 or 3 columns designs where you should be using CSS’s float, instead.

    Any good web developer with decent understanding of HTML and CSS should be able to make a complex HTML skeleton in no more 30 minutes which would properly use CSS for positioning.

    For extremely simple web pages with fixed layouts, that may work, but think of a page with fluid layout and dynamic content, like a blog.

    You may, or may not have that sidebar on internal pages, your horizontal menu may, at some point, need more items, the content of the page may have any size, have images inline, lists and lots of different headings.

    Now imagine that you may want to have all that available on a 1 column layout better suitable for smaller devices, and that same menu that was once horizontal, now requires to be vertical and that you can’t have different markups for each device, they all are generated using the same .php template.

    Coders don’t know how to generate a .pdf for print with slugs, bleeds, pantone color conversion and all of that, so they don’t even try. The same applies for pseudo-coders designers exporting HTML, they don’t know.

  9. Liam Dempsey // 26 Jun 2011 at 9:08 pm

    I am not sure how helpful this will be but as I just stumbled upon it over the weekend, I thought I would share it. It might help one or two people:

  10. JoeyJoeJoe // 11 Aug 2011 at 1:51 pm

    Liam #59, I’ve read that article several times, but it doesn’t answer the question that its title posits – how do developers use InDesign?

    It looks like the agreed upon workflow would be the ID – Fireworks – Dreamweaver (or what have you) path. That’s fine, but if you’re not the designer, just the coder, how can you be sure the output is going to be exactly what you see in ID? Furthermore, what about layers? I have a site that not only will have several on/off states, but will change background, buttons, headings, etc colors seasonally. Is it possible to follow that workflow and preserve the layering I need in order to exactly cut images for each layer?

    My next sites’ designs may be delivered to me in ID, so I want to be sure to get to the agency in time to either insist on PSDs, or thank them for introducing me to my new favorite program. Which will it be?

    BTW, I downloaded the trial version of ID just to play around. No print background, just 12 years web design/development. I can’t figure this frickin thing out! :-)

  11. wagster // 11 Aug 2011 at 5:20 pm

    You can’t be sure that things will be exactly the same as they looked in ID – it doesn’t really think in pixels. PS is better that way. To discover the cool stuff about ID you need to play with “Paragraph Styles” and “Object Styles”. They’re just like CSS really. Which PS doesn’t have.

    And no, it’s not much like PS – more like Illustrator. Bit of a learning curve for web guys!

  12. AjEG // 12 Aug 2011 at 10:50 am

    @Liam#59: Thanks for the Smashing Magazine article link. It was a good read.

    @JoeyJoeJoe#60: I’m surprised that the article didn’t mention ‘Units’. Open the InDesign preferences and set Units to Points. It defaults to Picas. Be sure to make this change while no files are open. InDesign allows you to save file-specific preferences. Quick review: 1″=72 points, 1 pica = 12 points. Default screen resolution is 72 pixels per inch, so points works very well. I’ve commented a couple of times in this article’s posts about my method of using InDesign for cross-media web design. If you have any specific questions, I’ll do my best to help.

  13. Liam Dempsey // 14 Aug 2011 at 10:15 am

    JoeyJoeJoe #60:

    Thanks for your question. I don’t know of any web developers using InDesign.

    My own practice as a designer is to use InDesign for visual layout. I then share an annotated PDF of the visuals with the developer, along with all the assets (images and hexadecimal codes for colours). I create the assets for the developers using a combination of Photoshop and Illustrator.

    So, the value of InDesign for me is that it makes the creation of the look and feel much easier.

    Hope my short answer helps.

  14. Ricardo // 16 Nov 2011 at 6:09 pm

    It’s the brain behind the wheel that matters, not the program.

    That means you will get a better result if you are a hardcore PS/FW web design switching to ID, than if you’re a hardcore print designer “trying your hand” at web design.

    What kind of comments do you think we would get if this thread was about someone recommending the use of Fireworks for print layout?

  15. Liam Dempsey // 20 Nov 2011 at 10:50 am

    @ Ricardo#64,

    You raise a good point. Smart people will utilize the tools that best help them accomplish the task at hand. If the team working together can come up with a solution that meets their needs, then from a certain angle, it’s not all that important what that solution is. InDesign or Photoshop — they are both suitable approaches for crafting web design visuals.

  16. AW // 22 Nov 2011 at 10:03 pm

    I am very, VERY suprised to find out that NONE of you discovered one thing that InDesign is severely underrated in one feature.

    LINKS. Having externally linked files throughout all your pages. All in one document. One .indd file, all you have to do is to be organised with prepared graphics as a separate folder. That’s it.

    What happens when you’re sitting next to a client and he/she wants to make changes on how the banners you did in previously in Illustrator, Photoshop etc, – for the InDesign to dynamically update itself whenever you change that banner file itself…and all you have is just a couple of minutes?

    enter “Round-The-Trip-Editing”. I am shocked that none of you ever realised the importance of this since CS1. Can Photoshop have this management capability of having externally based assets and to dynamically changes and update itself whenever those assets are changed by the programs they’re created originally?

    NO. Absolutely not.

    It would take me at least two or three times more work to create, layout and manage a complete web site in Photoshop alone. Would you like to manage four separate PSDs – home page, section intro, detail page, and gallery with no way of managing external assets and when changes arise would you do those changes manually?

    – OR –

    just working on ONE indesign document file? with AS MANY pages as you need. and complete control, monitor and update your graphic links accross the entire document instantly”. Layers? Indesign has them too.

    I use InDesign as a first rate tool for web design to be honest, even though I’ve graduated and bred as a print based mindset. But hey, since CS5 Indesign does work in Pixels too did you know – what’s what preferences are for.

    It’s time for the web design community to wake up and really harness and respect InDesign. It is been frowned upon way too long.

    One other thing – try to organise a ‘style-sheet’ for all your H1, H2, Body, etc. Good luck managing that in Photoshop.

    Or what about replicating that CSS3 letterpress effect? you can do that with drop shadow tricks in Indesign too. How about saving this as a master object style accross the document? Can this be done In Photoshop? no.

  17. Joe // 16 Dec 2011 at 7:25 pm

    The biggest challenge I have when designing wireframes is changing 1 page in a websites that are large.( 100 or more) In phtotoshop I have to remember were all the elements are for that page and turn on and off layers and remove. Horrible I know. In InDesign it takes longer to drag and drop reusable elements because I have to scroll from page 5 to page 105 an copy the facebook icon ect. and in Omnigraffle… well….

  18. jamEs // 30 Jan 2012 at 11:00 pm

    Stumbled upon this conversation as I’m preparing a talk on why web designers shouldn’t use Photoshop to design sites. I have used InDesign for doing sites for a year and half now and wouldn’t go back.

    The reality is InDesign isn’t absolutely perfect for designing website layouts, but it is closer than anything I’ve encountered. I cringe now anytime I have to deal with a Photoshop file, even if it is setup well. The reality is that it isn’t object oriented and the layer management is awful. When creating a layout to send to a client to review ID is great at quickly being able to churn something out. Every designer these days seems to spend their time getting proficient in Photoshop, but doesn’t bother to even learn the intricacies of InDesign.

    Need to reuse elements from a previous design? Just grab, copy and paste into your document. Want pixel perfect alignment? Use the template to create your layout. Create a rounded corner box? No problem, and resize it until your hearts content. Not like Photoshop, where stretching a rounded corner box would just stretch the corners out of whack.

    I installed a script in ID that allows me to input HEX values, so I can just pop those same values into my CSS without even having to convert them.

    All you folks who can’t build a pixel perfect layout from InDesign and have to convert to Photoshop are quite simply doing it wrong. If you use a grid system like and the align panel properly there really isn’t much that can go wrong.

    I find even outputting images, which is something ID can’t do natively is pretty easy. Copy, create new PS document, paste, save for web. If your image is in a box it’ll be the exact size you want and already cropped.

  19. Christian // 31 Jan 2012 at 6:41 am

    @jamES: Could ou describe more exactely HOW you use the layout? Is there a good tutorial explaining the setup?

    Which script did you use for the hex-values in which ID version?


    Can anyone show examples of finished layouts using the 960 grid?

    I’m curious to see „real results“, not the „theoretical-way to do it.

    Thank you all

  20. jamEs // 31 Jan 2012 at 8:52 am

    @Christian has all the templates that you need. They are ID template files, so you just open the template file as a base and get started. I typically use a grid 24, with either 3 or 4 column layouts. I believe I modified my templates to be colour coded as well, so that I could see the columns properly differentiated.

    The script for the hex values can be found here

    And here’s a site I designed recently using the 960 grid

    I design real estate templated sites most of the time, so typically I will design a front page layout, then an inner page concept to show what the content pages will look like. Obviously there are sites out there that you might have the need to create master pages if you’re building multiple sections with different looks.

  21. AjEG // 6 Feb 2012 at 1:06 pm

    @jamES: I completely agree with your original post. I like your image export idea of copy/paste into PS since PS will automagically create a new document sized to the item that was copied. I’ve used that before but I find that exporting an INDD page to Jpeg and opening in Fireworks for a quick slice/optimize off all images at once works a bit better for me.

    One thing I am wondering is if the PS method you use ends up with any gamma change problems? I find that the FW method I use will sometimes introduce a gamma change in the graphics.

    Thanks for furthering the discussion of using InD for web design. Now if Adobe (or some plugin?) would just allow slice/optimize directly from InD.

  22. jamEs // 6 Feb 2012 at 1:18 pm

    @AjEG I have never noticed a colour shift issue or anything like that. Usually PS will alert you if there is a colour space issue.

    I find the image export idea works mainly because there are quite often very few images to export, at least in items I design. And a lot of the time the stuff in the mockup might be unworkable as far as image export if say you are creating image sprites for rollover effects. Often it’s only 3 or 4 images which is pretty easily handled. With CSS3 a lot of the stuff that might have needed to be exported, like rounded corner boxes or drop shadows can simply be recreated in your CSS, no images required.

  23. Danilo Savaq // 29 Feb 2012 at 11:45 am

    I’ve never used In Design to create websites even one of those fake “Old Fashion – Senior Art Directors” told me that I was mandatory use this software to create layouts…and you know what? I didn’t. If you want to limit your creativity use In Design…but if you want to be UNIQUE use a combination of softwares…Photoshop, Illustrator, After Effects, scan your drafts and convert on vector files, take pictures, etc. Play around with all the softwares…but Never, Ever use just one software. I highly recommend Photoshop… No Limits! Please use In Design just for vector files and nice brochures! In Design is the replacement of Page Maker. If you have a lot of experience on design…you know what I’m talking about.

  24. jamEs // 29 Feb 2012 at 12:46 pm

    @Danilo – Let me know when Photoshop implements resizable rounded corner boxes and then talk to me about limits. Or individually rounded corners. Or vector gradient fades. At the end of the day Photoshop is an awful layout tool, and there is no disputing that. Use Photoshop to create imagery and manipulate it, but don’t try and tell me Photoshop is the go to layout tool because it isn’t. It’s the tool you spent the most time learning and mastering and are therefore most comfortable using. ID is the gold standard for layout creation and when creating a website mockup you are creating a layout.

  25. HTML5 Gallery Admin templates // 10 Feb 2013 at 7:23 pm

    Properly fits from scratch work i’m putting together with a colleague. With thanks.

Trackbacks & Pingbacks:

  1. InDesign Basics | Ryckera Robertson — 21 Feb 2012

    […] The InDesign program is very user friendly and offers a way to do something basic but present it in an advanced way. Though InDesign is known for that the fact that it can create professional layouts for newspapers and magazines, it’s also useful for just creating a brochure as well as online layouts. […]

Sorry, the comment form is closed at this time.