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 focus thoughts regarding the chosen concept and the client will probably never see any of them. Use Adobe Illustrator and InDesign combined. Illustrator for creating most of the UI kit elements and InDesign for wireframing itself. Source: https://www.toptal.com/designers/adobe/adobe-cc-wireframe 49 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
Master pages Quickly and consistently apply global design elements like navigation, headers, footers and so on. Create as many master pages as you need, and on top of it, one master can be based on another. Solid grid support 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 Enable wireframes for multiple devices and orientations in the same file. CC Libraries 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, https://helpx.adobe.com/indesign/how-to/share-design-assets-library.html Layers Ability to organize, group, show/hide and lock/unlock objects and content selectively in the wireframe. Every page of a multi-page In- Design 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. 50 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
Export options Export a variety of formats. Interactive PDF Publish Online converts document to interactive HTML that can be viewed in desktop and mobile browsers. Exported file is hosted on Adobe servers. Share the URL or embed it into a site. Create and prepare templates and object assets by yourself. Most of this work will be done only once and after a few hours of work you ll be ready There are a lot of assets and wireframe kits that on the internet InDesign documents can t export directly as layered PSD files If visual design is in Adobe Photoshop and want to have separated wireframe elements, Export PSD wireframes to PDF first, then open that PDF in Illustrator and export as layered PSD. Free to script to save InDesign files as a layered PSD. https://indesignsecrets.com/save-indesign-files-layered-photoshop-files.php http://www.zenodesign.com/forum/pagetopslayersv6.zip 51 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
Create saved Workspace in Illustrator and InDesign 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 Invest some time in making your user interface assets kit first. Adobe Creative Cloud, CC Libraries store all your components. Create one Library for websites wireframing, other for ios application, third for Android applications and so on. https://helpx.adobe.com/indesign/how-to/share-design-assets-library.html Create library Open Libraries panel and choose Create New Library from additional drop-down menu. Assets put in libraries can be made and used in different Adobe desktop or mobile apps on all devices you log into with your Adobe ID. Libraries can contain colours, graphics, layer styles (Photoshop only), paragraph and character styles. You add asset in library by clicking on the corresponding button at the bot- 58 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
tom of CC Library panel with respective element selected. You can also add graphic assets by dragging them directly from your artboard to Libraries panel. Assets in libraries are organized by categories. Libraries are searchable, Creating Components Illustrator is a much better choice for drawing different kinds of elements As a rule of thumb, make all kit elements that request some drawing beyond basic geometric shapes in Illustrator and simpler elements, that contain text you ll need to change in layout, like simple buttons, in InDesign. 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. 59 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
Start by creating a new document for wireframe or mockup kit components. 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. You should use very limited colour palettes of preferably a few shades of grey. Visually accentuate elements that are more important by coloring them with darker shades, or by giving them bigger contrast. Adobe Illustrator assets in CC Libraries Assets you add to Libraries from Illustrator are linked by default. That means that when you modify a library asset in Illustrator, changes are reflected in all instances used. If you want to add unlinked asset to document press Option/Alt key while dragging it from the panel. When you use linked Illustrator assets in InDesign they have little cloud icon in the upper left corner when document is viewed in Normal mode 60 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
and they are all listed in Links panel. If you modify Library asset in Illustrator changes in the InDesign document won t be done automatically. Cloud icon will be replaced with Modified Link exclamation mark icon, and you ll have to update these links. 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 layout. InDesign Flexibility with Texts InDesign has a nice feature for filling text boxes with placeholder text. When you draw text box just make a right mouse click on it and choose Fill With Placeholder Text. You can easily add text box to Library like any other graphic element just by dragging. 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 61 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
Options to define Inset spacing. Adjust Vertical Justification of text inside a box by choosing desired option from Align drop-down menu. Creating InDesign Wireframe Templates Create InDesign templates for making wireframes. Start by creating a new document with Web or Digital Publishing Intent and define appropriate page size for the screens you are designing for. Since it is recommended that you use some kind of a grid for laying out your wireframe elements set up the margins and create column grid by setting number of columns and the gutter space. You can change those settings later from Layout > Margins and Columns with respective master page (or pages) selected in Pages panel. If you need horizontal guides and complementary vertical guides, create them manually or make additional grid by using Layout > Create Guides When creating grid you can help yourself with one of the online grid calculator tools like the Gridulator. You can also create additional templates for presentation purposes with 62 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
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. Keeping actual wireframe in separate document makes it easier to continue building from approved wireframes to polished visual design. When you make modifications on wireframe file just update it like any other link in presentation document, and ta-daaa! all changes are in your presentation too. In the Layers panel you can prepare separate layers for different kind of the content: user interface elements, interactive features, gestures, labels or notes. If you ll need more layers for a specific project you ll be able to easily add them anytime during the wireframing process. 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. 63 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
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 layout. Keep in mind that even when you override the element, it s parameters that you haven t change are still dependent on the Master. For example, if you override an 64 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
element and change it s color, it s size is still connected to Master s and if you change it on Master page it will also be modified on that element you previously overrided. When inserting additional pages to your wireframing document remember to base them on the respective master. If you need to change the Master for pages already in layout, select them in Pages panel, make a right click and choose Apply Master to Pages When you are finished with Masters, move along with pages for all screens of your project. Use Library assets and arrange them using Smart Guides and Align options to create final UI wireframe layout. IIf you are making design for more than one screen size, make alternate layouts from Layouts > Create Alternate Layout or Pages panel. You can use liquid layout rules when creating alternate layouts to automatically or semi-automatically adopt page elements from one size and orientation to another or you can manually control them. For applying and testing Liquid Layout Rules use Page Tool or open panel: Window > Interactive > Liquid Layout. 65 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
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 choosing one of the built-in Presets from drop-down menu and setting its properties. One object can have only one animation applied, but if you need to add more of them, group your object with empty box and use the new animation on that newly created object. And repeat that few times if needed. For objects you need to show different states create multi state object. Create object for each state. Object can be a single element (picture, text box, graphic) or a group of different elements. Open Window > Interactive > Object States panel, select all objects you created for multi state object and click on the New button at the panel bottom. After your multi state object is made you ll need to create buttons to go from one object state to another. Go To Next State or Go To Previous State actions reveal the specific object state with Go to State action. 66 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
If you want to have scrollable frame in your wireframe/prototype easiest way to create one is by using Universal Scrolling Frames extension from Ajar Productions. After you download and install extension you can use it as InDesign panel. For scrollable frame you ll need to make content and one frame for container. Content can be text frame, picture, or more elements combined. If using more than one element as a content don t forget to group them. When you are finished with making content and container box select the content and do Edit > Cut. Then select container and paste content inside by using Edit > Paste Into. Select container and using Universal Scrolling Frames adjust desired scroll direction. 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 whole document. Enlarge preview panel to your convenience. 67 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
If you haven t being using Adobe InDesign interactive features yet be prepared that they have some learning curve, but with a little practice and few trial and error attempts you ll quickly master them. 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 best way possible. For that purpose you ll need to export your wireframes in one of the formats your client can preview. Although InDesign files can be exported in variety of formats you are probably going to use the most common Interactive PDF, or Publish Online feature if testing functional low or high fidelity prototypes. To save as interactive PDF choose Adobe PDF (Interactive) from Format drop-down menu in Export dialog box and adjust properties as needed. Do not forget to tick Forms and Media if there are interactive elements that you want to include. Clients can view PDF wireframes in free Adobe Reader and write all their comments in that same file. 68 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis
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. Downside of Publish Online feature is that it doesn t have any additional control over the export and files are always stored at Adobe s servers. Also it s still preview feature and you can t be sure in which direction Adobe is going to develop it or even discontinue. Once your wireframe/prototype is exported it s time for testing, reviewing and iterating process to start 69 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis