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.

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.

The script for the hex values can be found here
http://indesignsecrets.com/create-hexadecimal-color-swatches-in-indesign-for-interactive-documents.php

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

http://www.prudentialkelowna.com

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.

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

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 960.gs 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 960.gs 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.

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.

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.

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?

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.