Show HN: Turn sketches on paper into app prototypes | Hacker News Reader

Show HN: Turn sketches on paper into app prototypes

marvelapp.com

222 pointsmuratmutlu74 comments

Fantastic! We need more of this kind of thinking. "No computer required" should be the default, not the exception.

I've been playing with some ideas in my head for a while now that we should be able to build most apps this way, and not just prototypes. If we can extract the default widgets and behaviour from applications and make them reusable and connectable without code, then we'd be taking steps towards a real revolution.

I am really excited about the direction we're going in with products and tech like this.

I agree this is a great idea for prototypes but I disagree that this is a way to build anything but the most basic of apps. There are way to many subtle choices that we make as developers, that require knowledge and reasoning, and an understanding of what we are trying to build. Visual programming has been tried multiple times, but it has never had any mainstream success.

Blueprints in UnrealEngine4 I think are a great example of successful visual programming.

Thanks for the pointer. Never used Unreal Engine but just watched some of their Blueprint demos. Pretty cool stuff!

It's one of those problems where execution is extremely important.

Look at the game development world. There have been countless "game makers" that saw limited, niche success if that, usually because they were not powerful or expressive enough.

Then along came Unity.

Of course, you still have to write game scripts in Unity... but you do a whole lot of your work in the Unity IDE, dragging and dropping, clicking to attach things or to change properties, tweaking animations, colours and materials.

It is a revolutionary way of making games, and is rightfully enjoying huge success.

We need (at least!) a Unity for application development, and we need it yesterday.

But instead we have... Sublime Text, LightTable and Visual Studio. All ways of writing enhanced text.

The vast majority of programming languages never get mainstream success.

Thanks! I think you're right, it's about empowering anyone to bring their ideas to life, regardless of tech or design skill.

We're seeing Marvel being used to teach kids how to make apps https://twitter.com/futurice/status/449186891837890560 massively exciting!

How does this differ to popapp ( https://popapp.in ) which I've been using for over a year now ?

Here are a few key differences:

* Our iPhone app ties in with our web app, which allows you to prototype both web and mobile. http://www.marvelapp.com. Our iPhone app is just one part of the eco-system

* We support PSD importing directly into the iPhone app

* All your images are synced with Dropbox so you can easily access them

* Our web app allows you to download prototypes as ZIPs to run offline or on your own server

* You can select dozens of different device frames (HTC One, Lumia, iPhone 5S etc)

* You can export iPad prototypes using our iPhone app

For starters it's not available on Android.

I've been using Pop App for a couple of months, but I downloaded Marvel's app today and love it. Just so much smoother and a lot more features.

No offense, but did you bother to research Marvel _at all_ before asking this question? popapp app's landing page makes it very clear the workflow is physical paper -> photo -> storyboard, whereas Marvel's landing page is very clear their workflow is PSD/etc. -> storyboard.

Sometimes I feel like HN asks "how is this different from X app" without doing any research, just to be lazy.

No offense, I don't know where you did your research but I don't see anywhere on Marvel's landing page where it makes clear its main flow is PSD -> storyboard. In my opinion, Marvel's landing page makes it very clear that workflow is paper -> photo -> storyboard just like Popapp, but also supports importing a PSD image (which doesn't seem like a groundbreaking differentiation). Granted, the founder explained the difference somewhere above but they're still "improvements", they fundamentally do the same thing.

Hey all, happy to answer any questions about our new app! It's been a long road to get a stable version of this out so keen to get any feedback

Any plans to increase the depth of the prototype beyond simple wireframe linking? (e.g., a drawn camera icon pops open the devices camera, editable fields, etc.)

We have some plans to try and add more and more realism without needing much user input. For example on the web app you can access your iPhone prototype and add things like fixed header and footers, app icons, iOS7 transitions etc

The hardest part i've found is trying to include this all in the iPhone app design. This version is definitely our base, from here we can start adding a few more things to make your prototypes more app-like

What a great idea! I've been using Balsamiq for a few years now, but I usually sketch my idea out on paper before translating that to the editor manually. I would kill for this kind of hot-linking functionality for general web apps with the off-the-cuff feel of hand-drawn sketches.

Just browsing your site, it looks like your main app is used like that, albeit apparently for more refined mockups (I'm sure I'm mixing up terminology here, but I'm not a designer so bear with me). Next time I have to design a site I'll try integrating Marvel with my Balsamiq workflow and see what happens.

That's a great combo. We wanted to make something that fits into the full workflow, from sketches on paper to wireframes and high-fidelity visuals.

So you can easily use the iPhone app to start with sketches and then use the web app to get into more detail

Ah, there you go, that makes sense. Now I just need to get an iPhone ;)

App looks nice (can't check it out, no iDevice). I like the simplicity of it. Do you plan on adding any vision capabilities, like auto-detecting rectangles as candidates for buttons, circles as candidates for radio buttons, etc? I can also see you app used to make quick&funny games, which you can send your friends. Think taking a picture of a street, with a bar door as a button, and then taking a picture inside, making the bartender a button, then a picture of the drink, etc...

Hey! You could give our web app a spin http://www.marvelapp.com, no iPhone needed :)

We don't have any image recognition stuff coming or pre-made elements but we are adding transitions/animations so that you can get a sense of what your apps might feel like.

Very nice! It took me roughly 2 minutes to upload the sample photos I had on my dropbox account, and link between them like a little game. Very intuitive interface.

Thanks!

A few friends and I experimented with this at a hackathon a few months ago. Check out a video demo at http://youtu.be/9ZAbQi_8y_A. Note: the OCR is mocked.

This is great - reminds me of a hackathon project, Scribe, from a while back. We never finished, but the idea was a three-step process.

1. Sketch a web app on paper.

2. Snap a picture of your drawing.

3. Our app generates a live site, displaying a link to share.

https://www.youtube.com/watch?v=9ZAbQi_8y_A [video]

It's a beautiful site. Are you at all worried about the name Marvel? Especially now that Marvel Comics is trying to work with designers and developers too? [1]

[1]http://developer.marvel.com/

Also this from ElasticSearch: http://www.elasticsearch.org/overview/marvel/

That confused me too..

Nice work on the website. Went in, saw the video, got exactly what it's about, all in 30 seconds.

Especially compared to all those scrolling websites that move things around while you scroll and leave you with no idea about the product.

Awesome idea. Will definitely check it out. Any plans for an android version?

Yes 100%, one of my co-founders is a iOS dev so made sense to get the iPhone out first but Android is definitely coming

If you use the official Dropbox app, you could upload your sketches into the web app in the mean time however :)

Sweet. I'm sold :-)

Stumbled upon this last week and used it in conjunction with FiftyThree's Paper app to create a pretty impressive prototype that I was able to view right on my device.

Bit more of a process when using Paper, as it only seems to be able to export an entire notebook in PDF, requiring me save pages individually in order to use them in the app. I seem to recall reading somewhere that MarvelApp was capable of dealing with PDFs, but I'm obviously mistaken. Would have been a nice feature, though I'm not sure if many others would benefit from such functionality.

Hey! We're close to PDF support, i think next month we'll have it in.

It's actually a pretty common request as many people have their wireframes and visuals in PDF format and want to prototype it up so you're not alone :)

"Marvel App Prototyping would like access to .ai files, .eps files, .pdf files, .psd files, .sketch files, and images in your Dropbox."

It needs access to a hell of a lot of files in my dropbox account. Definitely not something I want scouring my files, just so it can show a few mockups - is there any way to restrict it to being able to access just a single folder, or is it really an all-or-nothing problem with Dropbox auth?

edit quoted auth-request page & formatting

We actually started with a single folder but the UX wasn't great. It meant that everyone had to drag their existing projects and files into a specific Marvel folder in Dropbox/apps.

After we saw that no one was doing it, we figured it would be better to go to the files, rather than force people to bring the files to us.

We only access the files you choose, also Marvel was approved by the DB API team to use the service (a bit like the App Store)

Well, it's pretty frightening that you're asking for such massive, wide-scale permissions.

I understand that people are permission-clicky-happy nowadays, so it's probably something that won't even remotely affect your growth - it's just a shock to see new, tech-friendly services going with permission-grabs (even if it is, as you say, to allow for better UX)

I can't imagine why anyone would want to give up such massive access, and potentially commercially sensitive info (that they possibly don't own), but I definitely wish you all the best with this

edit typo

Sadly we had to request access to your image files otherwise we wouldn't be able to allow you to use them in your prototype and keep them in sync.

It's a delicate subject I totally understand, thanks for the best wishes!

How hard would it be to offer both options? I.e. access restricted to one or several folders, vs. access to the whole Dropbox. Also at least between users you can grant permissions for folders to other Users from within Dropbox. Is there a way to do the same for Apps?

I think this might be possible, i'll look into it!

Love it.

Old old sketches of something similar looks ugly as sheit I know :)

http://000fff.org/uploads/NewFlow_02.png

http://000fff.org/uploads/NewFlow1.png

We had an idea for how to do a dynamic matrix generator which made a lot of swipe navigation possible very easily, Will see if I can find the HTML prototype somewhere.

wow this looks great, would love to see the prototype

Awesome. I've been using POP which uses the same concept. Will give this a try!

https://popapp.in/

I've put together a blog post evaluating your iPhone app landing page. Feel free to reach out for clarification or further evaluation. Just started this service and ready to evaluate anyone else's product as well.

http://www.criticalgaze.com/study-on-marvels-iphone-app-land...

How about mine? http://spinmealarm.com

Great work on the app and page. Everything is laid out very clearly and I'll definitely use this on our next iOS app project.

Thanks! Hope you find it useful :)

Quick question about marvelapp which I'm going to try out as well. Why make dropbox or google drive a requirement to use it? Doesn't that create a higher barrier to entry for your visitors? Why not just allow anyone to sign up and upload files? (Like invisionapp)

Good question!

After freelancing in agencies, startups and design teams for so long I saw that everyone was using Dropbox for projects and design file storage.

With designers making hundreds of changes to their designs each day, the time it would take to keep your prototype updated is prohibative. So we figured instead of forcing the user to bring the files to our cloud solution, why don't we just go to theirs?

If we let users leave their files where they are it's one less click and thing to manage. We just keep the files in sync so the prototypes update automatically with the user lifting a finger.

On the flip-side, no everyone uses Dropbox of course and it's a barrier. But it allows us to save money on storage which we pass back onto the user and provide a great free plan (no upload or project limits)

Makes sense! Keep up the good work.

Too funny, I spent an hour the other day figuring out what font was being used in Murat's Break App rendering on dribbble. Great work on marvel.

https://dribbble.com/shots/1468163-Break-app?list=searches&o...

haha it's Din Pro!

Ah, I was close! I knew it was Din after some comparing and settled on DINAlternate-Bold as it was a native ios font.

I love this idea. I'm thrown by 'discriminate' being misspelled [1] on the most public, visible page they have.

[1] https://marvelapp.com/iphone/ 'Take your pick, we don’t descriminate.'

The shame. I'll get that changed, thanks!

Downloaded. Really well-designed app. Love how it's for web and mobile. Any chance you'll support Sketch files?

Edit: Another comment here implies you already do. Went to go confirm but your menu button doesn't seem to be working (iPhone 5)

Thanks! We actually finished .sketch support weeks ago, however the Dropbox API doesn't recognise the format yet (it sees it as a folder) so we've got to wait until it becomes available. Soon as it does we'll push it live :)

App looks great and really useful, but those Dropbox permissions are excessive.

I love this! I could see this being a HUGE timesaver with my workflow.

Question for you: Is working with prototypes offline in your roadmap? I have limited connectivity where I work, and playing with your app has been troublesome.

Thanks!

Yes that's 100% coming, we just need a bit more time to get it right.

We launched a feature in the web app where you can download your prototype as a ZIP containing html/css/js to run offline but we really want to have offline in-browser working for everyone

Nice! Really cool feature.

In my comment I was more referring to the iPhone app side of things as that's my typical use case. I noticed that I need an active connection to do pretty much anything.

This is definitely something we have planned, our main aim was just to get this version released (it was a long painful road) but the next step is sorting out its offline capabilities

Great work. What I really like about this is how it lowers the barrier of entry for non-tech people. It is the sort of application I can show my wife or kids and let them play.

Where did they get those printouts of the iPhone? Is there one with 3.5 inch and 4 inch screen?

Here you go! I made some for the site but it hasn't gone live yet https://www.dropbox.com/s/zacd5pe198irch0/iphone5x3.pdf

Thanks!

This is a handy site for free sketch templates (includes both iPhone 4 and 5)

http://www.interfacesketch.com/

I like the idea, but taking a picture of text with my phone feels clunky.

I can already do the same with Sketch and their Mirror app but I like the Dropbox feature.

Are you sure? You can flick through the artboards in Sketch but you absolutely can not let a user independently operate a prototype.

nice app! dropbox integration is a plus.

seems like a mock up app

Everytime I see “No coding required.” I laugh hard and then proceed to prototype with code on a real device, using the native framework.

Video is narrated by Wilfred

Reply on news.ycombinator.com