InDesign to Web... is it possible?

firefighter26 · 11-20-2009, 10:46 PM

Believe it or not, but up until a week ago our company didn't have a website despite being around since the 60's!

Over the last few months I had been playing around with a really basic site, doing all the design work in InDesign as I just needed mock-ups to convince the bosses that we needed something, anything.

So after a few revisions and whatnot, we finally had something they they liked. A local company that we do a fair bit of printing for also offers web services, so it was decided to contract to them to build our website.

I packaged all the indesign files up, as per my normal routine, and shipped it over to them on DVD. Within 24 hours they had our entire site done. I asked their technical guy why it didn't take very long (their initial estimate was 3-4 days) and he basically said that I did 90% of the work by supplying them with everything they needed.

This intrigued me as to how they were able to take my indesign files and produce a entire website (about 10 pages) from it, in a short period of time.

I've got to do a re-design on my volunteer fire department's site, something I've been putting off because I wasn't sure how to approach it. BUT, if I can do all the mock ups in InDesign, and figure out how to create a website from it, i'd be laughing.

Any thoughts or suggestions?

eugenetyson · 11-20-2009, 11:02 PM

You can go from InDesign to Web, but it can be a lengthy process to set up exactly right.

I think they rather saved you InD document as jpgs and then sliced the jpgs etc.

Wouldn't have taken too long.

A lot of people use indesign for wireframing. Just like they would with illy and photoshop.

http://indesignsecrets.com/indesign-...ireframing.php

In the comments there's a link to a 90 minute demo.

firefighter26 · 11-20-2009, 11:23 PM

It would seem that most of the comments lean towards Illustrator over InDesign for the mock ups because elements can be used directly from Illustrator...

I also found some references to fireworks, which I also have as part of CS4's master collection. Perhaps I will give that a try.

Fire Department sites are pretty basic in the entire scope of the internet. Call stats, pictures of our trucks, pictures of stuff on fire... that's pretty much it actually!

I'd really just like to take what I put together a few months ago using my old-school web skills (really, who uses multiple frames anymore?) and putting together something more modern. I'm sure there's got to be a way to use the various CS4 softwares to get the job done!

eugenetyson · 11-20-2009, 11:31 PM

You can of course use Illustrator and Photoshop, and more towards Fireworks for web stuff.

There are some good tutorials via this site and on www.layersmagazine.com regarding all the software.

Lynda.com is another resource but it's a subscription service. But it's excellent.

InDesign is not geared towards web work, it's more for page layout for printing.

But you can wireframe a site and then have a web developer slice it and code it.

**urstwile** · 11-21-2009, 01:28 AM

firefighter, can you post any images of what your InDesign comps looked like? Depending on the complexity of the site, if you have, for example, a lot of text, and some images, it's really not that hard, and it doesn't necessarily even involve slicing. A lot of that depends on the layout, of course, so I'm curious to see what your mockups looked like, if it's possible for you to post them.

firefighter26 · 11-21-2009, 02:01 AM

I don't have any mock ups done yet, all the design work is in my head still!

I was trying to get an idea of how it was all going to come together before I started. No use getting halfway down the path, just to realize its the wrong path!

**urstwile** · 11-21-2009, 05:35 AM

Oh, no, I meant the mockups you mentioned that you outsourced to the other place.

firefighter26 · 12-04-2009, 07:56 PM

Our finished website looks like this:

Bayside Press

and I must admit, that it looks so close to the original mock ups in InDesign that I am not going to bother converting them to JPGs to be posted (Its friday and I am being lazy!).

In fact, about the thing that is different is some text size and thickness of some black lines. That's about it.

I am gearing up to do the overhaul on the fire department site but I am not sure where to start. I have an idea of what I want it to look like, I am just not sure of the most efficient want of getting from point A to point B.

**urstwile** · 12-05-2009, 01:18 AM

Well, that's not a particularly hard layout to accomplish on the web, to the best of my knowledge, so I can see why the transition went so smoothly from InDesign to web.

It's been my perception that the reason so many web designers use Photoshop vs. InDesign is because a lot of them don't actually HAVE InDesign available to them, whereas most have Photoshop. Even the Adobe Creative Suites are built that way, with the Web version not including InDesign. I myself, haven't had any trouble, thus far, using InDesign as a start off point for web stuff. Just make sure to change your ruler units to points, which will approximate the notion of pixels.

cibgraphics · 12-05-2009, 03:30 PM

After looking at the site, it is a very simple layout. He probably just extracted the images and then just built the rest by hand. I really don't think the fast turn around had much to do with the fact that it was an InDesign document... but rather a very simplistic design.