Best web design tool: InDesign vs. Photoshop

Jul 28th, 2014 by Max Tokman

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. 

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Aug 1st, 2014 by Max Tokman

One of the major factors in site load times is a proper file compression, both for images and code. File compression is not just a part of user experience, improving site load times before your visitor clicks away; it is also a factor in search engine algorithms, with faster sites ranking higher in search results...

Jul 25th, 2014 by Max Tokman

If you're still using InDesign instead of Photoshop to create your web layouts, you can use our script to convert InDesign to layered PSD (currently for Mac only). Please follow these simple steps: 1. Optional, but strongly recommended - watch our instructional video 2. Download script archive ver...