Creating Wireframes And Prototypes With InDesign

Advertisement

Hundreds of tools may be available for interaction designers, but there is still no industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.

I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.

Slowly but surely, InDesign has evolved from a print-only tool into an application that can produce interactive media for the iPad and eReaders, too. Surprisingly, it has built-in tools for creating interactivity and animation within your spreads. Though it may sound crazy at first, hundreds of thousands of designers have adopted InDesign as their go-to application for eBooks.

We’ll take InDesign one step further than these authors to produce fully interactive wireframes and prototypes. As you will soon see, InDesign has a unique set of tools and features that are perfectly suited to designing wireframes and interactive prototypes in a more intuitive way than you ever thought possible!

What Makes It A Great Wireframing And Prototyping Tool?

I look for only four categories of features in a wireframing and prototyping app. InDesign has them all in droves.

Wireframing

  1. Creation
    Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily.
  2. Modularity
    Design once, and have the changes cascade throughout the whole document.

Prototyping

  1. Interactivity
    Create different states of a design in which the user can actively engage with the design and change the states of the prototype.
  2. Animation
    Set up transitions between various states of an application.

Set-Up

Set Up InDesign for Interactivity

Before creating a wireframe or interactive prototype, setting up both InDesign and the new document correctly is imperative. After opening InDesign but before creating or opening a document, go to the “Preferences” panel (on a Mac, InDesign Menu → Preferences, and on a PC, Edit → Preferences → General) and change the following preferences.

Global preferences (i.e. when no documents are open):

  • “Units & increments”: Set units to pixels
  • “Display performance”:
    • “Default view”: High quality
    • “Raster images, vector graphics, transparency”: Higher quality (resolution)

Change InDesign’s application-level settings.1
Change InDesign’s application-level settings (“Units and increments”) before creating a wireframe or prototype. Larger view2.

After changing the global preferences of InDesign, create a new document (on a Mac or PC, File → New → New Document), and set up the following properties.

  • Intent: Web
  • Properties
    • Pixels as dimension
    • Common screen sizes
    • Horizontal orientation (for desktop and traditional Web)
    • No facing pages (spreads)

Setting the “New Document” properties to “Intent: Web” enables you to create a new document with pixel dimensions.3
Setting the “New Document” properties to “Intent: Web” enables you to create a new document with pixel dimensions. InDesign provides many presets for common screen sizes.

Note: Documents created with “Intent: Web” will have an RGB color space.

Set Up The Workspace

Make all of the interactive functionality new to InDesign CS5 and CS6 quickly accessible.4
Make all of the interactive functionality new to InDesign CS5 and CS6 quickly accessible. I like to place them on the left side of the screen, under the tools palette. Larger view5.

As stated, InDesign can be used to produce static print-based media as well as fluid, animated interactive media. The type of project you are creating will dictate what features you will need quick access to and, thus, how the user interface should be arranged.

How one sets up their workspace is a matter of personal preference, but after much trial and error, I’ve found a set-up that works for me. What works for you may be different, but I recommend using the information provided in this section as a starting point for your customization of the InDesign interface.

Switch between workspaces in InDesign.6
Once you have placed the panels the way you like them, save them as a named workspace. You can switch between workspaces in the upper-right of the InDesign application window.

Two workspace presets are provided with InDesign (found in the upper-right drop-down menu), “Digital Publishing” and “Interactive for PDF.” I have created my own workspace (named “Interactive – Custom” in the screenshot above), based on the other two.

Basically, all of my typographic, layout, color and other design-oriented panels are on the right, and all of the new interactive panels are on the left, under the tools panel. The panels listed just below are docked together on the left of my screen.

Here is a quick introduction to a subset of the interactive panels:

  • Links
    Displays all external assets that have been placed in your documents. Link images, relink and update your assets.
  • Media
    Manage movies and audio files placed in your document. You can customize how these media files play and are viewed in your document.
  • Liquid Layout
    Set up rules for how objects may be repositioned when the document is viewed on various devices and, thus, at various page sizes and orientations.
  • Buttons and Forms
    Convert objects to buttons, and control button properties.
  • Animation
    Create animations, and determine how objects move.
  • Timing
    When multiple animations occur on one page, control their timing so that they are played in the correct order.
  • Object States
    Create objects that have multiple states (such as slideshows and drop-down menus). Each state can be shown and hidden using buttons. This is powerful for creating complex interactions.
  • Preview
    Preview how an animated and interactive document will look and behave without having to export first.

These panels are where most of InDesign’s interactive functionality can be accessed.7
These panels are where most of InDesign’s interactive functionality can be accessed.

I don’t use the panels for hyperlinks, bookmarks or page transitions much, so I don’t dock them with the others.

Wireframe Creation Features

Drawing Tools

Drawing tools may seem like a commodity in the realm of design software. However, many commonly used interaction design applications rely on the placement of predefined UI controls such as buttons and sliders. Ideally, a wireframing application should have vector-drawing tools. Vector graphics are advantageous because they allow for non-destructive editing; and for the most part, the nature of vectors forces you to maintain low to medium fidelity. Jumping into visual design too early in the design process is easy if you are using a program such as Photoshop.

Although InDesign’s drawing tools are not as sophisticated as Illustrator’s, they are more than enough to get your ideas across. The logic here is that, the more robust the drawing tools in a wireframing or prototyping app are, the less you’ll have to jump in and out of other tools, which would create bottlenecks, extra work and technical hurdles.

The drawing functionality in InDesign is similar to Illustrator’s.8
The drawing functionality in InDesign is similar to Illustrator’s. Many of the bells and whistles found in Illustrator may be missing, but you get a core set of streamlined and powerful drawing tools to render anything you can imagine.

Layout

InDesign is one of the only design tools that has robust grid support built in, and I find myself designing with grids all the time. (You can find all of the layout functionality by going to Layout → Margins and Columns.) Grids from widely used systems, such as the 960 Grid System, can be easily and quickly created and used throughout a design by using master pages, which we’ll cover later. Horizontal and vertical guides can be used in conjunction with columns to create subgrids for greater complexity and precision in a layout.

Quickly and easily create grids for your document, such as the 12-column grid based on the 960 Grid System.9
Quickly and easily create grids for your document, such as the 12-column grid based on the 960 Grid System, shown here. Larger view10.

Tables

Not to be confused with the very old technique of laying out Web content, tables in InDesign are often used to display tabular data, as well as list and grid views, in a user interface. In fact, creating tables is one of the reasons why I started creating wireframes in InDesign in the first place!

I often turn cell borders off (either by setting the stroke to none or to 0 pixels), so that the table can inform my design but not be so literal or distracting in the final wireframe or prototype. Other common reasons why I use tables are to create tabs that evenly distribute the text label in each tab, and to create subgrids for alignment in a design when the main grid just won’t do.

Tabular data can be created in seconds in InDesign.11
Tabular data can be created in seconds in InDesign. When tables are needed, no better design program than InDesign is out there. Larger view12.

Layers

While layers may seem like a no-brainer feature that doesn’t warrant mentioning, plenty of apps simply don’t have them. (InDesign didn’t have the ability to show objects in the Layers panel until CS5.) Layers provide the ability to group, reorganize, selectively show and hide, and selectively lock and unlock objects in a design. The larger and more complex a design is, the more important layers become.

Multi-page documents in InDesign share the same organization of layers: every page has the same number of layers, which are also in the same order. When a layer is created, moved in the stacking order or deleted, or when its visibility has changed on one page, those modifications are reflected on all other pages. While the organization of layers is consistent throughout an InDesign document, the designs on each page may be unique.

In the last several months, I have experimented with various ways to order my layers and have come to the conclusion that only a few layers are needed to adequately organize my files. Typically, I use only four layers: I place a notes layer at the top to add explanatory text about the design; next, I use an input layer, where I show user actions and input; below that, I show modals (dialog boxes, lightboxes and popovers), which appear over the background layer.

This is a common layer structure for my documents:

  1. Notes
  2. User input
  3. Modals
  4. Background

The wireframes I create usually consist of four layers. The background layer contains most of the designs, overlays are above the background, and user input such as a mouse or hand sits on top. Finally there are notes, which are placed above everything so I can annotate detailed interactions.13
The wireframes I create usually have four layers. The background layer contains most of the design. Overlays are above the background. User input, such as from a mouse or hand, sits on top. Finally, notes are placed above everything so that I can annotate detailed interactions. Larger view14.

Multiple Pages

By their very nature, interactive documents require multiple pages. Pages in website design (and screens in app design) are a fundamental unit of interaction, because they contain the content that users navigate to throughout the application.

Large and small projects would benefit from the organization that pages provide.15
Large and small projects would benefit from the organization that pages provide.

Alternate Layouts

This new feature in CS6 is a game-changer for responsive and mobile design. Alternate layouts allow you to create designs for multiple devices and orientations in the same file. With InDesign CS6, we now have a tool in our arsenal to make designing for dozens of screen variations almost as easy as designing for one. The textual content of each size and orientation is all linked, so updates will automatically propagate to all variations of a design.

Alternate layouts were designed to work with the liquid layout toolset (discussed next), so that if layout rules were set up properly in the original layout, then newly created layouts would automatically update to conform to the different dimensions. Of course, alternate layouts may be used without liquid layout rules, too, so that you can manually control how objects are displayed in each layout.

When working on more than one layout, you might need to refer to other layouts or toggle repeatedly between multiple ones. To see two layouts simultaneously and work back and forth between them, simply click on the split-view icon to the right of the scroll bar at the bottom of the InDesign window.

Alternate layouts are used to manage one design that will be viewed on multiple devices.16
Alternate layouts are used to manage one design that will be viewed on multiple devices.

Liquid Layout

Liquid layout changes the way content adjusts to the size of the page. (According to Adobe, this feature is HTML5-based.) Liquid layout lets you be more flexible: you can design once and set up some simple rules, and then the design will automatically adapt when the display’s size or orientation changes.

Set up liquid layout rules in one of six ways: off, scale, recenter, object-based, guide-based, and controlled by master. The details of the liquid layout rules are enough to take up an entire article by themselves and are, thus, beyond the scope of this article. I highly recommend reading Pariah Burke’s article “InDesign How To: Using Liquid Layout17” to get up to speed on the rules.

Define liquid layout rules before creating an alternate layout, to fully leverage the time-saving benefits of this feature.18
Define liquid layout rules before creating an alternate layout, to fully leverage the time-saving benefits of this feature.

As you set up the liquid layout rules for a page, preview and test those rules to see whether they have the desired effect. To test your new liquid layout, select the page tool, and you will see handles at the edges and corners of the page. By dragging these handles, you can temporarily adjust the size of the page. This behavior lets you test how the content adapts when the page changes in size. Holding Option on a Mac or Alt on a PC lets you permanently change the page’s size by hand.

Wireframe Modularity Features

Master Pages

Master pages extend the functionality of pages by allowing a parent page to have objects and to have layers that are shared with its children pages. When content on the master page changes, it also changes on the children. Masters are typically used to contain headers, footers, logos and empty frames that act as placeholders. Surprisingly, very few other applications have master pages. The versatility and saved time that master pages bring cannot be overestimated. They help with consistency, and they help designers use repeatable design patterns throughout a project.

When master pages are applied to other pages, you are able to share the master’s objects to the regular pages.19
When master pages are applied to other pages, you are able to share the master’s objects to the regular pages.

Note: Objects on a master page layer appear behind objects assigned to the same layer in the document page. If you want a master item to appear in front of objects on the document page, then assign a higher layer to the object on the master. A master item on a higher layer will appear in front of all objects on lower layers. Sometimes I create special layers for masters that are above the “normal” layers.

Masters Based on Other Masters

Masters can be created based on previously created masters. As far as I know, this feature is unique to InDesign. By creating a parent-child relationship between masters with a document, a nesting effect occurs (similar to the cascade in a cascading style sheet), which makes for a powerful way to create constancy and to update documents with ease.

Basing a master on another enables you to create similar variants of a design. Masters may be based on only one other master at a time.20
Basing a master on another enables you to create similar variants of a design. Masters may be based on only one other master at a time.

Placing Files

When pixel-perfect styling matters, you can switch to whatever application you want to design in, and place that file in an InDesign document for seamless integration. Placement is especially powerful when using multilayer Photoshop or Illustrator files, because InDesign displays them in full fidelity.

Note: By default, InDesign previews placed images with a low-resolution preview. This does not reflect the quality of the placement or that of the original file — InDesign uses a pixelated proxy image to keep up performance on your computer. With CS5 or CS6 and a decent computer, I have found that a high-quality image preview doesn’t affect performance and is a more accurate way to view your work. I recommend setting the display performance to “high” as the default in InDesign. (This can be done by opening InDesign and going to View → Display Performance → High.) Setting this when no document is open will set the default for all newly created files. Older files will retain the view settings that were selected the last time they were saved.

Each time a document is placed, it references the original file. For instance, if a PSD is altered, one click can update all of the instances of that Photoshop file that appear in an InDesign document. When only a portion of an image is necessary, InDesign offers some of the most intuitive and rapid masking tools available.

Note: Placed items are linked to the containing InDesign document based on their file location. To gather all files into one central folder, use the File → Package command.

You can place most media types in an InDesign document.21
You can place most media types in an InDesign document. Larger view22.

The placement feature is easy to take for granted, because it is a fundamental tool in InDesign’s arsenal that has been around since the software’s debut. But placement enables you to create a kind of collage whereby you can design the pieces in whatever tool you deem appropriate, and then assemble those pieces in InDesign.

Placing InDesign Documents in Other InDesign Documents

InDesign allows documents to contain other InDesign documents. Think of a placed InDesign file in a master object (rather than a master spread) because it makes it easy to reuse content in a design in a consistent, fast and easy way. If the original InDesign document is edited, all instances of the document will instantly reflect the changes. A placed InDesign file may show up in its container file an infinite number of times.

This feature allows for functionality similar to that of symbols in Flash and Illustrator, but expands on their use by facilitating constancy across multiple documents. This is an extremely useful feature that is not widely known but can save countless hours. For those working on collaborative teams, you can save InDesign documents to be used as reusable components in a shared folder, and any updates made by one person will be available instantly to the rest of the team.

InDesign documents may contain other InDesign documents.23
InDesign documents may contain other InDesign documents. This seemingly simple feature allows you to create symbol-like functionality that allows object changes to propagate to an entire document. Larger view24.

Snippets and Libraries

Placed InDesign files make it possible to reuse content and to edit the originals. There are other ways to reuse content, such as snippets and libraries; however, these two methods do not allow the originals to be opened or edited after creation. Because of this, they should be used prudently, and only when the content in a library or snippet is finalized and won’t change. Snippets are more flexible and powerful than libraries, but using placed InDesign documents is recommended in most cases.

Styles (Object, Character, Paragraph, Table and Table Cell)

As anyone who has used character and paragraph styles in InDesign would attest, styling is an amazing time-saver and provides a level of precision and consistency that would otherwise be impossible. Object styles enable you to style one object to your heart’s content, and when you are happy with the way it looks, you can save all of the effects and the transparency, stroke and fill of an object to be applied to other objects later on. If the style itself is updated, then all objects that have been assigned that style will be updated as well.

Styles enable you to maintain a consistent look and feel in a document.25
Styles enable you to maintain a consistent look and feel in a document and to update the styles of any and all objects when requirements change or the mood strikes. Larger view26.

Interactive Prototyping Features

Buttons

When an object is converted into a button, it becomes clickable and interactive, able to initiate a myriad of actions such as navigating to a particular page, initiating animation or playing a sound. Almost any object can be turned into a button. A button is a special kind of “container frame” that hold the objects that make up the visual appearance of the button.

Buttons panel: details.27
Buttons panel: details.

Multi-State Objects

When a person uses an application or website, the objects on the screen that they interact with will often change states. For instance, a carousel slideshow might show a featured set of 10 images that rotate through the collection, showing one photo at a time. In this example, the carousel slideshow is one object with 10 states. In other programs, you would have to create a new page or art board for each of the 10 images in the carousel.

Without multi-state objects, the carousel object would have to be duplicated nine times, each state on a different page. This method is inefficient and doesn’t accurately reflect what is actually happening — that the carousel is changing states. State changes are not the same as page changes, and InDesign allows you to differentiate between the two! Multi-state objects are special objects that can change appearance depending on how or when a user interacts with them.

Objects panel: details.28
Objects panel: details.

Hyperlinks

Those blue underlined text links we have come to know and love on the Internet are alive and well in InDesign. Hyperlinks turn text into interactive objects that, when clicked, transport the user to a new page or to a different position on the same page. You can also easily turn URLs in text into hyperlinks (be sure to define the character style of hyperlinks first).

A note on named versus unnamed hyperlinks. When making a hyperlink, you need to decide whether it can be used multiple times (which InDesign calls a “shared hyperlink destination”) or will be a one-off link. If you are going to use a hyperlink several times in a document, making it named is great. That way, if you need to edit the link, you can change it once and it will get updated everywhere in the file.

Media

Similar to the Links panel, the Media panel holds all of the movies and audio files that are linked within a document.

Bookmarks (PDF)

Used primarily for print PDFs, bookmarks make it easy for the viewer to find a particular section of the document. Bookmarks may be nested. A table of contents can generate bookmarks without your having to add bookmarks manually, which saves a lot of time. As with HTML, a link can direct you to a whole other page or (if it’s an anchor link) to another spot on the same page. Because there is no way to name pages in InDesign, you can also use bookmarks while designing a document for reference purposes.

Page Transitions

Whole page-transition effects, similar to those in Keynote and PowerPoint, are available in InDesign.

Animated Prototyping Features

Animation

Though they can be thought of as eye candy, transitions provide additional information, context and feedback, and they help people visualize the results of their actions. Objects animate as a result of a user action, such as navigating to a page or clicking a button. The animations in InDesign have the same presets found in Adobe Flash CS5 Professional and above. Common presets, such as bounce, slide in and fade in, come bundled with InDesign, but you can create your own presets, save them and share them with others using InDesign or Flash.

Animation panel: detail 1 of 4.29
Animation panel: detail 1 of 4. Larger view30.

Animation panel: detail 2 of 4.31
Animation panel: detail 2 of 4. Larger view32.

Animation panel: detail 3 of 4.33
Animation panel: detail 3 of 4. Larger view34.

Animation panel: detail 4 of 4.35
Animation panel: detail 4 of 4. Larger view36.

Timing

The timing pane is used for advanced animation sequences in which a user action initiates the animation of two or more objects. The timing pane takes the place of a dedicated timeline found in apps such as Flash, and it resembles panels found in Keynote and PowerPoint (with some powerful additions). Timing is used to control the order in which objects animate, determining whether those objects animate one after another, at the same time or somewhere in between.

Timing panel: details.37
Timing panel: details. Larger view38.

Previewing And Exporting

Previewing an Interactive Document

With so many options to tweak in an interactive document, periodically testing your interactions will help you to iterate on the design and to experience what you are creating from a user’s perspective. Thankfully, InDesign helps you do this without having to export the whole document, which saves time and lets you stay in InDesign to test the design as you are creating it.

The difference between previewing a document and exporting a document may seem minute, but because previewing is so fast, easy and but one click away, you are more likely to use it to test, evaluate and tinker with a design — and increasing the number of iterations in the design process is a surefire way to increase the quality of your deliverable.

Preview panel: details.39
Preview panel: details. Larger view40.

Exporting

InDesign’s interactive features work only when you export the file to a format that supports them, such as PDF, SWF, FLA or XHTML. And different formats support different features.

HTML Export

Though InDesign has an “export to HTML” feature, it is so anemic that it is not worth using. Perhaps Adobe wants people to use its digital publishing platform — the resulting HTML files that InDesign produces natively are not useful because they don’t maintain the styling or interactivity of the working document. Adobe has said it wants to move in the direction of supporting Web standards, but as of CS6, I would not recommend exporting to the Web from InDesign.

Luckily, a company named AJAR Productions has a new Kickstarter project that aims to rectify the shortcomings of HTML exporting. Currently, the InDesign to HTML5 project is a work in progress, but it will have a 1.0 release very soon. Please take a look at this new plugin41 and see what it can do for you. The developers are very responsive to constructive feedback. Hopefully, Adobe will see how useful this functionality is and follow the awesome lead of this Kickstarter project. With the InDesign to HTML5 plugin, you can produce designs with the following features and benefits:

  • With the WYSIWYG, no-programming-needed design environment, produce layouts that are faithful to the original InDesign file.
  • Embed fonts on your website.
  • Produce built-in page navigation.
  • Use master page content.

Extending InDesign

The company Eight Shapes has created a toolset called Unify to fully maximize the interactive features of InDesign. Unify is a documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specifications, usability testing reports and prototypes. I only recently discovered Unify and have found it to be extremely helpful in my work.

Drawbacks And Limitations

Before you start rushing to mock things up in InDesign, I’d like to mention a few caveats. First and foremost, few professionals are using InDesign to create wireframes and prototypes. This means that there are few tutorials and support documents to help you if you get stuck or confused. Learning how to create animated eBooks or iPad magazines might help you approximate what you are trying to do, however. Also, there are almost no native InDesign files that can be used as stencils or pre-made components similar to those found in programs such as OmniGraffle.

There is a way to quickly create your own set of stencils from those already available online, though. You can copy and paste stencils from other programs into Illustrator, clean up the images, and then paste them into InDesign. As mentioned, you can embed InDesign documents in other InDesign documents in such a way that approximates the use of symbols in Fireworks, Illustrator and Flash. Embedded InDesign documents can be treated like stencils. The advantage is that these documents can be accessed by a team from a shared location, and when the source files are updated, every document that contains the embedded InDesign files will also get updated. While getting your InDesign stencil collection up and running might require some leg work, it is well worth the effort.

The interactive features of InDesign were not intended to be used for rapid prototyping or for creating rich complex interactions. While the interactive tools are perfectly suited to eBooks, they are not yet robust. The types of documents InDesign produces are intended to be used with the Adobe Publishing Suite and EPUB — two formats with different but related limitations. Interactive PDFs, SWFs and even HTML can be exported, too, but they don’t produce files with as high a fidelity as Adobe Publishing Suite or EPUB.

In some ways, the interactive toolset makes InDesign feel like a facsimile of PowerPoint or Keynote in terms of how page transitions are handled and animations triggered. The similarity to presentation apps makes it easy to jump in and start producing work quickly. But there are some drawbacks. As anyone who has created an animation-rich prototype in a presentation program can attest, although it looks slick in the end, designing a non-linear flow in the confines of a linear document is a bit of a hack.

Despite these minor limitations, I hope you have discovered the amazing benefits of InDesign. Although not perfect, InDesign offers many perks and features that will transform the way you create wireframes and interactive prototypes.

Conclusion

Many people are familiar with InDesign, but they often overlook it when choosing a wireframing or prototyping tool. This popular application in Adobe’s Creative Suite, once a print-only tool, has become a hybrid program that can produce multimedia content for the Web and eReaders. Though not perfect, the unique combination of its creative workflow, modularity, and toolsets for interaction and animation make InDesign a robust and powerful program that is perfect for creating both wireframes and prototypes.

Other Resources

You might be interested in further articles and resources42 related to this article.

(al)

↑ Back to topShare on Twitter

Shlomo "Mo" Goltz is an Interaction Designer and User Researcher at Hearsay Social. There he crafts experiences that enables those in the financial sector to develop, maintain, and enrich relationships with customers via social media. Shlomo combines qualitative and quantitative research-based methodologies to inform his design process, with a focus on creating enterprise software that feels as delightful to use as consumer products.

  1. 1

    This is a very interesting approach. I tend to use Axure/Balsamiq for wires/prototypes BUT I am very familiar with InDesign and I imagine creating wireframes could be pretty simple. I’d say that Indesign offers more flexibility as most wireframing tools have pre defined modules… using indesign would allow full customisation of nav bars, carousels, that kind of thing.

    I’d be interesting to see an example prototype you created in InDesign

    5
  2. 2

    Francisco Campos

    March 7, 2013 2:19 pm

    Extremely interesting article, I really enjoy using Indesign for creating interactive pdf’s AND I’ve been recently searching for a prototyping tool for my web design work…and I believe I’ve found it, thanks alot!

    5
    • 3

      You are welcome. I am glad that this approach to using InDeign suits your needs, and hopefully will improve your workflow too!

      1
  3. 4

    This is great! I love using InDesign to create wireframes and have for quite some time now. Ever since I discovered EightShapes Unify http://unify.eightshapes.com/

    3
  4. 5

    My decision to not hire any designer that wants to use inDesign seems even more solid after reading this article.

    Sorry, Author, but you really should just relearn everything you know. I think the nicest thing to say to you is that you should consider another career.

    -84
    • 6

      Youre retarded

      -8
    • 8

      Ben Bartholomew

      March 19, 2013 2:25 am

      Cynical. My assumption after reading your post is that you haven’t ever hired, nor will ever hire anyone; because you are clearly a 13-year old. Congratulations on figuring out that you can insult people anonymously, for no reason, on the internet. The author of this post, Shlomo Goltz, knows so much more than you. I’m glad that you chose to use an anonymous name, because you look childish and uninformed.

      13
      • 9

        Ben Bartholomew

        March 19, 2013 4:38 pm

        Oh… CynicalOne. I realized now that you’re name is Texx Smith, and that you’re a freelance project manager in Florida. Good luck getting a job. I wouldn’t hire you.

        PS – The internet is never anonymous and people can find information about you for years to come.

        9
        • 10

          Like his profile on Flickr says: “I just don’t have a lot of time to get outside.” Maybe you should go out a bit more and see that the world is changing.

          Did my first InDesign prototype project. Still a bit of a search, but it seems to be working pretty fluently, especially if the client asks several changes to the design.
          Exporting and previewing using the in5 plugin works great.

          0
    • 11

      Can you elaborate?

      0
  5. 12

    That’s genius! I’ve never thought about using inDesign for prototyping.
    After reading your article, it does make a lot of sense!
    Brilliant, thank you!

    4
  6. 13

    You make only one reference to Adobe Fireworks…
    “still no industry standard for interaction design…” What about the browser itself?

    8
    • 14

      I agree. All my interaction design gets done in the browser. And I can hit the ground running with a framework like Foundation. Fully responsive and interactive wireframes in no time at all.

      1
    • 15

      I did mention Fireworks only once, as I’ve written 3 other articles about it ( http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/ ). Smashing Magazine has lots of Fireworks articles already, and I wanted to shine the spotlight on another program that doesn’t get so much attention here. As for the browser, it is a standard… for production, though skilled programmers can prototype in it, this is usually a very high fidelity prototype late in the design process. It is my goal to feature Indesign as a tool for early on in the process.

      5
  7. 16

    This is not a bad idea :) I always used illustrator before but am surely trying indesign for wireframing in the future.

    0
  8. 17

    This is a great article and I want to thank you specifically for the link to the HTML5 export. I was delighted to see that it is available now…and I am eager to take it for a spin since the built in HTML tools are anemic at best.

    One other design attribute that I love about doing wireframes/prototypes in Indesign is the new “auto size” dialog box (Object -> Text Frame Options…[Auto Size]) This allows the container to behave more like a div.

    I have used Object Libraries in the past, but I am going to try embedding the .indd file next time to see if that works better.

    Another advantage that I have used is having a group of designers working on the same “book.” this helps to push any style updates/revisions across multiple documents automatically. It is also a nice way for each designer to be working on specific parts of a document at the same time.

    2
  9. 18

    John Mindiola III

    March 7, 2013 4:29 pm

    This is very interesting. I wonder if Muse is supposed to fill in where InDesign falls short. That said, I wonder if Muse is the future of InDesign for print, too.

    2
    • 19

      I haven’t used Muse much, but it was created by the Indesign Team. It seems like a program with lots of potential, but is in the very early stages of its lifecycle. It can do some simple things very well, but isn’t quite there yet. I’m excited to see what Adobe does with it.

      2
      • 20

        I played around with Muse quite a lot when it was in the free beta testing. There was some potential there, but the code that program spat out was just dirty and unusable. If I’m going to have to recode everything by hand after I’m finished with the prototype, then I might as well stick to photoshop.

        0
  10. 21

    Hum, considering how people in the ebook industry are considering inDesign EPUB “management”, I won’t really say it is robust for EPUB.

    Some even think it is doing harm to the standard as the code it exports makes files quite unmanageable for vendors which have to overrides styles or alter the entire EPUB file so that it is readable. Extremists ebook designers would even say it may be the worst epublication tool available today and that adobe building a bridge from indd/EPUB to dw is some proof indd failed in this area and adobe now admits you have to modify the files it exports heavily….

    Anyway, that was pretty interesting, but beware of indd EPUB export, especially if you already have an existing project. Trusting indd export is like agreeing to release a very low quality ebook, you have to check and modify it. Absolutely.

    2
  11. 22

    Joshua Richards

    March 7, 2013 5:01 pm

    Is this even necessary though? I’ve tried wireframing with balsamiq, and hotgloo, and of course ps. But I end up with the same conclusion.

    Pencil and paper.

    Draw your layouts, draw your interactions. Its incredibly quick, and easy. Then dive into the browser. Seems like the most efficient way imo.

    What’s the benefit of using software like this?

    6
    • 23

      Certain projects may require fully fleshed out UX designs, say for a client.

      2
    • 24

      Pencil and paper is best suited as the first tool to go to when rending ideas, but when you get to the point of defining the nitty gritty details, its much easier to refine them, and iterate on them digitally. By using master layers, placing InDesign files within other InDesign files, and other tools, you can quickly modify whole documents in seconds where it would take you hours on paper. Faster iteration = more iteration = better design.

      6
  12. 25

    Hi Shlomo,
    Thanks for covering our tool!
    in5 (InDesign to HTML5) is currently available and now supports Liquid Layout:
    http://in5.ajar.pro

    2
  13. 26

    Ah perfect. I was weighing my options for wire framing over the last week. I tried Omnigraffle but found the interface to be counter intuitive and unlike the Adobe software I was used to. I considered Illustrator but it has no master pages or pages at all for that matter.
    So I am convinced (because of this article) that Indesign is the right choice for me. Thank you! This could not have come at a better time.

    0
    • 27

      Omnigraffle is OK, but works like OSX apps did years ago, and doesn’t mesh well with my way of working in Adobe apps either. I’d like to see the Omni Group modernize and enhance Omnigraffle. It has such a huge following though, despite its limitations. I’d like to see them update the app with UX specific features.

      1
  14. 28

    Nural Choudhury

    March 7, 2013 11:35 pm

    I usually enjoy reading most of your articles but I have to disagree with this post. Fireworks is far superior to Indesign for the tasks layed out in this article. Quick interactions and pixel perfect frameworks.

    To use Indesign is like using a pitchfork to do keyhole surgery.

    7
    • 29

      This might be true for you if you are not used to InDesign. I come from a graphic design and typography background and always used InDesign. I once tried Fireworks for designing a website but it felt absolutely terrible and soon I went back to the tool I was used to.

      2
    • 30

      InDesign isn’t for everyone, and since Fireworks is long in the tooth (its a miracle that as of CS6, Fireworks is still on life support), I thought it would cover another program that deserves more attention then it gets. If you can weild that pitchfork right, you can do some good lock pickin’.

      5
  15. 31

    Great article. I would seriously look at using InDesign if only there was the concept of controls – especially container controls such as tabs or (more difficult) the accordian. I’ve looked an Omnigraffle, Balsamiq, and a couple of others, but keep hitting the wall with them because of a lack of ready controls that are easy to use and flexible.

    We are designing for a very large business web app and are using Sketchflow in Expression Blend 4 – it has a high learning curve, but a large collection of controls and great flexibility especially in terms of mocking interactions. Downside is that it is a little slow with large projects and has to be broken up into smaller ones.

    0
    • 32

      Sketchflow was supposed to change everything! It had such an awesome potential, but alas, Microsoft, in their infinite wisdom, has decided to kill it.

      1
  16. 33

    Yup. I’ve been designin websites in ID for over a year. I insert my master grids for numerous breakpoints and get to work. Grids are beautiful, all graphics are SVG, style sheets, all things mentioned above. Photoshop can’t compare.

    1
  17. 34

    Jason Occhipinti

    March 8, 2013 5:50 am

    This was definitely a great, and very novel article – I had thought of using it once a couple years ago (around cs4) but quickly dismissed it for illustrator and photoshop for visual comps, and omni for wireframes –

    Sometimes, from the standpoint of typography I think using indesign might create unrealistic expectations for some designers (particularly those just moving into web from print) – whereas print designers take fine control of their type (I am thinking…kerning between individual letterforms), such control is possible on the web, but impractical for execution….maybe I’m just overanalyzing this though.

    3
    • 35

      Thats right. I already had the pleasure of programming a website that was designed by a print designer :-) But if you know what is possible on the web you can make InDesign behave a bit like HTML and CSS. For example you can switch off hyphenation, use “margin” and “padding” etc.

      1
    • 36

      Like any other tool out there, InDesign’s print type controls can be abused, but its up to the user to understand their intended output media to know not to touch the fine tuned controls for a wireframe.

      2
    • 37

      Very good points to remember regarding type, but for me just having paragraph styles is a godsend when it comes to iterating multi-page mockups, and with typography becoming an ever more important part of web design, something I couldn’t live without.

      1
  18. 38

    I love InDesign, and have been using it for few years in print productions. But I fail to understand how is it a better tool than Adobe Fireworks which has more specific tools for prototyping and wireframing and handle vectors almost good as illustrator…

    6
  19. 39

    Interesting idea. Would be great to see an example of a prototype you have made using ID.

    4
  20. 40

    Interesting article. One of the features I miss in every Adobe product for effective wireframing is a dynamic layout. I have been using antetype for the past 6 months and it’s so much faster and feels more natural than fireworks or illustrator.

    0
    • 41

      Fireworks is better for UX work, but it has gotten no Love from Adobe, and rumors have it that it may be killed off soon. Its a miracle that as of CS6, Fireworks is still on life support. I wished I worked on the Fireworks team so I could turn things around, but I doubt that’ll happen. I have mixed feelings about FW, as it had so much potential, but is so unstable and clunky now, that I only use it for specific projects here and there.

      3
  21. 42

    Thanks for this article. Reminds me of exploring some of the new features added in CS6.
    InDesign is my favourite tool for web design next to the browser and pencil and paper. But I think it really depends on how you think and how you work and what you are used to.
    In no other software working with text and images is so easy and intuitive.

    One thing that I don’t like about it: As far as I know you can’t use it to create (vector) assets like icons because there is no way to export them. You can copy them to Illustrator but then they usually get a nasty clipping mask and some other strange things happen to the paths so you have to clean them up first, which is really annoying.

    0
  22. 43

    I agree with Nahum Yamin that using indesign, although an option for wireframing and prototyping, it lacks what fireworks was created for, the web. I believe wolf gang hit it on the head, fireworks is more than just prototyping and wireframing, you can export assets to any developer to use from fireworks.

    Sorry,
    Fireworks is better!

    0
    • 44

      I’m glad you like Fireworks so much. It is better for some people in some use cases. For those that need another program, I’d like them to consider InDesign. Both are great tools.

      -1
    • 45

      I have just finished designing a complete set of storyboards on InDesign and was able to export all the PNG files directly from InDesign as well. It’s actually much easier than exporting them from Photoshop, as effects such as drop shadowa are automatically incorporated within the asset (rather than having to crop each asset manually in photoshop).

      0
  23. 46

    Thanks Shlomo. I was thinking about purchasing Axure for a little while, but now I know that I have a rich wireframing/prototyping already in my software arsenal.

    0
  24. 47

    Steph Burningham

    March 11, 2013 11:29 am

    So far I’ve been using pen+paper and then Illustrator, not creating interactive wireframes. I had never thought about using InDesign to create interactive work as I thought of it a mainly a for-print programme. It’s great to see that it has moved into the digital age. I’m really looking forward to giving it’s digital tools a try! Thanks for informing!

    0
  25. 48

    This alternative use of InDesign is very impressive! I’ve looked for the right tool so many times… For a more lightweight interface and quick prototype design I finally decided to use Omnigraffle. It natively integrates UI/UX library, and it’s really versatile too. Specifically for technical purposes. You should have a look…

    Thx for the time you spent on writing that article! Useful and clever!
    N.

    0
  26. 49

    Christopher Hawkes

    March 11, 2013 10:44 pm

    Only problem with Indesign is it’s so expensive, may be better off with something a little cheaper like Axure. Personally I like to code my own prototypes, I know it’s not fast, but I hate finding workarounds to do something I can accomplish with a little HTML/CSS/JavaScript.

    0
  27. 50

    From a client point of view, I hate agency to do a fine wireframe with any Adobe package unless they can execute it. Why? Because, in the wireframe stage, agency usually gets involved without talking to any developers. It always ends like a mass. It might not be the case here since I can see this is more likely an approach for web than devices. When you leave a simple browser world, things are different and essentially that is the difference between a web interactive designer and a device one. Anyway, keep minds open. Think it’ll be a good prototype tool!

    1
  28. 51

    I’ve been using InDesign for wireframes / development decks since 2005. It makes it easy to collaborate with designers (automatically updates placed PSD files) and on some projects with writers and project leads too (using InCopy). I can quickly export PDFs with hyperlinks, cross-references, TOC, headers – which all update as the document evolves. I can create separate documents for different components and export a PDF as a book. I can quickly create a click-through for testing (either interactive PDF or swf). And throughout the process I have a high level of control for text, graphics.

    The ability to create libraries is a huge time saver – everything from page types to application-specific components. If you’re working on a site that has a pattern library (however preliminary) the libraries provide consistency and, again, save hours of time assembling a deck.

    Obviously whatever tool works best for you is the best one. For me, creating a document that can quickly reflect changes and visualize design & interaction for both business and engineering teams, InDesign outperforms the other tools I’ve used.

    2
  29. 52

    Rich libraries of stencils are the key for wireframe app. That’s why Omnigraffle rules supreme. If it’s not important (say, you have your own library) and more important is to be able to output it to interactive HTML for prototyping or else, why not to use Edge (or Flash till it’s still alive).

    0
  30. 53

    Tony MacFarlane

    March 19, 2013 5:20 pm

    After working with a designer who would comp everything up in Photoshop, and then show it to the client as-is, I adopted the requisite that we use InDesign for prototyping from then on. Many times, designers will give items strokes of a fraction of a point; likewise text would be a fraction of a pixel (imagine! There are many designers who will insist that a screen can show half of a pixel. “Why does your web page look so different from my comp?!”) After all, you can just slice everything up and you’re good to go, right?

    My thinking was that using InDesign was as close as you could get to designing straight out of code. The only major difference that I’ve found is that you cannot stroke just one side of a box–this is because of the PostScript model that ID is based on.

    Of course, people can still mess up: they can misuse blending effects, and otherwise apply local formatting that will still turn you into Sherlock Holmes. But the only cure for that is to work with designers who know how to hand-code.

    Adobe has a huge vested interest in making you believe that their products will help you design a better web. But the day that CSS does everything Photoshop can do will still be a sweet day in the history of web design. Until then, please encourage your designers to use Photoshop for processing photos.

    0
  31. 54

    I am totally new to the web designing part and didn’t know much about wire-frame app. You have provided a very informative information which is really helpful for people who are learning and searching for any new updates about web designing part.

    Thanks for the wonderful post!!

    0
  32. 55

    What version of InDesign are you using? I’m on CS5 and am not finding the features you mention. Are they only available in CS6?

    0
  33. 59

    Great post. I have been using InDesign for years working as an IA and IxD. I’ve tried many other tools, but think InDesign is the only efficient tool when you are working on a team with several other interaction designers and need to create documentation for various groups of stakeholders.

    I’m curious if you have used some of the alternate layout controls for something more interaction rich? For example, when designing a tabbed editorial module for a responsive web site there would need to be a greater change to the module than simply scaling it down. I obviously know that the tool won’t do the design for me, but is there a way to assign a different piece of artwork to an area of the page based on the view-port size? Or something like that?

    0
  34. 60

    I switched to using InDesign for web layout and production roughly 2 years ago. Colleagues definitely looked at me funny when I would tell them this.

    The reason for doing so was strictly based on workflow and efficiency. My job consists of a standard service package developing digital campaigns, print materials / advertisements, and TV usually within a 3-4 day turn around (wire-framing and prototypes are never really an option and I have to be as close to the finished product as possible) in a highly regulated industry – and up until recently I was the only designer in-house.

    Using ID allowed me to build print documents then easily carry assets into web grid system ID templates. I could also build document elements (such as navigation etc) in a modular fashion and place them into the overall design so when it came to production exporting became much more efficient and would easily be pulled into hand-coded HTML templates.

    The biggest benefit I found is IDs handling of text. Being able to set up style sheets (as in print documents) and the ability to rapidly edit text when required changes came back from regulatory agencies – then simply export to a multipage PDF and resubmit.

    It took a bit of getting used to and plenty of experimentation to use ID for the web – but the improvements in workflow efficiency has been tremendous for me.

    Thanks for this article!

    0
  35. 61

    InDesign is great for building wireframes, but it lacks some of the convenient stencils that both Visio and OmniGraffle have. So, I decided to start my own stencil library in InDesign, containing frequently used form fields, etcetera.

    Src: http://www.edesigner.in

    1
  36. 62

    Coming from being both a developer and a designer and having worked on both sides of the fence, I think a really important thing to remember when creating wire frames is that the web is not photoshop/inDesign and the 2 are not interchangeable. The times I have seen developers do battle to achieve a pixel perfect result from a photoshop/in design wire frame and spend huge amounts of wasted time implementing something like an almost unimportant drop shadow to achieve the wanted results, instead of a designer working hand in hand with a dev to create a HTML wireframe and see what works and what doesn’t whilst creating it…. In the end it may sound more expensive but your developers time will be halved, thus making it cheaper.
    Also it allows your creativity to thrive, you don’t fall in love with one aspect because you have taken so much time to create it.
    Whilst I would never say sack off InDesign/Photoshop/Fireworks completely…. maybe make sure they’re used sparingly in the right places :)

    0
  37. 63

    Very interesting!

    I have another reason to love InDesign for wireframing, and that is placing all text , graphics, and form items in-line in a text box. If another field gets added to (or removed from) a form, I don’t want to have to re-align all the rest of the form fields.

    But I am skeptical about the prototyping capabilities. Do you have an example to share? Can radio buttons/checkboxes be made interactive? For example, if you had a radio button that said “credit card,” could the user check the radio button, and then the credit card fields would appear and push the rest of the content down? That is the sort of interactivity that we need in a prototype.

    0
  38. 64

    I have quite a lot experience working with Fireworks, but at the moment my team they just have InDesign. This article is just perfect to start playing it . Thanking you!

    0
  39. 65

    Dominik Gorecki

    June 12, 2013 9:37 pm

    Excellent resource to help you out (AI File):
    http://www.dominikgorecki.com/2013/06/sketch-wireframe-kit/

    0
  40. 66

    Thanks for this post. Would have never thought inDesign could even accomplish this.

    0
  41. 67

    I’m a veteran magazine designer now involved in producing content for corporate clients.
    This includes magazines, websites, EDM’s, apps and video content.
    Indesign is a great tool to to produce the seemingly endless iterations required by corporates.
    I’m a firm believer in getting the look and feel and content in place using Indesign before building out to PSD and the web.
    Saves time and money and ensures consistency.
    Refining your content in Indesign is the way to go.
    Don’t get too hung up with the delivery platform it’s all about the message and the content.

    0
  42. 68

    After testing several wireframing tools, it boils down to two questions:

    1. Who is your audience?
    2. What are you trying to do?

    For rapid prototyping and online collaboration, Pidoco works pretty well. The cons, it isn’t easy to apply global updates. If you are trying to quickly mock-up a clickable prototype, with fairly basic functionality, it will get the job done. It also produces a lightweight wireframe document to give to developers. Works well to quickly articulate functionality to a client.

    For functional specifications with detailed annotations, Axure wins. If you are developing a large system, e.g. line-of-business application, or large website that is less in need of visual realism, it works well. The ability to link page elements and output wireframe annotations is very helpful. If wireframes with rectangular boxes and “FPO” or “Main Image”, or a left rail with “Nav Item 1, Nav Item 2, etc.” works for you, Axure is just fine.

    For high-fidelity wireframes that are nearly visual compositions, InDesign works well. However, detailed annotations and functional specifications are not what InDesign does well. If your audience can’t visualize a rectangle with “FPO” written in it, InDesign would work better.

    For designers in need of a lot of templates, Omnigraffle has a ton of them available. The cons, it is difficult (if not impossible) to insert graphics from Illustrator. The layers work ok, but similar to another comment, if you are familiar with Adobe CS, you will be frustrated with Omnigraffle’s functionality.

    So – in short – IT DEPENDS on your audience (fidelity), and purpose (prototyping vs functional specs vs concepting)

    0
  43. 69

    Your article on inDesign is very convincing, but I’m concerned about going down a “production dead-end” if I attempt this. I’m the UI/UX and visual design lead at a software company that makes online casino games, and our real-money games have such a high level of complexity due to regulatory requirements that Fireworks is now just too unstable when working with multiple 100+ page design files. I’ve been looking into Antetype for its liquid layout capabilities and better interactive mockup features, which are becoming essential as we transition to HTML5 and mobile from older C++ and Flash apps. But at least with Fireworks, I know I can slice graphics and produce coordinates/specs for a C++ engineer, or hand off a cleaned-up FW file to a web developer for our HTML5 apps. And the newer CSS properties in FW are helpful too. Can you comment on how one would approach a production workflow when prototyping with inDesign? This seems to be a shortfall with nearly all the prototyping apps I’ve tried. Thanks for the great articles!

    2
  44. 70

    I have been using Indesign for wireframing and prototyping for a few years now. I thank you for making me feel like I wasn’t alone out there! I have tried everything, and keep coming back to it because it just does a few things others just can’t.

    A couple of extra tips:

    If you want to have control over global objects, use PLACE (command + D) and select your .psd file or .ai files. If you want to change the look you can go back into the original, update and it will change in all instances.

    Adding Notes: In your Page Setup: adjust your bleed settings so you can add notes and comments to your file that are outside of your set document size. If you export as a PDF you can choose to turn bleed on or off as needed.

    That plugin is a good find!

    0
    • 71

      Shlomo (or anyone else), the Layers pic in the article isn’t showing up for me. How are you handling annotations? For example, if I create a layout which has the wires on the left and the annotations on the right, I’m unable to use the columns because it affects the entire art board.

      Leanna said… “Adding Notes: In your Page Setup: adjust your bleed settings so you can add notes and comments to your file that are outside of your set document size. If you export as a PDF you can choose to turn bleed on or off as needed.”

      Leanna, using the bleed for annotations is an interesting idea. Are you adding them proportionately to the page? For example, you have to add them to the right and bottom so that the page scales correctly as opposed to just on the right-hand side.

      0
  45. 72

    Would love to see an update on this article based on new features of Indesign CC (if applicable)

    1
  46. 73

    About prototyping with HTML5, CSS, and javascript? It seems to be the way to go with prototyping frameworks like Twitter Bootstrap available. In the end, you can end up with an incredibly interactive and informative prototype. Plus, you can easily prototype for mobile devices. But the best part is that you end up with code you can probably re-use for your production product, thereby reducing costs and saving time. For those that are using this approach, my permit.js plugin (http://technotarek.com/permit/permit.html) may come in handy too.

    0
  47. 74

    Is it possible to create a responsive PDF with this technique, to use it as an Ebook that can be read in multiple devices?

    0
  48. 75

    I like in Design too. If only they had stencils like omnigraffle. but I guess you could build your own library and copy and paste..

    0
  49. 76

    I’ve used InDesign for wire framing but never for this. I think I will now. Thanks for the extremely informative article.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top