About this project
AppSeed lets you take your sketches and make them into functioning prototypes, bridging the gap between pen/paper and digital, through computer vision. It allows you to sketch your designs as you normally would and then manipulate your sketches directly on your phone. Unlike similar products, the use of computer vision speeds up the process and understands your sketches. AppSeed can identify an enclosed space in your sketch, allowing you to make it into a button, input text, map, or another UI element. Making your sketch into a functioning prototype running on your phone.
AppSeed exists to speed up how you create, test and share your ideas. We love the process and seeing how ideas start and grow with a team. We wanted to build a tool that builds on what designers currently do, and uses the processing power of your phone to take some of the manual labour out of going from a sketch to a prototype. We wanted to let you have an idea in a meeting and show it on device right away, letting you focus on your idea, not how to get it on device.
WHAT IT DOES
AppSeed uses computer vision to make the process of going from a sketch to a prototype faster and smarter. Using OpenCV, AppSeed:
- Captures your sketched design
- Identifies contained areas of your sketch and allows you to make them into a number of UI elements, including: Buttons | Maps | Streetview | Form text inputs with more to be added based on your feedback
- Allows you to run the prototype on your mobile device
- Allows you to share the prototype as an HTML5 prototype with others
- Send the designs to a layered Photoshop file for editing
Sketch -> Capture -> Modify -> Test
AppSeed is designed to fit into your existing process. Sketch your designs on paper as you normally would. Capture your designs through your phone camera. This is where AppSeed starts to do some of the heavy lifting. It uses computer vision to automatically crop your design to the designated area, and isolate each drawn element. With your elements now isolated, you can interact with them. You can move them or make them function as the UI element you want them to be. Test your design on the phone and edit it in Photoshop through PS Connection. This creates a Photoshop document that has all your drawn elements on their own layers, giving you the pixel perfect control to move your design into the next stages of production.
SUPPORT AND NEXT STEPS
We need your support to make this app a powerful part of your creative process. We currently have a demo that shows the technology works, but need your support and feedback to make it work in the real world. Your support will help us build a robust version and your feedback will guide the future features. In return you will get privileged status as a founding backer of AppSeed, getting the app before the general public and getting access to the latest features first.
The video does not contain any special effects. What you see is how the current demo of the app works. We need your help to go from demo to commercially ready app.
UNDER THE HOOD
The secret sauce behind AppSeed is the use of computer vision to search your sketch and isolate individual elements. Specifically, we use the wonderful OpenCV (an open source computer vision code library: opencv.org) to isolate lines and drawn shapes within your sketches. We then use our own algorithms to identify the UI elements. These are generally identified because they follow a visual pattern (for example, an enclosed rectangle can be taken as a button). That drawn element is then copied from the original image and made into a button with the drawn shape as its up state. Once it is a button, we can manipulate it in a variety of ways, allowing you to change it into a number of different UI elements. We will be refining which UI elements are available and how the algorithm works to identify elements based on your feedback.
Once you have your prototype ready, you can see it on device, share it with your team as an HTML5 app (we convert all the UI elements you made into an HTML5 page) or open your images in Photoshop (this is done through the PS connection). PS connection is a built in feature of Photoshop and is available in Photoshop CS5 or later.
Free Shipping in Toronto area and US, $5 rest of Canada and $10 rest of the world.
Some Initial Responses
"Very cool" - Bill Buxton, Author of Sketching User Experience @wasBuxton
"Holy Cow!" - Seth Porges - Forbes @SethPorges - http://www.forbes.com/sites/sethporges/2013/09/27/holy-cow-this-app-claims-to-transform-hand-drawn-sketches-into-working-apps/
"Greg demo'd this to me earlier this summer and I must say it was kind of an 'oh wow' kind of experience." - Tom George, entrepreneur @speedbird
"Love it...I'm a total whiteboard addict." - Caspian Rabone, Global Creative Director at Wunderman @Caspiano
"woah thats awesome" - Paul De La Merced, Art Director at Grip Limited
"Looks like a great tool! I love the low-tech high-tech approach! Can't wait to use it!" - ILONA POSNER, User Experience Consultant & Educator
Risks and challenges
We have the project to the point where we have a demo that we can use to show off how it works. Within the demo we have shown how drawn elements are isolated and made into UI elements, so we are very confident about the underlying technology. We are still a ways from having a commercially ready product. We still need to build it so that it can handle different light conditions, identify more kinds of UI, and be robust enough not to crash on you in a meeting.
We are confident that we have found all the major challenges and have them working in the prototype. Nothing within the video is faked, the app is functioning completely as shown.Learn about accountability on Kickstarter
We are building for iOS first but if our funding goal is exceeded we are hoping to go for a stretch goal and get an Android version.
The current version is the demo, it works but is not ready for the real world. It needs to be made more robust and flexible to handle a real working environment.
No it already exists in Photoshop CS5 or later and allows us to send files and commands between an app & Photoshop when they are on the same wifi.
We want to show our appreciation the our backers by creating a better version of the app. When we launch it to the general public, we will be launching it with inapp purchases to get some of the features, the Kickstarter edition will get all the features shown first and get any that we add later automatically and first.
In a nutshell, Computer Vision.
AppSeed uses Computer Vision to identify what you draw and let you make it into the active UI element. By isolating what you draw, we have much more control over how the prototype works and speeds up the process of making the prototype. It is this key difference that lets you draw a rectangle, and make it into an input text box that allows beta testers to use it (including the animation and behaviours involved, such as bringing up the keyboard. This also allows for you to move elements, edit each piece individually in Photoshop and make a drawn box looks and act as a map. (Note: Protosketch does use openCV for cropping).
Support this project
- (30 days)