Adobe Proto: Sketch Your Website

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.