*** From the Archives ***
This article is from August 15, 2008, and is no longer current.
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.
Just because designers are familiar with InDesign does not make them web designers in the slightest…
There are much better tools for wireframing as well, omnigraffle for example.
I’m on the same page as Heather. I know InDesign pretty well (graphic designer), however my company needs me to update a few items on our existing website. The original documents were created in InDesign, now they (the bosses) would like to see those designs on company webpages. I am no web designer by trade (yet, still working on it).
What would be the best way to go about creating these pages? My roll is to create the design and send off to India to have the peeps there make it go live.
Please HELP! Thanks.
Cool! I have never used it like that but it makes sense, since the uses are similar!
Check out this free video by Mostafa Mourad on Vimeo on how to create a wireframe in InDesign. It’s like an hour-long InDesign training!
I watched the Mostafa video, but it doesn’t cover how to specify the placement of assets. e.g.., The headline graphic is 22 pixels from the top. There are 8 pixels of padding between text elements.
Does that make sense? I have not found ONE tutorial on how to do this, leading me to believe that I must use Photoshop to determine pixels placement of items, then InDesign to basically paste the items on the page.
The key is that while InDesign does not offer a pixel measurement, it does offer points. 1 pt = 1 pixel in a 72 dpi interactive world.
Okay. Thank you, David.
Here is a collection of some interesting wireframing templates using InDesign. Cool!
Blatner says:
I need to be clear here: 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.
I’ve tried to follow this conversation but I’m at such an elementary level in understanding web design I can’t understand basic things like the above comments by David Blatner…if one designs a web page in Indesign why wouldn’t you get page design? If you don’t get page design, then what do you get? Isn’t page design the arrangement of typography, images, shapes, color etc in a rectanglular space?
Learning Dreamweaver is not a good use of my time because I will not use it often enough to retain it.
I need to do some homework…where do I start?
I’m a print designer.
@don: The point is that you simply cannot export the “look” of the page from InDesign into HTML. When you export xhtml, InDesign only grabs the content (text and graphics), and ignores the layout (the “design”).
You can, however, get very good PDF or SWF out of InDesign, maintaining the design.
Don, if you need to design and produce working web sites, you will not be able to use ID for the actual working files. The code used to represent the look of a page is completely different. Cars and bicycles are both powered modes of transportation but you can’t re-use the engine of one in the other… that’s how dissimilar print and web “under the hood” are.
You can design a “look and feel” design for a home page/interior pages in ID, if you want. Then hand that to a Dreamweaver (or similar) person to replicate as close as possible with web code and images, something a lot of print designers do. (Though more often designers use Photoshop or Fireworks or Illustrator, since the Dreamweaver person can lift working bits of art out of there to use on the site.)
If you just need to occasionally create web sites for friends or family, then look into using a blog (like wordpress.com) which can be put up in less than 5 minutes, are easy to edit, and for which there are thousands of free themes (designs) that you can use and customize. Switching from one theme to another is a simple click in the admin panel. Really amazing.
Or, try a less complicated web design program like RapidWeaver (Mac only): https://www.realmacsoftware.com/rapidweaver/ which has won a bunch of awards and is under $80 … less than $50 in most online outlets. For PCs I think an equivalent tool is Visual Site Design from Coffee Cup software, also under $50: https://www.coffeecup.com/designer/
Anne-Marie and David…thanks
Any comments on the Sitegrinder software for print designers like me?
As a print designer who has recently turned interactive designer, I read this discussion with great interest. I have tried creating wireframes in AI, PSD, and ID and find that I much prefer to use ID. There is much greater flexibility (and efficiency) with styling of typography and shapes, as well as the ability to use multiple master pages within one file.
Here’s my problem. My colleagues — in different locations — use Photoshop for wireframing. As far as I can tell, the reason for this is that it allows the developers to “lift” design elements directly from the PSD wireframe file and use them as they code/assemble the site. The interactive designers also sometimes share and edit each other’s files.
Is there any way to still use ID for my layouts that allows for collaboration? What happens if I export as XML? Does that save the graphic elements so they can then be picked up and used by the developers?
Thanks!
@Karin: No, XML won’t help. Probably the best option is either copy out of ID and paste into AI or Photoshop, or save as PDF from ID and then open that PDF in Illustrator (or Pshop).
Thanks, David, I’ll give those tips a try.
With multi pages, illustrator is great for wires now. Just use the symbols for managing master elements. Download all your IA elements from here https://www.designerstoolbox.com/designresources/elements/mac/safari/
Please don’t forget that this is talking about using InDesign to mockup a website, NOT to produce the finished article. We’ve just been presented with a full design that’s been knocked up in InDesign and not only is it unusable, it’s f-ing dreadful.
Just say NO!
You can always move your layout from InDesign to Fireworks by exporting as an .eps.
https://creativepro.com/moving-from-indesign-to-fireworks.php
So I’ve had some success with using inDesign in my workflow. I layout all pages using master pages for repeatable areas and using text and paragraph styles for all text. When done, I send my developer a PDF to understand content, structure, etc. and I use the “Export to Dreamweaver” command to send him cut imagery and a copy document. The one issue I’m having is he would like to have dimensions of all horizontal and vertical spaces. Has anyone ran into this and is there an easy way to accomplish this in inDesign? Any help is appreciated.
Does anyone know of a way to slice and optimize images inside of InDesign? Maybe a plugin? I use InDesign to take my print designs and lay them out for the web. While I have several workflows to do this, it always strikes me as a bit cumbersome. If I had the ability to slice and optimize areas of my InDesign layout, I would be able to streamline things considerably.
Has anyone found a way to do this from within InDesign? Thanks for any input.
I am in school and need to start a web site using InDesign and don’t know how to start. Can someone please help me along here with InDesign, or refer me to a Tutorial? Thank you so much in advance for your help.
@Jason, AjEG, and DonnaRose: Please note the earlier comments that InDesign is not suitable for making HTML-based web pages. The blog post above is about creating wireframes, but I do not mean to imply that anyone can make a page in InDesign and then export that in any kind of HTML that looks like the original InDesign page.
InDesign can export HTML, but only content — not page geometry (page “design”). Use Dreamweaver or one of many other html tools (iWeb, RapidWeaver, or something like that) to do the web site.
If you need an HTML page to look just like the InDesign page, you could export it to JPEG and then open that in Photoshop, then use the slice tool there to make buttons, links, etc., then export as html from there. Gah.
Definitely also read Mike Rankin’s post:
https://creativepro.com/notes-from-indesign-for-the-web-best-practices-eseminar.php
I am thinking of using InDesign for web pages layout. Because photoshop text tools are poor. Illustrator is ok, but InDesign is best of all adobes for text.
I would use that workflow: Make blocks/text in InDesign, then make graphics in Photoshop and export into InDesign document.
whats the standard size you should make your page in Indesign if trying to mock up a layout to show to a client? i know it varies because of people’s computer and different computer resolution but trying to figure out the most commonly used dimensions.
Thanks!
I’ve been looking into this at length and harassing a friend of mine who is a web developer. I’m a print dinosaur and digital pages confuse the hell out of me. From all the forum posts I’ve read, print designers are all asking the same questions and web designers are all giving the same answers, but the two just aren’t understanding each other. Here’s what I’ve learned:
All we print designers want to do is define the area we design within, and that brilliant question, ‘how big is one pixel?’.
A pixel has no measurable size until it is displayed through an output device (a monitor etc).
The output device will have an optimum ‘dot pitch’, or number of pixels it uses to make up the display, which is normally the maximum display setting in your system preferences. My 27″ iMac uses a dot pitch or resolution of 1920 x 1200. I can change this to a number of different sizes, but they are all distortions of the optimum dot pitch and may ‘zoom’, pixellate, or stretch the displayed information.
REALLY IMPORTANT: You need to ask your client what display resolution they want you to optimize the design for, and should have data (coremetrics) to support this. This is how you will define your design area.
Example; your client has told you to design for 1024×768 display. This means you could effectively make your InDesign document 1024×768 mm. Your print design brain can now call ‘one pixel’ 1 x 1 mm. But this is only for your reference. The measurement is irrelevant, and should be referred to only as ‘one pixel’.
You could also make a Photoshop document 1024 x 768 pixels. Set the resolution to 72 dpi (standard web graphic output) and you have a defined ‘design area’. The width of this area, divided by 1024 = the width of one pixel. The height of this area, divided by 768 = the height of one pixel. It will be a square.
So, now us print designers can define the size, and the shape of one pixel, allowing us to create a wireframe or ‘mock up’ that a programmer or developer can use to create a live page, accurate to our design.
The web page you’re designing might be exceed the vertical aspect of the display (like this page of this site). As long as you increase the height of your InDesign doc in increments of whatever you calculated one pixel ‘height’ to be, this will be possible for the developer/programmer to accurately recreate.
No, we can’t use fractions of pixels. So if you’re working in InDesign using the 1024 x 768mm document, don’t make an object 1.75 mm. Make it 1, or 2 mm. Some monitors support half pixels, but not many. And since you want the end user to have the best experience viewing your design, it’s better that you design to the limitations of the output device than have a developer second guessing you.
I’m still using ID3. ID5 allows you to set the units and increments in pixels which is really useful, but the same rules apply as to the ‘size’ of one pixel.
I hope this helps somebody. I’ve spent the last three hours figuring this out!
?Wireframing? is really a mockup done on the computer. Its really the next step from a hand drawn idea to something that?s digital and as close to what the final website will be.
I am an expert in both Indesign and Photoshop and when I ?wireframe? I use InDesign. I find it easier to tweek each element and I spend hours even days or weeks getting it absolutely perfect!
I find InDesign more flexible because of its great boxes and line/fill features and of coarse fabulous typography. As a brand designer, my work covers various media be it print/web/newspaper/online ads etc etc. If I have already produced a print ad or brochure, why not just change the elements from the print brochure or ad to suit the website, I mean both the print and ad were created using Indesign anyway.
I then get the web team to meticulously recreate my ?wireframe? in Dreamweaver for the web.
Hello, this kit : https://say-ui.com/portfolio/indesign/offers web object libraries to create wireframes with InDesign and other softwares. A free demo is available https://say-ui.com.
Best regards.
Hi, how would you use indesign to make a wireframe that can be uploaded to inVision?