I’m excited to show you new features and enhanced features in version 1.5 of Adobe Proto. V1.0 was just porting Android version to iOS native version and this time we could implement new feature sets based on user’s feedback.

Mainly, we focused on easy to share files, copy & paste workflow. Here is the new feature sets.

 Sharing zipped file easily

“Email” interactive wireframe (html.zip) as attachment

You can now email your interactive wireframe directly from Proto. Just attach html.zip file onto email and send it to your co-worker or client. The attachment is a zipped file and easily uncompressed and ready to use in Dreamweaver or any other HTML/CSS editor.

“Share” interactive wireframe via Dropbox and other Apps

If you have Dropbox application installed on your iPad, you can share your interactive wireframe zipped file right away.

Copy & Paste improvements

Copy & Paste objects to different pages

We added a clipboard icon in editor. Now you can copy & paste your object form one page to another from the clipboard menu, top navigation or context menu.

Paste and Pin objects across selected pages (i.e. share objects across pages)

Not only can you paste objects to a different page, we added a new function “Paste and Pin.”

Pin across pages

Select object and from context menu, you can set to paste the current object across all the pages.  Once you did this, the object will show up to all the pages and whatever you modify this object will reflect change across all pages.

Global Menu (By default, Menu bar objects are pinned across all pages)

When you create menu and create multiple pages, the menu will automatically carry over all the pages.  When you edit text inside menu, edit links to pages, the change will reflect across all the pages. There is another improvement for code generation for the global menu. Proto generate common.css that is used for all the pages.

“Bring Forward” “Move Backward” Z-order change via Context Menu

You can manage z-index order for overlapped objects from context menu.

Lock and Unlock object for editing

You can lock & unlock object. This helps you to avoid mistakenly moving object while editing another object closed by.

Show current page name while previewing a project in the App

At preview mode, you can see current page name in title bar right next to project name.

Rename project name in the action bar (title) of the editor

You can rename project name in organizer mode. You can now edit project name while in editor mode. Simply tap project name on top left corner to edit current working project.

Show undo/redo count

As same as Adobe Ideas, you can see the number of undo/redo count when you perform undo/redo

Other Enhancements

Objects should snap to both CSS Column and Design Grid

Now, it’s much easily and precisely snap object onto grid.

Better Code Generation

Code generated is now ordered according to the appearance in the page and so is now more structured hierarchically V1.0 generated divs based on the order of the object modification. V1.5 generates divs based on top to bottom order in the screen.

All pinned objects generate a separate common CSS file (common.css)

Since pinned objects are used in multiple pages, having separate common CSS make you easy to manage code.

We hope those new feature sets and enhancement feature sets will help you boost up your creative workflow.

Web designers use paper or napkin sketches to come up with a wireframe design for a web page by drawing a freehand sketch of it in a piece of paper or other media like whiteboards. Even though they don’t follow any rule while sketching on a napkin or a whiteboard, invariably, they use similar drawing pattern to represent a HTML object, say a DIV box, image, video, table, button or edit box.

Once the design comes through well in these napkin sketches, they then use a software tool to recreate the sketch as wireframe objects. Looking at the free hand sketching, they will insert wireframe objects for images, tables, videos, menus, buttons etc into the tool’s canvas and recreate the web page design as wire frame.

Use Gestures for Creation

Most desktop wireframe tools are mouse and toolset centric wherein wireframe objects are dragged and dropped into the design canvas and then resized and repositioned as required using mouse as the input. For a designer, doing this in front of a customer is not natural, quick or intuitive.

With the proliferation of tablets, web designers can do free hand sketching of web pages using sketching and drawing apps instead of using a piece of paper. But these sketches will be just images and will not be directly usable to generate wireframes.

Adobe Proto allows the designer to do free hand sketching on a tablet similar to the way they would do in a piece of paper. As they draw, these sketches are automatically converted into wire frame objects based on the gesture and the sketch pattern used.

So a wireframe idea can be sketched as shown in the left side figure below and it gets automatically converted as it is being sketched to usable wireframe objects as shown in the right side figure below.

Stroke Gestures

Adobe Proto’s stroke gestures are combination of one or more stroke patterns. Stroke patterns are a basic set of shapes like rectangle, line, triangle, sinusoidal wave, angle bracket etc. The following shows example of different stroke gestures that differ in number of strokes.

Each stroke gesture is mapped to a wireframe object and these mapped wireframe objects get inserted into the page when the user draws the patterns of the stroke gesture. For e.g., a stroke gesture can be a single rectangle shape which gets mapped to a DIV element, or a rectangle followed by a line inside which gets mapped to an Accordion object, or a series of lines in parallel which gets mapped to a Menu object.

[Note: The stroke gesture examples here are for explanation purpose and may not be supported in the current version of Adobe Proto.]

Adobe Proto provides a Sketch mode in which touch inputs are primarily treated as stroke gestures. As the stroke gestures are performed, Adobe Proto converts it to a wireframe object when it recognizes that the stroke gesture is completed and a wireframe object is mapped to this stroke gesture. It then replaces the stroke gesture drawing with the wireframe object on the page canvas.

Multi-touch Input

Touch inputs are nowadays multi-touch. Adobe Proto takes advantages of this and allows the stroke gestures to be multi-touch. For example, you can create a 4 item Menu bar using 4 parallel lines drawn one after another or drawn simultaneously using 4 fingers at a time. In fact, Adobe Proto allows a combination of this and so a user can create a 4 item menu bar by drawing 2 parallel lines simultaneously by using 2 fingers twice.

Using this, people can create even a 12 item menu bar using whatever combination of multi-touch strokes as shown below.

[Note: Some OS treats certain multi-touch input as OS gestures for certain predefined OS actions like closing an App or switching between Apps. In such scenario, these should be disabled in the OS settings so that it can work in Adobe Proto.]

Sample Gestures

Adobe Proto supports many stroke gestures and these are shown in the Gesture Guide at the bottom of the Editor view. Stroke gestures are chosen based on some common interaction pattern used by designers to express ideas. Moreover, these stroke gestures can be drawn naturally, whether you are right handed or left handed. This allows the user to freely draw a rectangle from left to right or right to left or by starting from any point in the rectangle and in any direction.

Some commonly used stroke gestures are given below.

The following screenshots shows the Gesture Guide and lists all the stroke gestures supported by Adobe Proto v1.0. As you can see, the stroke gesture for Vertical Nav Bar, Text Field and Text Area look similar with a pattern of horizontal lines. But they differ in number of lines and the size. If it is more than 2 parallel lines, then it is a Vertical Nav Bar and if the between the 2 parallel strokes is more than a certain value, then it is Text Aea.

Gestures for object editing

Apart from providing stroke gestures for object creation, Adobe Proto provides gestures for editing operations like Object Alignment and Duplication. These are multi-touch gestures (touch and tap) requiring a touch operation in both the source object and the target.

Object duplication can be done by touching and holding a source object with one finger, so that the object’s position grid is shown, and then tapping on the canvas where the duplicate should be created.

Object alignment can be done by touching and holding a source object by its middle handle on one of the side and then tapping on the target object with another finger. This will move and align the target object with the source object.

Impress your clients

The way we interact with machines is improving day by day with new innovation. The way we express our ideas and share them are becoming more impressive. Adobe Proto takes a step ahead in increasing the usability of touch based devices for not only expressing an idea, but also creating it as a re-usable functional wireframe for further use in the web development workflow.

Being a tablet App, Adobe Proto allows designers to share their ideas with the client anywhere and also impress them by creating new ideas in front of them in a very natural way of sketching with freehand strokes.