Best web design tool: InDesign vs. Photoshop
When comparing Photoshop and InDesign as web design tools, we have to think back to their history. InDesign was originally created as a competing product for Quark and was meant to offer same multi-page layout and type controls. Over time, it expanded into providing web-friendly HTML and CSS export, leveraging Adobe’s expertise in other web-centric products. Photoshop from the very beginning was an image editing software, even as it added typography, vector objects and web-friendly color space and export. So, we have a layout software and an image editing software and thus the dilemma of comparing apples to oranges in deciding which one is the best tool for web design.
InDesign expedites creative phase by allowing to quickly create a full set of page mockups based on approved master layout. It is also tempting to generate HTML and CSS directly from InDesign, but the resulting code is neither optimized nor cross-browser reliable. Even various standalone applications attempting to generate HTML from .indd pretty much fall flat on their face. Any code cleanup on auto generated files requires lots of manual work by web developers, so in effect time saved in creative phase is shifted to development phase with overall zero net gain. Photoshop, on the other hand, requires more time in creative stage but is a breeze in web development stage when compared to fixing InDesign-generated code.
We ourselves are a tad biased toward Photoshop; as we cannot force our creative partners to use particular product, we decided to create our own online tools that streamlines web production regardless of design software used:
Photoshop - Web Preflight started out as our own production tool for validating Photoshop artwork against known browser compatibility issues and recently became available as a free online service
InDesign - feel free to use our Mac-based app that converts InDesign file into layered Photoshop document, with all content editable as smart objects from within Photoshop
As always, the best tool for the job is what you and your team are most comfortable using in your production workflow. Some agencies prefer quick layouts in InDesign that are presented to clients as PDFs and then transition to web development team as .indd files, at which point web developers do the conversion from InDesign to Photoshop. Others focus on creating pixel-perfect Photoshop master files that serve as basis for individual page layouts and are then transferred to coders as PSDs. Whichever method works for your team is the right approach to use - although we strongly encourage not using InDesign for anything beyond early stage prototypes or simple sites. For us, Photoshop rules.