Adobe Proto: Creating interactive wireframes on your tablet

Adobe Proto is no longer supported or available for purchase. To learn more, see the Adobe blog post, Refocusing our Touch App development.

It's no surprise that the tablet environment was the catalyst for developing such an efficient and effective tool for wireframing interactive layouts. Much like a pen and paper, Adobe Proto provides a similar sense of creative freedom and flexibility. But it has the added benefit of automatically converting your scribbled lines to clean design elements and your doodled video players, buttons, and forms to functional prototype controls that can be scaled, accurately positioned, grouped, duplicated, and easily linked to additional pages (see Figure 2).

There's a simplicity and brilliance to Adobe Proto that can make it feel like a bit of a novelty at first because it's so fun and easy to use. However, the novelty does eventually wear off, and it's only when you really start to work with it that you begin to realize its usefulness in real-world scenarios. Adobe Proto is integrated with Adobe Creative Cloud, allowing you to share your prototypes with others and download them for further editing in Adobe Dreamweaver.

It is very likely that you will figure out the majority of the functionality in Adobe Proto within 20 minutes of opening the application. Unlike Adobe's high-powered Creative Suite applications, Adobe Proto has one simple purpose: to prototype websites and web applications. It does this very well, and it is getting better all the time, thanks to recent updates from Adobe.

Once you have downloaded and installed Adobe Proto for your iPad or Android tablet, open it up and supply the information for your Creative Cloud account. If you don't have one, a free 2GB version is available to get you started.

Adobe Proto does not care whether you work in landscape or portrait orientation. Start a new project by touching the Plus (+) button at the bottom of your screen. You will then see a CSS grid displayed, along with a drop-down menu of popular mobile and web layout sizes and some additional options for laying out your design grid (see Figure 3). You can put some deeper thought into this later, but for now, just choose the default layout and don't worry about how your columns and gutters are set up. Tap the Create button and you are ready to go.

You can create wireframe elements by either drawing them with a finger gesture or placing them in your project using a toolbar selection and your finger. To try each method, start by selecting the Pencil tool and simply draw an X on the page at the size and shape you might imagine an image on your website to be. The X will automatically turn into an image placeholder for your prototype. Now select the Image tool. You can place the image on the page in one of two ways: If you click and drag on the page, it will be placed and sized as you would expect, similar to drawing a rectangle or using the Marquee tool in other Adobe applications. Alternatively, you can simply tap the page, and the image will be placed at a default size.

To scale the image after placement, just touch it, and the scaling handles will be exposed. You can now scale or move the object by dragging. Smart Guides and position coordinates are automatically displayed to help you align and position your elements. If your objects are not snapping to the display grid, ensure the Snap To Grid option is enabled by tapping the Grid button at the top of your screen.

All the components in the toolbar can be placed in the same manner. When a tool such as Text is selected, a Properties toolbar will appear on the page with additional properties for the selected item, such as font size, color, and paragraph alignment.

Not all the wireframe elements can be created with stroke gestures, but the most common layout components can be (see Figure 4).

Tip: It takes a while to remember all the gestures. To show the Gesture Guide when you are in the drawing mode, go to your project index, and in the upper right corner, you will see a gear icon. Select that and then choose Preferences. Turn on the Show Gesture Guide While Sketching option.

To group objects, select the Group button next to the trash can icon. Select the items you want to group one at a time and then press the Group button (see Figure 5). Ungrouping can be accomplished through any group's submenu when it is selected.

You can duplicate objects or groups by making your selection and choosing Duplicate from the object's submenu. A different approach is to use the multitouch method of touching and holding the object that you want to duplicate and then tapping the screen with another finger to duplicate the object as many times as necessary.

The page icon in the upper right corner of your project enables you to add additional pages to your project. Just tap the icon and select New Page. When you select something that might typically be linked to another page in a website, such as a button or menu item, the Properties menu will appear and the Link To drop-down menu will include your new page (see Figure 6). Select the page to link that element to the new page. This design element now becomes a working control when you preview the project.

When your project is ready to preview, simply tap the eyeball icon in the upper right. You can now see your interactive project in a browsing environment, and you can navigate it the same way you would any other website (see Figure 7).

Uploading to Creative Cloud is automatic. Just go back to your project index. You will see your project has been saved and synched with Creative Cloud. From there, you can share and review Adobe Proto projects with clients, or you can download them and import them to Adobe Dreamweaver.

The Adobe Proto Extension for Dreamweaver can be downloaded from Adobe Labs. This extension enables you to open and edit Adobe Proto .pro files in recent versions of Adobe Dreamweaver, so you can use them as a starting point for an actual design or further edit and refine them. The extension is installed using Adobe Extension Manager.

To try it, log into your Creative Cloud account to view your Adobe Proto files. Select the file you want, and the download icon will appear. Click that icon and, when prompted, choose Original as the file format. Then click the Download button to save it to your local machine.

Open Dreamweaver and choose File > Open from the main menu. In the dialog box, select Adobe Proto Files or All Files from the Enable drop-down menu, and select your .pro project file. After opening, you will notice the project's HTML, CSS, jQuery, and other files appear in your Files window (see Figure 8). From here, you are free to do whatever you want.

A great looking website is something you strive for, but if it doesn't produce the desired actions from your visitors, then you are missing opportunities or possibly losing sales. You want to ensure that site visitors can easily take an action that is important to your business, whether that action is making an e-commerce purchase, signing up for a trial product or service, or even subscribing to a newsletter like Adobe Inspire.

With Adobe Proto, I can quickly plan multiple page variations, which can then be developed and used for A/B testing to determine which page designs are producing the best results. This can be very useful for anyone who is focused on measuring results and improving the conversion funnel on their website. One trick I use while I am designing page variations is to create a simple horizontal rule and place it as a visual reference for material that would be seen above the fold (without scrolling) on my target audience's browser. As I move my horizontal line, Adobe Proto tells me in pixels exactly how far down the page my line is placed, by referencing the object's x and y coordinates.