Adobe Proto

Pros: Adobe’s new Proto touch app wins points for being fun, easy to use, and for making you look cool and up on the latest trends when you’re with clients.

Cons: Although Proto is great for creating wireframes for small sites,

it’s not going to replace more professional tools, such OmniGraffle or Microsoft Visio.

Rating: 7/10

If you’ve ever sat down with pen and paper to sketch out a website’s structure before you started building it, you’ll appreciate how much easier it is to create clean lines and neatly arranged menu items when you mock up a website with Adobe’s $9.99 Proto touch app.

Designed for anyone creating a website — especially those of us who create sites for clients — Proto is a touch-screen app you can use to design simple site structures, commonly calledwireframes, using a tablet device.

Proto wins points for the cool factor. The touch-screen interface and gesture-based features make it fun to use. And the tools and menus are intuitive.

Proto may even make you more money. As one Web designer remarked when I showed her the app, “I might be able to charge clients more because it makes me look like I’m up on the latest technology.”

You can set links and include interactive navigation features in Proto wireframes, and you can use the program’s preview mode to demonstrate how links will work in a website.

Click the image below to see a larger version:

But before you get too excited about Proto, be aware that there are a few limitations:

1. The first version of the app, released in October 2011, only works on Android devices, and it’s optimized to work best on the Samsung Galaxy Tab. In several hours of testing on the Galaxy Tab, Proto didn’t crash once, but performance on other Android devices may not be as good. A friend who tested it on the Motorola Xoom found the app so slow that he really couldn’t use it. Adobe says we can expect an announcement regarding a version for the iPad by early 2012.

2. Proto is best for small websites. If you’re used to creating wireframes for large sites with a high-end tool such as the $99 OmniGraffle or $249 Microsoft Visio, don’t expect to replace either of those with Proto.

3. Although you can transfer your Proto site projects to your computer and open them in Dreamweaver, I don’t recommend you use the HTML and CSS that Proto generates, which doesn’t follow current Web standards.

Click the image below to see a larger version:

As the above figure shows, when you open a Proto Project in Dreamweaver and look at the code behind the scenes, you’ll see that it’s created using AP Divs. Although AP Divs make it easy to position elements precisely on a page, which is part of why Proto is so easy to use, they create very rigid designs that don’t adapt well to different monitor sizes and don’t lend themselves to creating semantic websites, which is highly recommended by the W3C.

Not being able to use the code created by Proto in Dreamweaver may seem like a big limitation. It would certainly be nice if you could get a head start with Proto, but in fairness to this new app, most wireframe tools, including Microsoft Visio, don’t generate HTML code you can use, either. In practice, most people who create wireframes use them purely as a planning tool and a way to get client approval before starting to building the code behind the scenes of a Web page.

Features and Tools
Proto works as you’d expect a touch app to work. You tap your finger on the screen to select an element, tool, or menu item, and you can draw boxes and other things by dragging a finger across the screen.

Click the image below to see a larger version:

Like most Android apps, Proto installs with a touch. After it’s downloaded to your tablet device, you launch it by tapping on the icon with your finger. In the figure below, you see the icons for five of Adobe’s touch-screen apps. From left to right across the top row are Collage, Debut, Ideas, Kuler, and Proto. (The other Adobe touch app, Photoshop Touch, is on the next screen.)

Click the image below to see a larger version:

When you first launch Proto, you can choose to create a new project or open one of seven sample files included with the app. If you create a new project, a new blank page opens automatically. Tap the Grid icon (third from the right in the top-right corner) and you can choose to turn the grid on or off and control the spacing. The grids, and the snap-to-grid feature are very handy for aligning elements.

Click the image below to see a larger version:

On the left side of the screen is a Toolbar with nine icons, four of which reveal additional options when tapped. Touch any icon to make the tool active. For example, tap the DIV icon and you can then draw a line anywhere on the screen. The line turns into a box to represent a div tag. Tap on the line and circles appear on the corners; tap and drag on a circle and you can expand or contract the box.

Click the image below to see a larger version:

The Pencil tool enables you to draw a number of things on the page. For example, draw a rectangle and it turns into a div tag. You can also use the Pencil tool to activate a number of gesture-based elements. This takes a little getting used to, but it’s definitely one of the most innovative elements of the app. For example, if you select the pencil and draw a squiggly line with your finger, Proto turns it into a heading, as you see in the figure below. Draw an X and Proto turns it into an image box. Proto supports 11 gestures.

Click the image below to see a larger version:

You can also enter text using the (you guessed it) Text tool. Tap the T icon, then tap your finger where you want a heading, and Proto automatically enters Lorem Ipsum placeholder text. To edit it, tap twice on the text and a keyboard appears on the screen. When you’re done typing, double-tap anywhere else on the screen to close the keyboard. To position text, tap once to select it, then touch and drag to move it. Easy peasy.

Click the image below to see a larger version:

Tapping on the Text icon in the Toolbar reveals two options: Text Heading and Para Text. Choose Para Text and you can touch and drag to create a text box, automatically filled with placeholder text. Double-tap on any text box to reveal font formatting options that you can use to change the font face, size, and alignment. Although there is a color palette icon, tapping it reveals only black, white, and four shades of gray. This may seem like a limitation to a designer, but most people who create wireframes intentionally limit design elements, such as colors, because the goal of a wireframes is to work out the functionality of a site, not its design. Similarly, the paragraph text is limited to Lorem Ipsum. You can edit headings and menu items, but you can’t easily enter paragraphs of text in Proto.

Click the image below to see a larger version:

You can draw image placeholders by tapping the image icon (it looks like a box with an image of a mountain range and a sun). With the Image tool selected, tap anywhere on the screen and an image placeholder appears, distinguished by the X in the box. To change the size, tap the box, then tap and drag any of the corners. To reposition, tap in the middle of the box and drag.

Click the image below to see a larger version:

You’ll also find common form elements when you tap on the Form tool. Proto has six form field options that fly out from the Form tool (shown below). Like the other tools, click to select the form element you want, such as a radio button or a check box, and then tap anywhere in the design area to add it to your wireframe page.

Click the image below to see a larger version:

You can create multiple pages in each Proto project. To add a new page, tap on the icon that looks like a page (it’s second from the left in the top-right menu bar). This opens the page list, which displays all of the pages in any open project. In the figure below, you can see the two pages I created in this project. To add a blank page, tap on the Create New Page box at the bottom of the pages list. You can also duplicate any page — a great way to save time when you’re making a series of pages that share the same elements. To duplicate a page, first tap to select the page in the page list that you want to duplicate. This adds a black circle with three lines in it to the left of the selected page. Tap that circle, and you open a fly-out menu (shown below). Tap the word Duplicate and Proto adds a copy of the selected page to the page list. To edit any page in the page list, tap to select it and it opens in the main workspace.

Click the image below to see a larger version:

Most websites feature a collection of links that are commonly referred to as a navigation bar. Proto includes a tool you can use to add horizontal and vertical navigation bars. Other navigation options include breadcrumbs, an accordion menu, and a tab bar. To reveal these options, tap on the last icon at the bottom of the Toolbar (shown below). You can then tap to select any one of the icons and then tap anywhere on the page to insert the navigation element. Similar to other features, after a navigation element inserted into the page, you can tap and drag on any corner to resize it and tap the middle and drag to reposition.

Click the image below to see a larger version:

To edit the text in a Navigation Bar (or any other menu option), double-tap on any button and the keyboard appears. Simply type in the text you want.

Click the image below to see a larger version:

You can link navigation buttons to different pages in your project. Tap once on any navigation button to open the formatting menu at the bottom of the screen (shown open in the figure below). Tap Select Item to Link to open the drop-down list, and then tap the navigation button name you want to turn into a link. With that button selected, tap the Link drop-down list to list all pages in the project. Tap to select the page you want to link the button to, and the link is automatically set. To test links or preview the wireframe, tap the icon in the top-right corner that looks like an eye (it’s third from the left). This option displays the active page in a preview window that works much like a Web browser. Click on any link you’ve set and the corresponding linked page opens. The preview option also enables you to interact with the Accordion Menu, Tab Menu, and other interactive navigation features in Proto.

Click the image below to see a larger version:

When you finish your project, you can transfer it to Adobe’s new Creative Cloud and view it online (as you see in the figure below). You can also use Creative Cloud to share a Proto wireframe project with a client or another member of your Web team. And once you’ve uploaded a project to the cloud, you can download it from there to a computer. Going through Creative Cloud is the only way to get a project from a tablet device to your computer. Note that you need an Adobe ID (which is free) to use Creative Cloud.

Click the image below to see a larger version:

The Bottom Line
Despite the caveats I mentioned at the beginning of this review, I rather enjoyed creating a few website mock-ups with Proto. I think it will be a useful tool the next time I sit down with a new client to rough out a quick site design for a small project.

If you decide it’s worth $9.99 to try the app, the information above should get you started. There’s also a basic training video on the Proto section of Adobe’s website. Other than that, Adobe hasn’t released much Proto documentation, and there are no help files in the app itself.