49 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis49 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

Start designing by doing very rough sketches on paper, or lately more of-ten, if not near my office desk, on my iPad or smartphone screen. These sketches focus thoughts regarding the chosen concept and the cli-ent 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 wire-framing itself.

Source: https://www.toptal.com/designers/adobe/adobe-cc-wireframe

50 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis50 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design ToolMaster 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, comple-menting columns, horizontal and vertical guides to create modules, and subgrids for greater complexity and precision.Alternate layouts – Enable wireframes for multiple devices and orienta-tions in the same file.CC Libraries – Access and reuse different assets like commonly used ob-jects, 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, stack-ing order or deletion.Styles and tables – Give complete control over the look of your text, ob-jects 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.

51 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis51 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

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 serv-ers. 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 readyThere 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 wire-frame 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

58 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis58 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

Create saved Workspace in Illustrator and InDesignSave 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 KitsInvest 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.htmlCreate 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), para-graph and character styles. You add asset in library by clicking on the corresponding button at the bot-

59 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis59 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

tom of CC Library panel with respective element selected. You can also add graphic assets by dragging them directly from your artboard to Li-braries panel. Assets in libraries are organized by categories. Libraries are searchable,

Creating ComponentsIllustrator is a much better choice for drawing different kinds of elements As a rule of thumb, make all kit elements that request some drawing be-yond basic geometric shapes in Illustrator and simpler elements, that con-tain 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.

60 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis60 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

Start by creating a new document for wireframe or mockup kit compo-nents. 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 lim-ited 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 LibrariesAssets 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 docu-ment 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

61 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis61 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

and they are all listed in Links panel. If you modify Library asset in Illustrator changes in the InDesign docu-ment won’t be done automatically. Cloud icon will be replaced with Modi-fied 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 as-sets you already put into layout.

InDesign Flexibility with TextsInDesign 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

62 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis62 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

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 TemplatesCreate 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

63 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis63 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

device mockup as a frame for your wireframes. Since one InDesign docu-ment can be placed into another, you can create wireframes in one InDe-sign document and then place it into another one for presentation pur-poses. Keeping actual wireframe in separate document makes it easier to con-tinue 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.

64 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis64 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis

Adobe CC as Wireframe and Web Design Tool

Building WireframesFirst 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

65 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis65 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.

Adobe CC as Wireframe and Web Design Tool

66 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis66 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 op-tions 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 anima-tion 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.

Adobe CC as Wireframe and Web Design Tool

67 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis67 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 ele-ments combined. If using more than one element as a content don’t for-get to group them. When you are finished with making content and con-tainer 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.

Adobe CC as Wireframe and Web Design Tool

68 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis68 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 pre-pared 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 pro-totypes. 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 ele-ments that you want to include. Clients can view PDF wireframes in free Adobe Reader and write all their comments in that same file.

69 New York City College of Technology • The City University of New York • Department of Communication Design • COMD 2427 Typographic Design III • John De Santis69 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 InVi-sion (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 brows-ers 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 Ado-be 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

Adobe CC as Wireframe and Web Design Tool