In recent months, I have started using Adobe InDesign to create page layouts for websites. No, not to create the actual layout in a Dreamweaver or in a hand-coding sense, but as a tool for sharing design concepts and creative ideas with clients. InDesign offers effective design control (in an Illustrator-sense) to make it a nifty tool for laying out visuals to show clients. Through InDesign, I can create layout concepts which can then be exported as a PDF to share with clients.
I have found this particularly helpful when designing large, database-driven websites. By using the character styles in InDesign, it’s possible to set up styles that are easily transferable to CSS during the production stages. And like CSS, when the client reviews the visuals and, for example, decides that she wants the primary navigation to a slightly larger and for the font to be red — click, click, type, type, type and whammo! Visuals updated.
Yet InDesign still has its benefits when used to layout small websites. Its image control saves time by eliminating the need to crop or resize images for mock-ups. InDesign’s colour palette can be switched to RGB and there is even a swatch book for web safe colours. Of course, you can always use Kuler to produce your RGB colour palette and then import it into InDesign.
If then, as a designer, you don’t actually hand-code the database-driven websites yourself (or even if you don’t build static sites yourself), it is very easy to annotate a PDF document for your web developer, giving specific measurements or directions to aid in the production process. Annotations can either be handled in Acrobat, using comments, or can be handled in InDesign.
33 responses
1 Christian // Jun 26, 2009 at 12:36 pm
Hello Liam,
i heard of this before – but you’re not mentioning HOW you actually do it (the process).
Maybe you find the time to update this article with some more details?
That’d be great.
2 Liam Dempsey // Jun 30, 2009 at 1:00 pm
Hi Christian,
Ok, that’s a fair request. I will look to put something together, but given what’s already on my work ‘to-do’ list, it may have to wait until the end of August or so. I hope that’s okay.
3 Jake Nelson-Dooley // Aug 28, 2009 at 1:18 pm
Liam,
Good article! Comparing InDesign to CSS was very helpful. I can certainly see how that would save you time for large projects.
Cheers,
Jake Nelson-Dooley
4 Justin Huehn // Sep 1, 2009 at 11:55 pm
Hi Liam, I also use InDesign to do front end work for sites but i’m trying to work out a way to work in true RGB on screen ie: i keep getting a colour shift once I export an RGB PDF of the pages. Do you know how to keep the screen setting as RGB in InDesign like Illustrator can?
5 Liam Dempsey // Sep 17, 2009 at 8:37 am
Hi Justin,
I’ve not found PDF to be a reliable format for color interpretation, with respect to websites. Although I do enter the RGB codes in InDesign when drafting a layout, I create a separate CSS notes fileto keep a record of the specific colors to be used online. I can then use that file as my own reference or send it along to the web developer.
My experience is that InDesign isn’t really meant to handle web design (at least in the CS2 version which I have).
You can always get your colors right in Illustrator or on Kuler, then export the color palette to InDesign.
I hope that helps.
6 Sebastian // Nov 3, 2009 at 11:31 am
Hi Liam,
Is it possible to design the whole website with Indesign and exporting it to Dreamweaver to put in the links and functions?
7 Liam Dempsey // Nov 6, 2009 at 3:40 pm
Hi Sebastian,
I’ve been playing with InDesign CS4 recently and it seems to support that sort of export functionality. I haven’t looked at it closely yet and therefore couldn’t say that it was a viable option. If so, it certainly would be helpful, wouldn’t it?
Maybe if I have any time in the near future, I’ll take a look at this more closely and write another post about it.
Thanks for visiting and for the question.
8 david // Nov 11, 2009 at 9:15 pm
Hi Liam
I am new to web design.
I design using InDesign. Layouts with images, type.
I wan tio upload these to my website to make a portfolio.
What file format do I save the InDesign docs as?
Best
David
9 Liam Dempsey // Nov 17, 2009 at 2:53 am
Hi David,
It’s not a matter of saving the InDesign file as such, but rather a matter of exporting it. If you have InDesign CS4, you should be able to do some sort of File > Export for Dreamweaver. (My trial of CS4 ran out, so I am back to CS2. CS2 doesn’t have that same level of functionality.)
Hope that helps.
10 Jerome Wilson // Dec 8, 2009 at 10:15 am
Using InDesign to design a website? Using a cement mixer and a bunsen burner to bake a cake? NO NO NO NO NO NO NO NO NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO. No.
11 Jerome Wilson // Dec 10, 2009 at 12:59 pm
Sorry, let me try to explain a bit. There’s some cross-over but websites are fundamentally different to printed copy. When you’re converting a design into a website you want fixed, absolute, pixel accuracy. Nice scalable resolution indifferent vectors are not helpful. You want to be able to happily load the mockup into Photoshop or Fireworks to do the slicing and be guaranteed that what you see is what was intended, with nice layers for rollovers etc.
I can understand how people who have started off as print designers might think it’s a good idea to re-use their InDesign skills for the web but, apart from anything else, it gives you too much scope to do things that just don’t make sense on the web.
So, if you don’t want the person who’s going to be responsible for converting your mockup into an actual website to curse your name, don’t use InDesign. If you’re also doing the web development then you’re either a masochist or you’re going to use some horrific built-in ‘Convert to XHTML’ doodad, in which case there’s no hope for you :)
12 David // Dec 10, 2009 at 4:55 pm
A misunderstanding , I think.
I don’t want to create new designs in InDesign foe Web, I want to post already existing (old) (InDesign) layouts on my site portfolio.
How do I do that? What file format do I save them as?
Thanks a million.
13 Jerome Wilson // Dec 10, 2009 at 5:08 pm
Sorry David, I wasn’t ranting at you. I was rudely using Liam’s blog as a soap box because we’ve had a couple of design agencies supply InDesign generated website designs recently and it’s given me the pip :)
If it’s just for screenshot type pictures it’s probably best to export them as JPEGs – http://livedocs.adobe.com/en_US/InDesign/5.0/help.html?content=WS840FD996-A786-4311-93B2-846AB3659ED2.html
14 Liam Dempsey // Dec 19, 2009 at 11:13 am
@ David + @ Jerome,
Gentlemen, please make yourselves at home. I apologise for ignoring your conversation. I will jump into it over the break … just trying to wrap up a few work-related projects before the holidays.
Thanks!
15 CAPE SURFER // Jan 9, 2010 at 4:46 pm
Hi guys
I hear Jeromes comments loud and clear, but, with 20 years as a print and publication designer, INDESIGN is an amazing layout tool to develop the “look and feel” of the website, and I simply dont have time to become a WEB guru. Converting the design afterwards into PSD is a mission but it frees you up to be creative and make use of the layout and grid tools in INDESIGN.
Is there anyone out there who has created an INDESIGN page with grids and guides that I could use to be more accurate?
Any assistance would be great, I have two days to design a huge website in INDESIGN.
Regards
CAPE SURFER
16 Michael Bhalla // Jan 22, 2010 at 3:53 pm
I code websites professionally, and am familiar with the CS4 suite (Photoshop, InDesign, etc.) I usually work with designers who submit InDesign, Illustrator, or Photoshop files which I convert to HTML and CSS.
Designs built with InDesign are, as Jerome pointed out, quite difficult to build a website from. InDesign is vector-based, and tends to produce elements (such as lines, boxes, etc.) that do not align to pixel boundaries. CMYK or spot colors are used, making for imprecise conversion to the RGB color space required for the web. InDesign files are often no layered, which requires tedious work to produce things like background images and button effects.
My experience with Illustrator files is mixed, and in some cases Illustrator files are just difficult as InDesign files to work with. The ease (and accuracy) of building web pages from Illustrator seems to depend upon how the Illustrator file was created.
I have found properly layered Photoshop files to be the easiest and most accurate medium for converting a design into a web site. In fact, when I receive an InDesign or Illustrator file, I wind up building a layered Photoshop file from it. Unfortunately the Photoshop file winds up being extensively edited on each revision of the design.
I’m curious to hear about other designers and web developers on this subject. I’m interested in hearing what the “best” work flow is for designing and coding a web site.
17 Mike // Jan 22, 2010 at 7:49 pm
The strength of using Indesign would clearly be the ability to brainstorm and try lots of ideas quickly. Of course your pixels are in the right place in PSD files, but even in CS4 as an expert user it is clunky to quickly change graphic elements. Re-building some graphics in PS is an extra step, but if it can be done only once that would be an overall saver of time and the creative process might be more creative. I’ve never tried this workflow though, but am considering it for a new project.
18 Jerome // Jan 22, 2010 at 8:21 pm
Point taken about the prototyping speed. As a developer, just so long as the final result is a PSD and not an INDD I’m a happy bunny. I hope Cape Surfer got his/her site done in time.
19 JBOZ // Feb 9, 2010 at 11:29 pm
Interesting discussion.
My team and I go around in circles about this. I think, what it actually comes down to, is what the designer is most comfortable with, from a technical sense. If you can clearly define your ideas, a good dev should be able to interpret without too much fuss. I just assume there will be some slipping of design as an idea becomes live content. (That being said, I don’t personally have to have my designs finalized to a T before production of the page itself starts…)
My coworker tends to work in inDesign, but then follows up with photoshop. Which is fine, but if he wants to make any big changes, its to both the INDD and the PSD (which I think cumbersome). If inDesign (or for that matter illustrator) had a really clean xhtml export scenario, this might be a moot point. But until then – I’ll stick to my personally favorite method: All design is done in Photoshop (well organized layers being a KEY factor), images are sliced up and exported, and all functionality and css formatting is done in Dreamweaver.
I infrequently use Photoshop to export BASIC div or table structures (but I appreciate that its there, as it is normally high quality). In my mind clean development should compliment good design, and I know of no design program that outputs well developed, dynamic code (Photoshop comes the closest…) Of course, I’m always looking for ways to improve the workflow, and would happily use inD or Ill if they really did the job well.
my $.02
20 Christian // Feb 10, 2010 at 11:49 am
Hello Liam and all the others,
for the discussion i’d like to point out, that most webdesigners come first in contact with Photoshop, therefore ID seems to be „more complicated“ for the design process. But as is use both programs alike i see much more benefits when working with ID: for example text can be much more easily changed or formatted.
Maybe i’t could be interesting to see a tutorial on the design process with ID to get a better understanding of it?
regs
C
21 Jerome Wilson // Feb 10, 2010 at 12:04 pm
For me I’d say the benefits of pixel accuracy and layers far outweigh the ability to easily change and format text, particularly as the majority of text in any design is just lipsum. But then, I’m all about going from design to implementation.
22 Matt Pearce // Feb 18, 2010 at 2:47 pm
I found this article and responses fascinating. I work in a design studio that has a mixture of Print Designers and Screen Designers…the Print Designers always note the problems they have when they have to pick up and amend in a file created in Photoshop and are always saying that websites should be laid up in InDesign instead. I have never used inDesign my self but this article and all your responses have enabled me to make a case for the pro’s and con’s of using InDesign to create website visuals for developers to work from.
23 Igbagbo Akintade // Feb 20, 2010 at 10:13 am
HI Liam,
just as Christian said on Jun 26, 2009 at 12:36 pm, but you’re not mentioning HOW you actually do it (the process).
Maybe you find the time to update this article with some more details?
pls am really looking forward to that, more so, adobe has a a website/flash video that explains the process (http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0202) but since i have a dialup internet service, i have not been able to successfully watch nor download this large file, is there a way you can do something like that into a pdf or a downloadable video? thanks
24 Eric // Feb 28, 2010 at 1:15 am
Try
1. exporting from Indesign as .eps file
2.opening in Fireworks, and exporting from there using html and images option.
3. Then open in Dreamweaver
25 AjEG // Mar 26, 2010 at 7:24 pm
I currently use InDesign to layout web pages. I also do the coding (Espresso and CSSedit). There are a number of reasons I like InDesign for web page layout…
Why InDesign?
+ allows for images to be cropped, masked and saved at page resolution
+ excellent typographic control
+ ability to export in XML, HTML or SWF
+ character, paragraph, table and object styles
+ guides, baselines, snaps
+ familiarity with UI – consistent with Photoshop, Illustrator
+ layer-manage placed PDF and PSD files
+ point-to-pixel accuracy
Now, even though InD has the capability to export XML, HTML or SWF, I don’t use any of them. My workflow may seem a bit odd and even cumbersome, but I am both a print (primarily) and web designer. One major goal is to reuse print content (layout, not just media) for the web – cross-media exploitation as it were.
My workflow is…
InDesign: page layout and reuse of print content
Fireworks: layout/image optimization
Espresso/CSSedit: final page design and coding
It works well, enough, but I’m always interested in better methods.
26 wagster // Apr 24, 2010 at 2:47 pm
I totally understand the nay-sayers here – InDesign doesn’t think in pixels like PS does, which makes it unsuitable for accurate web layout. But the biggest problem designing for the web in PS is that PS doesn’t think in CSS. I’m designing a very technical web app with a huge amount of text – it’s a real excercise in information layout and UI design. To see how increasing the font size by 1px would affect the general layout would be easy in CSS – font-size:11px. In InDesign, which also thinks in cascading styles, I could just change the Basic Paragraph Style. It will then reflow all the text, a bit like a browser would. In Photoshop I have to change 40 or 50 layers, which will take the best part of an hour. No thanks. I think the next time I have a big project I will go InDesign > PS > Build and see what happens.
27 Mark Ole Barner // May 26, 2010 at 7:21 am
This blog post is yet another example of how a painter shouldn’t do a carpenters job!! If you are a graphic designer and are used to making print, don’t do designs for the web – let the webdesigner earn his cents on doing that for you!! You should use a screwdriver to cut down a tree – use an axe or a saw!!! Use photoshop or fireworks to design websites. Use inDesign for making print!
please guys, learn to use your tools the right way or leave it to the professionals!
28 AjEG // May 27, 2010 at 10:16 am
Mike, with all due respect, it doesn’t seem like you’ve read through the comments to this article. The article and comments are about how people might leverage this tool (InDesign) to allow for cross-media publishing. There are many advantages that InDesign offers for people who are responsible for both print and web design, which I’ve listed in a previous comment. If that is not something you agree with, that’s okay – there are many ways to skin a site. But I don’t agree that using InDesign for web work is akin to using a screwdriver to cut down a tree. I would say it is more like using a bulldozer to cut down a tree. It could be overkill, more clumsy and not provide the finesse of a chainsaw, but it is fast and effective. My thoughts, as a designer who regularly cross-publishes content.
29 Sean from chicago // Jun 16, 2010 at 12:24 am
Again this is running away from the point.
Indesign is great for print. If one knew how to do it in Indesign and mock up a few pages (or wireframe for some) to export or save in a format to use for making the website wouldn’t that be a good thing or a time saver?
What I would like to know what the best steps to follow to make a simple website to show pictures and PDFs. If you made a master page. And then cloned off a bunch of copies to place the pics and layout the text. Then what would you save those collections of pages to finish building the links and then publish to an IIS web server.
Someone care to help?
Flash is not the answer. I saw the new flash program for CS5 and really helps create swf or flash files by people that do not know how to code. Still as long as Apple fights the flash war it’s doomed to failure. Flash is not what it hopes to be.
I feel web coders and not designers needs to stressed. Coders are programmers and not designers. Style and design should be done by pros and coders should be specialists. So there needs to be a way for both to work well together.
I read here that indesign to Photoshop to the coders application of choice like dreamweaver or a Microsoft one is the best fit. But I am not sure someone can show that workflow here.
30 Sarah // Jul 22, 2010 at 5:55 am
Great messages but could you please put up instructions onto how to create a website layout in indesign. Its been over a year since this was originally posted!! Look forward to your further comments.
31 wagster // Jul 22, 2010 at 6:59 am
That’s really easy. Design the layout in InDesign, then code it.
You can actually export from InDesign to HTML via GoLive – but I wouldn’t recommend it. If you’re going to have a program do your coding for you, you’re much better off with Dreamweaver and even that produces pretty awful results.
If you can’t code, hire someone who can.
32 AjEG // Jul 22, 2010 at 10:28 am
I think Sarah was looking for more of a case study example of how someone might use InDesign for webpage layout.
@Sarah: below are some references you might find helpful.
Peter Pixel: InDesign Wireframing
http://www.peterpixel.nl/writings/wireframing-using-indesign/
EightShapes: InDesign Wireframing
http://unify.eightshapes.com/
EightShapes: InDesign vs Fireworks
http://www.nathancurtis.com/2008/04/21/indesign-cs3-vs-fireworks-cs3-round-1/
General Wireframing Resources
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
33 S-Cadet // Jul 24, 2010 at 11:27 am
I’m a graphic designer with a shameful lack of knowledge about web design, a fashion design asked me to make a website for him and I immediately obliged, so now I have the fun of cramming lots and lots of web design speil inot my head, I was wondering about a few things regarding using indesign as a platform for website creation:
1) When you export a design to dreamweaver how can you export outlined text and shapes?
2)Do you have to recreate the style of the page with CSS anyway? If so is there any point in leading or kerning type and carefully positioning boxes on the page in indesign?
3) how do elements like media players/drop boxes run in dreamweaver?
4)can i separately import flash animations to the same page i’ve imported a previous indesign layout to?
5) If i want to input made typography from illustrator or photoshop would i have to export it as a gif, jpeg with a white backround or is there any way i could place it without a bounding box
6)How important are layers in dreamweaver ?
7)Finally are there any tutorial sites that teach you exactly how to take a design from indesign and apply all the necessary links and active boxes etc to for a simple but stylish working site?
I’d be grateful for any input anyone has.
Leave a Comment