I do something similar on OSX with OmniGraffle. You can generate an HTML output that it's basically an image with links to other pages. It even works on PDFs.
You can also do it in Keynote. Just create hyperlinks between slides (which you can do with any shape, via the Inspector). Then export the presentation as a PDF, and the clickable image hyperlinks will be preserved in the PDF file. Then it's also very convenient for sharing with designers/developers/investors, etc.
Here's a really goofy and poorly-thought-out example as a proof of concept. It took about 10 minutes to make. http://goo.gl/AemLD (best viewed in Preview in single-page mode)
Woah, that is awesome! This is a pretty ingenious idea. Literally anyone who can sketch an idea, can prototype an app, and unlike other prototyping tools, there are no pre-built pieces to choose from, so the sky's the limit.
This concept is novel because it replaces the need to "design" the app in a separate piece of software (and learn yet another UI). Although I like Balsamiq sometimes sketching is quicker, and more convenient. I think ideally having both options would be good as sometimes the urge to sketch an idea arises, but normally I would use the software.
Also
Idea: They should sell app mockup paper/pads as a side business.
I've used these stencils before. I would not recommend them. The icon stencils are cut out at the exact size of the icons, but when you're using a stencil you often have to make the stencil larger than the icon you're trying to draw. The result of tracing them often looks like you did a -2px stroke on whatever icon you're illustrating. Also for finer detailed icons, you often can't fit a pencil into the groove of the stencil, even with the provided pencil that comes with it. The lead of the pencil is thicker than the groove in the stencil. The edges of the stencil are often quite sharp as well, and will cut the tips off of felt pens (and create grooves in pencil lead which will cause it to break). Honestly the only thing I now use my stencil for is as a dull knife to open packages (you can easily cut paper, foam, cardboard, or tape with the sides of these things, they aren't sanded down at all).
what business model does linux kernel have, and how much does it cost?
EDIT: OK, just to make it clear. I'm not against people asking money for they creations, I'm all 100% up for it. What really pisses me off is 'why is it free?!', and 'i would happily pay $XXX for it!'. Please, keep that to yourself - if someone decided not to take money for their work, it's entirely up to them, and that deserves some respect.
Making an app and releasing for free it can be fun. When the customer support and feature requests start pouring in it becomes a lot less fun. Chances are more likely that a project will be abandoned for one reason or another (developer gets bored, gets busy with their 'real' job, etc.)
When people see an idea that's good, especially for potential business use (and especially on HN which as a community of entrepreneurs) they are letting the developer know that they have created something that is worth having around and would pay to see it maintained.
Linux is probably a bad comparison, because it has so much corporate support and is an entire ecosystem of business models for probably hundreds if not thousands of companies.
So much more sense to use an existing layer on the tech stack (paper & pencil) rather than inventing yet another way of putting black lines on a white background.
Nothing to stop you sketching out your menus (and other repeating fragments) on smaller pieces of paper and collaging them together either.
My whole visit on this website I spent looking for the resulting prototype I could play with. If the product of your app is something interactive, why not show it off?
Great App! Just tried it with UI Stencils and it really helps with testing of usability with an actual device.
Sadly there seems to be a bug with image alignment. Even if I get it right in cropping tool it looks like its shifting all images up and to the right by that looks like 10 to 15px. Other than that fantastic.
Can't wait to try this out. I've done something similar for other UX designers by taking flat screenshots and overlaying an image map with clickable areas. Instant "high fidelity" prototype!
Freely distribute a PDF that has unique border patterns so when people use/print it out and use that paper, and proceed to take a photo, the program can detect the borders and auto zoom in/out so you end up with a nicely fitted screen shot on the phone. Then users never worry about getting the heigh/width ratio right or bother with the cropping step. And you get to plaster your branding all over the desk of those that uses it :)
Here's an off the wall idea that i'm not sure is even technically feasible, but:
How about a way to "OCR" the drawn interface in a way that the software is able to parse the elements out (buttons, toolbars, swatches, etc.) maybe using the iOS HIG and other contextual clues. The output would be a xib file, ready to iterate on.
Idea suggestion 1: Shape detection.
Presumably this is already present given that it looks for the borders of the viewscreen. It would be really great if it could detect potential buttons in the app, and auto-select them to improve the speed of the workflow.
Idea Suggestion 2: Color coding.
Use a highlighter to color in buttons in some color. Your app would automatically recognize things of that color as buttons, and potentially erase the color in the "finished" prototypes.
A comment about suggestion 1: The creators may have prior computer vision experience, but as someone who tried to learn this from scratch and perform handwritten shape detection I can say that it's a messy place to work. If it's not their core competency, it can get tricky with all the different shapes and problems that may arise with said shapes. Then again, I didn't have machine-learning experience which may be the way to go.
That would definitely be cool, though. You could basically edit what you literally just drew if you could properly detect the shapes and how they were nested within each other.
It's really hard to do detection with hand drawing. We might make special stickers for common UI elements (botton, tab bar ...). The color coding suggestion is great, thanks!
Usability suggestion:
Don't force me to create an account BEFORE I receive any value from your app. Creating an account is a pain. It's not clear why I need an account. It most definitely benefits you, even if you think it's better for me in the long run.
Hold the account-setup step until I've created my first project and want to do something with it. That's when I'll be able to easily understand why I need an account.
One thing that keeps happening: when I take a picture and finish cropping the app severely cuts off the right size of the picture. Any chance for a fix?
Didn't try it out (I'm an Android user), but nice idea. I forwarded it along to some old colleagues who are into Lean Startup, as this seems like a useful tool.
Unrelated to the app itself, but the website, the use of the word "feedbacks" seems pretty weird. (Are you a non-native English speaker?)
Sharing & Feedbacks
Share your prototype with colleagues and friends. They
can try out and comment on your prototype on their
iPhone, iPad or in web browsers. You’d be surprised
how valuable their feedbacks are.
I would recommend using the word "feedback" instead. e.g.:
Sharing & Feedback
Share your prototype with colleagues and friends. They
can try out and comment on your prototype on their
iPhone, iPad or in web browsers. You’d be surprised
how valuable their feedback is.
Honestly, it shows in a few places. I think you have a hell of a product. It might be worth it to pay someone $50 to proof read it. (or even a fellow HN'er who will do it for a pro account)
I know this is probably a stupid question, but what are you using for the videos on the site. I like they way they are just in their without controls or anything.
99 comments
[ 2.4 ms ] story [ 141 ms ] threadAnywho, I like this for mobile
http://proto.io/
This + photoshop mock-ups ftw?
- Save images to Dropbox
- Open images in Dropbox app on your iPhone/iPad
- Save images to Photo Library
- Open images in POP
- Win!
Also
Idea: They should sell app mockup paper/pads as a side business.
Can't wait to try POP and UI Stencils together.
I love it.
http://jiwo.in/pop-web/plans.html
Why is it free?
UPDATE Ah: http://jiwo.in/pop-web/plans.html
Would that be a bad thing? Why everything has to be paid for?
EDIT: OK, just to make it clear. I'm not against people asking money for they creations, I'm all 100% up for it. What really pisses me off is 'why is it free?!', and 'i would happily pay $XXX for it!'. Please, keep that to yourself - if someone decided not to take money for their work, it's entirely up to them, and that deserves some respect.
When people see an idea that's good, especially for potential business use (and especially on HN which as a community of entrepreneurs) they are letting the developer know that they have created something that is worth having around and would pay to see it maintained.
Linux is probably a bad comparison, because it has so much corporate support and is an entire ecosystem of business models for probably hundreds if not thousands of companies.
(Millions of dollars have been invested in Linux development by commercial interests, even if most distros are free-as-in-beer.)
Also, "Why is it free?" is another way of asking "What's the catch?". It's important to understand this before you put in a bunch of work...
So much more sense to use an existing layer on the tech stack (paper & pencil) rather than inventing yet another way of putting black lines on a white background.
Nothing to stop you sketching out your menus (and other repeating fragments) on smaller pieces of paper and collaging them together either.
https://www.google.com/#hl=en&q=site:popapp.in+preview&#...
disclaimer - I am a customer of codiqa.
[1] - http://codiqa.com
Sadly there seems to be a bug with image alignment. Even if I get it right in cropping tool it looks like its shifting all images up and to the right by that looks like 10 to 15px. Other than that fantastic.
Freely distribute a PDF that has unique border patterns so when people use/print it out and use that paper, and proceed to take a photo, the program can detect the borders and auto zoom in/out so you end up with a nicely fitted screen shot on the phone. Then users never worry about getting the heigh/width ratio right or bother with the cropping step. And you get to plaster your branding all over the desk of those that uses it :)
How about a way to "OCR" the drawn interface in a way that the software is able to parse the elements out (buttons, toolbars, swatches, etc.) maybe using the iOS HIG and other contextual clues. The output would be a xib file, ready to iterate on.
Idea Suggestion 2: Color coding. Use a highlighter to color in buttons in some color. Your app would automatically recognize things of that color as buttons, and potentially erase the color in the "finished" prototypes.
That would definitely be cool, though. You could basically edit what you literally just drew if you could properly detect the shapes and how they were nested within each other.
Hold the account-setup step until I've created my first project and want to do something with it. That's when I'll be able to easily understand why I need an account.
Unrelated to the app itself, but the website, the use of the word "feedbacks" seems pretty weird. (Are you a non-native English speaker?)
I would recommend using the word "feedback" instead. e.g.: