

Prototyping iPhone apps on paper with POP - scottmagdalein
http://popapp.in

======
justjimmy
Idea 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
We are working on this. This feature will probably come with a special made
notebook.

------
josefresco
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.

~~~
jakek
Check out: UI Stencils <http://www.uistencils.com>

Can't wait to try POP and UI Stencils together.

~~~
jjcm
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).

~~~
Terretta
With stencils use drafting pencils/pens that have a steel sleeve and are
designed to be held at right angles to the paper.

------
scrumper
Well 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.

------
modarts
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.

~~~
dreamerslab
That's a great idea but it's technically too hard for us :(

------
AmVess
Recursive skeuomorphism.

I love it.

------
jcoder
This is great!

Why is it free?

 _UPDATE_ Ah: <http://jiwo.in/pop-web/plans.html>

~~~
leesk
<http://popapp.in/plans>

~~~
jcoder
Ah, paid plans for the mobile version, too. I wonder why that isn't linked on
the home page.

~~~
Wraecca
Hi 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!

------
Void_
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?

~~~
frankacter
Found 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&#...</a>

------
ninetax
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.

------
earless1
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.

~~~
twelve45
It's the HTML5 <video> tag.

------
antonyme
I 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.

------
thom
Googling implies this is coming to the web:

<http://jiwo.in/pop-web/plans.html>

~~~
kungpoo
Yep, found this too
[http://popapp.in/w#!/projects/509f4907f24f5ec734000001/previ...](http://popapp.in/w#!/projects/509f4907f24f5ec734000001/preview/509f490d2d1d31b134000004)

------
matthuggins
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.

~~~
Wraecca
You're right, we're not native English speaker. Thank you for correcting :)

~~~
xauronx
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)

------
superbeefy
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.

~~~
Wraecca
Hi this is Wraecca from the POP team, I'm sorry about the bug, we'll fix it as
soon as possible. Thanks for reporting!

------
sheraz
This 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>

------
k4st
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.

~~~
creativename
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.

------
eps
Got

    
    
      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
Sorry for the bug! We're considering to release a offline version which don't
need to create an account. Thanks for feedback!

~~~
eps
Thanks 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.

------
scottmagdalein
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.

~~~
dreamerslab
Sorry about that, we will release a standalone version that does not need to
pay monthly fee nor singup before using.

------
anenthg
I have used Nokia's Flowella
[http://www.developer.nokia.com/Resources/Tools_and_downloads...](http://www.developer.nokia.com/Resources/Tools_and_downloads/Other/Flowella/)

But, this is much more cooler as it is further simplifies the process. Is an
Android version in the works?

~~~
dreamerslab
We plan to open apis for 3rd party Android client.

------
muescha
Just 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
Sorry, we found the problem and we're working on it now. Thanks for feedback
:)

------
iota
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!

------
tharris0101
Okay, 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.

------
ninetax
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?

~~~
Wraecca
Sorry for the bug, we'll fix it soon! Thank you :)

------
ryc
so simple--great idea.

This + photoshop mock-ups ftw?

~~~
jh3
\- 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
We are thinking if it worth to add a sync with dropbox feature.

------
IceyEC
Quick design note: on your web page you need to track active page in your
navigation: currently Overview is always active (different color link)

~~~
dreamerslab
Cool, thanks!

------
aviswanathan
Very elegant and powerful solution to a pretty common problem. Does anyone
know if something like this exists for web apps?

~~~
Wraecca
invision?

~~~
aviswanathan
Yea, but it can get pricey pretty quickly

~~~
Samuel_Michon
Proto.io works for me and it's priced right.

<http://proto.io/>

------
TheFuture
"* Due to App Store's restrictions, only Freelancer is available for in app
purchase"

Anyone know why that is?

~~~
dreamerslab
We 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?

~~~
TheFuture
You 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>

~~~
dreamerslab
Thanks 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.

------
hamey
This is awesome. Suits my design process and I've often wondered why no one
has done it before. Great work!

------
Kulbir
POP: This iPhone app is every designer's missing puzzle piece for prototyping
on paper.

------
jh3
Be sure to click the Plans button in the toolbar. You can get 5 to 20 free
projects.

~~~
Smirnoff
Just got 20 extra projects. How will the new pricing rollout affect this?

~~~
dreamerslab
Someone 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
Haha. You should have asked if they used a tweet option to increase their
chances :)

------
rick711003
OMG! This app is app dev company's good product ! I LOVE IT

------
levymetal
Genius. And it's not often I say that.

------
emilepetrone
I was expecting to pay $5 for this...

------
kairichard
i want this for OSX

~~~
chrishaum
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.

~~~
chrishaum
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)

------
sketchbound
This is great!

------
drcongo
Very nice.

------
jinhow
brilliant idea

------
flyworldhan
its amazing !

------
pirrer
great work !

------
indiecore
Is app prototyping the new loyalty coupons? Is this what everyone is working
on for winter?

