AppSeed Transforms Your Sketches Into App Prototypes

The creators believe that better products will result from making the prototyping process easier.
Image may contain Electronics Phone Mobile Phone Cell Phone Human Person and Iphone

Say you want to create an app. The first thing you’d probably do, after coming up with that million-dollar idea, is take out a notebook and start getting some ideas on paper. You could sketch concepts and wireframes, even going as far as noting those elements’ functionalities. But these static images are still just that: lifeless doodles that do little to inform how they’ll actually behave on a phone or tablet.

The process of going from sketch to working prototype takes time and can often weigh down the creative process early on in an app’s life—a problem Greg Goralski and Adam Leon know too well. “It’s a challenge to get a sense of the experience,” says Goralski about the sketching process. “We could get a vague sense of how the app would work, but it was difficult to catch problems within the design or interaction.”

>'More ideas in the beginning leads to a better product at the end.'

So Goralski, a professor of Interactive Media at Humber College, and Leon, a designer at Toronto-based Transmitter Studios, decided to make an app to solve their app-making woes. AppSeed, which is now raising funding on Kickstarter, is a tool that transforms sketches into an app prototypes.

Using computer vision, the app eliminates the lengthy process of cleaning up and digitizing sketches. “We are trying to speed up that very beginning stage of the creative process, the point where ideas are not yet set,” says Goralski. “By making it faster, we hope to encourage designers to iterate more because we believe that more ideas in the beginning leads to a better product at the end.”

So how does it work? Goralski says the magic of the app is its use of computer vision. The OpenCV library allows AppSeed to identify crop markers, so users don’t have to be exacting with their photos. The computer vision identifies enclosed spaces like a box and decides what to do with it.

Goralski explains that if the box is large enough, the software knows to turn it into a button. “It makes a copy of that drawn shape and sets that as a button, and paints over where that element was in the background with white,” he says. Once the element is isolated, users can move its position, move it to another page, make it into input text, or apply a number of other functionalities.

>If the box is large enough, the software knows to turn it into a button.

AppSeed currently supports a number UI options like buttons, input text, streetview and maps, but they’re going to add more depending on what their Kickstarter supporters want. The app recognizes UI by looking patterns that the AppSeed team has programmed in. So for example, Goralski explains, an arrow in the top left corner of the sketch is usually assumed to be a back button, while three short horizontal lines indicate a menu.

“These design patterns follow a fairly consistent language, allowing users to quickly navigate new apps and us to understand what the designer intended,” he says. “The app designer can, of course, manually set how the UI works.” Also of note: All of the sketched elements can be imported into Photoshop as individual layers instead of a single image though Photoshop Connection.

Goralski says where AppSeed differs from similar tools is that it automates the interaction process by not just linking wireframes as pages but also creative interactive elements on each page. He hope that the Kickstarter funding will allow them to bolster their shape-recognizing options and provide more immediate interactivity, which will give users a prototype that’s much closer to the finished product.

“The ultimate vision is to create a tool that empowers creators,” Goralski says. “We want to solve the limitations of sketches, making the phone do the grunt work of digitizing the sketch and let the designer focus on their design process. With Adam, we are both fascinated by the creative process and got excited about using a cool piece of tech to make the process smoother.”

You can support Appseed on Kickstarter here.