InDesign For Interactive Design Wireframing
Remember when people put ink on paper and we all had to learn terms like “ink gain”? Well, apparently there’s this new thing called “interactive” where your paper talks back at you or something and now we have to learn a whole new set of terminology, such as wireframe, timeline, and wahungaflippy (I don’t know… all these interactive terms sound the same to me).
The good news is that our trusted pal InDesign is still smack in the middle of the workflow. For example, here’s one interactive designer in the Netherlands who explains why he believes InDesign is a better wireframing tool than Illustrator. He’s not alone, here’s one more explanation of how InDesign is integral to the needs of interactive designers.
In fact, some folks have gone so far as to offer libraries of their InDesign elements, such as this one that contains 73 cool pieces of art.
Of course, Adobe has already demoed technology that allows people to export InDesign pages as SWF or in a format that Flash can open. Perhaps when we get our hands on that, we’ll be able to find even more ways to put InDesign in the interactive driver’s seat.
I’ve never tried this myself, but I have a friend does a lot of his website designs in InDesign. I guess it makes sense, given that both InDesign and html/css work by essentially sticking things in little boxes and moving them around.
Hey, thanks for the mention. InDesign is indeed a powerful tool, creating printed media is not the only thing it is capable. I was quite suprised to hear that people design their site in InDesign but I also think that it takes a certain type of designer to use InDesign.
I was going to post something else but decided not to. Instead, perhaps it’d be better for me to just show my ignorance and ask what the heck wireframing is (sounds like ‘making mock-ups’ to me) and what it is these interactive designers do.
I try to stay up-to-date on things, but with every Joe Blow with Photoshop calling themselves graphic designers I can’t for the life of me put worth to these kinds of ‘titles’ anymore.
Roland, it’s just used to put together a basic layout idea, before anything final is put into place. It’s far easier to draw up the elements of a web page, than to program the elements into the web page. It’s just quicker.
The wireframe, or static page, is used as a visual reference when putting the actual website together.
It alows for variations and to maintain a design consistency for websites.
Eugene, that sounds like a mock-up to me, and exactly what Fireworks and Photoshop also let you do (assuming you’re not flattening things) … When I get home I’ll hit google to see if I can’t get any more info (with pictures or video) on all of this ’cause it’s clearly still going way over my head.
By the way, I found out I’m an interactive designer too; my customers can interact with me.
Hey Roland, doing a mock-up, in any package, is still wire-framing. Some people are not using Fireworks and Photoshop to wireframe (mock-up) their sites because they feel that InDesign is more flexible for them.
You could wireframe a site in MS Word (if you dare).
For all intent and purposes, I think the point was to highlight that you can wireframe in InDesign and some kind folks have whipped up a library of objects to share with other people that want to use InDesign to wireframe their sites too.
Thanks for sharing. This is very cool and intriging to me. I’m a die hard no-web-allowed type of print designer. But this might just make me try out a web page for the first time. (With a hired programmer, of course!)
Lauren, not to worry: you can design your whole website in InDesign, as it ouputs flawless XHTML. There’s just the little matter of styling it with CSS — once your past that hurdle, web design with ID is plain sailing, and in many ways preferable to Dreamweaver. I now, ahem, “firmly encourage” at least one of my students to NOT touch DW at all, but do his work all in ID. He hates me slightly for it, but is also coming along to my way of thinking: separate (A) design from (B) coding. Doing web *design* in DW sucks the hapless designer into messing with code right away, but HTML/CSS has got *nothing* to do with design proper.
I’m designing more large sites now, and found your post because I am considering using inDesign to design the next one. I want to be able to put repeated elements onto a master page. Then, when we make changes to any of those repeated elements, I would only have to change them once on the master, rather than going back to each photoshop page, as I do now, to propagate the change.
I’m open to other suggestions!
Thanks
Maybe the “Layout Zone” script thing will work for that. There’s a post about it on this blog somewhere.
You could manually do what the script does: save the selection as an INDD file and place that file in the same location as the selection.
To update the ’selection’, edit the placed INDD file.
ooo! nice! Thanks for the tip. Will check it out.
I’ve started a practice page. ID is so automated, I’m a little thrown off, but maybe I’m overdoing it.
I changed to Color Settings to North America Web/Internet, and changed Proof Setup to sRGB IEC61966-2.1.
I’ll need to export JPGs for online review by the team, and I hope to turn the whole thing into my style guide/spec doc by adding a “spec layer” once layouts are approved.
HELP
question is: if I design my website in Indesign
1. what are basic formats/info I need to set my page up in indesign to prepare for exporting for webpage (size, color settings, bleeding,etc)?
2. in regards to pictuers on the page, do i insert jpeg pics into indesign page and then export or can i export into say photoshop and then insert the photos
3. do i finish all text in indesign or can i export webpage design from indesign into ?photoshop or adobe 8 and then revise teh text? using?
?
4. do i export webpage design as xhtml?
5. what size should my pictures be in jpegs before i insert them?
6. then what do i do after i finished the whole design and text of the webpages?
I am really a totally new user, can design everything on indesign, but don’t know what to do then.
any help would greatly be appreciated
@Heather: I need to be clear here: I was talking about making flowcharts and that kind of thing (what goes to what), but I do not recommend people actually making web pages or web sites in InDesign. You can export XHTML, but you’re not going to get page design, and so on. Better to use a tool such as Dreamweaver to actually lay out the site.