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. 

wordpressSEOweb designDrupalWeb DevelopmentADAHTML5productionresponsive designcompliancesecurityCSSPhotoshopdesignTestingFlashtoolsproduction tipsgoogletypographyGoogle Analyticsmarketingbeta testingautomationharness-bbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Long TailabletWebOSAndroidtabletsmobile devicesclientcommunicationimage size cloudtechnologyPDFresponsive statebreakpointimage compressionInteraction Metricsinstant video playback solutionvideo sizeInternet Explorer 83rd partyAdobe Edge ReflowawardsoftwarehostBacklinksAdvertisingapp lifespanmobile app challengeweb colorsgammacodecvideo playbackJSONRGBWindows XP LinkedInParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Cmicrosoft’s project natalsony playstationnintendo wiiaugmented reality3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingFacebookdudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityupdatevulnerabilityCKEditorCVE-2014-0224integrationprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommerceVideos and animations

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. Download script archive version 2.2 2. Have your InDesign document open and Photoshop running 3. Ma...