Create Great Wireframes With Adobe Proto

Recently, I’ve been spending quite some time with my iPad in a web design context for a few articles over at Tuts+, and had the chance to use some fantastic iPad apps that are disrupting one of the core stereotypes of the iPad, its uselessness for content creation. I’ve came to the conclusion that the iPad is the perfect device for planning projects like web design, acting as a great canvas for producing and sharing plans, prototypes and ideas.

Adobe Proto is an app that’s leading the way to disrupting this meme of a tablet not being fit for productivity. The app is all about planning and prototyping ideas in wireframes consisting of a number of stock elements and even adhering to popular CSS grid systems.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Getting Started

When you first open the Adobe Proto app, you’ll be able open some preloaded sample wireframes, which can be a useful way of getting to grips with the software. However, should you want to just jump right into creating your own, you need only tap on the plus icon at the bottom of the app.

The “New Wireframe” modal allows you to setup your new canvas with just a few details. You’ll first need to select a template, which defines the width of your wireframe. There are a number available, all centred around the popular widths of browsing on various platforms (ie 960px for the web, 320px and 480px for mobile, 768px for portrait tablets).

To setup your wireframe as part of a grid system, you need only define the number of columns (from eight to sixteen) and the gutter space between them (from eight to 28). Conveniently, without even needing to create the wireframe, Adobe Proto will calculate the column and margin widths, so you’re able to adjust if needed.

When everything’s setup just how you’d like, you only need to hit the “Create” button to setup your first wireframe.

The UI of Adobe Proto, as explained in-app.

Creating Your First Wireframe

Once you’ve entered the details and chosen to create your wireframe, Adobe Proto is ready for you to start building up your design.

The setup is pretty similar to Adobe’s other apps on the iPad, the canvas dominating the screen while a set of tools stay fixed on the left side. All the components you’ll use to build your wireframe are located in this left-aligned toolbox, including text across the hierarchy, form fields, media placeholders, menus and more.

To insert one into your wireframe, simply select it in the toolbox. Then, you can simply tap on the wireframe canvas to insert it. Alternatively, if you drag instead of simply tapping once, the element will be sized to fit the area you draw out, both vertically and horizontally. You can, of course, resize and manipulate in retrospect.

Adjusting an element in Adobe Proto.

Once an element is in place, it’s really easy to delete or duplicate, with the options appearing when tapping on the button that appears right next to an element when it’s selected. You can also manipulate various aspects of the element when it’s selected (such as font type, size and alignment in a paragraph placeholder), through a contextual panel that appears at the bottom of the screen.

Gestures

Creating a wireframe with the toolbox items is great, but it’s only one way of doing things. This is where the iPad really lives up to me calling it the perfect device for this sort of thing.

By tapping on the pen icon in the toolbox, you’ll enable a “gesture mode” of sorts. Using the patterns shown in the modal that appears, you can create icons by just drawing them out on the wireframe itself. For example, four vertical lines will create a navigation bar, while a triangle will create a video placeholder.

It might take a while to learn the gestures, but this is a really innovative and, to be honest, fun way of doing things. It’s certainly something that wouldn’t be a common practice without the iPad, and familiarity with the device results in it being quite the intuitive experience.

A gesture being drawn out in Adobe Proto.

Other Notes

Once you’ve done with one page, by tapping on the paper sheet icon in the top-right corner gives you the ability to create multiple pages in the same project. It’s super handy to have everything grouped together on a per-project basis.

It’s also worth noting you can hit the eye button in the top row of buttons in the app to view a preview of your wireframe, sans grid and the coloured column background.

With your included free membership to Creative Cloud, you’ll get 2GB of cloud storage and be able to sync files between tablet and desktop, as well as accessing them via the web. This means the tool is very easy to integrate into your workflow, especially if you’re already Adobe loyal.

Wireframing this article in Adobe Proto.

Final Thoughts

Adobe Proto is a functional, and in some cases fun, app to get some real work done. It’s going far into helping the iPad’s image as a productive, content-creating tool, and an app any web designer should have in their arsenal.

In the category of wireframing apps on iPad, Adobe Proto leads the bunch and is a fantastic choice, especially if you’re invested into Adobe suite of apps, both on iPad and other platforms.


Summary

One of Adobe's iPad apps focusing on planning and prototyping web designs.

8
  • http://www.heymonkeydesign.com Lenny Terenzi

    Unless I am mistaken it does not export to PDF which is the only thing holding me back from using this. Hopefully they add it in the future.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow