Who Knew Adobe CC Could Wireframe?
Wireframing is a major step in designing any user interface whether a website, application or software product. Without distraction in the form of visuals,
Doing low fidelity wireframes and prototypes will help you test and iterate more often and in earlier phases, work faster and develop products that your users will love.
There are a lot of different wireframing tools to choose from in the wild. Which one you choose will depend on your personal preferences and workflow style.
Just like a lot of designers moving to digital design from the print world, I’m an expert in the Adobe applications like Illustrator, InDesign, and Photoshop. I can use them efficiently, everywhere and at any time (even if someone wakes me up in the middle of the night and refuses to give me a cup of coffee). However, these have also become the tools I use to do web and application visual design. So, for my workflow to be the most efficient I use them for wireframing too.
With every project, I usually start designing by doing very rough sketches on paper, or lately more often, if not near my office desk, on my iPad or smartphone screen. These sketches are there only to focus my thoughts regarding the chosen concept and the client will probably never see any of them. When I feel confident enough that my idea works, I jump right away into wireframing. I usually use Adobe Illustrator and InDesign combined. Illustrator for creating most of the UI kit elements and InDesign for wireframing itself.
In this article, I’ll explain a step by step process of how to incorporate those tools into your wireframing workflow as well. But, before I go into details, let me show you what the strengths and weaknesses are of using InDesign as a primary wireframing tool.
The Pros and Cons of Using Adobe InDesign as a Wireframe and Prototyping Tool
For some time now Adobe InDesign has been not only a desktop publishing application, but it’s also widely used for digital publishing and EPUB creation, and there are also some reasons why it is a suitable tool for wireframing too:
- Master pages – You can quickly and consistently apply global design elements like navigation, headers, footers and so on. You can create as many master pages as you need, and on top of it, one master can be based on another.
- Solid grid support – Allows you to create easily and apply different kinds of grids, complementing columns, horizontal and vertical guides to create modules, and subgrids for greater complexity and precision.
- Alternate layouts – Enables wireframes for multiple devices and orientations in the same file.
- CC Libraries – Give easy access and reuse different assets like commonly used objects,
colours , character and paragraph styles. Create assets in InDesign, Illustrator, Photoshop or with the Adobe Capture mobile app, whichever you prefer. - Layers – Provide you the ability to organize, group, show/hide and lock/unlock objects and content selectively in the wireframe. Every page of a multi-page InDesign document has the same number and order of layers. All of the changes you make to layers are reflected on all pages, like visibility, stacking order or deletion.
- Styles and tables – Give complete control over the look of your text,
objects and tables through the use of InDesign styles. Styles can be based on each other providing the ability to cascade desired formatting easily throughout the document. Creation and formatting of tables that you can use as wireframe content elements or even helpers for layout purposeis very simple. - Typekit integration – In high fidelity mock-ups, you can use any of the Typekit fonts that sync to the desktop.
- Interactivity and animations – You can use Adobe InDesign built-in interactivity and animation features to create different states of the web or application design for interaction. Most people use these features while creating magazines for Digital Publishing Solution and fixed layout EPUB export but they can be suited for prototyping as well.
- Export options – InDesign can export the wireframes and prototypes you create in a variety of formats. Interactive PDF will probably be your format of choice in the majority of cases, but you can also use quite new Publish Online Feature to convert your document to interactive HTML that can be viewed in modern desktop and mobile browsers. Unfortunately, you don’t have any control over the export using Publish Online, and exported file is hosted on Adobe servers. You can share the prototype URL to your client, or embed it into your site. For more control and direct export to HTML5 you can use the in5 extension from Ajar Productions.
Adobe InDesign has many pros to be used as a wireframe and prototyping tool, but it also has some disadvantages:
- Lack of predefined wireframe templates and elements – Since InDesign is not meant to be a wireframing tool, you have to create and prepare templates and object assets by yourself. (I’ll show you how to make that preparation step later in this article.) The good news is that most of this work will be done only once and after a few hours of work you’ll be ready to jump start your InDesign wireframing. Also, there are a lot of assets and wireframe kits that you can download from the internet, so there is no need to draw everything yourself.
- Interactivity and animation features are limited and can be time-consuming – Although you can easily connect pages and add some interactivity and animations that process sometimes takes a long time. Some of the simple interactions can not be achieved simply, and you have to figure out how to do it. If you haven’t been using InDesign interactivity features yet, you’ll have a slight learning curve before you’ll be able to apply them efficiently.
- InDesign documents can’t export directly as layered PSD files – If you do your visual design in Adobe Photoshop and want to have separated wireframe elements from building your design on, then you have to export your wireframes to PDF first, then open that PDF in Illustrator and export as layered PSD. People working on the Mac can also use a free script written by Rob Day to save InDesign files as a layered PSD.
Good Wireframe Preparation is Half of the Work
Start by fine tuning your working environment. If you do not already have a saved Workspace in Illustrator and InDesign for this kind of work, create one. In Illustrator start with predefined Web workspace and adapt it to your convenience: close panels you will not use often and open the ones you will, then rearrange them to suit your work style. When done, save the workspace by choosing Window > Workspace > New Workspace… Do the same thing in InDesign using Digital Publishing workspace as a starter.
Assembling Wireframe/Mockup/Prototype Kits
Efficient wireframing workflow using Illustrator and InDesign requests that you invest some time in making your user interface assets kit first. Since the introduction of Adobe Creative Cloud, CC Libraries are the best way for storing all your UI kits components.
You can create one or more Libraries for wireframing and prototyping purposes. For example, you can create one Library for websites wireframing, other for iOS application, third for Android applications and so on.
To create library Open Libraries panel and choose Create New Library from
Creating Kits Components
Although Adobe InDesign has some basic drawing tools that are pretty similar to Illustrator’s, Illustrator is a much better choice for drawing different kinds of elements in your wireframe. As a rule of thumb, make all kit elements that request some drawing beyond basic geometric shapes in Illustrator and simpler elements, that contain
For starters, make a list of all the elements in the wireframe you’ll need, like navigation elements, page elements including images, video frames and text boxes, icons, avatars, form elements and all other interface elements. After your list is completed you can head to Illustrator and InDesign for elements creation. Start by creating a new document for wireframe or mockup kit components. Double-check that you choose either Web/Devices Profile in Illustrator or Web/Digital Publishing Intent from New Document dialog box, so pixels are used as units, and color mode is RGB.
Make wireframe kit assets as simple as possible, because they need to give fast visual cues for what they represent without been too much detailed. You should use very limited
Adobe Illustrator assets in CC Libraries
Assets you add to Libraries from Illustrator are linked by default (since Adobe CC 2015). That means that when you modify a library asset in Illustrator, changes are reflected in all instances used. If you want to add
When you use linked Illustrator assets in InDesign they have little cloud icon in the upper left corner when
InDesign assets you place in InDesign document are not linked. That means that you can edit instances independently of the original, and when the original asset is modified those changes are not reflected on assets you already put into
Use those properties when creating wireframes on your behalf: add assets to Library from Illustrator when you assume they’ll need to be modified and updated globally or add them from InDesign when you know you’ll want to modify them individually. Note that you can also make graphics in Illustrator and then Copy/Paste them to InDesign, modify if needed and then add to Library as InDesign asset.
If you happen to forgot which graphic asset is created by which application look at the right side of each item in Library panel while using Show items as a list preview more.
Adobe InDesign Flexibility with Texts
Since you’ll probably want to be able to easily change texts and its formatting create
Consider to make button UI elements in InDesign too. To create a button, make text frame first, type respective text in it and then use Object > Text Frame Options to define Inset spacing. Adjust Vertical Justification of text inside a box by choosing desired option from Align drop-down menu. Switch to Auto-Size tab and choose appropriate Auto-Sizing (that would probably be Width Only), and convenient reference point. If you do not want let InDesign break your text in more than a one line check No Line Breaks option.
Give Yourself a Hand
There are
If you are designing for a particular platform, for
Creating InDesign Wireframe Templates
There is another important preparation step left that you also need to do: create InDesign templates you’ll use for making wireframes. Start by creating a new document with
You can also create additional templates for presentation purposes with device mockup as a frame for your wireframes. Since one InDesign document can be placed into another, you can create wireframes in one InDesign document and then place it into another one for presentation purposes. Although it might seem complicated at first it is actually very simple and offers effective workflow. Keeping actual wireframe in separate document makes it easier to continue building from approved wireframes to polished visual design. On the other hand, you have presentation ready template to place wireframes into, add labels and comments and you are all set up to show your best to the client. When you make modifications on wireframe file just update it like any other link in presentation
In the Layers
When you are done with creating save your templates as InDesign .indt template files. After all the templates you need are saved you are finally ready to start with wireframing efficiently.
Building Wireframes
First things first – start with the Master page. Drag all elements that will be the same on all screens of your project from Library. If you are designing website those are usually headers with logo and navigation and footer. Since you can make more than one Master page and they can be based on each other don’t forget to take advantage of that feature. For example, depending on the project, you can create a Master page for one website category, then make new Masters based on the first one and change on them only elements that need to be different for other categories you’re also having.
You can’t select, change or delete Master elements on regular document pages unless you click on them while holding Command/Control + Shift to override the master. Once your element is overridden you can change any of its parameters or completely delete it from
If you are making
Adding interactivity
Adobe InDesign has a bunch of interactivity features that you can take advantage of when creating wireframes or prototypes. Which features you’ll include depends on the final format you plan to save your wireframes, prototypes or presentation into. If you are exporting as PDF, interactivity is limited but you can at least make links between screens work. You’ll use Hyperlinks panel to create them. Select the item you want to behave as a link and click on New Hyperlink icon. From Link To drop down menu choose Page and enter desired page number. Repeat that action on all items you want to behave as links between the screens. You can also add hyperlinks to objects residing on the Master pages, and that can be a real time saver: create links on Master page once and they will work on all screens of your document.
Another interactive feature that you can use in interactive PDF format is
You can create
If you want to convert your document to HTML prototype using InDesign CC 2015 Publish Online feature you can use much more interactive options like animations, multistate objects, multiple button actions, including all those intended for SWF/EPUB export.
You can add simple animations using Animation panel and
If you want to have
By combining buttons, multistate objects, animations and scrollable frames you can achieve rich interactive experience.
To test interactivity in InDesign use EPUB Interactivity Preview panel. You can preview single page or
If you haven’t
Exporting finished documents
When you are done with the wireframe and presentation file making all that is left is show your great ideas to the client in
You can also use PDF document you export from InDesign to create InVision (or some other tool that supports PDFs) prototype. If your standard prototyping tool, perhaps Marvel, can’t import PDF export your InDesign wireframe pages as JPEG or PNG images.
To export interactive HTML prototype that can be seen in modern browsers on different devices go to File > Publish Online or click on the Publish Online button from Application Bar. After the document is prepared to be published online and then uploaded you can copy document URL to share with all the stakeholders and start with reviewing process. You can also embed that published prototype on your site.