Ephraim: Thanks for the detailed tips. Personally I use InDesign in a similar fashion for wire-framing and have met a lot of information architects that prefer it over Microsoft Visio and Omnigraffle as well.

For the visual design, I’ve always preferred Illustrator over Photoshop and have met a few folks that feel Fireworks is worth checking out too. With the latest versions of Creative Suite, there seems to be a great deal of synergy among these applications to work with one another.

While I have been using Photoshop exclusively to build graphic interfaces, I often find that it’s not quite as flexible when several design directions need to be cranked out in a short amount of time. Keeping track of numerous layers and trying to set text becomes a time-consuming task.

So, let me offer print designers a faster alternative to simply Photoshop that’s more familiar and helps to develop the new skills of designing for the Web. It’s called Adobe InDesign. Yes, a print page layout application.

Here is a good process to begin getting comfortable with designing for the Web using InDesign and Photoshop together.

1) Start with InDesign and set your document size to 1024 points (yes, points) by 1000 points. Why 1000 points? Because you want to leave enough room to show what pages may look like past the 768 height (actually a bit less) mark when a user scrolls. You could make it a lot larger but for a start 1000 points in height seems to work for me. It can change if needed.

Now, some may say, “wait a second, points isn’t the same as pixels”. No, but give it a try and draw some one point rules and then save the document as a PDF. When you go to open the PDF in Photoshop, importing the entire trim size at 72dpi, you’ll see that the points actually equate to the same pixels. The one point rules verify it. DON’T TRY TO GET FANCY and use anything below 1 point increments for rules and boxes in InDesign and you’ll be just fine.

2) Drag out grid lines to 960 points from the left-most edge and one down to about 748 or so to be safe on the height. You are just trying to stay within a safety zone for the height and I find that this height works well when setting the safety zone. Some may have other height settings. These grid lines mark the safe design area, like the “live area” in printed materials.

3) You can then use InDesign’s master pages to begin building the interface/ I find that I have my background established here, general regions for navigation, logos, footers—essentially anything that continues from page to page. You design leaving your main content areas defined—regions where content that differs from page to page will go. Use a worst-case scenario designing the most complex of pages. This helps you set up grid lines that can be used or altered on every page.

4) You can then override master page elements or copy master pages to new master pages and then change things as needed. Master pages based on others help keep things consistent and the grid intact.

5) Setting text is a bit more tricky. First, turn off all hyphenation. It doesn’t exist on the Web. Then, using standard Web fonts (you can look these up in Google) go ahead and set up a few sizes. For example, I use 11 points over 14 points and 12 points over 16 points a lot when I set text in Arial. You can experiment and ask a few of your Web designer guru friends to see what’s best. Always set more text than appropriate. It can always be cut down but rarely does everything fit perfectly unless you have 100% control over the writing when actual content is generated.

6) You can use the gradients and effects in InDesign and InDesign object styles to control special effects, box rules, etc. It’s the same for colors. Also, keep all elements on layers and you’ll find things easier to select when needed. I put the background on one layer, text on one, photos/images on one, and so on.

7) Once you have completed the design, export your design as a PDF and then open it in Photoshop at 1024 pixels by whatever the height is. The width matters most. Make sure the color mode is RGB and the pixels/inch is 72. I also play around with alias vs. anti-alias if I want to be exact when selecting pixels and building the actual site as I know all of the major text areas will be HTML anyway. When showing clients you can just keep it aliased as it looks much nicer. Just make sure your clients know that it may look a bit different when actually built.

If your design needs no Photoshop treatment outside of InDesign, you can many times just send the PDF directly to the client. I show a home page and two or three other sites pages (sub-level pages) as that is many times just enough to give the client what they need to gain their approval on the interface. If the site is small and the content is ready-to-go, I will many times mock up the entire site for safe measure.

Conclusion:

Using InDesign speeds up the design process, allows for better setting of text and moving it around as needed, quick variations on design/sketches, and consolidates everything for easy export as PDFs or importing into Photoshop. It has worked very well and keeps the print skills fresh while designing for the Web. Consider using Photoshop and InDesign hand-in-hand when making the transition.

By picking up a few books on XHTML and CSS you’ll also find it a bit easier to begin how to format the actual code. And, lastly, always ask people who are more knowledgeable than you. I often email the authors of books for further insight. I have developed a strong electronic relationship with a few of them.

Thanks for all the great tips!

A few observations from my own experience:

• Design first. Websites that forgo or forget to incorporate design principles in their UI have a harder time maintaining users’ attention—regardless of code quality.

• Why 960px is all-powerful. 960px is an excellent choice for width because it divides evenly when using a 3, 4, 5, or 6-column grid. Handy!

• I say avoid Pantones altogether. If you’re having trouble creating a scheme, try using a guide like this one, or one of the many others found online.

• You can never test too much! Test on a PC. Test on your parents’ computer. Test at the library. Test as many different machines and configurations as you can and make note of discrepancies. This will allow you to create a more broadly usable site, and will help you avoid missteps on future projects.

• It takes time. The print-to-web transition is not an easy one. It will take time, effort, and many, many mistakes from which you can learn. Ask questions, be patient, and keep on keeping on!