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 designWeb DevelopmentHTML5productionresponsive designDrupalADAcompliancesecurityPhotoshopCSSTestingdesigngooglebeta testingquality controltoolsharness-bautomationtypographyGoogle AnalyticsmarketingFlashproduction tipsfontsweb imagesite speedweb preflightthemeswebsite buildingmodulestechnologiesJavaScriptfirefoxbrowserintegrationsMicrosoftAdobe MuseSSLIE8Applemobile websiteapp developmentplug-inAPIQAserver securityweb standardsE-commerceiOSInDesignWordpress pluginsOpenSSLAdvertisingJSONmobile devicestabletsAdobe AirRIAsBacklinksInteraction MetricsLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildhorizontal layoutAdobeICANNcustom domain suffixesdevelopmentwireframeaugmented realityweb development awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templategTLDsweb awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Case study: PDF is not always the best way to get approval on creative

Jul 14th, 2014 by Max Tokman

Some time ago, we completed a beta version of responsive site and turned it over to agency’s client for review.  The client came back with a number of issues, all centered around font and image sizes that were apparently not to spec for one of responsive states.  Naturally, we were concerned as this indicated

Faster sites are way better than slower sites

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