8 ms·
Prototyping iPhone apps on paper with POP
- justjimmy 14y agoIdea suggestion: 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 :)
- dreamerslab 14y agoWe are working on this. This feature will probably come with a special made notebook.
- kairichard 14y agoi want this for OSX
- flexterra 14y agoI 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. Anywho, I like this for mobile
- chrishaum 14y agoYou 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.
- chrishaum 14y agoHere'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 http://goo.gl/AemLD (best viewed in Preview in single-page mode)
- wolfhumble 14y agoTemplates via http://keynotopia.com/ http://keynotopia.com/ would do something like that.
- aviswanathan 14y agoVery elegant and powerful solution to a pretty common problem. Does anyone know if something like this exists for web apps?
- Wraecca 14y agoinvision?
- aviswanathan 14y agoYea, but it can get pricey pretty quickly
- Samuel_Michon 14y agoProto.io works for me and it's priced right. http://proto.io/ http://proto.io/
- netvarun 14y agoWe use Balsamiq and are pretty happy with it.
- dotmanish 14y agoNapkee ( http://www.napkee.com http://www.napkee.com ) does it for Balsamiq Mockups.
- ryc 14y agoso simple--great idea. This + photoshop mock-ups ftw?
- jh3 14y ago- Export screen mockups from Photoshop - Save images to Dropbox - Open images in Dropbox app on your iPhone/iPad - Save images to Photo Library - Open images in POP - Win!
- dreamerslab 14y agoWe are thinking if it worth to add a sync with dropbox feature.
- danielpal 14y agoThanks!!! This is beyond awesome.
- drcongo 14y agoVery nice.
- ninetax 14y agoWoah, 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.
- emilepetrone 14y agoI was expecting to pay $5 for this...
- deleted 14y ago[deleted]
- josefresco 14y agoThis 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.
- jakek 14y agoCheck out: UI Stencils http://www.uistencils.com http://www.uistencils.com Can't wait to try POP and UI Stencils together.
- aolczak 14y agoBeware if you like sketching with pens only and use these stencils. Will screw up your pen tip.
- jjcm 14y agoI'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).
- Terretta 14y agoWith stencils use drafting pencils/pens that have a steel sleeve and are designed to be held at right angles to the paper.
- AmVess 14y agoRecursive skeuomorphism. I love it.
- thom 14y agoGoogling implies this is coming to the web: http://jiwo.in/pop-web/plans.html http://jiwo.in/pop-web/plans.html
- kungpoo 14y agoYep, found this too http://popapp.in/w#!/projects/509f4907f24f5ec734000001/preview/509f490d2d1d31b134000004 http://popapp.in/w#!/projects/509f4907f24f5ec734000001/previ...
- jcoder 14y agoThis is great! Why is it free? UPDATE Ah: http://jiwo.in/pop-web/plans.html http://jiwo.in/pop-web/plans.html
- leesk 14y agohttp://popapp.in/plans http://popapp.in/plans
- jcoder 14y agoAh, paid plans for the mobile version, too. I wonder why that isn't linked on the home page.
- Wraecca 14y agoHi this is Wraecca from the POP team, we're sorry that we're not ready for the premium feature, but it will be released soon. Thank you!
- owenfi 14y agoThe plans on these pages are different, btw. The first one indicates a 'private' option, but that all looks cleaned up in the parent link.
- rytis 14y ago"Why is it free?" Would that be a bad thing? Why everything has to be paid for?
- vegashacker 14y agoPotentially, yes. You want products you like to have a business model so that they are kept alive.
- rytis 14y agowhat 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.
- scrumper 14y agoWell done, this is great. 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.
- sketchbound 14y agoThis is great!
- Void_ 14y agoMy 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?
- frankacter 14y agoFound this uncovers a few samples to play around with, not sure if intentional or not. https://www.google.com/#hl=en&q=site:popapp.in+preview&oq=site:popapp.in+preview https://www.google.com/#hl=en&q=site:popapp.in+preview&#...
- dreamerslab 14y agoWe plan to build a dribbble like site but with interactive prototypes (only those who want to be seen)
- sheraz 14y agoThis reminds me of codiqa [1], a web app for creating skeleton mobile web apps. I use it all the time to mockup basic workflows like this. disclaimer - I am a customer of codiqa. [1] - http://codiqa.com http://codiqa.com
- levymetal 14y agoGenius. And it's not often I say that.
- jh3 14y agoBe sure to click the Plans button in the toolbar. You can get 5 to 20 free projects.
- Smirnoff 14y agoJust got 20 extra projects. How will the new pricing rollout affect this?
- dreamerslab 14y agoIt's only for early birds. Once the service is worth you paying the give away page will be gone.
- dreamerslab 14y agoYou will still have 22 projects :)
- dreamerslab 14y agoSomeone emailed us and said she's only got 6 give away projects while her friend's got 17. She said it's so unfair and she will never pay for this...
- Smirnoff 14y agoHaha. You should have asked if they used a tweet option to increase their chances :)
- superbeefy 14y agoGreat 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.
- Wraecca 14y agoHi this is Wraecca from the POP team, I'm sorry about the bug, we'll fix it as soon as possible. Thanks for reporting!
- iota 14y agoCan'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!
- modarts 14y agoHere'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.
- dreamerslab 14y agoThat's a great idea but it's technically too hard for us :(
- k4st 14y agoIdea 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.
- creativename 14y agoA 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.
- dreamerslab 14y agoIt'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!
- scottmagdalein 14y agoUsability 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.
- dreamerslab 14y agoSorry about that, we will release a standalone version that does not need to pay monthly fee nor singup before using.
- ninetax 14y agoOne 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?
- Wraecca 14y agoSorry for the bug, we'll fix it soon! Thank you :)
- matthuggins 14y agoDidn'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.
- earless1 14y agoI 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.
- twelve45 14y agoIt's the HTML5 <video> tag.
- eps 14y agoGot name Unexcept error custom code 2 when creating an account. On a more general note - what a superb idea, completely ruined by a desire to wrangle it into a recurrent revenue model. This should be a standalone paid app with an optional paid service for team collaboration and online backups. But it must work out of the box with no b/s accounts and no Internet connection. Simply because it doesn't need either.
- Wraecca 14y agoSorry for the bug! We're considering to release a offline version which don't need to create an account. Thanks for feedback!
- eps 14y agoThanks for the reply. There is a lot of curious impulsive devs and designers who wouldn't think twice about spending a fiver on a cool new app, if only to test it. So please do consider an offline version.
- indiecore 14y agoIs app prototyping the new loyalty coupons? Is this what everyone is working on for winter?
- rick711003 14y agoOMG! This app is app dev company's good product ! I LOVE IT
- flyworldhan 14y agoits amazing !
- anenthg 14y agoI have used Nokia's Flowella http://www.developer.nokia.com/Resources/Tools_and_downloads/Other/Flowella/ http://www.developer.nokia.com/Resources/Tools_and_downloads... But, this is much more cooler as it is further simplifies the process. Is an Android version in the works?
- dreamerslab 14y agoWe plan to open apis for 3rd party Android client.
- pirrer 14y agogreat work !
- jinhow 14y agobrilliant idea
- allyreeves 14y agoUXPin also has a paper make then photo element: http://uxpin.com/mobile-kit-for-iphone.html http://uxpin.com/mobile-kit-for-iphone.html It's a model that helps your whole process form paper, to digital, making personas, and creating iterations.
- hamey 14y agoThis is awesome. Suits my design process and I've often wondered why no one has done it before. Great work!
- TheFuture 14y ago"* Due to App Store's restrictions, only Freelancer is available for in app purchase" Anyone know why that is?
- dreamerslab 14y agoWe haven't figured that out. Because we will be a subscription service, we are not sure if having muli plans are allowed in IAP. Anyone has experience before?
- kolinko 14y agoWhy wouldn't it be? I didn't find such a thing in the guidelines, and it's quite common in other areas (e.g. 5 gold coins cost you $.99, but 50 gold coins in a game $3.99).
- TheFuture 14y agoYou can have multiple prices of subscription IAP. You just can't do an auto-renew IAP subscription. They only seem to allow magazines to do that. There is a video from WWDC 2012 where they go through each kind of IAP. Worth watching for what you want to do. https://developer.apple.com/videos/wwdc/2012/?id=308 https://developer.apple.com/videos/wwdc/2012/?id=308
- dreamerslab 14y agoThanks for that, I'll have to have a look on this. But currently there are just too many bugs to fix before we can charge for it.
- tharris0101 14y agoOkay, I'll admit that I sort of rolled my eyes at the top of the overview but by the end I was totally searching the app store for this app. What a novel and great idea.
- IceyEC 14y agoQuick design note: on your web page you need to track active page in your navigation: currently Overview is always active (different color link)
- dreamerslab 14y agoCool, thanks!
- Kulbir 14y agoPOP: This iPhone app is every designer's missing puzzle piece for prototyping on paper.
- muescha 14y agoJust stopped and deleted after the sign-in splash screen! Why i need to create a account BEFORE i use it? I dont like to share my project! I dont need to push it to public! Its a phishing app for idea grabbing?
- Wraecca 14y agoSorry, we found the problem and we're working on it now. Thanks for feedback :)
- antonyme 14y agoI love this idea very much - mainly because I had virtually the same idea maybe 5 years ago. I was frustrated with existing prototyping/design systems and getting bogged down in details and pixels instead of thinking about the 'big picture' and the workflow (which IMHO is far more important, especially at the early stage). I had a manual process whereby I would draw all my prototype UIs in pencil on large sheets of paper, then use an A3 scanner to import them into a slideshow. The cumbersome part was creating hot-clickable areas to jump between screens. But it worked a treat, and enabled very fast turnaround of ideas. I think workflow (or UX if you like) does not get enough attention in the early design phases, where people seem to like producing pixel-perfect mockups in Photoshop. The problem with this is that it takes you a very long way down a particular path, when you don't even know for sure if that is the correct way to go. Photoshop mockups are time-consuming and expensive to make compared to rough sketching on paper. This app looks like a great solution in this space.