Explore old print tricks for wireframes and new techniques for rapid prototypes
As a designer who first fell in love with print design that I saw in magazines like Vogue, I started my career resizing print ads and creating long technical printed books. Through these teeth-cutting projects, I became proficient in InDesign—the industry standard print layout program—an extremely efficient tool for creating consistent, standard layouts.
The demand for online design work continues to grow, along with the need for wireframes and prototypes to accompany visual design comps. As a designer, why learn an inferior layout program like Visio or PowerPoint for this work? In this blog, I’ll touch on the older features you loved as a print designer that will make wireframes more efficient as well as the new interactive features that make simple prototyping a breeze.
Remember that InDesign is primarily a layout program—used to design pages, place artwork and set type. The first feature you’ll want to use for your wireframes are all the settings under the ‘New Document’ menu. Here you’ll be able to customize and make laying out your page easy and efficient. Start by going to New > Document and you’ll get the menu below:
You probably think you’re already familiar with these settings—I did too. But there are additional items that make creating wireframes much easier. For instance, be sure to select the correct “Intent” for your file. Selecting “Web” will give you document the correct color space (RGB), the right units (pixels) and the option to choose from popular screen sizes (I use 1024 px x 768 px). Don’t forget to take advantage of the columns, gutter and margins settings as well. You’ve depended on these for your print designs and you’d be shocked to see how difficult it is to create consistent columns and gutters in other programs like PowerPoint.
Another InDesign feature for wireframes is the ability to place any type of file without losing quality. In print design you follow the same model: use Photoshop to modify your images, Illustrator for drawings or advanced typographical effects and finally InDesign to typeset and place your images, drawings and logos into layout. While InDesign has some drawing tools (the pen, pathfinder and the various anchor point tools) and photo editing tools (eye dropper and the gradient tools) none of these features can compare those tools in Illustrator or Photoshop. Use the same model you’ve used in print. Create your artwork in the programs you already know (and love) then place them into your layout. By creating artwork in Photoshop, you can even leverage some of it for your final artwork.
The biggest timesaving feature InDesign has is the ability to create styles. We all remember how much time styles saved us when creating printed books and brochures. Plus style functionality aligns closely to Cascading Style Sheets developers use to create web pages so that gives us all the more reason to take advantage of them. I name paragraph styles “H1, H2 or paragraph…” and give them all the attributes you’d assign any headline (font family, font style, size, leading/line spacing and color, etc…). Utilize character styles for links within text and object styles for images. Creating tables and using table styles become extremely useful when designing layouts for online. Tables allow you to create evenly distributed objects, easily and quickly change the text within those table cells. See the example below for on an online report I wireframed:
Here, I was able to quickly create even columns for these “question buttons” as well as add separate correct, incorrect and skipped icons by simply pasting them into the cells. I was also able to create a cell style for each “box” then apply the paragraph style to the numbers so I could style (and later change them) them all at once. Finally, I was able to apply the paragraph style to the cell style. See below:
Your can remove the outline and guides for tables so your wireframes look clean and professional. See below:
A few more features to take advantage of for your wireframes are using master pages for consistent items (headers, logos, navigation and search functionality) and using multiple pages for various scenarios that need to be covered and layers for multiple states.
The usability of InDesign as a wireframing tool is endless and to keep with the changing times, Adobe has added even more interactive features to add simple interactions to your wireframes.
InDesign’s interactive features are relatively simple compared to other protoyping programs. But I have been able to create hyperlinks, buttons with multiple states, flyouts and simple animations with them. These relatively simple interactions can save you time and money when communicating with clients and developers on your designs.
You can communicate a lot in your wireframes using the hyperlinks palette (Window > Interactive > Hyperlinks). Any text, text frame or graphic can be made into a hyperlink. Six types of destinations can be created. See options below:
You can assign your hyperlinks a character style, give them a rectangular outline, highlight (different look for when the hyperlink is clicked) as well as customize the look of your rectangular outline. I was able to quickly demonstrate intended functionality like this example for an interactive online report that prints to a PDF. Here, I added a hyperlink with a “File” destination to the “print report” link in the upper right corner of the online report to show that the PDF wireframe will launch when the user clicks on this link. I started by selecting the text frame around the words “print report” then I went to Window > Interactive > Hyperlink. I selected the “Link to: File” option then clicked on the folder icon next to “Path:”, navigated to my PDF Wireframe and clicked “Open.” Finally, I customized my appearance. I did not use a visible rectangle and simply select outline as my highlight style. See settings below:
Now when walking a client through a wireframe, I can simply click on the hyperlink I created and it launches the PDF wireframe just like the report will function when it is built.
Another simple and useful interactive feature in InDesign is the ability to create buttons with multiple states. This is a quick and easy way to show your client how you intend your buttons to behave. You can create a look for a button’s Normal (default), Rollover and Click state. Before you create your three states, you’re going to want to design them. I would recommend creating three versions of your button design for each state ahead of time because going back and changing the appearance of states is not easy. See below:
Now place your Normal version of your button on the layout where you want it to appear.
1. Select the normal state of your button as a grouped object and go to Window > Interactive > Buttons and Forms
2. Under Type, Select “Button”. You will notice that under Appearance, you will notice that the normal row is highlighted. You have just created your normal or default state.
3. Now click on the next state under normal you would like to format and make any changes you want. I reversed my gradient.
4. Click on the third, and final, state and make any changes desired. I modify the drop shadow on the button text. Your button is created, now all you have to do is preview it.
5. Click the SWF preview icon at the bottom left of the Buttons and forms palette.
You’ll want to resize the window because it’s very small by default. Now, hover and click on the button and see how your states work. See the SWF Preview palette below:
InDesign’s animation features also provide a quick and easy way to show clients and developers your vision. The animation palette in InDesign has the same presets found in Flash. See presets below:
You can start with a preset and then customize the event (what triggers the animation), the duration, speed and animation properties. I used the animation palette to demonstrate my concept for a “marketing flyout”. I wanted a small marketing box that would be frozen at the bottom right of the page fold until a user clicks on it. Then it expands to fill the width of the page and grows larger to reveal marketing language and links to more information. To create this effect in InDesign, I took the wireframe for the expanded marketing flyout and placed it where I wanted it to appear by default. See below:
Then I went to Window > Interactive > Animation. I gave my animation a name: “marketing flyout” and selected “Move Left” as my preset. For the event, I chose “On Click (Self).” The animation is now setup. All that is left is to customize the animation path. When you add an animation to your object, your animation path will show. See the path in green.
I had to use trial and error to get the effect I wanted. I was able to change the path with the selection tool and then make the marketing box move up by selecting one side with the direct selection tool and dragging it upwards. Keep using the SWF preview to see how everything is working.
Now that you have created all these layouts and effects, how can you save them to show to your clients or developers? I was afraid to ask this question when I first read about these features. But the answer is surprisingly simple. Interactive layouts can be exported to .pdf, .swf, .fla, or .xhtml (but it is not usable). I usually export to .pdf because I am only using these files for showing examples and not for reuse on the web. Always select “Adobe PDF (Interactive)” when you export (File > Export > Adobe PDF (Interactive). From here you have a lot of the same options you will remember from making print PDFs like page range and view after export, but there are more interactive features that are useful like compression, resolution and page transitions. See the options below:
Although I have given you a lot of reasons to use InDesign for wireframes and prototypes, there are a few drawbacks to using it too. Not many professionals are using InDesign for interactive projects so it is difficult to find tutorials. But Adobe offers a lot of resources which can be found here. InDesign is also not great for complex interactions it does better with creating very simple ones. Also, unlike some other prototyping tools, you cannot reuse any of the HTML code. However, especially as a designer who is well versed in InDesign already, I think you will find that the benefits greatly outweigh the downsides to using this traditional print publishing program for interactive projects.