Easel is a visual design tool built for the web. Since the web is viewed in a browser, we believe it should be built in one too.

Prototyping a Signup Flow

When you’re designing a new feature, it’s important to define both how it will look and how it will work. However, it’s been difficult to accurately capture both the visual design and its interactions in a single tool.

Previously, you might have generated a series of screenshots to represent a set of user actions and then flipped through them in order. This approach is limiting for non-linear flows and is time consuming to create. If you wanted to create clickable prototypes, it was necessary to use an additional tool.

Visual and interaction design influence each other, but it’s difficult to iterate if the process requires constantly switching tools.

A Better Way

To make Easel interactive, we added the ability to link elements to any document in the same project. This feature allows anyone to create a clickable prototype quickly and easily from within Easel. To interact with the prototype, you simply view the document in preview mode, which can be found under the Document menu available in the editor.

Designing a Signup Flow

We’ve put together a video which shows how to make a simple signup flow for an online newsletter. This example is basic, but it illustrates all of the concepts necessary to create your own interactive prototypes. You can even try out the resulting clickable prototype, if you want.

When used in combination with our sharing features, you can create a design and get immediate feedback from your users by just sharing a link. Check out how to create that link in the following video.

Iterating

After testing the prototype with several users, you might find that the signup button wasn’t apparent enough. To make the design better, you could try moving the button to a different line so that it makes a bigger impact. Previously, this would have meant updating the design, re-exporting the image, importing again, and finally recreating the clickable area. With Easel, all you have to do is move the button and you’re done!

Comments