Photoshop vs InDesign for Designing Websites

I’ve fairly recently decided to choose InDesign in favour of Photoshop for designing websites, or at least I have on the occasions where it’s myself coding the site rather than me passing the visuals over to an agency for them to build. Before this I’d been happily using Photoshop since the start of my career (even before that in fact, around 2005–2006 as a college boy).

I did always wonder what some designers had against using Photoshop for designing web layouts, but I instantly realised why when I started getting to grips with InDesign and thought “wow this makes *so* much more sense”.

Here are my thoughts on some of the pros and cons of each application when designing for the web:

Advantages of InDesign

  1. Setting up columns / grids is a breeze
  2. Master templates make it easy to reuse the same elements on different pages (e.g. header, footer, sidebar)
  3. More control over type with Paragraph Styles (these are available in Photoshop too, just more limited and I find them unreliable)
  4. Typesetting is much easier (e.g. columns of text, typing inside a custom shape / text frame, linking text frames)
  5. Better for working with vectors (though still much less powerful than Illustrator)
  6. Multiple pages (e.g. create a new page in InDesign for each web visual)
  7. More incentive to work up multiple revisions / variations of one design (by duplicating pages, rather than having to save a new document)
  8. Frame tool makes it much easier to crop images compared to Photoshop masks
  9. Using the ‘Place’ feature is handy for adding multiple instances of the same object (e.g. icons)

Advantages of Photoshop

  1. Image optimisation with ‘Save for Web’
  2. Exporting images just seems to work better… exporting PNGs from InDesign seems to give me a strange problem with jagged text
  3. Easier to group elements (grouping is available in InDesign too, just I find it much more fiddly)
  4. Easier to create pixel-perfect designs — I find InDesign often gives me strange page widths of, say, ‘960.25px’ for example (despite me working out margins etc)

As you can see, there are still a few things I miss about using Photoshop for web layouts. It can be a real pain chopping up an InDesign document in order to build it, but with today’s CSS browser support this is becoming less of an issue as I find myself needing to export less images.

Hopefully one day Adobe will give us a program that is more specialised for designing for web, at the minute it seems as though none of them are. I’ve known some designers to swear by Fireworks and I’ve known many to use Illustrator, but of course Fireworks has been discontinued.

What is your tool of choice? I imagine a lot of designers out there will disagree with this article, there aren’t many others out there who I know of that use InDesign for this kind of work. I’d be interested to hear other opinions and / or recommendations.

Check out my graphic design work and hire me!

Leave a Comment

Your email address will not be published. Required fields are marked *